Elementorでスティッキーなフッターナビゲーションを作成することで、特にモバイルにおいて、ユーザーがスクロールしても重要なナビゲーションリンクにアクセスし続けることができ、ユーザーエクスペリエンスを向上させることができます。ここでは、Elementorでスティッキーフッターを設定するための包括的なガイドを、詳細な手順とともに紹介します。
ステップ1:スティッキーフッターナビゲーションテンプレートのセットアップ
確保 エレメンタ そして エレメンタル・プロ をインストールし、次のようなElementorと互換性のあるテーマを使用します。 こんにちはエレメンタール または アストラ.
フッターテンプレートの作成
- Elementorエディタを開く
- 編集するページを選択するか テンプレート > テーマビルダー をクリックして新しいフッターテンプレートを作成し、すべてのページで一貫したデザインを確保します。
- 新しいフッターテンプレートの追加
- フッターを追加」をクリックすると、新しいフッターテンプレートが作成されます。テンプレートを使用すると、サイト全体で同じスタイルが維持されます。
- フッターテンプレートの挿入
- Elementorのテンプレートインポートを使用して、保存済みのフッターテンプレートを挿入します。
- テンプレート・ライブラリを開き、保存したフッター・テンプレートを見つけて 挿入.
ステップ2:フッターへのナビゲーション要素の追加
ここでは、ホーム、カート、マイアカウント、検索バーなどの主要ページへのリンクを追加します。
フッター構造の作成
- 新しいコンテナの追加
- Elementorページの下部にある "+"をクリックして、フッターとして指定された新しいコンテナを追加します。
- カラム構造の設定
- ナビゲーション項目を配置するために、セクションを2列以上に設定します。例えば、"ホーム "アイコンを左に、"カート「右のアイコンをクリックすると、主要ページに簡単にアクセスできます。
アイコン要素の追加
各列にはナビゲーション項目があります:
- ホーム」アイコンの追加
- を使用します。 アイコン ウィジェットを選択します:アイコン・ウィジェットを左カラムにドラッグして アイコンボックス をクリックしてアイコンとラベルを組み合わせます。
- アイコンのカスタマイズアイコンライブラリからホームアイコンを選択し、デザインに合わせて色やサイズを調整します。
- リンクを追加します:アイコンウィジェットの設定で、ホームページへのリンク(例:/またはhttps://yourdomain.com)を設定します。
- カート」アイコンの追加
- 右カラムに、別のアイコンウィジェットを カートアイコン.
- カートページ(例:/cartまたはhttps://yourdomain.com/cart)にリンクします。
- マイアカウント」アイコンの追加
- 指定の列にアカウントアイコンを追加します。
- アカウントページ(通常/my-accountまたはhttps://yourdomain.com/my-account)にリンクします。
- 検索機能の追加
- 検索ウィジェットをカラムにドラッグします。
- 検索バーのスタイルをカスタマイズします:フッターのデザインに合わせて、色、サイズ、プレースホルダーテキストを設定します。
ステップ 3: フッターのレイアウトとスタイルのカスタマイズ
ナビゲーション要素を追加した後、フッターのレイアウトとスタイルを微調整し、統一感のあるユーザーフレンドリーな外観にします。
レイアウト調整
- 列幅の調整
- 各カラムの幅を25%や50%に設定するなど、コンテナ設定でナビゲーション項目が均等に配置されるように調整してください。
- ナビゲーション要素の整列
- 各ウィジェットを選択し、バランスをとるためにアライメント(中央、左、右)を調整します。
- アイコンのスタイル
- 各アイコンウィジェットの設定で、アイコンのサイズと色を調整し、必要に応じてホバー効果を追加します。
ステップ4:スティッキー効果を有効にする
Elementor Proのスティッキーエフェクトを使って、ユーザーがスクロールしてもフッターが見えるようにしましょう。
- スティッキービヘイビアの設定
- フッターセクションを選択し 詳細設定 > モーションエフェクト.
- イネーブル スティッキー で、一番下にくっつくようにセットします。
- デバイス表示オプションの選択
- スティッキー効果を適用する場所(デスクトップ、タブレット、モバイル)を選択します。
スタイルのカスタマイズ
- 背景色
- フッターコンテナをクリックし、背景色を スタイル 見やすいタブ
- タイポグラフィ
- それぞれを選択 テキスト 要素、例えばナビゲーション・ラベルなど。
- こちらへ スタイル >コンテンツ をクリックして、読みやすいようにフォント、サイズ、色をカスタマイズしてください。
ステップ 5: 保存とプレビュー
をクリックします。 セーブ をクリックしてテンプレートを公開します。プレビューして、スティッキーフッターが下部に残り、すべてのリンクが正しく機能することを確認してください。
概要
Elementorでスティッキーなフッターナビゲーションを作成すると、ユーザーがスクロールしても重要なリンクにアクセスし続けることができ、特にモバイルデバイスでのユーザビリティが向上します。テーマビルダーでフッターテンプレートを設定すると、すべてのページで一貫性のあるデザインが保証されます。ホーム、カート、マイアカウント、検索アイコンのようなナビゲーション要素を構造化されたカラムに追加することで、主要なページに簡単にアクセスできます。レイアウトをカスタマイズし、アイコンのスタイルを調整し、スティッキー効果を有効にすることで、ユーザーがナビゲートする際にフッターが見えるようになります。これらのステップを完了した後、テンプレートを保存してプレビューすると、スティッキーフッターがスムーズに動作し、サイト全体にまとまりのあるユーザーフレンドリーなデザインが維持されることが確認できます。