Diviで結婚式のお知らせのホームページを作成する方法

公開: 2017-05-16

この投稿は、ミニシリーズ「Diviでエレガントなウェディングウェブサイトを作成する方法」のパート1です。 このシリーズでは、あなた自身またはDiviのクライアントのために結婚式のウェブサイトを作成する上で最も重要な部分を紹介します。

結婚式のお知らせページを設定することは、あなたが結婚していることをゲストに知らせるための創造的な方法です。彼らにあなたのウェブサイトのURLを提供することにより、彼らは連絡を取り合うでしょう。彼らはまた彼らが望むときはいつでもオンラインで結婚式の詳細を見ることができるでしょう。

ステップバイステップで構築するのに役立つホームページのレイアウトを見てみましょう。

ナビゲーションメニューの作成

結婚式のウェブサイトのお知らせページ、ギャラリーページ、ギフトリストページを作成する方法を正確に説明します。この最初の投稿は、発表ページの作成に専念しています。しかし、そこに行く前に、ゲストがあなたのウェブサイトをスムーズに通り抜けられるようにしたいのです。

そのため、最初に適切でエレガントなナビゲーションメニューを作成する必要があります。

まず、Divi>テーマオプション>に移動し、 Webサイト全体で使用するロゴをアップロードします。

[変更を保存]をクリックして、WordPressWebサイトのページに移動します。アナウンスページを作成する新しいページを追加します。ギャラリーページとギフトリストページについても、今後の投稿で作成する方法を説明するのと同じことを行います。

今のところコンテンツを空のままにして、Webサイトのテーマカスタマイザーに移動してナビゲーションメニューを変更しましょう。 メニュー>メニューの追加>メニューへのページの追加に移動して、Webサイトのページをメニューに追加することから始めます。このメニューはあなたのウェブサイトの主要なメニューでなければなりません。

次に、 [ヘッダーとナビゲーション]> [プライマリメニューバー]に移動し、次の変更を加えます。

メニューの高さ：66
画像のサイズに応じてロゴの最大高さを調整します
テキストサイズ：16
文字間隔：2
フォント：Raleway Light
フォントスタイル：太字
テキストの色：＃9b7461
背景色：rgba（155,116,97,0.13）

次に、Header＆Navigationに戻り、HeaderFormat内でヘッダースタイルを「Centered」に変更します。

行った変更を保存して公開します。

アナウンスページで始めましょう

ウェブサイトには4つのセクションがあり、それぞれがウェブサイトにその価値をもたらし、結婚式の発表を完了させます。各セクションについて詳しく説明し、上記のレイアウトと同じデザインをどのように正確に作成できるかを示します。

ヒーローセクション（カウントダウンを含む）

デザインの最初の部分はヘッダーです。カウントダウンモジュールを入れることで、ゲストがウェブサイトや結婚式にすぐに触れられるようにすることにしました。 Divi Builder内では、ヘッダーセクションは次のようになります。

Webサイトのこの部分では、全幅モードで完全に1行の標準セクションを使用します。行セクションでは、3つのモジュールを追加する必要があります。 2つのテキストモジュールと1つのカウントダウンモジュール。 カウントダウンモジュールは、両方のテキストモジュールの中央にあります。

最初のテキストモジュールを使い始める

行にテキストモジュールを追加することから始めます。使用するテキストを入力し、[テキストの向き]を[中央]に変更して、次の変更を[詳細デザイン設定]タブに適用します。

テキストフォントサイズ：100px（デスクトップ）、80px（タブレット）、66px（電話）
テキストフォント：タンジェリン
テキストの色：＃9b857b

同じタブで、下にスクロールし、上部に「10％」、下部に「5％」を追加して、テキストモジュールの余白を変更します。

[保存して終了]をクリックします。

カウントモジュール（デスクトップ）

作成したテキストモジュールの下にカウントダウンモジュールを追加します。 [一般設定]タブで、結婚式の日時を追加し、背景色を「＃fae4de」に変更します。このカウントダウンはデスクトップでのみ使用し、タブレットと電話では無効にします。

詳細設計設定に移動し、次の変更を加えます。

数字フォント：タンジェリン
数字フォントサイズ：74px
数字のフォントの色：＃9b857b
数直線の高さ：70px
ラベルフォント：Raleway Light
ラベルフォントサイズ：14px
ラベルテキストの色：＃9b857b
ラベルラインの高さ：25px

同じタブで、一番下までスクロールし、上部のカスタムパディングを「10％」に調整し、下部のカスタムパディングを「10％」に調整します。

次に、3番目の[カスタムCSS]タブに移動し、次のコードをメイン要素に追加します。

max-width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

これで、カウントダウンは上に示したレイアウト画像のカウントダウンとまったく同じになります。

カウントダウンモジュール（タブレットと電話）

