Diviで結婚式のギフトリストページを作成する方法

公開: 2017-05-18

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

ミニシリーズの最初の2つのパートでは、Diviを使用してエレガントな結婚式のお知らせページとギャラリーページを作成する方法を紹介しました。この第3部では、結婚式のWebサイト内にギフトリストページを作成することに専念します。

Visual Builder ofDiviを使用して次のレイアウトを作成する方法を段階的に説明します。

レイアウトには5つのセクションがあり、それぞれが全体に独自の価値をもたらします。最初のものに飛び込みましょう！

ヒーローセクション

ヒーローセクションは本当に単純ですが、それはまさにこのミニシリーズで私たちが探しているものです。シンプルさとエレガンス。前の2つの結婚式のチュートリアルと同じカラーパレットを使用しているので、フォローしている場合は、作成を開始した結婚式のWebサイトにこのページを簡単に追加できます。

始めましょう

WordPress Webサイトに新しいページを追加し、名前を付けることから始めます。その後、Divi Builderをアクティブにして、すぐにVisualBuilderに移動します。

作成したページに新しいセクションを追加します。セクション設定を開き、[コンテンツ]タブの[背景]サブカテゴリで背景画像を変更します。この例では、セクションの背景に対称的な画像を撮影して、その効果を高めています。

セクションに全幅の行を追加して続行します。行の設定を開き、[コンテンツ]タブの[背景]サブカテゴリ内で[背景色]を[rgba（122,122,122,0.56）]に変更します。

次に、[デザイン]タブに移動します。サイジングサブカテゴリを開き、行を全幅にして、ガター幅に「1」を入力します。

下にスクロールして、[間隔]サブカテゴリを開きます。デスクトップの場合は上下のパディングに「200px」を追加し、タブレットと電話の場合は上下のパディングに「150px」を追加する必要があります。

同じサブカテゴリで、タブレットと携帯電話の上下の余白に「-50px」を追加します。

最初のテキストモジュール

次に、行に新しいテキストモジュールを追加します。 [コンテンツ]タブの[テキスト]サブカテゴリ内にテキストを追加します。その後、[デザイン]タブに移動し、[テキスト]サブカテゴリに次の変更を加えます。

テキストの向き：中央
テキストフォント：タンジェリン
テキストフォントサイズ：100（デスクトップとタブレット）、68（電話）
テキストの色：＃fffaf6
テキスト行の高さ：1.5em

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

そのすぐ下に別のテキストモジュールを作成します。 [コンテンツ]タブに移動し、[テキスト]サブカテゴリにテキストを入力します。次に、[デザイン]タブに移動し、[テキスト]サブカテゴリに次の変更を加えます。

テキストの向き：中央
テキストフォント：Raleway Light
テキストフォントスタイル：太字
テキストフォントサイズ：20px（デスクトップ）、14px（タブレットと電話）
テキストの色：＃fffaf6
テキスト行の高さ：1.5em

これまでのところ、ヘッダーは次のようになっているはずです。

紹介セクション

このレイアウトでは、人々に選択肢を提供したいと思います。彼らは、花嫁、花婿、またはその両方のために何かを購入したいかどうかを選択できます。

新しいセクションを作成することから始めて、1つの列を持つ行を追加します。 [コンテンツ]タブの[背景]サブカテゴリ内で、背景色を「＃fffaf6」に変更します。その後、行の設定を開き、[デザイン]タブに移動します。デスクトップの場合のみ、上下の余白に「5％」を追加します。

セクションタイトル

この行。追加する必要があるのはテキストモジュールだけです。 [コンテンツ]タブの[テキスト]サブカテゴリに表示するタイトルを入力します。 [デザイン]タブに移動し、[テキスト]サブカテゴリに次の変更を加えます。

テキストの向き：中央
テキストフォント：タンジェリン
テキストフォントスタイル：太字
テキストフォントサイズ：60px（デスクトップ）、50px（タブレットと電話）
テキストの色：＃9b857b
テキスト行の高さ：1.7em

次に、[サイズ設定]サブカテゴリを開き、[最大幅]を[500px]に変更します。

同じタブで[間隔]サブカテゴリを開いて続行し、上部と下部のパディングに「3％」を追加します。

次に、[詳細設定]タブに移動し、カスタムCSSサブカテゴリのメイン要素に次のコードを追加します。

background: #fae4de;
-webkit-clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
clip-path: polygon(13% 0, 88% 0, 100% 100%, 0% 100%);
border-top: 1px solid #9b857b;
border-bottom: 1px solid #9b857b;

次に、同じセクションに1つの列を持つ別の行を追加します。この行の設定を変更する必要はありません。

画像モジュール

