OpenByt - 無料のWordPressに関する究極の情報源

Elementorでスティッキーフッターナビゲーションを作成する方法

Elementorでスティッキーなフッターナビゲーションを作成することで、特にモバイルにおいて、ユーザーがスクロールしても重要なナビゲーションリンクにアクセスし続けることができ、ユーザーエクスペリエンスを向上させることができます。ここでは、Elementorでスティッキーフッターを設定するための包括的なガイドを、詳細な手順とともに紹介します。

ステップ1:スティッキーフッターナビゲーションテンプレートのセットアップ

確保 エレメンタ そして エレメンタル・プロ をインストールし、次のようなElementorと互換性のあるテーマを使用します。 こんにちはエレメンタール または アストラ.

フッターテンプレートの作成

  1. Elementorエディタを開く
    • 編集するページを選択するか テンプレート > テーマビルダー をクリックして新しいフッターテンプレートを作成し、すべてのページで一貫したデザインを確保します。
  1. 新しいフッターテンプレートの追加
    • フッターを追加」をクリックすると、新しいフッターテンプレートが作成されます。テンプレートを使用すると、サイト全体で同じスタイルが維持されます。
  1. フッターテンプレートの挿入
    • Elementorのテンプレートインポートを使用して、保存済みのフッターテンプレートを挿入します。
    • テンプレート・ライブラリを開き、保存したフッター・テンプレートを見つけて 挿入.

ステップ2:フッターへのナビゲーション要素の追加

ここでは、ホーム、カート、マイアカウント、検索バーなどの主要ページへのリンクを追加します。

フッター構造の作成

  1. 新しいコンテナの追加
    • Elementorページの下部にある "+"をクリックして、フッターとして指定された新しいコンテナを追加します。
  1. カラム構造の設定
    • ナビゲーション項目を配置するために、セクションを2列以上に設定します。例えば、"ホーム "アイコンを左に、"カート「右のアイコンをクリックすると、主要ページに簡単にアクセスできます。

アイコン要素の追加

各列にはナビゲーション項目があります:

  1. ホーム」アイコンの追加
    • を使用します。 アイコン ウィジェットを選択します:アイコン・ウィジェットを左カラムにドラッグして アイコンボックス をクリックしてアイコンとラベルを組み合わせます。
    • アイコンのカスタマイズアイコンライブラリからホームアイコンを選択し、デザインに合わせて色やサイズを調整します。
    • リンクを追加します:アイコンウィジェットの設定で、ホームページへのリンク(例:/またはhttps://yourdomain.com)を設定します。
  1. カート」アイコンの追加
    • 右カラムに、別のアイコンウィジェットを カートアイコン.
    • カートページ(例:/cartまたはhttps://yourdomain.com/cart)にリンクします。
  1. マイアカウント」アイコンの追加
    • 指定の列にアカウントアイコンを追加します。
    • アカウントページ(通常/my-accountまたはhttps://yourdomain.com/my-account)にリンクします。
  1. 検索機能の追加
    • 検索ウィジェットをカラムにドラッグします。
    • 検索バーのスタイルをカスタマイズします:フッターのデザインに合わせて、色、サイズ、プレースホルダーテキストを設定します。

ステップ 3: フッターのレイアウトとスタイルのカスタマイズ

ナビゲーション要素を追加した後、フッターのレイアウトとスタイルを微調整し、統一感のあるユーザーフレンドリーな外観にします。

レイアウト調整

  1. 列幅の調整
    • 各カラムの幅を25%や50%に設定するなど、コンテナ設定でナビゲーション項目が均等に配置されるように調整してください。
  1. ナビゲーション要素の整列
    • 各ウィジェットを選択し、バランスをとるためにアライメント(中央、左、右)を調整します。
  1. アイコンのスタイル
    • 各アイコンウィジェットの設定で、アイコンのサイズと色を調整し、必要に応じてホバー効果を追加します。

ステップ4:スティッキー効果を有効にする

Elementor Proのスティッキーエフェクトを使って、ユーザーがスクロールしてもフッターが見えるようにしましょう。

  1. スティッキービヘイビアの設定
    • フッターセクションを選択し 詳細設定 > モーションエフェクト.
    • イネーブル スティッキー で、一番下にくっつくようにセットします。
  1. デバイス表示オプションの選択
    • スティッキー効果を適用する場所(デスクトップ、タブレット、モバイル)を選択します。

スタイルのカスタマイズ

  1. 背景色
    • フッターコンテナをクリックし、背景色を スタイル 見やすいタブ
  1. タイポグラフィ
    • それぞれを選択 テキスト 要素、例えばナビゲーション・ラベルなど。
    • こちらへ スタイル >コンテンツ をクリックして、読みやすいようにフォント、サイズ、色をカスタマイズしてください。

ステップ 5: 保存とプレビュー

をクリックします。 セーブ をクリックしてテンプレートを公開します。プレビューして、スティッキーフッターが下部に残り、すべてのリンクが正しく機能することを確認してください。

概要

Elementorでスティッキーなフッターナビゲーションを作成すると、ユーザーがスクロールしても重要なリンクにアクセスし続けることができ、特にモバイルデバイスでのユーザビリティが向上します。テーマビルダーでフッターテンプレートを設定すると、すべてのページで一貫性のあるデザインが保証されます。ホーム、カート、マイアカウント、検索アイコンのようなナビゲーション要素を構造化されたカラムに追加することで、主要なページに簡単にアクセスできます。レイアウトをカスタマイズし、アイコンのスタイルを調整し、スティッキー効果を有効にすることで、ユーザーがナビゲートする際にフッターが見えるようになります。これらのステップを完了した後、テンプレートを保存してプレビューすると、スティッキーフッターがスムーズに動作し、サイト全体にまとまりのあるユーザーフレンドリーなデザインが維持されることが確認できます。

モバイルバージョン終了