前回まではヘッダーの制作を紹介させていただきました。
どうにか無事に形になったので、今回はフッターの制作をしていきたいと思います。
Elementorでの制作シリーズは備忘録に近い内容になってますのでご了承ください。
Elementor Header & Footer Builder
無料版Elementorでヘッダーとフッターを表示させるために使うプラグインです。
今回もこちらのプラグインを使ってヘッダー同様に制作していきます。
制作方法
Elementor Header & Footer BuilderのAdd Newで新規タイトルを制作
Type of TemplateでFooterを選択
Display OnでEntire Websiteを選択
一度「下書き保存」をしてから「Elementorで編集」をクリック
Elementorでレイアウト制作
まずはデザインカンプを確認しましょう。
画面左にパンくずリスト、画面中央にページトップへ戻るためのアンカーリンク、そして左側にTwitterとサイトリンクを表示してますね。
画面は3分割ですのでヘッダーを作った時とほとんど変わりませんね。
さくっと作っていきましょう。
各種作成
パンくずリスト
WORDPRESSから「AIOSEO – パンくずリスト」をドラッグ&ドロップします。
パンくずリストが表示されましたね。
「AIOSEO – パンくずリスト」はプラグイン「All in One SEO」をインストールしていと表示されるウィジェットです。
また同じくSEOプラグインである「Yoast SEO」でも利用できます。ただしPROを利用していないと行けないようですので無料版の私には無理でした…。
他にもパンくずリストを表示させるため用のプラグインなどもあるようですのでお好みのをご利用ください。
ページトップ（アンカーリンク）
ページトップへ戻るアンカーリンクはテキストではなく画像で表示させるので「基本」の「画像」をドラッグします。
画像を選択し、添付ファイルのキャプションを選択。
リンクをカスタムURLを選択し「#」を入力します。
「#」と設定しておくことで、ページの先頭にリンクすることが出来ます。
スタイルタブのマウスオーバーを選択し、不透明度を0.5と入力しトランジション※所要時間を0.3に。
ついでにホバー時にアニメーションされていたら面白いかな？と思い、ホバー時のアニメーションからFloatを選択。
※マウスオーバーした際に透明度1から0.5までを0.3秒かけて変化させます。アニメーションみたいなものですね。
位置などは後でまとめて微調整するつもりなので、アンカーリンクはこれにて一旦終了。
ボタン
Twitterとサイトへのリンクはメニューで制作しようと思ったんですが、ボタンで制作することにしました。
基本のボタンのウィジェットをドラッグします。
コンテンツタブのテキスト部分をTwitterに変更。それに伴いリンクも修正。URL入力横のリンク設定（歯車のアイコン）をクリックして新たしいウィンドウで開くにチェックし、サイズから中を選択。
スタイルタブの書体のペンアイコンをクリックし、太さと装飾を設定
文字色を黒にして色を背景色を非選択にしたかったんですが出来ないようでしたので透明度を0に設定。
マウスオーバーをクリックしてマウスが重なった時に半透明くらいになるように透明度を調整。
これでTwitterボタンの設定はOKです。
ボタンを複製してサイトへの同じ要領でサイトへのリンクボタンを制作しましょう。
とはいえ、今回は見た目もマウスオーバーも全部同じなのでテキストとリンクを修正するだけで終わりです。
各種調整
それでは、ここからは微調整して、デザインカンプに近づけて行きたいと思います。
今回はヘッダーの制作の時とは別の方法での調整をしてみたいと思います。
まずはウィジェットを追加部分の「＋」をクリック 。
すると構造を選択というメニューが表示されますので3分割の構造を選択
すると3分割されたセクションが挿入されます。
あとは3分割されたレイアウト部分に先程制作した各項目をコピーして行きます。
コピー方法は至ってシンプルで項目にカーソルを合わせて右クリックでコピー。
後は貼り付けいたい場所にカーソルを合わせて右クリックで貼り付けを行います。
ここからはセッションや各ウィジェットの調整をしていきましょう。
おっと、その前にコピーが完了しましたら余計なセクションなどは削除しましょう！
セッションの編集
セッションを選択しレイアウトタブからコンテンツ幅を全幅に選択。
続いてスタイルタブのタイポグラフィから、文字色とリンク色を黒に設定。
リンクホバーからはボタンと同じく半透明になるように設定しておきます。
高度の設定タブのパディングを左右20px、上下100pxとしておきます。
以降の微調整は他のウィジェットの調整が終わってからまた直してから行うため、セッションは一旦終了で。
それでは、各項目を微調整していきましょう。
とはいえ、パンくずリストとページアンカーは見た目はそのままで問題ないので、各ボタンの調整をしていきます。
ボタン
ボタンを横一行にしたかったので、幅などを調整します。
高度な設定タブで幅を「インライン（auto）」に各ボタン設定すればOK。
ボタンは画面左寄せにしたいのでカラムを選択し、水平方向に整列で終了を選択。
ボタンもですがパンくずリスト垂直方向も中央揃えにしたいので水平にした時と同じ様に設定します。
カラムを選択し垂直方向に整列から「中央」を選択します。
これでOK。
パンくずリストも同じ作業をして中央揃えに。
これでPC画面に関しては設定完了です！
タブレットとスマホはヘッダー同様に別のデザインになりますので、レスポンシブモードを使用して更に調整していきます。
タブレット、スマホの外観調整
タブレットはそのままの見た目で良いんですが、スマホの時は下記画像の様にしたいので、レスポンシブモード > モバイルで微調整をすることにしました。
テキスト関連を中央に来るように設定し、各要素の余白をデザインカンプを見ながら調整。
これにてフッターの制作は終了です！
まとめ
今回はElementorでフッターを制作してみました。
直感的にレイアウトを制作することが出来るので便利なんですが、無料版ですとなかなか痒いところには手が届かないと私は感じました。
とはいえ、無料版でも色々出来ることがあると思うのでこれからも調べながら制作を進めて行きたいと思います。
ヘッダーフッターともにデザインカンプには近づけられましたが、まだ良くて7割位。
おいおい調整をして少しでも早く公開出来るようにしていきたいと思いますのでお楽しみに
