Elementorで共通ヘッダーを作成する
大きく左側のメニュー的な部分とそれ以外という感じの構成です。左側のメニュー的な部分は翻訳ができていません。
| Header | ヘッダー |
| Footer | フッター |
| Single Post | 投稿記事 |
| Single Page | 固定ページ |
| Archive | アーカイブ |
| Search Result | 検索結果 |
| Error 404 | 404エラー画面 |
テーマビルダーではこのように要素別にテンプレートを作成して条件に従って適用することが可能です。今回はヘッダーを作成してみたいと思います。
内容は新田が経営する会社株式会社ジェットセットの事業として運営する予定のCBDのウェブショップサイトbestcbd.jp の実際にあるサイトのものでおさらいしていきます。
ヘッダーにはサイトロゴとサイトメニューの２要素が含まれています。
１ ． 画面右上の+Add Newをクリックして新しいテンプレートを作成する
２ ． Header部分をクリックしてヘッダーテンプレートを新規作成する
以下のようなライブラリリストが表示されますが、今回はスクラッチで作成するので右上のXボタンでライブラリを閉じます。
ライブラリを閉じると以下のような画面になります。左側にはウィジェットのリスト、右側が実際のページ画面のプレビューになります。ウィジェットを左から右のメインウインドウへドラッグ＆ドロップしていくことでヘッダー部分を構築していきます。
３ ． Site Logoをグローバル指定する
グローバルでサイトロゴを指定することで、それ以後サイトロゴを呼び出すことで指定した画像を配置することが可能になります。
ウィジェットメニューをクリックすると、設定メニューに切り替わります。
切り替わったメニューからサイト設定を選択します。
サイト設定メニューに切り替わります。続いてサイト基本情報をクリックすると、またまたメニュー部分が切り替わります。
やっとサイトのロゴをグローバルに指定するメニューに切り替わりました。サイトロゴの部分をクリックすると、Wordpressのメディアライブラリが開くので、ロゴにしたいグラフィック画像を選択します。
このパネルではファビコンの指定も行うことが可能です。
今回は今風に登録したSVGファイルを指定しました。
SVGを指定すると極端にサイズが小さく表示されてしまう場合がありますが、サイトロゴウィジェットのスタイルで調節することが可能です。
編集画面でサイトロゴウィジェット部分を選択して、画面左側にSite Logoのプロパティが表示されたら、スタイルタブをクリックします。
一番上のスライダーでロゴを好みの大きさに調節します。
Elementor ではPC、タブレット、スマートホンに対して異なる数値を適用できる場合があり、その場合はプロパティ値の横にデバイスのアイコンが表示されます。
デバイスの切り替えは左パネルの一番下にあるデバイス切り替えボタンをクリックしてから右側の編集画面上部に表示されるデバイスボタンを選択します。
４ ． サイトメニューをナビメニューウィジェットで配置する
ナビメニューのコンテンツパネルの一番上にあるメニューの内容はWordpressで設定できるメニューの内容です。
表示したいメニューセットをここで選択することでサイトメニューを指定することが可能です。
それにしても翻訳がまばらなのが残念です。
５ ． 公開ボタンでテンプレートを公開する
６ ． 公開の条件を指定する
なんだかちょっとファンキーなコメントが表示されます。
“Where Do You Want to Display Your テンプレート?”…
これ、templateだけテンプレートに翻訳されているんですね。どんまい。
臆することなくADD CONDITION をクリックします。
Entire Siteを選択してサイト全体を指定して、SAVE & CLOSEボタンをクリックします。
実際の結果をbestcbd.jp でご覧いただけます。
-
Elementorで共通ヘッダーを作成するの関連リンク
