Elementor Proのテーマビルダーの使い方

Elementorでヘッダーを作る方法【テーマビルダーの使い方 】

「テーマのヘッダーをカスタマイズしたいけどできない・・・」
「Elementorでヘッダーは作れないの?」

こんな風に思ったことありませんか?
Elementorはテーマではなくプラグインなので、テーマに依存しますよね・・・

ですがElementor ProのTheme Builder(テーマビルダー)を使うと、本来テーマがコントロールするヘッダーやフッターや様々なページのテンプレーをElementorで作ることが可能になります。
テーマがなんであれ、Elementorでページ全体を作れるということです。
テーマビルダーがElementor Proの一番凄い機能と言っても過言ではありません。

まずはカスタムヘッダーを作ってみましょう。これでテーマビルダーの大まかな使い方がわかると思います。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

テーマビルダーの使い方-カスタムヘッダー作り方を動画でご覧になりたい方はこちらからどうぞ!

変換前のヘッダー

テーマで作られたヘッダー

これが変換前のヘッダーです。ロゴとメニューあります。
これはこのテーマのカスタマイザーで作ったヘッダーです。
これからElementor ProのテーマビルダーでこのヘッダーをElementorで作ります。

新しいヘッダーを作る

テーマビルダーの画面

Elementorのテーマビルダーへのメニューリンク

まずこの『Templates』→『Theme Builder』をクリックします。

新しいテンプレートを作る

Elementorのテーマビルダーのメイン画面

『新規追加』を押します。

Elementorのテーマビルダーでヘッダーを作る

この画面が出てきますので、『作業を行いたいテンプレートの種類を選択』で『Header』を選びます。
そして『テンプレートに名前をつける』というところで、好きな名前を入力しましょう。後から変えられます。

もう完成したテンプレートから選ぶことも可能

Elementor Rroのすでに完成したヘッダーのリスト

まず最初に出てくるのが、このすでに完成したヘッダーのリストです。
もし気に入ったものが、あればここから選択してそこから編集してもいいのですが、今回は使いません。
なので、右上の『X』を押してこれを閉じます。

Elementor Proのビルダーでヘッダーを作る

Elementorのビルダーでヘッダーを作る

このようにElementorのビルダーが起動します。
フッターが表示されたり『Content Area』と表示されたりしてますが、大事なのは一番上のセクションです。
そこで作った物がヘッダーとして使えるようになります。

セクションのカラム構造の選択

Elementor Proでヘッダーに適したセクションのカラム構造を選択

左にロゴ、右にメニューで作るのでこの構造を選択します。

ナビメニューとロゴウィジェットを追加

Elementor Proでヘッダーのためのウィジェット追加

作ったセクションの、左側に『Site logo』ウィジェット、右側に『ナビメニュー』ウィジェットを追加します。

Elementor Proでヘッダーにロゴとナビウィジェット追加

サイトロゴが表示されない場合は『ダッシュボード → 外観 → カスタマイズ → ヘッダー → サイト基本情報』からロゴの設定をします。

ヘッダーをスタイル

Elementor Proのテーマビルダーでヘッダーのスタイル調整

このように、メニューを右揃えにしたかったら『Align』を変えてみます。
そして自分の作ったメニューを使いたかったら、メニューのところで予め作ったメニューを選択します。
メニューは『外観 → メニュー』から作れます。

Elementor Proでヘッダーの背景を変える

背景の色も変えてみました。

ヘッダーの保存とどのページで表示するのか設定

Elementorのヘッダーの保存方法

完成したらまず『公開』を押します。

Elementor Proのテーマビルダー - Add Condition

『ADD CONDITION』を押します。

Elementorのヘッダーをどのページに表示するかを決定

ここでどのページにこのヘッダーを表示するのか設定します。

左側のメニューは『INCLUDE(含む)』と『EXCLUDE(除外する)』があり、初期設定では『INCLUDE』と『Entire Site(サイト全体)』となっています。
これはつまり『サイト全体でこのヘッダーを使う』という意味です。

なのでサイト全体でこのヘッダーを使いたい場合は、そのままにしましょう。
この記事では細かい設定は割愛します。

Elementor Proのテーマビルダーで作ったヘッダーを保存

Entire Siteに設定したら『SAVE & CLOSE』を押します。
これで完了です。

サイトをチェックしてみる

どこのページでもいいので、開いて見ます。

Elementor Proのテーマビルダーでヘッダーを置き換える

このようにヘッダーが先ほど作ったヘッダーに置き換わっています!

作ったテンプレートを編集・削除したい時

Elementorのテーマビルダーで作ったテンプレートの編集と削除

このようにテーマビルダーのページに戻ると、先ほど作ったヘッダーがあります。
ここにカーソルを持っていくと、メニューが表示されます。
削除したい時は『ゴミ箱』をクリックし、編集したい時は『Elementorで編集』を押します。


これで大まかなElementor Proのテーマビルダーの使い方はわかったのではないでしょうか。
フッターもすっかり同じように作れます。
次回はテーマビルダーでブログのレイアウトを作る方法を紹介します。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通