排他的なサイバーマンデーベーカリーレイアウトパックを使用してあなたのビジネスのための場所ページを作成する方法

今年、サイバーマンデーディールを手に入れるということは、たくさんの無料のものも手に入れることを意味します！ 25％の割引に加えて、新しいエレガントテーマメンバーシップを購入したり、既存のアカウントをアップグレードしたりする（またはすでにライフタイムメンバーシップを持っている）すべての人に、サイバーマンデーセール中にのみダウンロードできる6つの無料の限定レイアウトパックが提供されます。

消える前に独占レイアウトをダウンロードしてください！

すでに生涯会員ですか？ 今すぐパックをダウンロードできます。サイバーマンデーセールに参加する必要はありません。

独占サイバーマンデーベーカリーレイアウトパックの内部を見る

ライフタイムメンバーおよびサイバーマンデーの新規顧客として提供している限定レイアウトパックの1つは、ベーカリー向けです。 それはどんなパン屋のウェブサイトも魅力的にする5つのおいしいページで構成されています。

ランディングページのデザイン

消える前に独占レイアウトをダウンロードしてください！

すでに生涯会員ですか？ 今すぐパックをダウンロードできます。サイバーマンデーセールに参加する必要はありません。

レシピページのデザイン

消える前に独占レイアウトをダウンロードしてください！

すでに生涯会員ですか？ 今すぐパックをダウンロードできます。サイバーマンデーセールに参加する必要はありません。

メニューページのデザイン

消える前に独占レイアウトをダウンロードしてください！

すでに生涯会員ですか？ 今すぐパックをダウンロードできます。サイバーマンデーセールに参加する必要はありません。

ページデザインについて

消える前に独占レイアウトをダウンロードしてください！

すでに生涯会員ですか？ 今すぐパックをダウンロードできます。サイバーマンデーセールに参加する必要はありません。

お問い合わせページのデザイン

消える前に独占レイアウトをダウンロードしてください！

すでに生涯会員ですか？ 今すぐパックをダウンロードできます。サイバーマンデーセールに参加する必要はありません。

独占サイバーマンデーベーカリーレイアウトパックを入手

このユースケースに入る前に、新しいエレガントなテーマメンバーになるか、既存のアカウントをアップグレードするか、すでに私たちの生涯メンバーになることで入手できる、独占サイバーマンデーベーカリーレイアウトパックを手に入れる必要があります。 すでに生涯メンバーである場合は、メンバーエリアにログインして、ここからすべての専用レイアウトパックをダウンロードできます。 他のすべての人は、チュートリアルの残りの部分を実行する前に、下のボタンを使用して購入またはアップグレードする必要があります。

消える前に独占レイアウトをダウンロードしてください！

すでに生涯会員ですか？ 今すぐパックをダウンロードできます。サイバーマンデーセールに参加する必要はありません。

排他的なサイバーマンデーベーカリーレイアウトパックを使用してあなたのビジネスのための場所ページを作成する方法

この投稿の残りの部分では、サイバーマンデーの取引を利用したか、すでに生涯メンバーであり、ベーカリーレイアウトパックにアクセスできることを前提としています。

メンバーエリアから新しいベーカリーレイアウトパックをダウンロードしたら、下のビデオを見て、セットアップがいかに簡単かを確認できます。 また、このチュートリアルに従って、サイトをさらにカスタマイズできるようにすることをお勧めします。

それでは、ユースケース自体に取り掛かりましょう。

複数の場所を持つ会社のWebサイトを構築するときは、その情報を訪問者に伝えるための最良の方法を考えることが重要です。 彼らは、どの場所が自分に最も近いか、そしてその場所に固有の重要な情報を知る必要があります。 そして、ウェブサイトの場所ページを構築することは素晴らしいスタートです。

このユースケースでは、Bakery Layout Packを使用して、ビジネス向けの専門的な場所のページを作成するのがいかに簡単であるかをお見せします。

Bakery Contact Page Layoutのフレームワークを使用して、マップモジュールにピンを追加して、ビジネスのすべての場所を反映する方法と、各場所の重要な情報を表示するための適切に編成および設計されたセクションを示します。 レイアウトですでに提供されているデザイン要素を使用できるため、このプロセスはさわやかで楽しいものです（少なくとも私にとってはそうです）。

始めましょう。

連絡先レイアウトを使用してロケーションページを作成することから始めます

Bakery Contactページのレイアウトは、新しいLocationsページの基盤として使用するのに最適です。 上部にマップモジュールがあり、これを使用して会社の各場所を紹介します。 さらに、必要に応じて再配置および変更できるようにすでに設計されているテキストモジュールなどの他の要素がいくつかあります。

新しいページを作成する

まず、新しいページを作成してタイトル（「OurLocations」など）を付け、クリックしてdivi Builderを使用し、次にvisualBuilderを使用する必要があります。

パン屋の連絡先ページのレイアウトを読み込む

この時点で、ページレイアウトがDiviライブラリにアップロードされているはずです。 ページの下部にある紫色のメニューをクリックして開き、プラスアイコンの付いた[ライブラリから追加]ボタンを選択します。 [ライブラリ]タブからロードを選択し、リストからパン屋の連絡先レイアウトを選択します。 レイアウトはすぐにページに読み込まれます。

