検索
Close this search box.

ヘッダー・フッターを作成 エレメンタープロ

エレメンタープロでサイトを構築するときの考え方は、ワードプレスを乗っ取るプラグインだと考えると理解が早い.

エレメンタープロとワードプレスのテーマの考え方

ワードプレスを長く使っていた人には、エレメンタープロのページの考え方を理解するのに少し時間が必要かもしれません.

基本的には、同じなんだけど、自分は、数日間必要でした.

サイトのヘッダー(header)とフッター(footer)

ワードプレスのテーマ

ワードプレスというCMSのテーマの考え方は、
テーマが、外観や動作など、ほぼ全てのサイトの見た目を決めることにあります.

ワードプレスを使ったことのなる方ならば、当然知っていることですが、基本的な動作以外は、テーマを勝手にイジって、表示させたいコンテンツ、広告、字体や色彩など、多岐にわたることを制御しています.


エレメンタープロのテーマエディター(Theme Builder)

ワードプレスのテーマの外観をエレメンタープロが横取りする機能が、テーマビルダーだと考えると良いと思います.

これまで、テーマによって作り込まれてきた、記事以外の、ヘッダー、フッター、サイドバー、記事内のコメント欄、さまざまな動作をエレメンタープロのテーマビルダーで自由に配置できるのです.

エレメンターのテーマビルダーで設定されていない部分は、選択されているワードプレスのテーマの設定で表示されますので、これまでのテーマとエレメンターのテーマビルダーの共存はできるので、心配は無用かと思います.

そこを押さえておくことが、エレメンタープロのテーマビルダーを使いこなす肝(キモ)となります.

これまで使ってきた、テーマの機能や動作をエレメンタープロのテーマビルダーが取って代わること、

そう考えると、テーマビルダーのことが見えてきます.


ヘッダーを作ろう

まずは、ヘッダーを作ってみましょう

エレメンターのパーツであるウイジェットを使ったことがあるとして、

テーマビルダーの全てのパーツのなサイトパーツの「Header」を選んで、+Add New をクリックする.

ヘッダーのライブラリが表示されるので、それらのうちの一つを選択しても良いし、✖️をクリックして全く一から作っても問題ない.

テーマビルダーのヘッダー

編集が終わって、最初の「保存」をすると PUBLISH SETTINGS というウインドウが現れる

publish settings

ここでうまく設定できなくとも、テーマビルダーに戻って

edit conditions

ウインドウの下側の [ Edite Conditions ] をクリックして設定を変更可能だ.

add condition

あなたのテンプレートのどこに表示したいですか? と表示されるので

[ ADD CONDITION ] ボタンをクリックして

ヘッダーの場合、選択肢は entrire site , archives , singular の3種類

一般的にはエントリーサイトのまま、 [ Save & Close ] で設定が保存される.

[Save & Close] ボタンをクリックすれば OK だ.


フッターも同様に作成

テーマビルダー footer

ADD CONDITION でうまく登録できれば、ウインドウの左上のチョボが緑色になる.

ここで、本当のサイトを見てみると、しっかりと、今テーマビルダーで作ったヘッダーとフッターが表示されているはずです.


テーマビルダーはサイトのパーツを作る

サイト全体をエレメンターでデザインするのであれば、テーマは、デザインの邪魔をされない

「 HELLO 」


が良さそうです.

テーマ「 Astra 」 や「 Neve 」 なども良いと感じていますが、変なところにスペースが入ったりするので、そのスペースが、どこの問題なのか考えたりするのに時間を要します.
もし、他のテーマで、アーカイブページ(カテゴリーページ)や投稿画面が気に入っているのであれば、わざわざエレメンタープロにする必要は少ないかもしれません.

やはり、最初から、サイト全体をデザインをするならば 『 Hello 』が最も最適に感じます.

エレメンタープロやその他のデザインサイトには、エレメンターのデザインされたテンプレートがたくさんありますので、それらを使って、短時間にかっこいいサイトを作ることも可能です.

エレメンタープロには、さまざまなデザインの部品が付いていますので、それらの部品を使ってみるのも良い選択だと思います.

エレメンタープロの最大のメリットは、クオリティの高い自分好みのサイトを作り込む事ができますね.

エレメンタープロの実力は、まだまだ、あるのですが、

その一つに エレメントをショートコードで登録して、さまざまなページに使いまわすこともできるのですが……

コメントを残す

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

theme_header_footer_elementor

記事の見出し番号

関連記事

Scroll Snap

WEBページでスクロールを所定の位置で一旦止まるように設定することができると可読性が上がりそう。

テーマビルダー とは Elementor Pro

エレメンタープロのテーマビルダーとは、ワードプレスのテーマの画面と機能をエレメンターで自由に構築できる、すなわち、サイトビルダーになるということです.

アーカイブページを作成 エレメンタープロ

エレメンタープロのテーマビルダーでアーカイブページ、カテゴリーページを作って表示させます.ウィジェットを配置するだけで簡単に作れるところがすごいですね.

最新記事

iframe

iframeを使って、他サイトをページに表示させることができます。

例)スクロール効果

スクロールの効果のサンプルページです。印象に残るページの参考にしていただけると良いですね。Elementorより。

Scroll Snap

WEBページでスクロールを所定の位置で一旦止まるように設定することができると可読性が上がりそう。

スクロール効果 横移動

ページをスクロールさせると画像が横方向に移動させる。注目させたり違和感を感じさせる時に使える。