固定化したアイコンの作成手順

左図で示したお問合せフォームへの誘導を示唆するアイコンを、ページの任意の位置(例えばページの左下隅など)に固定化して表示させる方法を公開します。

当サイトのトップページと及び2ページ目の「塾の概要」ページの画面左下隅に問合せフォームへのリンクボタンとして、そのアイコンが設置されています。そのアイコンは画面スクロールしても動かず任意の位置にに固定されています。

1.任意の場所にアイコンを挿入する

Elementorのウジェット欄からアイコン・ウジェットをページの任意の場所(例えばページの最終行など)に挿入する。

2.アイコンをメールのアイコンに変更する

アイコンの選択で「Envelope」という検索語を入力してメールのアイコンを選択する。

3.アイコンの形状を変更する

アイコンの形状を円形に変更し、且つ、リンク先URLを設定する。

4.アイコンの色とサイズを変更する

アイコンのメインカラーをブラックにして、サイズを30、パディング20に設定する。

5.アイコンの固定化を設定する

今回の味噌(肝)となるアイコンの固定化を設定する。(左図)
・配置:カスタム
・位置:固定
・Horizontal Orientationで左側位置を設定
・垂直方向で縦方向の位置(最下位)を決定

以上の設定で、メールのアイコンがページの左端最下段に実装され、且つ、スクロール操作で固定化されたアイコンとなる。

6.固定化アイコンの微調整

ページの左端最下段のアイコンの位置をマージンとパディングで微調整する