Divi ページにスティッキー マップ モジュールを追加する方法

公開: 2023-06-14

Divi に組み込まれたスティッキー設定を使用すると、ページを下にスクロールしている間、要素を画面上に「スティッキー」または固定したままにすることができます。 他の非粘着要素と組み合わせると、目を引く魅力的なレイアウトを実現し、Web サイトのデザインを次のレベルに引き上げることができます。 このチュートリアルでは、スティッキー マップ モジュールを Divi ページに追加する方法を説明します。 マップ モジュールを固定したままにして、マップの横にスクロールする関連情報を追加します。

さっそく始めましょう!

目次
  • 1スニークピーク
  • 2始めるために必要なもの
  • 3 Divi ページにスティッキーマップモジュールを追加する方法
    • 3.1既製のレイアウトで新しいページを作成する
    • 3.2スティッキーマップモジュールのレイアウトの変更
    • 3.3スティッキーマップモジュールの追加
  • 4最終結果
  • 5最終的な考え

スニークピーク

これが私たちがデザインするもののプレビューです

Divi スティッキー マップ モジュールの最終結果を追加 モバイル

始めるために必要なもの

始める前に、Divi テーマをインストールしてアクティブ化し、Web サイトに Divi の最新バージョンがあることを確認してください。

これで、始める準備が整いました。

Divi ページにスティッキー マップ モジュールを追加する方法

既製のレイアウトで新しいページを作成する

まずは、Divi ライブラリから既製のレイアウトを使用してみましょう。 このデザインでは、Craft School Layout Pack の Craft School ランディング ページを使用します。

Web サイトに新しいページを追加してタイトルを付け、Divi Builder を使用するオプションを選択します。

Divi ビルダーを使用してスティッキー マップ モジュールを追加

この例では、Divi ライブラリの既成レイアウトを使用するため、[レイアウトの参照] を選択します。

Divi スティッキーマップモジュールの追加 レイアウトの参照

Craft School ランディング ページを検索して選択します。

Divi スティッキーマップモジュールを追加してレイアウトを検索

「このレイアウトを使用」を選択して、ページにレイアウトを追加します。

Divi スティッキーマップモジュールの使用レイアウトを追加

これで、デザインを構築する準備が整いました。

スティッキー マップ モジュールのレイアウトの変更

サインアップCTA

ページの「スタジオ メンバーシップ」セクションまでスクロールします。 次に、下に新しいセクションを追加します。

Divi スティッキー マップ モジュールの挿入セクションを追加

セクション設定を開き、背景色を追加します。

  • 背景: #fcf8f3

Divi スティッキー マップ モジュールの背景を追加

次に、「通話またはオンライン参加」行をこの新しいセクションに移動します。

Divi スティッキーマップモジュールを追加して行を移動

行設定を開き、「詳細」タブに移動します。 [位置] 設定で、位置を [絶対] から [デフォルト] に変更します。

  • 位置: デフォルト

Divi スティッキーマップモジュールの位置を追加

「スタジオに遊びに来てください」セクション

Studio Memberships セクションの下に 2 つの列を持つ新しい行を追加します。

Divi スティッキーマップモジュールの挿入行を追加

次に、その行を Studio メンバーシップ セクションの上に移動します。

Divi スティッキーマップモジュールを追加して行を移動

見出し設定

テキストモジュールを右側の列に追加します。

Divi スティッキーマップモジュールを追加 テキストを挿入

テキストを追加します。

  • H2: スタジオに遊びに来てください!

Divi スティッキーマップモジュールを追加 テキストを追加

次に、「デザイン」タブに移動し、見出しテキストの設定を開きます。 次のようにフォントをカスタマイズします。

  • 見出し2フォント:遊星マジック

Divi スティッキー マップ モジュール フォントを追加

次に、フォント サイズと行の高さをカスタマイズします。 組み込みのレスポンシブ オプションを使用して、タブレットやモバイル デバイスにさまざまなテキスト サイズを追加します。

  • 見出し 2 のテキスト サイズ デスクトップ: 50px
  • 見出し 2 のテキスト サイズ タブレット: 30px
  • 見出し 2 のテキスト サイズ モバイル: 24px
  • 見出し 2 行の高さ: 1.2 em

Divi スティッキー マップ モジュールの見出しサイズを追加

テキスト設定

「Come Visit The Studio」テキストの下に別のテキスト モジュールを追加します。

Divi スティッキーマップモジュールを追加 テキストを追加

次のテキストを挿入します。

  • H3: 住所
  • 段落: 1234 Divi St. #1000 San Francisco, CA 33945

Divi スティッキーマップモジュールのアドレステキストを追加

