ユーザーエクスペリエンスの向上：Elementorでモバイルフレンドリーなスティッキーフッターナビゲーションを作成

あなたのフッターナビゲーションモバイルアプリのように常に表示？このガイドでは、Elementorでその方法をお教えします。粘着性のあるフッターナビゲーションの作成対象無料版歌で応えるElementorの有料版.このようなナビゲーションを作成することで、特にモバイルデバイスでのウェブサイトのユーザーエクスペリエンスが大幅に向上し、ユーザーが重要なページにアクセスしやすくなります。

始める前に知っておくべきこと

始める前に、基本的なCSSを知っておくと便利です。カスタムCSSの使用 スティッキーナビゲーションのスタイル.Elementorがインストールされていること、そして以下のことができることを確認してください。ページ作成.

ステップ1：新規コンテナの作成

まず、新しいページを作成するか、既存のページを編集するには、"エレメンタ・エディタの使用".

をクリックします。 プラス記号 (+) ボタンをクリックして新しいコンテナを作成するか、Elementorペインから"容器「オプションをページにドラッグしてください。

ナビゲーション項目をよりよく整理するために、2列以上の構造を選択することをお勧めします。

• Elementorのプラスボタン( + )をクリックして、新しいコンテナを追加します。

• ナビゲーション項目を追加しやすくするために、2列以上の構造に設定します。

代表例もしEコマースサイトのフッターナビゲーションをスティッキーにする方法左の列は、"メインページに戻る「アイコンの右列カート「アイコンをクリックすると、重要なページに簡単にアクセスできます。

ステップ2：コンテナのカスタマイズ

次に、コンテナをカスタマイズする必要があります。をクリックしてください。 サイコロのアイコン またはコンテナの上部にある6つの点で設定を開きます。

• コンテンツ幅デザインのお好みに応じて、「ボックス型」または「全幅型」をお選びください。弊社では 全幅.

• 幅幅は必要に応じて調節してください。残りのオプションはデフォルト設定のままで、必要に応じて後で調整できます。

• コンテキスト:タイプページでは、ナビゲーション・メニューが他のコンテンツと混同されないように、コンテナに背景を追加してください。

• CSS ID: 高いレベル タブで CSS IDこのチュートリアルでは der-sticky-navigation-footer.他のクラスが選択されている場合は、以降のステップでCSSコードの調整.

代表例フッターの背景が暗い選択できます薄い色ナビゲーションのアイコンは、より視覚的に魅力的な外観を確保します。

ステップ3：コンテナへのコンテンツの追加

アイコンやリンクなどのナビゲーショナル・コンテンツをコンテナに追加します。

• アイコンボックスウィジェット推奨用途 アイコンボックスウィジェット各ナビゲーション項目アイコンとラベルの追加アイコンとラベルをそれぞれ別の列に追加して、すっきりと整理整頓しましょう。

例：eコマースサイトに"ホームページ","探す","カート「そしてメニュー「のアイコンをクリックします。ユーザーは重要なページに簡単にアクセスできます。

ステップ4：カスタムHTMLとCSSの追加

ナビゲーション・バーを粘着性のあるものにするには、カスタムの HTMLとCSSをクリックして、画面下部に固定します。

• HTMLウィジェット見つける HTMLウィジェットにドラッグします。ナビゲーションメニューの下(b) 国内のどの地域でも。

• HTMLコードの追加HTMLウィジェットに以下のコードを追加します：

