固定マップトグルをDiviページテンプレートに追加する方法

実店舗を運営していて、そのためのWebサイトを作成している場合、多くの人があなたのWebサイトにアクセスして、住所などの実用的な情報を入手する可能性があります。 もちろん、ここで連絡先ページが役に立ちますが、連絡先の詳細を訪問者とシームレスに共有できるのはそれだけではありません。 あなたがあなたの会社の住所を共有することにアプローチする創造的な方法を探しているなら、あなたはこのチュートリアルを好きになるでしょう。 Diviのテーマビルダーを使用して、固定マップトグルを各ページに動的に追加する方法を紹介します。 まず、新しいページテンプレートを作成します。 次に、動的ページコンテンツをテンプレートの本体の横に含め、動的ページコンテンツの上に固定マップトグルを追加します。 テンプレートJSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

ページテンプレートを無料でダウンロード

無料のページテンプレートを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

1.Diviテーマビルダー内にページテンプレートを作成します

Diviテーマビルダーに移動し、新しいページテンプレートを追加します

このチュートリアルは、Divi Theme Builderに移動し、新しいページテンプレートを追加することから始めます。

テンプレートのボディ領域を入力してください

次に、「カスタムボディの作成」を選択してテンプレートのボディを入力します。

2.動的ページコンテンツを本文領域に追加します

セクション設定

間隔

テンプレートエディタに入ると、セクションが表示されます。 セクション設定を開き、デフォルトの上部と下部のパディングをすべて削除します。

• トップパディング：0px
• ボトムパディング：0px

行＃1を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

• 幅：100％
• 最大幅：100％

間隔

次に、デフォルトの上下のパディングをすべて削除します。

• トップパディング：0px
• ボトムパディング：0px

投稿コンテンツモジュールを列に追加

各ページのコンテンツを動的に表示できるようにするために、この行内でコンテンツ投稿モジュールを使用します。

3.固定マップピンデザインを作成します

行＃2をセクションに追加

カラム構造

次の行に進みます。これは、次の列構造を使用します。

サイジング

行設定を開き、[デザイン]タブに移動して、次のようにサイズ設定を変更します。

• 幅：90％
• 最大幅：
  • デスクトップ：600px
  • タブレットと電話：100％

間隔

次に、デフォルトの上下のパディングをすべて削除します。

• トップパディング：0px
• ボトムパディング：0px

列1の設定

背景色

次に、列1の設定を開き、黒い背景色を使用します。

• 背景色：＃000000

背景画像

次に、選択した背景画像をアップロードします。 背景画像は、このチュートリアルの最初にダウンロードできるzipフォルダーにあります。

主な要素CSS

次のCSSコード行も列のメイン要素に追加します。

width: 80% !important;
max-height: 80vh;

可視性

次に、垂直オーバーフローを自動にします。 これは、前の手順の最大高さと組み合わせて、列が80vhの高さを超えるとすぐにスクロールバーが表示されるようにします。

• 垂直オーバーフロー：自動

列2の設定

主な要素CSS

次に列2の設定を開き、CSSコードの次の行をメイン要素に適用します。

width: 12% !important;

マップモジュールを列1に追加

列1のマップモジュールから始めて、モジュールを追加します。選択したマップピンを追加します。

サイジング

モジュールの[デザイン]タブに移動し、次のようにサイズ設定を変更します。

• 幅：88％
• モジュールの配置：中央

間隔

次に、デフォルトの下マージンを削除します。

• 下マージン：0px

列1に宣伝文モジュールを追加する

コンテンツを追加する

列1のマップモジュールの下に宣伝文モジュールを追加します。選択したコンテンツを使用します。

アイコンを選択

次にアイコンを選択します。

画像/アイコンの設定

[デザイン]タブに移動し、アイコンの設定を次のように変更します。

• アイコンの色：#ffffff
• 画像/アイコンの配置：左

タイトルテキスト設定

次に、タイトルテキストのスタイルを設定します。