行に画像モジュールを追加し、[コンテンツ]タブの[画像]サブカテゴリに画像をアップロードします。次に、[デザイン]タブに移動し、画像の下のスペースを削除し、[画像の配置]で[中央揃え]を選択して、常にモバイルで画像を中央揃えにします。

次に、[詳細設定]タブに移動し、カスタムCSSサブカテゴリ内の[メイン要素]フィールドに次のコードを追加します。

height: 100px;
width: 150px;

最初のテキストモジュール

画像モジュールの下に、セクションの最初のテキストモジュールを追加します。 [コンテンツ]タブの[テキスト]サブカテゴリ内のテキストボックスにテキストを入力し、[デザイン]タブに移動します。テキストサブカテゴリ内で、次の調整を行います。

テキストの向き：中央
テキストフォント：Raleway Light
テキストフォントサイズ：24px
テキストの色：＃9b857b
テキスト行の高さ：1.5em

同じタブを下にスクロールして、[間隔]サブカテゴリ内の上部マージンに「30px」を追加します。

最後になりましたが、同じテキストモジュールの[詳細設定]タブに移動し、カスタムCSSサブカテゴリ内のメイン要素に次のコードを追加します。

font-weight:400;

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

セクションに別のテキストモジュールを追加し、[コンテンツ]タブの[テキスト]サブカテゴリ内のテキストボックスにテキストを入力します。次に、[デザイン]タブに移動し、次の変更を加えます。

テキストの向き：中央
テキストフォント：Raleway Light
テキストフォントスタイル：太字
テキストフォントサイズ：16px
テキストの色：＃9b857b
テキスト行の高さ：1.5em

同じタブを下にスクロールして、[サイズ設定]サブカテゴリ内の[最大幅]を[300px]に変更します。 Spacingサブカテゴリでも上部マージンを「5％」に変更します。

次に、[詳細設定]タブに移動し、カスタムCSSサブカテゴリ内のメイン要素に次のコードを追加します。

font-weight: 300;

クローン画像モジュールとテキストモジュール

同じセクションに別の行を追加しますが、今回は3つの列を使用します。

行の最初の列と最後の列には、前の行と同じモジュールが必要です。画像モジュールと2つのテキストモジュール。これらのモジュールは、以前に作成したものと同じ設定である必要があるため、ここで行うのは、それらのクローンを作成することだけです。各モジュールのクローンを2回作成した後、それらを新しい行の左右の列に配置し、画像とテキストを変更します。

次に、行の[デザイン]タブに移動し、[間隔]サブカテゴリ内の下部マージンに「5％」を追加します。

花嫁の画像モジュール

次に、行の2番目の列にイメージモジュールを追加します。画像をアップロードして、[デザイン]タブに移動します。必ず[画像の配置]を[左]に配置し、[配置]サブカテゴリ内の[モバイルで常に画像を中央に配置]オプションを有効にしてください。

同じタブを下にスクロールして、[間隔]サブカテゴリ内の上部マージンに「5％」を追加します。

次に、[詳細設定]タブに移動し、カスタムCSSサブカテゴリ内のメイン要素に次のコードを追加します。

height: 200px;
width: 200px;
-webkit-clip-path: circle(48.2% at 50% 50%);
clip-path: circle(48.2% at 50% 50%);

最後に、携帯電話とタブレットでイメージモジュールを無効にします。

新郎の画像モジュール

前のイメージモジュールのクローンを作成し、前のイメージモジュールと同じ列に配置します。アップロードした画像を変更し、[デザイン]タブに移動します。 Alignmentサブカテゴリを開き、ImageAlignmentを「Right」に変更します。

さらに、Spacingサブカテゴリ内でTop Marginを「-60％」に調整します。

これで、レイアウトのギフトリストセクションに移動できます。これまでのところ、レイアウトは次のようになっているはずです。

ウィッシュリスト/ギフトリスト

新しい標準セクションを追加し、[コンテンツ]タブの[背景]サブカテゴリで背景色を「＃fae4de」に変更します。

テキストモジュール：タイトル

セクションに全幅の行を追加し、全幅にします。その後、2番目のセクションで作成したテキストモジュールのクローンを作成し、この行モジュールに配置します。テキスト投稿のテキストを変更し、詳細のカスタムCSSサブカテゴリ内のメイン要素フィールドで背景色を「＃fffaf6」に変更します。タブ。

ギフトリスト/ウィッシュリスト：スライダーモジュールの使用

セクションに3列の新しい行を追加し、[デザイン]タブの[サイズ設定]サブカテゴリ内のカスタム幅「65％」を変更します。最初の行にテキストモジュールを追加して続行し、[デザイン]タブの[テキスト]サブカテゴリに次の調整を加えます。