公開。

特定の位置情報のセクションを追加する

連絡先ページには、特定の場所の追加コンテンツを作成するために使用するコンテンツはほとんどありません。 それでは、Bakery Landingページに移動し、ページの2番目のセクションから行を選択して、ライブラリに保存しましょう。

次に、場所のページに戻ります。 お問い合わせフォームを含むページの下部にあるセクションを複製します（これは削除しないでください。後で必要になります）。 マップのすぐ下のセクションで、セクションから行全体を削除し、ライブラリから保存した行を追加します。

次に、行の列レイアウトを2 / 3、1 / 3レイアウトに変更します。

下部セクションの右側の列にあるアドレスの内容を含むテキストモジュールを見つけます。 その上のセクションの行の右側の列にある画像モジュールの下にドラッグします。

次に、左側の列のテキストモジュールのコンテンツを更新して、特定の会社の場所を表します。 私の例では、以下を追加します。

本社
ニューヨーク市

次に、右側の列の画像モジュールを更新して、会社の場所の画像を含めます。

これは、特定の場所の宣伝文句のそれぞれに適したセクションとして機能します。

これで、このセクションを複製して場所を追加するだけです。

このセクションを2回複製して、合計3つのロケーションセクションを作成します。 次に、中央の場所のセクションの背景色を白に変更して、セクションをより適切に分割できるようにします。

次に、複製されたセクションを場所固有のコンテンツで更新します。 この例では、ニューヨークの場所に加えて、サンフランシスコとヒューストンのセクションも作成します。

お問い合わせフォームのフッターセクションを設計する

下部に保存した、お問い合わせフォームを含むセクションを思い出してください。 これは、ロケーションページの優れたフッターセクションとして機能します。 私たちがする必要があるのはそれを少し微調整することです。

まず、右の列の残りのモジュールを削除しましょう。 次に、行の列のレイアウトを1列のレイアウトに更新します。 これで、1列の行にあるお問い合わせフォームだけが表示されます。

次にクリックして行設定を編集し、以下を更新します。

[コンテンツ]タブの下…

背景色：#ffffff

[デザイン]タブの下…

カスタムパディング：上5％、右5％、下5％、左5％

ボックスシャドウ：[ボックスシャドウを選択]

次に、セクションの背景画像を追加しましょう。 セクション設定に移動し、レイアウトに含まれている背景画像の1つを選択します。

素晴らしい！ 次に、マップモジュールに移ります。

GoogleAPIキーを追加します

この時点で、必ずGoogle APIキーを作成し、それをテーマオプションに追加する必要があります。

新しいロケーションピンでマップモジュールを更新します

この時点で、ほとんどのページが完成しています。 残っているのは、ページ上部のマップモジュールの更新だけです。 ページセクションで作成した3つのセクション（ニューヨーク市、サンフランシスコ、ヒューストン）に新しいピンの場所を追加する必要があります。

クリックしてマップモジュールを編集し、次のように設定を更新します。

モジュールに表示されている1つのピンを消去して、最初からやり直します。 次に、新しいピンを追加し、次のように設定を更新します。

タイトル：ニューヨークシティベーカリー
コンテンツ：詳細
マップピンアドレス：ニューヨーク市

[検索]ボタンをクリックします。

次に、新しいピンを追加し、次のように設定を更新します。

タイトル：サンフランシスコベーカリー
コンテンツ：詳細
マップピンアドレス：サンフランシスコ

[検索]ボタンをクリックします。

次に、新しいピンを追加し、次のように設定を更新します。

タイトル：ヒューストンベーカリー
コンテンツ：詳細
マップピンアドレス：テキサス州ヒューストン

[検索]ボタンをクリックします。

マップセンターの住所はニューヨーク市のままにしておくことができます。 ただし、訪問者が最初に地図を表示したときにすべての場所を表示できるように、地図の表示を調整してズームアウトします。

ピンコンテンツボックスにアンカーリンクを追加する

追加機能として、ピンをクリックしたときに表示されるピンコンテンツ内にアンカーリンクを追加することで、ユーザーエクスペリエンスを向上させることができます。 このアンカーリンクは、ユーザーをページの下に移動して、その場所の情報を表示するページの特定のセクションに移動します。

マップモジュール設定を開き、最初のピン設定を編集します。 「詳細」と書かれたコンテンツボックスのテキストを強調表示し、リンクアイコンをクリックしてリンクにします。 URLに「#newyork」と入力し、[OK]をクリックします。

サンフランシスコのピン（URL「#sanfran」を使用）とヒューストンのピン（URL「#houston」を使用）に対して同じことを行います。

これで、ピンで作成したリンクURLに対応するカスタムCSSIDを各セクションに追加するだけです。

「ニューヨーク市」セクションの場合は、「詳細設定」タブのセクション設定をCSS ID「newyork」で更新し、設定を保存します。

これで、ユーザーがニューヨークのピンの「詳細」リンク（URL #newyork）をクリックすると、ページがそのセクションにジャンプします。

サンフランシスコセクション（CSS ID「sanfran」を使用）とヒューストンセクション（CSS ID「houston」を使用）についても同じようにします。

それでおしまい。 これですべて完了です。