次に、前に作成したカウントダウンのクローンを作成し、（タブレットや電話ではなく）デスクトップで無効にします。次に、モジュールに次の変更を加えます。

数字フォントサイズ：72px（タブレットと電話の両方）
数直線の高さ：70px
ラベルのフォントサイズ：14px（タブレット）、12px（電話）

そして、CSSタブのメイン要素のコードを次のように変更します。

margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

2番目のテキストモジュール

次に、カウントダウンモジュールの下に、別のテキストモジュールを追加します。 [一般設定]タブで、[テキストの向き]を[中央]に変更します。続けて、新郎と新婦の名前を追加し、[デザインの詳細設定]タブに移動します。

[デザインの詳細設定]で、次の変更を行います。

テキストフォント：タンジェリン
テキストフォントサイズ：50px
テキストの色：＃9b857b
テキスト行の高さ：1.7em

[高度なデザイン設定]タブで[カスタムマージン]までスクロールし続け、上部マージンに「10％」を追加します。

仕切り

このヒーローセクションの最後の部分は仕切りです。仕切りを追加し、[全般]タブの色を「＃9b857b」に変更します。仕切りも「見える」ようになっていることを確認してください。

次に、[デザイン]タブに移動し、[ディバイダースタイル]を[ソリッド]、[ディバイダー位置]を[上]にし、ディバイダーの重みを「1px」に変更して、モバイルで非表示にします。

[CSS]タブに移動し、次のコードをメイン要素に追加します。

margin-left: auto;
margin-right: auto;
width: 30%;

[保存して終了]をクリックします。 Webサイトの最初のセクションを終了しました。これは次のようになります。

これで、このレイアウトの2番目の部分に進み、ゲストにストーリーを伝え始めることができます。

アナウンスのストーリーテリング：第2セクション

この2番目のセクションには、結婚式のホームページの一部を形成する2つの対称的な行があります。この部分の幅はわずかに狭く、Webサイトでもう少し遠近感を生み出します。

セクションの最初の行

標準セクションを作成することから始め、背景色を「＃fffaf6」に変更し、下部パディングに「5％」を追加します。次に、このセクションに2列の行を追加します。

次に、行の設定を開きます。 [一般設定]で、[はい]を選択してカスタム幅を使用し、単位をパーセンテージに変更して、[90％]を入力します。同じタブを下にスクロールし、ガター幅をアクティブにして、携帯電話とタブレットを非表示にします。

次に、[高度なデザイン設定]タブに移動し、列の高さを等しくして、最初の列の背景色として「＃9b857b」を追加します。同じタブで、列1のパディングを上に「5％」、右に「10％」、下に「5％」、左に「10％」に変更します。

2番目の列では、背景色を設定する必要はありませんが、代わりに背景画像をアップロードします。

テキストモジュール

次に、行の最初の列にテキストモジュールを追加します。 [一般設定]タブで、テキストの向きを[中央]に設定し、共有するテキストをテキストボックスに入力します。次に、[詳細設計設定]タブに移動します。

[デザインの詳細設定]タブで、次の変更を行います。

最大幅：500px（デスクトップのみ）
テキストフォント：タンジェリン
テキストフォントサイズ：44
テキストの色：＃fffaf6

そして、下部のパディングに5％を追加します。

[保存して終了]を押して、別のテキストモジュールを追加します。テキストの向きを「揃える」にします。デザイン設定でテキストモジュールに次の変更を加えて続行します。

最大幅：500px
テキストフォントサイズ：14px
テキストフォント：Raleway Light
フォントスタイル：太字
テキストフォントの色：＃fffaf6
テキスト行の高さ：1.7em

[保存して終了]を押します。

前の行のクローンを作成します

次に、作成した行のクローンを作成します。複製された行は、作成した行の下に自動的に配置されます。ただし、この場合、モジュールを反対側に配置する必要があります。 2つのテキストモジュールを最初の列ではなく2番目の列に配置します。

次に、行の設定を開き、最初の列に背景画像を追加します。最初の列のパディングで行ったすべてのパディング設定を削除し、2番目の列のパディングに配置します。

[保存して終了]を押すと、準備が整います。

携帯電話とタブレットの行

別の2列の行を作成し、デスクトップ用に非表示にします。行を全幅にし、ガター幅を「3」に変更します。

次に、[デザイン]タブに移動し、両方の列の背景画像をアップロードして、両方の列のカスタムパディングに次の変更を加えます。

トップ5％
右：10％
下：5％
左：10％

この2番目のセクションを追加すると、現在のレイアウトは次のようになります。

最高の男、メイド・オブ・オナー、花嫁と花婿付け添人

