Diviでウェディングギャラリーページを作成する方法

公開: 2017-05-17

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

ミニシリーズの最初の部分では、エレガントな結婚式の発表ページを作成する方法を紹介しました。この第2部では、結婚式のWebサイト内にギャラリーページを作成することに専念します。ギャラリーページは結婚式のお知らせページと同じスタイルで、多くの変更を加えることなく同じWebサイトで両方を使用できます。

Diviのビジュアルビルダーを使用して次のレイアウトを作成する方法を段階的に説明します。

このレイアウトは、インタラクティブで美しいギャラリーページを作成するのに役立つ6つのセクションで構成されています。

ヒーローセクション

忙しすぎないように見える非常にシンプルなヘッダーを使用することにしました。ギャラリーページにはすでにたくさんの画像が含まれているので、人々にそれに焦点を合わせてもらいたいと思います。シンプルなヒーローセクションがあると、ゲストはページの冒頭のビジュアルに気を取られることなく、ページの本質を簡単に見つけることができます。

ページを作成

Divi Builderを使用してページを作成することから始め、VisualBuilderに切り替えます。

新しいページ内に自動的に存在するセクションがすでに1つあることがわかります。そのセクションには、全幅の行が含まれています。このセクションの最初の部分には全幅の行が必要なので、引き続き使用してください。

作成したセクションの設定を開き、[コンテンツ]タブで[背景]サブカテゴリを開きます。次に、背景色を「＃fffaf6」に変更します。

テキストモジュール

行の全幅列にテキストモジュールを追加して続行します。 [コンテンツ]タブのテキストボックスにテキストを入力し、[デザイン]タブに移動します。

[デザイン]タブ内の[テキスト]サブカテゴリを選択して、コンテンツのデザインの編集を開始します。作成したレイアウトでは、テキストモジュールのテキストサブカテゴリに次の調整を加える必要があります。

テキストの向き：中央
テキストフォント：タンジェリン
テキストフォントサイズ：90p（デスクトップ）、80（タブレット）、66（電話）
テキストの色：＃9b857b
テキスト行の高さ：1.7em

下にスクロールして変更するさまざまなオプションを探したくない場合は、検索オプションを利用することもできます。このオプションを使用すると、多くの労力をかけることなく、生産性を高め、物事を即座に変更できます。以下の例では、「テキストフォント」という用語を検索しているだけで、オプションがすぐに表示されます。

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

新郎新婦

次に、新郎新婦の2つの個別の画像を含むセクションを作成する必要があります。

先に進み、作成した前の行のすぐ下に新しい2列の行を追加します。行設定を開き、[デザイン]タブに移動します。

次に、行設定の[デザイン]タブに移動し、[サイズ設定]サブカテゴリを開きます。 [カスタム幅]オプションをアクティブにして、パーセンテージを「60％」に変更します。同じタブを下にスクロールして、下の余白に「5％」を追加します。

繰り返しになりますが、簡単な方法を選択して、検索バーに「カスタム幅」と入力するだけです。

花嫁のイメージ

行の最初の列にイメージモジュールを追加します。 [画像]サブカテゴリの[コンテンツ]タブに花嫁の画像をアップロードし、[詳細設定]タブに移動します。カスタムCSSサブカテゴリをクリックし、次のコード行を[メイン要素]フィールドに追加します。

border: 10px double #9b857b;

前述のように、検索バーに「メイン要素」と入力するだけで、すぐにポップアップ表示されます。検索オプションを使用すると、特にチュートリアルの手順を実行しようとしている場合に、時間を大幅に節約できます。あまり考えずに、必要なことを正確に行うことができます。

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

新郎のイメージ

お気づきのように、画像の設定は同じです。先に進み、イメージモジュールのクローンを作成します。変更する必要があるのはイメージだけです。これは、ギャラリーページがこれまでにどのように表示されるかを示しています。

お礼状

ギャラリーページは通常、結婚式が行われた後に結婚式のウェブサイトにポップアップします。人々は撮影された写真を見て興奮しているので、すべてのゲストがそのページにアクセスする可能性があります。そのため、ギャラリーページはゲストに最後にもう1つ言うのに理想的な場所です。

まず、レイアウトに新しい標準セクションを追加します。セクション内で、全幅の行を使用します。

次に、セクション設定を開き、背景サブカテゴリ内の背景色を「＃fffaf6」に変更します。

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

作成した行にテキストモジュールを追加します。 [コンテンツ]タブで、Webサイトに表示するテキストをテキストボックスに入力します。 [デザイン]タブに移動して続行します。

[デザイン]タブ内の[テキスト]サブカテゴリを選択することから始め、手動で検索するか、検索バーで検索して、次の変更を加えます。

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

次に、同じタブで[間隔]サブカテゴリを選択し、下マージンを「5％」に変更します。

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

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

作成した最初のテキストモジュールの下に新しいテキストモジュールを追加します。 [コンテンツ]タブで、ゲストと共有したいお礼状をテキストボックスに入力し、[デザイン]タブに移動します。

