WEB

Elementor Proでヘッダー・フッターを作ってみる

WordPressのプラグイン「Elementor(エレメンター)」の無償版では、ヘッダー・フッターを作る場合には、プラグイン「Elementor Header & Footer Builder」を使えば無料で作ることが出来ますが、有償版であるElementor Proを使うことで、ヘッダー・フッターをストレスなく作成することが可能になります。

無料版でヘッダー・フッターを作成するプラグイン「Elementor Header & Footer Builder」については以下の記事にて取り上げています。

※この記事は、Elementor Proがインストール・有効化されている前提で進めていきます。

ヘッダーを作ってみる

ワードプレスの管理画面から「テンプレート>新規追加」を選択します。
選択後「NEW TEMPLATE」というポップアップが出現します。

ポップアップが出たら、「テンプレートの種類を選択」していきます。
まずは「作業を行いたいテンプレートの種類を選択」から適切なものを選択します。今回はヘッダーを作っていきますので、「Header」を選択します。

「テンプレートに名前をつける」に任意の名前をつけて、「テンプレートを作成」を選択します。

作成されると、ポップアップ「ライブラリ」が出てきますので、テンプレートを使用したい場合には、選んで進んでいきましょう。
テンプレートを使用しない場合は、右上の閉じるを選択します。

ライブラリ(テンプレート)の画面を再度開きたい場合は、フォルダのマークを選択することで「ライブラリ」をいつでも出すことが可能です。

Elementor Proのテンプレートからカスタムしてみる

自身でゼロから作ってもいいのですが、今回はテンプレートからカスタムをしてみます。
好きなテンプレートを選んで「挿入」をしてみましょう。
※テンプレートをクリックすると拡大表示がされます。

図の様に選んだテンプレートが挿入されることが分かります。
あとは、通常のエレメンターと一緒ですので、色々カスタマイズ・操作をしていきましょう。

カスタムできたら「公開」してみましょう。

「公開」すると「PUBLISH SETTINGS」というポップアップが現れます。
このポップアップは、ヘッダーの仕様される場所を決定する条件設定になります。
「ADD CONDITION」で条件を追加していきましょう。

ここで「Entire Site」を選択すれば、サイト全体に適用がされます。
右下の「SAVE & CLOSE」で保存していきます。

無事保存できたら、サイトを見てみましょう。
先程作ったヘッダーが表示されていることが分かります。

※フッターも同じ要領で作成が可能です。

さいごに

このように簡単にヘッダー・フッターをはじめ、サイトのテンプレートを作っていくことが可能です。

無料でヘッダー・フッターを作成するプラグイン「Elementor Header & Footer Builder」でもほぼ同等のことはできますが、有償のPro版ではテンプレートを流用しカスタムがしていけますので、想定しているサイトイメージに近いものを選んで、カスタマイズをかけていった方が、私は早く作業が出来る感じがしています。

ロゴなどでSVG形式ファイルを使用する場合は、WordPressへSVGのアップロードを可能にする「SVG Support」や「Safe SVG」などのプラグインを使用してください。「SVG Support」については以下の記事でも取り上げています。

関連記事

TOP