あなたの人生で最も重要な人々をあなたの結婚式のウェブサイトに載せてみませんか？最高の男、名誉のメイド、花嫁介添人と花婿付け添人が誰になるかを与えることは、あなたのウェブサイトにその少しの追加の後押しを与えることができます。

この部分をサイトに追加するには、まずページに新しい標準セクションを追加します。その新しいセクション内で、列とモジュールが異なる3つの行を作成する必要があります。

ここで、標準セクションであるセクションを作成したら、次の背景色を付けます： '＃fae4de'。セクションの設定で他に何も変更する必要がないため、[保存して終了]を押すことができます。

テキストモジュールの作成

次に、最初の全幅行を作成します。あなたがそこに入れなければならない唯一のものはテキストモジュールです。テキストモジュールを開き、テキストボックスに入力して、[テキストの向き]フィールドで[中央]を選択します。

次に、[高度なデザイン設定]に移動し、[テキストフォント]を[タンジェリン]、[テキストフォントサイズ]を[100px]（デスクトップとタブレット）、[68％]（電話）、[テキストフォントの色]を[＃9b857b]に設定します。同じタブを下にスクロールして、余白を上に「10％」、下に「5％」に変更します。

[保存して終了]をクリックします。これで、最初のモジュールと行が完成しました。

別の行を追加します。この場合は2列で、上下の余白に5％を追加します。次に、行の最初の列にpersonモジュールを追加します。

画像と人物モジュール

次に、personモジュールの設定を開きます。画像をアップロードし、フィールドにソーシャルメディアチャネルのURLを入力して、テキストボックスにそれらについて少し入力します。画像のサイズがわからない場合は、このブログ投稿をご覧ください。

次に、[高度な設計設定]に移動し、次の調整を行います。

ヘッダーフォント：Raleway Light
ヘッダーフォントスタイル：太字
ヘッダーフォントサイズ：14
ヘッダーテキストの色：＃9b857b
ヘッダー行の高さ：1em
ボディフォント：Raleway Light
ボディフォントスタイル：太字
ボディフォントサイズ：14
本文の色：＃9b857b
ボディラインの高さ：1.7em

personモジュールの設定を開き、[CSS]タブに移動します。 [メンバー画像]フィールドに、次のコードを追加します。

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin-left: 5%;
margin-right: 5%;

次に、ImageモジュールとPersonモジュールの両方のクローンを作成し、それらを右側の列に配置します。

4列の新しい行を追加して続行し、Image and Personモジュールを再度（4回）複製して、各列に配置します。初めて使用したコードと設定は、それらすべてに適用されます。

これで、レイアウトは次のようになります。

どこで、いつ

これはあなたの結婚式のホームページの最後の部分であり、あなたはあなたの結婚式の場所と時間をあなたの聴衆に知らせるでしょう。このセクションでは、3列（1 / 2、1 / 4、1 / 4）で、背景色が「＃fffaf6」の行が必要です。

マップの追加

このセクションの最初の列に、マップモジュールを追加します。マップ機能を使用できるようにするには、GoogleAPIキーを入力する必要があります。 APIキーをお持ちでない場合は、こちらでAPIキーの作成方法をお読みください。結婚式の住所を入力し、モジュールに場所を見つけさせます。地図上にピンを作成するには、新しいピンを追加して場所をもう一度入力すると、ピンが地図に表示されます。

他の列では、テキストモジュールと宣伝文を使用します。テキストモジュールを追加し、[一般設定]の[テキストの向き]の設定を[中央]に設定します。次に、[高度な設計設定]に移動し、次の変更を加えます。

テキストフォント：タンジェリン
テキストフォントサイズ：50px
テキストの色：＃9b857b
テキスト行の高さ：1.7em

このテキストモジュールの設定は、両方の列のテキストモジュールに適用されます。

宣伝文モジュール

テキストモジュールの下に、宣伝文モジュールを追加します。場所アイコンを選択し、その色を「＃f9c8b8」に変更し、テキストボックスに場所を追加して、テキストの向きを「中央」に変更します。次に、[高度な設計設定]に移動し、次の変更を加えます。

アイコンフォントサイズ：42px
ボディフォント：Raleway Light
フォントスタイル：太字
ボディフォントサイズ：14
本文の色：＃9b857b
ボディラインの高さ：1em

次の列では、まったく同じことを行います。宣伝文のアイコンを時計に変更し、テキストボックスに「いつ」の詳細を追加するだけです。

それでおしまい。これで、レイアウトはこのチュートリアルのレイアウトと同じくらい滑らかに見えるはずです。

次は

このミニシリーズの第2部では、結婚式の後にゲストと写真を共有するための専用のギャラリーページを作成する方法を説明します。このチュートリアルについてコメントがある場合、または今後のチュートリアルのリクエストがある場合。このブログ投稿のコメントセクションにコメントを残してください。そうすれば、折り返しご連絡いたします。

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。