手動で検索するか、検索バーでオプションを検索して、[デザイン]タブで次の変更を行います。

テキストの向き：正当化
テキストフォント：Raleway Light
テキストスタイル：太字
テキストフォントサイズ：14
テキストの色：＃9b857b
テキスト行の高さ：1.6em

[保存して終了]をクリックすると、準備が整います。これはあなたのギャラリーページが今までにどのように見えるべきかです：

お気に入りの写真セクション

お礼状のセクションが終わったら、新郎新婦のお気に入りの写真を表示するセクションに移動できます。このパートでは、2つのセクションを使用し、CSSコードを画像モジュールに適用してポラロイドに見えるようにします。

標準セクションを追加することから始めます。その標準セクション内では、全幅の行が必要になります。セクション設定を開き、[コンテンツ]タブの[背景]サブカテゴリで背景色を「＃9b857b」に変更します。

次に、テキストモジュールを行に追加します。設定を開き、[テキスト]サブカテゴリのテキストボックスに表示するタイトルを入力します。次に、[デザイン]タブに移動し、[テキスト]サブカテゴリで次の変更を行います。

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

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

ポラロイド画像（デスクトップ）

この部分では、別の標準セクションが必要になります。そのセクション内に、4列の行が必要になります。 [背景]サブカテゴリの[コンテンツ]タブで、このセクションの背景色を「＃fae4de」に変更します。

行の最初の列にイメージモジュールを追加して続行します。画像の設定を開き、[コンテンツ]タブの[画像]サブカテゴリでお気に入りの画像の1つをアップロードします。

次に、[詳細設定]タブに移動し、[CSS IDとクラス]サブカテゴリをクリックして、[CSSクラス]フィールドに「ポラロイド」と入力します。 [メイン要素]フィールドに、次のコードを追加します。

z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);

ここで、「ポラロイド」クラスを実行するには、Webサイトのバックエンドに移動する必要があります。 [Divi]> [テーマオプション]に移動し、ページ下部の[カスタムCSS]フィールドに次のコードを挿入します。

.polaroid {
background: white;
display: inline;
float: left;
margin: 0 15px 30px;
padding: 10px 10px 25px;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}

.polaroid::after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}

.polaroid.et_pb_image_2 {
display: block;
width: inherit;
}

その後、ビジュアルビルダーに戻ることができます。複数のポラロイド画像が必要になるため、画像モジュールのクローンを7回作成し、それらを異なる列に配置する必要があります。すべての列には2つの画像モジュールが必要です。

ポラロイド画像を遊び心のあるものにするには、各画像モジュールの[メイン要素]フィールドのCSSコードを個別に変更する必要があります。異なるコードを適用するために、以下の画像で各画像モジュールに異なる番号を付けました。

割り当てられた番号に応じて、[メイン要素]フィールドのコードを適宜変更します。メイン要素は、[詳細設定]タブの[カスタムCSS]サブカテゴリにあります。 [デザイン]タブの[間隔]サブカテゴリの[カスタムマージン]フィールドにも値を追加します。

画像1

これはあなたが作った最初の画像モジュールです、そのままにしておいてください。

画像2

カスタムマージン：
トップ： -10％
左： -20％

主な要素：

z-index: 5;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);

画像3

カスタムマージン：
左： -20％

主な要素：
なし

画像4

カスタムマージン：
トップ： -10％
左： -20％

主な要素：

z-index: 3;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);

画像5

カスタムマージン：
なし

主な要素：

-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
transform: rotate(14deg);

画像6

カスタムマージン：
トップ： -10％
左： -20％

主な要素：

-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
transform: rotate(-18deg);

画像7

カスタムマージン：
左： -20％

主な要素：

z-index: 1;
-webkit-transform: rotate(-10deg);l
-moz-transform: rotate(-10deg);

画像8

カスタムマージン：
トップ： -10％
左： -20％

主な要素：

z-index: 5;
-webkit-transform:rotate(-3deg);
-moz-transform: rotate(-3deg);

すべての画像を設定したら、行の設定を開きます。 [詳細設定]タブに移動し、[表示]サブカテゴリ内の電話とタブレットの行を非表示にします。

また、[コンテンツ]タブの[リンク]サブカテゴリでライトボックスをアクティブにして、このセクションの画像を開くことができることを確認してください。

お気に入りの画像（タブレットと電話）

画像がレスポンシブであることを確認するために、同じセクションに別の行を追加します。全幅の行にして、1番と5番のイメージモジュールのクローンを作成します。これらの複製されたモジュールを新しい行に配置します。モバイル版では、作成した画像モジュールのこれら2つのバージョンのみを使用します。

次に、行の設定を開きます。 [詳細設定]タブに移動し、[表示]サブカテゴリ内のデスクトップの行を非表示にします。

これらすべての変更を行った後、デスクトップでのレイアウトはこれまでのところ次のようになります。

姓によるギャラリー（デスクトップ）

通常、結婚式で撮影された写真はたくさんあり、特定の構造を見つけるのが難しくなる可能性があります。そのため、このギャラリーページのギャラリーセクションをもう少し簡単にすることにしました。ギャラリーはゲストの名前に基づいて表示されるため、ゲストは自分の写真を簡単に見つけることができます。