• タイトルフォントの太さ：太字
• タイトルテキストの色：#ffffff
• タイトルテキストサイズ：16px
• タイトルラインの高さ：1.6em

本文の設定

次に、それに応じて本文の設定を変更します。

• 本文の色：#ffffff
• 本文のサイズ：
  • デスクトップ：16px
  • タブレット：14px
  • 電話番号：13px
• ボディラインの高さ：1.8em

間隔

次のパディング値も適用します。

• トップパディング：70px
• ボトムパディング：70px
• 左パディング：7％
• 右パディング：7％

アニメーション

そして、アニメーション設定でデフォルトのモジュールアニメーションを削除します。

• 画像/アイコンアニメーション：アニメーションなし

列2に宣伝文モジュールを追加する

コンテンツボックスを空のままにします

列2に進みます。そこで、コンテンツなしの宣伝文モジュールを追加します。

アイコンを選択

次にアイコンを選択します。

背景色

次に、背景色を変更します。

• 背景色：＃0045ff

画像/アイコンの設定

[デザイン]タブに移動し、それに応じてアイコン設定のスタイルを設定します。

• アイコンの色：#ffffff
• 画像/アイコンの配置：上
• 画像/アイコンの配置：中央
• アイコンのフォントサイズを使用：はい
• アイコンフォントサイズ：25px

サイジング

次に、サイズ設定を変更します。

• 幅：70px
• 高さ：70px

間隔

次に、デフォルトの下マージンを削除します。

• 下マージン：0px

ボックスシャドウ

ボックスシャドウも含めます。

• ボックスシャドウの水平位置：6px
• ボックスシャドウの垂直位置：6px
• 影の色：rgba（0,0,0,0.3）

主な要素と宣伝文の画像CSS

次に、[詳細設定]タブに移動し、メイン要素に次のCSSコード行を使用します。

display: flex;
justify-content: center;
align-items: center;

そして、このCSSコードの行を[宣伝文]ボックス内に追加します。

margin-bottom: 0;

4.トグル機能を追加します

行＃2にCSSクラスを追加します

すべての要素が整ったので、次は機能に焦点を当てます。 2番目の行を開き、次のCSSクラスを適用することから始めます。

• CSSクラス：map-toggle-row

列2の宣伝文句モジュールにCSSクラスを追加します

次に列2の宣伝文モジュールを開き、次のCSSクラスを使用します。

• CSSクラス：map-toggle

列2の宣伝文句モジュールの下にコードモジュールを追加します

次に、列2の宣伝文モジュールの下にコードモジュールを追加します。

スタイルとスクリプトタグを追加する

コードボックス内にいくつかのスタイルタグとスクリプトタグを配置します。

CSSコードを挿入

スタイルタグ内で次のCSSコードを使用しています。

.map-toggle-row {
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.reveal-map{
left: 0 !important;
}

.map-toggle {
cursor: pointer;
}

JQueryコードを挿入する

そして、scriptタグ内の次のJQueryコード：

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('.map-toggle');
var toggleRow = $('.map-toggle-row');

toggleIcon.click(function(){
toggleRow.toggleClass('reveal-map');
});

});
});

行＃2に水平オフセットのある固定位置を追加します

最後になりましたが、それに応じて2番目の行の位置設定を変更する必要があります。

• 位置：固定
• 場所：左中央
• 水平オフセット：
  • デスクトップ：-500px
  • タブレットと電話：-72％
• Zインデックス：11

5.ページとテーマビルダーの変更を保存します

すべての変更が適用されたら、Divi Theme Builderのすべての変更を保存して、Webサイトで結果を表示できます。

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

このチュートリアルでは、ページデザイン全体にビジネスの住所の詳細をクリエイティブに含める方法を示しました。 具体的には、固定マップトグルを含むページテンプレートを作成して、訪問者がいつでもあなたのビジネスの場所にアクセスできるようにする方法を示しました。 テンプレートJSONファイルも無料でダウンロードできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。