#der-sticky-navigation-footer{。
    display: flex; justify-content: space-around; /* アイコンをコンテナ全体に均等に配置します。
    justify-content: space-around; /* アイコンをコンテナ全体に均等に配置 */ align-items: center; /* アイコンを縦方向に中央配置 */
    align-items: center; /* アイコンを縦方向に中央揃え */
    flex-wrap: nowrap; /* すべてのアイコンが1行に収まるようにします */
    position: fixed; bottom: 20px; /* すべてのアイコンが1行に収まるようにします */
    bottom: 20px; /* より高くなるように10pxから20pxに調整 */ right: 0; /* より高くなるように10pxから20pxに調整 */
    right: 0; left: 0; /* より高くなるように10pxから20pxに調整 */
    left: 0; max-width: 400px; /* より高くなるように10pxから20pxに調整 */ right: 0; left: 0; /* より高くなるように10pxから20pxに調整
    最大幅: 400px; 最大高さ: 60px
    
    margin: auto; z-index: 1000；
    z-index: 1000; }.
}

#custom-html {
    display: none; }
}

#der-sticky-navigation-footer.elementor-icon-box{。
    margin: 0; /* 余分な余白を削除してスペーシングを統一 */
}

メディア (最大幅: 768px) { { #der-sticky-navigation-box
    #der-sticky-navigation-footer{。
        flex-direction: row; /* モバイル表示用にアイコンを一列に並べます */
        justify-content: space-evenly; /* モバイル表示用にアイコンを一列に並べます */.
        justify-content: space-evenly; width: 100%；
    }
    #der-sticky-navigation-footer .elementor-icon-box { {.
        flex: 1; /* 各アイコンに均等なスペースを割り当てます。
    }
}

このコードは、フッターナビゲーションを画面の下部に固定し、適切な間隔と位置を確保します。

• 位置: 固定 フッターを一番下に固定します。
• 最大幅 歌で応える マックスハイト フッターのサイズを制限します。
• z-index フッターが他のコンテンツよりも上に表示されていることを確認してください。

カスタムHTMLの非表示というカスタムHTML要素に新しい要素を追加します。 カスタム HTML な CSS IDで要素を隠します。

代表例ナビゲーションを常に一番上に表示させたい場合は z-index の値を使用して、ナビゲーションが他のコンテンツによって上書きされないようにします。

ステップ5：最終調整と完成

必要に応じてCSSを微調整したり、その他のデザインを変更することで、最終的な仕上がりを向上させることができます。このチュートリアルのスティッキーフッターナビゲーションのデザインは比較的基本的なもので、工夫次第でさらに最適化することができます。

代表例例えば、アイコンをブランドロゴに置き換えたり、さまざまなアニメーションを使ったりすることで、ナビゲーションのインタラクティブ性を高め、よりユニークなものにすることができます。

フッターナビゲーションをスティッキーにするヒント

• ホバー効果の追加ユーザーがリンクにカーソルを合わせたり、クリックしたときに視覚的なフィードバックを提供するホバー効果によって、アイコンのインタラクティブ性を高めます。
• 対照的な色の使用サイトの背景と対照的な色を選ぶと、スティッキーナビゲーションがより目を引きます。
• アニメーション効果の追加フッターが表示されたときに、フェードインやスライドアウトなどの微妙なアニメーションを加えることで、より魅力的になります。
• モバイルデバイスへの対応ナビゲーションがモバイルデバイスでシームレスに動作するよう、さまざまなスクリーンサイズをテストし、必要に応じてCSSを調整します。

代表例モバイル端末のナビゲーション・アイコンを大きくし、ユーザーが簡単にクリックできるようにします。これは、特に小さな画面でのユーザーエクスペリエンスを高めるために重要です。

フッターナビゲーションに粘着性を持たせる理由

スティッキーフッターナビゲーションは、特にモバイルデバイスでのユーザーエクスペリエンスの向上に役立ちます。これにより、ユーザーはページのトップにスクロールバックすることなく、重要なページに素早くアクセスすることができ、ユーザビリティの向上、エンゲージメントの増加、そして最終的にはウェブサイトのコンバージョンの改善につながります。

概要

スティッキーフッターナビゲーションを使用することは、ウェブサイトでのユーザーエクスペリエンスを向上させる効果的な方法です。ナビゲーションバーを常にユーザーの視線内に保つことで、訪問者はページのトップに戻ることなく、いつでも簡単に重要なページにアクセスすることができます。これにより、ウェブサイトのユーザビリティが向上するだけでなく、ユーザーのインタラクションも増加します。