テキストの向き：中央
テキストフォント：Raleway Light
テキストフォントスタイル：太字
テキストフォントサイズ：24px
テキストの色：＃9b857b
テキスト行の高さ：1.5em

同じタブを下にスクロールして、[間隔]サブカテゴリ内の上部マージンに「30px」を追加します。

ここで、テキストモジュールのクローンを2回作成し、各列に1つずつ配置します。

次に、スライダーモジュールを追加します。スライダーの[詳細設定]タブに移動し、カスタムCSSサブカテゴリ内のメイン要素に次のコードを追加します。

border: 2px solid #FFFFFF;
border-radius: 15px;
margin-left: 20px;

次に、新しいスライドを追加します。スライド内で、[コンテンツ]タブの[背景]サブカテゴリ内のギフトリストに配置するアイテムの背景画像をアップロードします。次に、同じタブの[テキスト]サブカテゴリ内にアイテムの名前とボタンのテキストを入力します。リンクサブカテゴリのURLも変更します。 1つのカテゴリ内に必要な数のスライドを追加し、同じことを繰り返します。

新しい行を追加して続行しますが、現在は2列のみです。

[デザイン]タブの[サイズ設定]サブカテゴリで[カスタム幅]を[55％]に変更し、[間隔]サブカテゴリで下マージンを[5％]に変更します。

前の行モジュールで作成したテキストモジュールとスライダーモジュールは、他のすべてのテキストモジュールとスライダーで必要な設定と同じです。先に進み、両方を4回複製して、各行モジュールの残りの列に配置します。

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

お問い合わせフォーム（デスクトップ）

レイアウトの連絡フォームの目的は、人々がカップルのために購入しているギフトを渡すことができるようにすることです。ギフトを受け取るとすぐに、ウェブサイトで別のギフトと交換できます。そうすることで、2人のゲストが同じギフトを持ってくる可能性が低くなります。

新しい標準セクションを作成し、[コンテンツ]タブの[背景]サブカテゴリで背景色を＃fffaf6に変更します。

最初の行

このセクションで必要な行は、他のセクションと同じです。テキストモジュールを含む以前に使用した行モジュールのクローンを作成し、セクション内に配置するだけです。あなたがしなければならない唯一のことは、テキストモジュールの設定にいくつかの変更を加えることです。メイン要素のテキストと背景色を＃fae4deに変更します。

2列目

次に、2列の行を追加し、[詳細設定]タブの[表示]サブカテゴリ内のタブレットと電話でその行を非表示にします。お問い合わせフォームモジュールを最初の列に配置し、[デザイン]タブの別のサブカテゴリに次の変更を加えます。

フォームフィールドテキスト：

フォームフィールドフォント：Raleway Light
フォームフィールドのフォントサイズ：18px
フォームフィールドのテキストの色：＃9b857b
フォームフィールドラインの高さ：1.7em

国境：

入力境界半径：15
境界線を使用：はい
境界線の色：＃d7dce1
ボーダー幅：1px
ボーダースタイル：ソリッド

ボタン：

ボタンのテキストサイズ：15
ボタンのテキストサイズ：15
ボタンのテキストの色：＃fffaf6
ボタンの背景色：＃9b857b
ボタンの境界線の幅：9
ボタンの境界線の色：＃9b857b
ボタンの境界半径：4

お問い合わせフォームモジュールの[コンテンツ]タブで、3つのフィールドを追加できるようになりました。名前、メールアドレス、メッセージ。

各フィールドの背景色を手動で＃fae4deに変更します。

最後になりましたが、2番目の列にテキストモジュールを追加して、プロセスについてゲストに通知します。 [デザイン]タブに移動し、[テキスト]カテゴリに次の変更を加えます。

テキストの向き：中央
テキストフォント：Raleway Light
Tetフォントスタイル：太字
テキストフォントサイズ：16
テキストの色：＃9b857b
レターラインの高さ：1.5em

同じタブを下にスクロールして、[サイズ設定]サブカテゴリ内の[最大幅]に「300ピクセル」を追加します。

最後に、Spacingサブカテゴリ内の上部マージンに「5px」と入力します。

お問い合わせフォーム（タブレット＆電話）

以前に作成した行のクローンを作成し、Contact FormModuleとTextModuleの場所（および列）を切り替えるだけです。 [詳細設定]タブに移動し、デスクトップの行を非表示にします。

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

次は

このミニシリーズの第4部では、Diviと自動証言を使用して結婚式用のオンラインゲストブックを作成する方法を紹介します。このチュートリアルについてコメントがある場合、または今後のチュートリアルのリクエストがある場合。このブログ投稿のコメントセクションにコメントを残してください。そうすれば、折り返しご連絡いたします。

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