Elementorでコンテナを使用して垂直スティッキーヘッダーを作成する方法

縦見出しとは何ですか？

バーティカル・スティッキー・ヘッダーは、ページのサイドに固定されたヘッダーバーで、ユーザーがページをスクロールしても表示されたままなので、他のページエリアやクイックナビゲーションに簡単にアクセスすることができます。このデザインは、カタログ、ナビゲーションメニュー、連絡先情報などのコンテンツに使用することができ、ユーザーのブラウジングを容易にします。

予備的

始める前に、以下のことを確認してください：

1. インストールと起動 エレメンタル・プロ プラグインが必要です。
2. 新しいページを作成するか、または既存のページに縦の付箋ヘッダーを追加する準備ができました。
3. Elementorコンテナの基本的な使い方をすでに理解していること。 フレックスボックス (コンテナモードで動作）。

ステップ1：単一ページテンプレートの作成

今回はシングルページのテンプレートを作成し、このテンプレートにはコンテナ付きの縦型スティッキーヘッダーを作成します。

テンプレート作成ページへ

1. WordPressのバックエンドで、次の場所に移動します。 Elementor > テンプレート > 新規作成.

2. ポップアップウィンドウで シングルページ をテンプレートタイプとして使用し、テンプレートに「Enterprise Service Page Template」などの名前を付けます。

ページタイプの選択

1. テンプレートギャラリーの上部で "ページ" ラベル
2. 利用可能なページテンプレートのライブラリをブラウズします。検索ボックスを使用して、「サービス」や「会社」など、適切なテンプレートスタイルを見つけることができます。

3. 特定のタイプのページ専用であれば、条件設定で特定の条件を追加することもできます。

ステップ2：Elementorでコンテナを作成する

1,コンテナの追加

ページで"新しいコンテナの追加"をクリックし、ページデザインエリアにドラッグします。このコンテナは垂直スティッキーヘッダーの親コンテナとなります。

2,コンテナの向きの設定

コンテナを選択し、左側の設定パネルでコンテナの向きを 垂直つまり、コンテンツを垂直に積み重ねることができるように、垂直に整列させます。このステップが、垂直見出しを実現する鍵です。

3,コンテナ幅の定義

で "タイプ"タブで、コンテナの幅を200px以下のような適切なサイズに設定し、ページ上でスペースを取りすぎないようにします。この幅は、ページのデザインや要件に応じてカスタマイズすることができます。

ステップ3: 垂直スティッキーナビゲーションバーの作成

見出しとナビゲーション項目の挿入

• コンテナに"キャプション"ウィジェットのタイトルを "クイックナビゲーション "または "カタログ "に設定します。

リストを追加

• タイトルの下タイトルと同じコンテナに追加し続けます。 アイコン一覧 もしかしたら ボタンウィジェットナビゲーションアイテムとして使用アイコンのリストを使用します。.

• 追加しました：

プロジェクトの追加

• 会社概要クリックすると会社概要のページにジャンプします。
• サービス内容サービスライン紹介エリアへ移動します。
• お客様の声: 「お客様の声」のセクションにジャンプします。
• お問い合わせ: お問い合わせ先とフォームへジャンプします。

名前とアイコンは変更可能です。

アンカーリンクの設定

各ナビゲーション項目のボタンやアイコンのリストにアンカーリンクを追加します。ページの各コンテンツ・セクションにアンカーを設定します。 1TP5弊社についてそして#サービスそして#お客様の声そして#コンタクト その他

• セットアップ会社概要アンカーポイント
  • Elementorエディタで 「メニューアンカー ウィジェットウィジェットを「会社概要」セクションのタイトルの上（または他の適切な場所）にドラッグします。ウィジェットの設定で、アンカーポイントの名前を入力します（例えば 会社概要)にリンクすることができます。

• アンカーリンクの設定
  • アイコン一覧に戻る会社概要を追加します。1TP5弊社についてアンカーリンクの後にあるジャンプをクリックしてください。

• 残りのメニュー項目もこの手順に従ってアンカーリンクを設定します。

ナビゲーションバーのスタイルのカスタマイズ

• で "タイプ"タブで、ウェブサイトのスタイルに合わせてフォント、色、間隔をカスタマイズできます。

• コンフィギュラブル背景色また、余白や影の効果により、ナビゲーションバーをより分かりやすく、独立したものにしました。

ステップ4：スティッキー効果の設定

ユーザーがスクロールしている間、サイドバーを固定させるには、以下の手順に従ってください：

1. ナビゲーション・バーとコンテンツ・エリアのCSS IDの設定

