Elementor Proを使わずに無料でサイトのヘッダーとフッターを作成する方法

執筆者 | 更新日 2020年09月14日 | Elementorの使い方 | 7 コメント

通常、ヘッダーやフッターを作成するにはElementor Proを契約、テーマビルダーという機能を使用する必要があります。しかし、「Elementor – Header, Footer & Blocks Template」という無料のプラグインを使うことで、無料のElementorでもヘッダー・フッターを作成することができます。

Elementor Proは使いたくないけど、ドラッグ&ドロップで、ヘッダーとフッターを表示させたいと思っている方は、参考にしてみてください。

Step1. Elementor – Header, Footer & Blocks Templateプラグインをインストールする

Elementor – Header Footer Blocks Templateプラグイン

まずは、「プラグイン」の「新規追加」から「Elementor – Header, Footer & Blocks Template」プラグインを「今すぐインストール」して「有効化」まで終わらせましょう。

Step2. Elementor – Header, Footer & Blocks TemplateでElementorが使えるように設定する

ElementorでElementor – Header Footer Blocks Templateの設定をする

インストールが終わったら、「Elementor」の「設定」に移動し、「Elementor – Header, Footer & Blocks Template」にチェックを入れて、「変更を保存」します。チェックを入れないと、Elementorでヘッダーをデザインできませんので、必ず確認しておいてください。

Step3. ヘッダーを新規追加する

Elementor – Header Footer Blocks Templateでヘッダーを新規追加する

では、実際にヘッダーを作成していきたいと思います。「外観」の「Header, Footer & Blocks」に移動し、「Add New」ボタンをクリックします。

Step4. ヘッダーの基本設定をする

ヘッダーの基本設定

まず、タイトルをつけ、「Elementor – Header, Footer & Blocks Options」では、「Type of Template」で「Header」を選びます。もしヘッダーではなく、フッターを作成したいのであれば、「Footer」を選択しましょう。

その下にある「Display On」ではどのページに表示するのかを選択します。サイト全体に同じヘッダーを表示する場合は「Entire Website」を選択します。「Add Display Rule」では、特定のページ、カテゴリーにだけ表示する設定、「Add Exclude Rule」では逆に除外するページ、カテゴリーなどを設定することができます。

Elementorで編集

終わったら、いったん設定を保存して、「Elementorで編集」ボタンをクリックしてデザインしていきます。

Step5. ヘッダーをデザインする

それでは、あとは自由にヘッダーをカスタマイズしてみてください。

Elementor – Header Footer Blocks Template専用のウィジェット

「Elementor – Header, Footer & Blocks Template」をインストールすることによって、上の画像のように、「HEADER, FOOTER & BLOCKS」というセクションが表示され、

  • Retina Image:レティナ用の画像
  • Copyright:コピーライト(著作権表記)
  • Navigation Menu:ナビゲーションメニュー
  • Page Title:ページタイトル
  • Site Title:サイトタイトル
  • Site Tagline:サイトのキャッチコピー
  • Site Logo:サイトロゴ
  • Search:検索アイコン
  • Cart:カートアイコン(WooCommereをインストールしている場合に使用します。)

これら9つのウィジェットが使用できます。Pro版じゃないと使えないダイナミックコンテンツのウィジェットが使えるのは大きなメリットだと思います。例えば、Site Logoを追加すると、「外観」の「カスタマイズ」でサイトのロゴを変更すれば、その度に自動的に画像が切り替わります。

Elementor – Header Footer Blocks Templateで作成したヘッダー e1596100386551

今回は、シンプルに左側にロゴ、右側にナビゲーションメニューを設定したヘッダーを作成してみました。

Elementor – Header Footer Blocks TemplateのNavigation Menu

ロゴはシンプルに「Site Logo」を追加しただけですが、「Navigation Menu」はPro版のものと若干使い方が異なります。「Last Menu Item」の項目で「Button」を選択すると、メニューの一番右にあるメニューをボタン形式で表示することができます。

「外観」の「メニュー」

ちなみに、メニューは、「外観」の「メニュー」で作成することができます。

ワードプレス メニュー

また、一番右のメニューをボタン形式で表示できるとお伝えしましたが、ボタン形式にしたいものは、メニューを作成する時点で、一番下に追加したおきましょう。

※Elementorの編集画面では、左下の「ページレイアウト」を「Elementor 全幅」に切り替えましょう。そのレイアウトであれば、ヘッダーやフッターを表示したままにすることができます。

まとめ

今回は、Elementor Proを使わずにヘッダーやフッターが作成できるElementor – Header, Footer & Blocks Templateというプラグインの使い方をご紹介してきました。

  • Elementor Proを使いたくない
  • 無料でヘッダー・フッターを作成したい
  • Hello Themeを使用している(テーマにはヘッダーが用意されていないので。)

という方は、ぜひ使ってみてください。

根本 耕輔

根本 耕輔

WordPressを使ったオンラインビジネスの構築が得意。

KClubマーケティング、KClubショーケースを運営。

Elementorの使い方を学びませんか?

Elementorの各ウィジェットの使い方からページの作り方まで網羅的にカバーしたコースが無料で受講できます。(通常¥980)

7 コメント

  1. yuki

    headerの編集、まさに知りたかった情報でした!! ありがとうございます。
    大変助かりました。

    返信する
    • 根本耕輔

      コメントありがとうございます!お役に立ててよかったです。とても便利なプラグインですよね。

      返信する
  2. ふきの

    はじめまして。設定方法がとても参考なります!ありがとうございます。質問させていただきたいのですが、いくつかページがある中でお問い合わせページのみにヘッダーを適用する場合はどのように設定すれば良いのでしょうか?

    返信する
    • 根本耕輔

      コメントありがとうございます!「Display On」で「Specific Pages / Posts / Taxonomies, etc.」を選択して、お問い合わせページのタイトルを検索&選択すれば、お問い合わせページだけでヘッダーを表示できます。

      返信する
      • ふきの

        できました!ご丁寧にどうもありがとうございました!

        返信する
  3. mocomoco1011

    現在企業サイトを作っておりまして、既に別でtopページを固定ページとして作っていたのですが、
    ヘッダーをこの方法で作ると、新規のページにまっさらな状態からスタートしてしまいますが、その場合、その今まで
    作ったtopページにこのヘッダーを反映することはできるのでしょうか?また、1ページのサイトなのですが、最新ニュースの
    部分のみ、詳細ページにとび別のページとして開きますが、こちらにも同様のヘッダーが表示されるようできるのでしょうか?御願いします

    返信する
    • 根本耕輔

      コメントありがとうございます!まず、ヘッダーを作成する際に、「Display On」で「Entire Website」を選択します。さらに、Elementorでページを作成する時に、左下の設定(ギアアイコン)から「ページレイアウト」を「Elementor 全幅」にしてみてください。ヘッダーが反映されるはずです。

      返信する

コメントを提出

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

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。

Elementorの使い方

無料でElementorの使い方を網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?