Elementorで共通ヘッダーを作成する

簡単です。
Minoru Nitta
Minoru Nitta
グラフィックデザイナー・フォトグラファー
このエントリーをはてなブックマークに追加

Elementorで共通ヘッダーを作成する

Elementor Proでサイト共通のヘッダーを作る!

 Elementor のテンプレート機能はWordpressをパブリッシングマシンに変身させる協力な武器のひとつですが、その中でも共通ヘッダー、フッターを設定するテーマビルダー機能は超絶に便利です。この機能、残念ながらフリーのElementor では使用できません。

テーマビルダーへのアクセス

 Elementor をインストールしてWordPressの管理画面にアクセスすると、 Elementor 専用の Elementorメニュー テンプレート メニュ- が追加されます。

 テンプレートメニューにはテンプレートを保存、Popups、Theme Builderなどのサブメニューがあり、今回はTheme Builderを使います。

 関係ないですが、テンプレート保存というのは多分誤訳で、保存されたテンプレートが正しい意味だと思われます。

 Theme Builderは専用の画面で構成されているElementor 独自の編集画面です。

 大きく左側のメニュー的な部分とそれ以外という感じの構成です。左側のメニュー的な部分は翻訳ができていません。

Header ヘッダー
Footer フッター
Single Post 投稿記事
Single Page 固定ページ
Archive アーカイブ
Search Result 検索結果
Error 404 404エラー画面

 テーマビルダーではこのように要素別にテンプレートを作成して条件に従って適用することが可能です。今回はヘッダーを作成してみたいと思います。

 内容は新田が経営する会社株式会社ジェットセットの事業として運営する予定のCBDのウェブショップサイトbestcbd.jp の実際にあるサイトのものでおさらいしていきます。

 ヘッダーにはサイトロゴとサイトメニューの2要素が含まれています。

画面右上の+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 でご覧いただけます。

ノーコードで高度な制作環境

 ここまで作業、一切コーディングをしていません。Wordpressのおかげでデザイナーでも比較的簡単にサイトを作れるようになりましたが、このElementor を入れるとさらに効率が爆上げす。情報のパーツをグラフィカルに配置することができて、さらにその情報はダイナミックな内容を選ぶことができる!簡単なサイトであれば数分で完成させることも可能です。

 Elementor 本当におすすめです!