Kadenceテーマでのヘッダーの設定

Page BuilderとしてのElementorに興味を持ったのがきっかけで, TCDテーマから, Elementorに親和性のあるテーマに乗り換えることに決めた。その際, 当初はAstraテーマを使うつもりだったが, 迷った末に, Kadence テーマを使うことにした。
Kadenceテーマに決めた理由は, ヘッダーが優れていると考えたからである。
このサイトのヘッダーを設定した際の画像を, これからの備忘録として残しておくことにした。

グローバルメニューを設定しておく

ヘッダーを設定する前に, Word Pressの中で, グローバルメニューを設定しておく。

ヘッダーのメニューの数は, 3個に決めている。
スマホで閲覧する際に, ヘッダーメニューが4個以上になると, ハンバーガーメニューになってしまう。

他のメニューを, 子メニュー, 孫メニューの形で割り当てることは, 後からでも出来るので, 大きなメニューを3個作成した後に
テーマ>カスタマイズ>

初期状態のヘッダー

実際にどのように表示されるかを観ながら編集出来る。DESKTOP, TABLET, MOBILEのどの画面を表示するかを左下のボタンを押すことで切り替えが出来る。

サイト名とメニューの位置を設定する。

Kadenceのヘッダーは, 3列から構成されるように設計されている。上から, Top Row, Main Row, Bottom Row, 3列を合わせてWhole Headerと呼ばれている。
それぞれの列は, 3つの分画に分かれている。合計, 9個の分画があり, サイト名, メニューなどを配置させる。

Top Row サイト名    
Main Row   メニュー  
Bottom Row      

最低限必要なものだけを設置し, それ以外は,後日, 必要と感じた時に, 設定することにした。

 

サイト名とメニューを配置させる場所を設定する。

DESK TOP

 

 

 

サイト名(+ロゴ)とメニューを表示させる場所を設定する。