「デザイン」タブで、テキストのスタイルを変更します。

  • テキストのフォント: Open Sans
  • テキストサイズデスクトップ: 16px
  • タブレットの文字サイズ: 15px
  • テキストサイズモバイル: 13px

Divi スティッキー マップ モジュールのテキスト フォントを追加

次に、見出しスタイルを変更します。

  • 見出し 3 のフォント: Open Sans
  • 見出し 3 のフォントの太さ: 太字
  • 見出し 3 のフォント スタイル: 大文字 (TT)

Divi スティッキーマップモジュール H3 フォントを追加

次に、文字サイズと文字間隔を変更します。 もう一度、レスポンシブ設定を使用して、画面サイズごとに異なるテキスト サイズを設定します。

  • 見出し 3 のテキスト サイズ デスクトップ: 14px
  • 見出し 3 のテキスト サイズ タブレット: 13px
  • 見出し 3 のテキスト サイズ モバイル: 12px
  • 見出し 3 の文字間隔: 3px

Divi スティッキーマップモジュール H3 サイズを追加

アドレスモジュールの下に別のテキストモジュールを追加します。

次に、次の内容を本文に追加します。

  • 本文: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet elit、eget tincidunt nibh pulvinar a。 資料を調べたり、不当な情報を収集したり、SEM でのポートティターを作成したりできます。 前庭は、アメット・クアム・ヴェヒキュラ・エレメントに座って、アメット・デュイに座ります。 Praesent sapien massa、convallis a pellentesque nec、egestas non nisi。 キュラビトゥール ノン ヌラ シート アメット ニスル テンパス convallis quis ac lectus。 ドネク・ルトルム・コング・レオ・エゲット・マレスアダ。 ドネク・ルトルム・コング・レオ・エゲット・マレスアダ。 ドネク・ソリチュディン・モルスティ・マレスアダ。 Curabitur aliquet quam id dui posuere blandit。

Divi スティッキーマップモジュールを追加 テキストを追加

「デザイン」タブに移動してフォントをカスタマイズします。

  • テキストのフォント: Open Sans

Divi スティッキーマップモジュールのフォント設定を追加

次に、テキストのサイズと行の高さをカスタマイズします。

  • テキストサイズデスクトップ: 15px
  • テキストサイズモバイル: 13px
  • テキスト行の高さ: 1.9em

Divi スティッキーマップモジュールのテキストサイズを追加

ボタン設定

追加したテキストの下のセクションにボタン モジュールを追加します。

Divi スティッキーマップモジュールの追加ボタン

ボタンのテキストを「詳細」に設定します。

  • ボタン: 詳細はこちら

Divi スティッキー マップ モジュール ボタンのテキストを追加

次にデザインタブに移動し、ボタン設定を開きます。 カスタム スタイルを有効にします。

  • ボタンにカスタム スタイルを使用: はい
  • ボタンのテキストサイズ: 12px
  • ボタンのテキストの色: #FFFFFF

Divi スティッキー マップ モジュールのカスタム スタイルを追加

ボタンの背景と境界線の幅をカスタマイズします。

  • ボタンの背景: #d5b38e
  • ボタンの境界線の幅: 0px

Divi スティッキー マップ モジュール ボタンの背景を追加

ボタンの境界線の半径、文字間隔、フォントを変更します。

  • ボタンの境界線の半径: 0px
  • ボタンの文字間隔: 3px
  • ボタンのフォント: Open Sans
  • ボタンのフォントの太さ: 太字
  • ボタンのフォント スタイル: 大文字 (TT)

Divi スティッキーマップモジュールボタンのフォントを追加

最後に、ボタンにパディングを追加します。

  • パディングトップ: 15px
  • パディング - 下部: 15px
  • 左パディング: 30px
  • パディング右: 30px

Divi スティッキーマップモジュールボタンパディングを追加

スタジオメンバーシップセクション

次に、Studio Memberships セクションを変更します。 まず、行レイアウトを 2 つの等しい列に変更します。

Divi スティッキーマップモジュールの行レイアウトを追加

次に、大きな画像を右の列の「スタジオ メンバーシップ」テキスト モジュールの上に移動します。

Divi スティッキーマップモジュールを追加して画像を移動

スクロール画像設定

スクロールする陶器の小さな画像を、移動した大きな画像の上の右列に移動します。

Divi スティッキーマップモジュールを追加して画像を移動

小さい画像のモジュール設定を開きます。 [サイズ設定] で、レスポンシブ設定を使用して、モバイル デバイスに異なる幅を設定します。

  • 幅-モバイル: 35%