ナビゲーション・バー・コンテナを選択し、"高いレベル "タブで設定します。サイドバー .

• カスタムCSSコードの追加

ElementorでカスタムCSSを開きます（グローバル設定またはナビゲーションバーコンテナのカスタムCSS）。以下のコードを追加します：

#sidebar{
    position: fixed; /* サイドバーの位置は固定で、スクロールしても動きません */
    left: 0; /* サイドバーをページの左側に配置 */
    top: 0; /* サイドバーはページ上部から開始します */
    height: 100vh; /* サイドバーの高さをビューポートの高さに設定 */
    width: 200px; /* 必要に応じてサイドバーの幅を調整します */
    z-index: 10; /* サイドバーが他の要素の上にあることを確認します */
    padding-top: 250px; /* 必要に応じて上部の内マージンを調整します */
    overflow-y: auto; /* サイドバーのコンテンツが長い場合、スクロールを許可します */
    display: flex; /* フレックスボックス・レイアウトを使用 */
    flex-direction: column; /* コンテンツを垂直に配置 */ justify-content: center; //
    justify-content: center; /* コンテンツを垂直方向に中央揃え */
}
#sidebar{
    position: fixed; /* サイドバーの位置は固定で、スクロールしても動きません */
    left: 0; /* サイドバーをページの左側に配置 */
    top: 0; /* サイドバーはページ上部から開始します */
    height: 100vh; /* サイドバーの高さをビューポートの高さに設定 */
    width: 200px; /* 必要に応じてサイドバーの幅を調整します */
    z-index: 10; /* サイドバーが他の要素の上にあることを確認します */
    padding-top: 250px; /* 必要に応じて上部の内マージンを調整します */
    overflow-y: auto; /* サイドバーのコンテンツが長い場合、スクロールを許可します */

    display: flex; /* フレックスボックス・レイアウトを使用 */
    flex-direction: column; /* コンテンツを垂直に配置 */ justify-content: center; //
    justify-content: center; /* コンテンツを垂直方向に中央揃え */
}
#sidebar{
    position: fixed; /* サイドバーの位置は固定で、スクロールしても動きません */
    left: 0; /* サイドバーをページの左側に配置 */
    top: 0; /* サイドバーはページ上部から開始します */
    height: 100vh; /* サイドバーの高さをビューポートの高さに設定 */
    width: 200px; /* 必要に応じてサイドバーの幅を調整します */
    z-index: 10; /* サイドバーが他の要素の上にあることを確認します */
    padding-top: 250px; /* 必要に応じて上部の内マージンを調整します */
    overflow-y: auto; /* サイドバーのコンテンツが長い場合、スクロールを許可します */

    display: flex; /* フレックスボックス・レイアウトを使用 */
    flex-direction: column; /* コンテンツを垂直に配置 */ justify-content: center; //
    justify-content: center; /* コンテンツを垂直方向に中央揃え */
}

ステップ 5: 背景スタイルとシャドウ効果の追加（オプション）

背景色の設定
で "タイプ"タブで適切な背景色を選択し、ページ上でコンテナが明確に区別できるようにします。

シャドウ効果の追加
付箋のタイトルをより階層的に見せるために、「ボックスシャドウ」で影の効果を設定し、ページ上でホバーしているような視覚効果を持たせることができます。

ステップ6：プレビューと公開

1. プレビュー効果
   ページをクリックしてください。プレビュー"ボタンをクリックして、ページがスクロールされたときのスティッキーヘッダーの動作を確認してください。スクロール時にコンテナが常にページの上部に固定され、他の要素によって上書きされないことを確認してください。
2. 調整
   プレビュー効果に従って、タイトルコンテンツのコンテナのサイズ、配置、マージンを調整し、コンテンツが明確で、ページ上の他の要素のレイアウトに影響を与えないようにします。
3. ローンチページ
   すべてが正しく動作していることを確認した後、" をクリックします。ポスト「ボタンをクリックして、ページをオンラインにします。縦型付箋ヘッダーが作成されました。

概要

縦方向のスティッキーヘッダーは、ページの横に固定され、ユーザーがスクロールしても表示され続けるナビゲーションバーです。Elementorでこのようなヘッダーを作成するには、いくつかの重要なステップがあります: まず、単一ページのテンプレートを作成し、スティッキーヘッダーバーの本体として垂直方向のコンテナを追加します。次に、各項目のアンカーリンクを持つアイコンまたはボタンウィジェットのリストを使用して、見出しとナビゲーション項目をコンテナに追加します。次に、CSSコードを適用してサイドバーを固定し、スクロール時に常に表示されるようにします。