先日導入したElementorを利用しサイトを制作してみたいと思います。
私はElementorを利用してサイトを作成したことがありません。手探りでの作業報告となりますのでご了承ください。
今回はページ全体に影響するヘッダーを制作してみたいと思います。
色々試してみたんですが、どうやらプロ版でないとページが横断したテーマなどはコントロール出来ないみたいです…。
ただ、Elementor Header & Footer Builderというプラグインを追加することで対応ができるようですので、今回はそのプラグインを導入し、ヘッダーとフッターを編集してみたいと思います。
Elementor Header & Footer Builder
プラグインのインストール・有効化
プラグイン > 新規追加 から「Elementor Header & Footer Builder」を検索しインストール後、有効化を行います。
ナビゲーションの制作
有効後、ナビゲーションを制作していきましょう！
外観 > Elementor Header & Footer Builder をクリックし、タイトル横の「Add New」をクリック。
新規ページへ遷移されるので、必要事項を設定します。
- メニューのタイトルを入力します。
- Type of Template で Headerを選択
- Display On で Entire Website（全てのページ）を選択
- 公開をクリック
準備はこれでOKです。
ここからはElementorでの編集作業となります。
「Elementorで編集」をクリックすると、
Elementorの編集画面が表示されます。
左メニューをスクルロールしていくと「ELEMENTOR HEADER & FOOTER BUILDER」のメニューが表示されるのでデザインに合わせてウィジェットを選択していきます。
今回制作しているサイトのデザインはすでに決まっているので、私はそのデザインに合わせてウィジェットを選択していきました。
使うのは以下の4つになります。
- サイトのロゴマーク
- サイトの紹介文
- グローバルメニュー
- 固定メニュー
これらを、編集画面内にドラッグしつつ制作していきたいと思います。
ヘッダーの制作（ウィジェットの追加）
サイトのロゴマーク
Site Logoを「ウィジェットをここにドラッグ」枠にドラッグします。
すると、設定しているロゴマークが表示されます。
ロゴマークを設定していない場合
サイドメーニューの①をクリックするとメニューが切り替わるので、「②サイト設定」をクリックし次にサイト設定から「③サイト基本情報」をクリックします。
ロゴが設定されていない場合は「サイトロゴ」箇所がグレーのダミー画像だけになっているので、画像を選択（またはアップロード）してから「更新」をクリックすればOK。
サイズや位置の調整
ロゴマークのサイズや位置を調整しましょう。
もちろん中央で問題ない場合はそのままでOKです。その場合は「更新」をクリックしてください。
調整が必要な場合は左のメニューから自分の希望サイズや位置になるように調整しましょう。
私はロゴのサイズはこのままでOKなので、位置を左寄せにしたかったので、コンテンツのAlignmentをleftにしました。
サイトの紹介文
次にサイトの紹介文を掲載したいと思います。
ロゴを追加したときと同じ様に左メニューの「ELEMENTOR HEADER & FOOTER BUILDER」から「Site Tagline」をドラッグ。左寄せになっているので一先ずはこれでOKとしました。
サイトの紹介文を設定していない場合
ロゴマークの時とほぼ同じで、左メニューから、サイト設定→サイトの基本情報を開き
サイト説明に紹介文を入力すればOKです。
グローバルメニューの表示
次はグローバルメニューを表示させたいと思います。
「ELEMENTOR HEADER & FOOTER BUILDER」から「Navigation Menu」をドラッグし、表示させたいメニューを選択します。
メニューをまだ制作していない場合
メニューをまだ制作していない場合は「Go to the Menus screen to manage your menus.」をクリックし「メニュー」を制作する必要があります。
メニューの制作方法は以前記事で紹介させて頂きましたのでそちらをご確認ください。
固定メニューを表示
デザインカンプの様に画面上部中央揃えで「WEBサイトを探す」という検索ページへの誘導ボタンがほしいので、グローバルメニュー同様に「Navigation Menu」をドラッグしMenuから「メニュー」で制作した「検索メニュー」を選択します。
一旦ここで「更新」をクリックして、サイトを確認してみましょう。
「更新 」横の「変更をプレビュー」をクリックします。
すると新規タブでプレビューが表示されます。
ちなみにですが、ウィンドウサイズを変えるとメニューがアイコンに変更されます。
アイコンをクリックするとメニューが表示されるのがデフォルトになってるみたいですね。
さて、ここまでは必要なウィジェットを追加し、ほんの少し調整してきましたが、このままでは正直言って見栄えはよろしくありません。
ですので、ここからはデザインカンプに少しでも近づけられるように、全体を調整していきたいと思います。
ヘッダー（ウィジェット）の調整
それではここからは調整した内容をメモ代わりに記載していきたいと思います。
ロゴマークとサイト説明文を画面左側に移動
ロゴマーク
ロゴのウィジェットが配置されていセクションにカーソルを重ねます。
するとセクションが青い枠で囲まれ「セクションを選択」出来るようになりますので、セクション枠の上中央にある「セクションを編集」をクリック。
左のメニューが「セクションを編集」に切り替わります。
コンテンツ幅をボックスから全幅に選択するとロゴマークが画面左側に移動されます。
もう少し余白がほしかったので、高度な設定タブからパディングに数字を入力。
ここでは仮に20としています。
サイトの説明文
サイト説明文もロゴと同様にすれば画面一杯まで広げることは出来ますが、デザインカンプに近づけたかったので、少し調整方法を変更。
サイト説明文をドラッグしてロゴマーク上部に移動（ドラッグ&ドロップ）させます。
サイト説明文とロゴマークの間が少し気になったので、カラムを選択しウィジェットスペースを20から0に変更。
するとぴったりくっついてしまったので、サイト説明文の編集を再選択してマージンの下を0から10に変更。
デザインカンプに大分近づいたので、ロゴ・サイト説明文は一旦終了することに。
グローバルメニューの修正
上のデザインカンプの様にグローバルメニューは画面左、そしてロゴマークの縦中央くらいの高さにしたいので調整します。
ナビゲーションをドラッグして、ロゴ下に配置します。
高度な設定タブの幅をインラインに変更し、位置を絶対にし水平方向を右に。
イメージに近づいて来ましたね。ここから更に微調整していきます。
水平方向下のオフセットを20と入力し、垂直方向下のオフセットに65と入力。
数字を直接入力するのもいいですが、バーを左右にドラッグすることで直感的に方向を移動することも出来ますので入力する数値でお悩みの方はそちらを利用してみてください！
ナビゲーションもイメージに近づきましたね。
この調子で「WEBサイトを探す」ボタンも調整していきましょう！
固定ボタン（WEBサイトを探す）の調整
やることはグローバルメニューとほとんど変わりません。
「WEBサイトを探す」 をロゴマークなどが配置してあるセクションへドラッグ&ドロップした後で高度な設定をしていけばOKです！似たような作業をしたので箇条書きで掲載します。
- 幅 カスタム
- 幅 20%
- 位置 固定
- 水平方向 左
- （水平方向）オフセット 40%
- 垂直方向 上
- （垂直方向）オフセット 50px
上記の設定に加えて、イメージに更に近づけられるように微調整をしていきましょう。
まずはテキストを中央揃えにします。
コンテンツタブのLayoutのAlignmentからCenterを選択で無事に中央揃えに。
他のメニューよりも目立つようにしたいので、罫線を設定します。
高度な設定タブの枠線からボーダーライプを直線。幅を全て2に。色は黒を選択。
次にシャドウがほしかったので、ボックスシャドウの編集ボタンをクリックし展開された各項目に必要情報を入力。
テキストの色はデフォルトですとグレーですのでここも黒くしたいので、スタイルタブの書体 > Text Colorを黒に選択。
これで大分イメージに近づきました！
後はいらないセクションを削除するだけです。
セクションの削除
セクションの削除方法は簡単でセクションにマウスを重ねると「☓ セクションを削除」と出てくるのでそれをクリックすればOKです。
もしくは右クリックをするとサブメニューが表示されますので、そちらにある「削除」をクリックしても削除することが出来ます。
作業終了?
これでヘッダーの制作作業が終了いたしました。
とはいえ、これはPC画面での微調整です…タブレット、スマートフォン用に追加で修正する必要はあります。
ちょっとレスポンシブモードでそれぞれのデバイスでどう見えるか確認してみましょう！
レスポンシブモード
左メニュー下にレスポンシブモードのアイコンがありますのでそちらをクリックしてみてください。すると編集画面上部にツールバーが表示されます。
現在はPCのアイコンになってますね。
タブレットやスマートフォンのプレビューを見たい場合は各アイコンをクリックすると確認することが出来ます。
これも修正していかないといけませんね。
作業内容としてはPCでやった作業とほぼ同じになります。
全部紹介すると長くなってしまうので、「WEBサイトを探す」ボタンを見本として紹介していきます。
レスポンシブでの修正方法
まずはタブレットでの見え方ですが「WEBサイトを探す」というテキストボタンではなくアイコンで表示されてますね。
これはデフォルトのままですと、タブレット・スマホの際はアイコンで表示されてしまいます。
ということで、アイコンではなくテキストで表示されるようにしましょう。
「WEBサイトを探す」ボタンを選択。
コンテンツタブのLayoutのResponsiveを見てみるとResponsiveがTablet（1025px>）になっています。ここをNoneに再設定するとアイコンが消え、テキストが表示されます。
とはいえ、このままでは見た目が悪いので微調整をしていきましょう。
高度な設定タブの幅をみると20%になってます。
これが影響しているので、タブレットの時は100%に入力。
そして水平方向のオフセットが41.12%になっているので0%に再入力し、垂直方向のオフセットはロゴマークと被らない位置まで下げます。
スマートフォンでの修正も同様に、レスポンシブモードのツールバーからモバイルを選択し、必要な微調整を行います。必要ない場合はそのままでもOKです！
作業完了
全デバイス、前に制作したデザインカンプに近づけることができました！
更新ボタンを押してプレビューで見てみましょう！
新規タブで作成したヘッダーが表示されると思います。
ウィンドウ幅を変えて、全デバイスサイズで問題ないかの確認も忘れずに行ってください。
問題なければ、ここでヘッダー作業は終了となります。
なにか気になった場合は、先程やった用に微修正をして自分の完成形に近づけてくださいね！
まとめ
今回はElementorでヘッダーを制作してみました！
専用のプラグイン「Elementor Header & Footer Builder」をインストールする必要があったりと少々手間はかかりましたが無料版でもここまでのことが出来るようです。
CSSのソースなどを書かなくてもここまでのことが出来る…しかもレスポンシブでブレイクポイント別でも細かい設定が出来るなんて。。。なんて便利なんでしょう。
まだまだ知らないことが多すぎるElementorですが、調べたりしつつサイトを構築していきたいと思いますので、完成までお付き合いください。
次回はフッターの制作報告となる予定ですのでお楽しみに。
それでは長い間お付き合い頂きありがとうございました。
今回はここまで。お疲れさまでした！