[詳細設定] タブで、[位置] 設定を開き、水平オフセットを追加します。 これにより、小さな画像を大きな画像の側面に重ねて表示することができ、立体感が増し、よりユニークなレイアウトが作成されます。

  • 水平オフセット: -30px

Divi スティッキー マップ モジュールの水平オフセットを追加

最後に、スクロール効果を開き、垂直方向の動きの終了オフセットを調整します。

  • 終了オフセット: -1

Divi スティッキー マップ モジュールの終了オフセットを追加

スタジオ メンバーシップのテキスト

Studio Memberships テキスト モジュール設定を開きます。 モジュールから背景を削除します。

Divi スティッキー マップ モジュールを追加して背景を削除

次に、行の設定を開き、列 2 の設定を開きます。

Divi スティッキー マップ モジュールの列 2 設定を追加

「デザイン」タブの「間隔」設定で、既存の下部パディングを削除します。

Divi スティッキー マップ モジュールの追加 パディングの削除

セクションの背景

セクション設定を開きます。 背景設定で、背景画像を追加します。 メディア ライブラリから craft-school-24.png を選択します。

Divi スティッキーマップモジュールを追加 背景画像を追加

スティッキーマップモジュールを追加する

レイアウトが変更されたので、スティッキー マップ モジュールを追加できます。 マップ モジュールは左側の列に表示され、右側のコンテンツをスクロールしてもその位置に留まります。 始めましょう。

まず、「Come Visit The Studio」行の左列にマップ モジュールを追加します。

Divi スティッキーマップモジュールを追加 マップモジュールを追加

マップ設定を開き、マップ中心の住所を追加します。 このチュートリアルでは、カリフォルニア州サンフランシスコをマップの中心に置きます。

Divi スティッキー マップ モジュールのマップ センター アドレスを追加

次に、マップにピンを追加します。 これもカリフォルニア州サンフランシスコに設定します。

Divi スティッキー マップ モジュールのマップ ピンを追加

マップデザイン

「デザイン」タブで、マップ設定を開きます。 これらの設定を使用して、マップの表示方法を完全にカスタマイズできます。 このチュートリアルでは、マップをこのページの落ち着いた色と一致させる必要があるため、マップの彩度を変更します。

  • マップの彩度: 56%

Divi スティッキー マップ モジュールのマップの彩度を追加

次に、境界線の設定を開き、次のように境界線をカスタマイズします。

  • 枠線の幅: 20px
  • 枠線の色: #fcf8f3

Divi スティッキーマップモジュールの境界設定を追加

[ボックス シャドウ] 設定を開き、マップ モジュールにシャドウを追加します。

  • ボックスの影: 下

Divi スティッキー マップ モジュール ボックス シャドウを追加

スティッキー設定

次に、スクロール中に地図が所定の位置に固定されるように、固定設定を追加しましょう。 「詳細設定」タブに移動し、「スクロール効果設定」を開きます。 モバイル デバイスではマップがスティッキーにならないため、応答性のオプションを使用してスティッキー位置の設定を変更します。

  • 固定位置デスクトップ: 上部に固定
  • タブレットとモバイルの固定位置: 固定しないでください
  • スティッキートップのオフセット: 20px
  • 下部スティッキー制限: セクション

Divi スティッキーマップモジュールのスクロール効果を追加

次に、「デザイン」タブに戻り、サイズ設定を開きます。 マップがスティッキー状態のときにマップの高さを増加させたいと考えています。 別の高さを設定するには、スティッキー設定を使用します。

  • スティッキー時の高さ: 600px

Divi スティッキー マップ モジュールの高さを追加

最後に、レスポンシブ設定を使用して、タブレットとモバイルのマップ サイズを変更します。

  • タブレットとモバイルの高さ: 350px

Divi スティッキー マップ モジュールのモバイル高さを追加

最終結果

次に、実際のスティッキー マップ モジュールを見てみましょう。

Divi スティッキー マップ モジュールの最終結果を追加 モバイル

最終的な考え

Divi のスティッキー設定を使用すると、動きで目を引く動的な Web サイトのレイアウトを作成できます。 利用可能なすべてのカスタマイズ オプションを使用すると、Web サイト上のあらゆる要素を固定化し、好みに合わせてデザインを正確に変更できます。 このデザインではマップ モジュールをスティッキーにすることで、Web サイトの位置情報を強調し、ページに独自のデザイン要素を追加します。 Divi のスティッキー設定に関する詳しいチュートリアルについては、ページへのスティッキーお問い合わせフォームの追加に関するこの記事をご覧ください。 Web サイトでスティッキー要素を使用していますか? コメントでぜひご意見をお聞かせください。