名前のリスト

まず、名前のリストを表示し、画像が表示されるページのセクションに名前をリンクする必要があります。

新しい標準セクションを作成し、その中に全幅の行を配置します。次に、テキストモジュールを追加します。 [コンテンツ]タブの[テキスト]サブカテゴリに表示するテキストを入力します。次に、[デザイン]タブに移動し、[テキスト]サブカテゴリに次の変更を加えます。

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

同じタブを下にスクロールして、[間隔]サブカテゴリで上マージンを「2％」に変更し、下マージンを「5％」に変更します。

[保存して終了]をクリックします。次に、別の行を追加します。この場合は3列です。行設定の[デザイン]タブで、[間隔]サブカテゴリ内の下部マージンを[5％]に変更します。

次に、行の左側の列にテキストモジュールを追加します。テキストモジュール内に、ゲストの名前の3分の1を追加します。これらの各姓には、それらを表示するWebサイトの部分へのアンカーリンクが必要です。名前の1つを選択し、リンクアイコンをクリックして、「＃」+名前を入力します。このブログ投稿の後半で、この名前を特定のセクションにリンクします。リストの名前ごとに同じことを繰り返します。

名前の1つを選択し、リンクアイコンをクリックして、「＃」+名前を入力します。このブログ投稿の後半で、この名前を特定のセクションにリンクします。リストの名前ごとに同じことを繰り返します。

[デザイン]タブに移動し、[テキスト]サブカテゴリを次のように調整します。

テキストの向き：右
テキストフォント：Raleway Light
テキストスタイル：太字
テキストフォントサイズ：20
テキストの色：＃9b857b
テキスト行の高さ：1.6em

次に、テキストモジュールのクローンを2回作成し、クローンしたモジュールを他の2つの列に配置します。これらのリストの最後の名前とテキストの向きを、2番目の列では「中央」に、3番目の列では「左」に変更してください。

行の設定を開き、[詳細設定]タブの[表示]サブカテゴリで表示をデスクトップのみに変更します。

姓によるギャラリー（タブレットと電話）

ウェブサイトがレスポンシブであることを確認するために、タブレットと携帯電話に合う新しい行を作成します。全幅の列を持つ新しい行を追加します。次に、その全幅の行にテキストモジュールを追加し、テキストボックスに姓を入力します。テキストボックスは、[コンテンツ]タブの[テキスト]サブカテゴリ内にあります。

リンクアイコンをクリックし、URLボックスに「＃」+名前を入力して、前の行で行ったのと同じことを繰り返します。

ただし、2つおきの名前に異なるアンカーリンクを割り当てるようにしてください。この例では、AveryとBrownの両方に、デスクトップの場合とは異なるアンカーリンクがあります。これを行う必要があるのは、Webサイトの次の部分で、2つおきのギャラリーに2つの異なるギャラリーセクションが必要になるためです。そうすれば、タブレットや電話に反応します。

最後になりましたが、行の[詳細設定]タブに移動し、[表示]サブカテゴリでデスクトップの行を無効にします。

ギャラリーセクション（デスクトップ）

Webサイトの最後の部分では、さまざまな姓を表すさまざまなギャラリーセクションを作成する必要があります。そのうちの2つを作成する方法を説明し、それに応じて他の1つを追加することもできます。

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

次に、次のような行を追加します。

行セクション内で、カスタム幅を使用します。 [デザイン]タブに移動し、[サイズ設定]サブカテゴリ内で[カスタム幅]を選択して[60％]に変更します。

次に、[デザイン]タブに移動し、上下の余白を「5％」に変更します。

テキストモジュール

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

テキストの配置：中央
テキストフォント：タンジェリン
テキストフォントサイズ：60
テキストの色：＃9b857b
テキスト行の高さ：1.6em

同じタブを下にスクロールし、Spacingサブカテゴリ内で上マージンを「20％」に変更します。

[詳細設定]タブに移動します。 CSS ID＆ClassesサブカテゴリのCSS IDフィールドで、上記で作成したアンカーリンクをテキストモジュールにリンクする必要があります。したがって、リストの最初のアンカーリンクが「#adams」である場合は、「adams」を入力する必要があります。 IDが、以前に作成したリストの名前にリンクしたものと同じであることを確認してください。

行の2番目の列に、ギャラリーモジュールを追加する必要があります。 [全般]タブの[画像]サブカテゴリの[画像番号]フィールドに「8」と入力し、8つの画像を選択します。

次に、[デザイン]タブに移動し、[レイアウト]サブカテゴリで[レイアウト]が[グリッド]で、サムネイルの向きが[横向き]であることを確認します。

次に、[詳細設定]タブに移動します。このタブでは、カスタムCSSサブカテゴリの2つの異なるセクションにコードを追加する必要があります。メイン要素とオーバーレイ。

主な要素：

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
border: 5px solid #FFFFFF;
column-count: 2; 
column-gap: 0px;