如何使用 Divi 創建婚禮圖庫頁面

已發表: 2017-05-17

這篇文章是我們迷你係列中的第 2 部分如何使用 Divi 創建一個優雅的婚禮網站。 在本系列中，我們將指導您完成為自己或 Divi 客戶創建婚禮網站的最重要部分。

在我們迷你係列的第一部分中，我們向您展示瞭如何製作優雅的婚禮公告頁面。第二部分將致力於在您的婚禮網站中創建一個畫廊頁面。畫廊頁面與婚禮公告頁面的風格相同，這使您可以在同一網站上使用兩者，而無需進行大量更改。

我們將逐步向您展示如何使用 Divi 的可視化構建器創建以下佈局：

此佈局由 6 個部分組成，可幫助您創建一個交互式且美觀的圖庫頁面。

英雄部分

我們決定使用一個看起來不太忙的非常簡單的標題。畫廊頁面中已經有很多圖像，我們希望人們關注這一點。擁有一個簡單的英雄部分可以讓客人更容易找到頁面的精髓，而不會被頁面開頭的視覺效果分心。

創建一個頁面

首先創建一個頁面，使用 Divi 構建器並切換到 Visual Builder。

您可以看到新頁面中已經自動出現了一個部分。該部分包含一個全角行。本節的第一部分需要一個全角行，因此請繼續使用它。

打開您剛剛創建的部分的設置，然後在內容選項卡中打開背景子類別。然後，將背景顏色更改為“#fffaf6”。

文本模塊

繼續向行的全角列添加一個文本模塊。在“內容”選項卡的文本框中輸入文本，然後轉到“設計”選項卡。

在“設計”選項卡中選擇“文本”子類別以開始編輯您的內容設計。對於我們創建的佈局，我們需要對文本模塊的文本子類別進行以下調整：

文字方向：居中
文字字體：橘色
文本字體大小：90p（桌面）、80（平板）、66（手機）
文字顏色：#9b857b
文本行高：1.7em

如果您不想向下滾動並尋找要更改的不同選項，您還可以使用搜索選項。此選項可幫助您提高工作效率並立即更改內容，而無需付出很多努力。在下面的示例中，我們只是搜索術語“文本字體”，我們會立即看到該選項出現。

單擊保存並退出。

新娘和新郎

繼續，您必須創建一個部分，其中包含新娘和新郎的兩個單獨圖像。

繼續並在您創建的前一行的正下方添加一個新的兩列行。打開行設置並轉到“設計”選項卡。

接下來，轉到行設置的“設計”選項卡並打開“大小調整”子類別。激活自定義寬度選項並將百分比更改為“60%”。向下滾動相同的選項卡並將“5%”添加到底部邊距。

再一次，您可以選擇簡單的方法，只需在搜索欄中輸入“自定義寬度”即可。

新娘的形象

將圖像模塊添加到行的第一列。在“圖像”子類別下的“內容”選項卡中上傳新娘的圖像，然後轉到“高級”選項卡。單擊自定義 CSS 子類別並將以下代碼行添加到主元素字段：

border: 10px double #9b857b;

如前所述，您也可以在搜索欄中輸入“主要元素”，它會立即彈出。使用搜索選項可以節省大量時間，尤其是當您嘗試按照教程的步驟進行操作時。您可以完全按照要求執行操作，而無需過多考慮。

按保存並退出。

新郎的形象

如您所見，圖像具有相同的設置。繼續克隆圖像模塊，您唯一需要更改的是圖像。到目前為止，您的圖庫頁面應該是這樣的：

謝謝注意

婚禮舉行後，圖庫頁面通常會在婚禮網站上彈出。人們很高興看到拍攝的照片，因此您的所有客人很可能都會訪問該頁面。這使得畫廊頁面成為向客人說最後一件事的理想場所。

首先，在您的佈局中添加一個新的標準部分。在該部分中，使用全角行。

接下來，打開部分設置並將背景顏色更改為背景子類別中的“#fffaf6”。

第一個文本模塊

將文本模塊添加到您剛剛創建的行。在“內容”選項卡中，在文本框中輸入要在網站上顯示的文本。繼續轉到“設計”選項卡。

首先在設計選項卡中選擇文本子類別，然後通過手動查找或在搜索欄中搜索來進行以下更改：

文字方向：居中
文字字體: Tangerine
文本字體大小：70（桌面和平板電腦），50（手機）
文字顏色：#9b857b
文本行高：1em

現在，在同一選項卡中選擇間距子類別並將底部邊距更改為“5%”。

單擊保存並退出。

第二個文本模塊

在您創建的第一個文本模塊下添加一個新的文本模塊。在內容選項卡中，在文本框中寫下您想與客人分享的感謝信，然後轉到設計選項卡。

通過手動搜索或使用搜索欄搜索選項，在“設計”選項卡中進行以下更改。

文本方向：兩端對齊
文字字體：Raleway Light
文字樣式：粗體
文字字體大小：14
文字顏色：#9b857b
文本行高：1.6em

單擊“保存並退出”，您就可以開始了。這就是您的圖庫頁面現在應該是什麼樣子：

最喜歡的圖片部分

完成感謝信部分後，您可以轉到展示新娘和新郎最喜歡的照片的部分。在這一部分，您將使用兩個部分並將 CSS 代碼應用於圖像模塊，使它們看起來像寶麗來。

首先添加一個標準部分。在該標準部分中，您將需要一個全角行。打開部分設置並在內容選項卡的背景子類別中將背景顏色更改為“#9b857b”。

接下來，向該行添加一個文本模塊。打開設置並在文本子類別的文本框中輸入您要顯示的標題。繼續，轉到“設計”選項卡並在“文本”子類別中進行以下更改：

文字方向：居中
文字字體：橘色
文本字體大小：100（桌面和平板電腦），68（手機）
文字顏色：#fffaf6
文本行高：1.6em

單擊保存並退出。

寶麗來圖像（桌面）

對於這部分，您需要另一個標準部分。在該部分中，您將需要有 4 列的行。在“背景”子類別下的“內容”選項卡中，將此部分的背景顏色更改為“#fae4de”。

繼續將圖像模塊添加到行的第一列。打開圖像的設置並使用內容選項卡的圖像子類別上傳最喜歡的圖像之一。

接下來，轉到“高級”選項卡，單擊“CSS ID 和類”子類別，然後在“CSS 類”字段中鍵入“polaroid”。在 Main Element 字段中，添加以下代碼：

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

現在，要將“寶麗來”類付諸實施，您必須轉到網站的後端。轉到 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;
}

之後，您可以返回到 Visual Builder。您將需要多個寶麗來圖像，這就是為什麼您應該克隆圖像模塊 7 次，並確保將它們放在不同的列中。每列應該有 2 個圖像模塊。

為了使拍立得圖像看起來有趣，您必須單獨更改每個圖像模塊的主要元素字段中的 CSS 代碼。為了應用不同的代碼，我們在下圖中為每個圖像模塊指定了不同的編號：

根據分配的編號，相應地更改主元素字段中的代碼。您可以在自定義 CSS 子類別下的高級選項卡中找到主元素。還要向“設計”選項卡的“間距”子類別中的“自定義邊距”字段添加一個值：

圖 1

這是您製作的第一個 Image 模塊，請保持原樣。

圖 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 圖像模塊。將這些克隆的模塊放在新行中。對於移動版本，我們將只使用我們創建的圖像模塊的這兩個版本。

現在，打開行的設置。轉到“高級”選項卡並在“可見性”子類別中隱藏桌面上的行。

完成所有這些更改後，您的佈局在桌面上應該如下所示：

按姓氏的畫廊（桌面）

通常有很多在婚禮上拍攝的照片，這使得很難在其中找到某種結構。這就是為什麼我們決定讓這個畫廊頁面的畫廊部分更輕鬆一些。畫廊將根據客人的姓氏顯示，這使得他們很容易找回自己的照片。

姓名列表

首先，您需要顯示姓氏列表並將他們鏈接到他們將在其中找到圖像的頁面部分。

創建一個新的標準部分並在其中放置一個全角行。接下來，添加一個文本模塊。鍵入要在“內容”選項卡的“文本”子類別中顯示的文本。然後，轉到“設計”選項卡並對“文本”子類別進行以下更改：

文字方向：居中
文字字體：橘色
文本字體大小：100（桌面和平板電腦），68（手機）
文字顏色：#9b857b
文本行高：1.6em

向下滾動相同的選項卡，並將“間距”子類別中的上邊距更改為“2%”，將下邊距更改為“5%”。

單擊保存並退出。現在，添加另一行，在本例中為三列。在行設置的設計選項卡中，將間距子類別中的底部邊距更改為“5%”。

接下來，將文本模塊添加到行的左列。在文本模塊中，添加客人姓氏的三分之一。這些姓氏中的每一個都需要一個錨鏈接，指向您想要將他們帶到的網站部分。選擇其中一個名稱，單擊鏈接圖標並輸入“#”+ 名稱。在此博文的後面，您將將此名稱鏈接到某個部分。對列表中的每個名稱重複相同的操作。

選擇其中一個名稱，單擊鏈接圖標並輸入“#”+ 名稱。稍後在此博客文章中，您將將此名稱鏈接到某個部分。對列表中的每個名稱重複相同的操作。

轉到“設計”選項卡並對“文本”子類別進行以下調整：

文字方向：右
文字字體：Raleway Light
文字樣式：粗體
文字字體大小：20
文字顏色：#9b857b
文本行高：1.6em

繼續，克隆文本模塊兩次，並將克隆的模塊放在另外兩列中。確保將這些列表中的姓氏和文本方向更改為第二列的“中心”和第三列的“左”。

打開該行的設置，在高級選項卡的可見性子類別中將可見性更改為僅桌面。

按姓氏排序的圖庫（平板電腦和手機）

為確保網站具有響應性，我們將創建一個適合平板電腦和手機的新行。添加帶有全角列的新行。接下來，將文本模塊添加到該全角行並在文本框中鍵入姓氏。您可以在“內容”選項卡的“文本”子類別中找到該文本框。

通過單擊鏈接圖標並在 URL 框中輸入“#”+ 名稱，重複我們在上一行中所做的相同操作。

但請確保為每個第二個名稱分配一個不同的錨鏈接。在此示例中，Avery 和 Brown 的錨鏈接將與他們在台式機上的錨鏈接不同。我們必須這樣做，因為在網站的下一部分，我們必須為每兩個畫廊設置兩個不同的畫廊部分。這樣，它就會響應平板電腦和手機。

最後但並非最不重要的一點是，轉到該行的“高級”選項卡，並在“可見性”子類別中禁用桌面行。

畫廊部分（桌面）

在網站的最後一部分，我們必須製作代表不同姓氏的不同畫廊部分。我們將向您展示如何製作其中的兩個，然後您也可以相應地添加其他的。

首先，添加一個標準部分。在“內容”選項卡的“背景”子類別中將背景顏色更改為“#fae4de”

繼續，添加如下一行：

在行部分中，使用自定義寬度。轉到“設計”選項卡在“大小調整”子類別中選擇並將“自定義寬度”更改為“60%”。

然後，轉到“設計”選項卡並將頂部和底部邊距更改為“5%”。

文本模塊

現在，添加一個文本模塊並在“內容”選項卡的“文本”子類別中的文本框中鍵入一個系列的姓氏。繼續轉到“設計”選項卡並進行以下更改：

文本對齊：居中
文字字體：橘色
文字字體大小：60
文字顏色：#9b857b
文本行高：1.6em

向下滾動相同的選項卡，並將“間距”子類別中的上邊距更改為“20%”。

移至高級選項卡。在 CSS ID & Classes 子類別的 CSS ID 字段中，您必須將上面創建的錨鏈接鏈接到文本模塊。因此，如果列表中的第一個錨鏈接是“#adams”，則您必須填寫“adams”。確保該 ID 與您在之前創建的列表中鏈接到名稱的 ID 相同。

在該行的第二列中，您必須添加一個圖庫模塊。在“常規”選項卡的“圖像”子類別的“圖像編號”字段中鍵入“8”，然後選擇 8 張圖像。

接下來，轉到“設計”選項卡並確保“佈局”子類別中的“佈局”為“網格”，而縮略圖方向為“橫向”。

繼續，轉到高級選項卡。在此選項卡中，您必須將代碼添加到自定義 CSS 子類別的兩個不同部分；主要元素和覆蓋。

主要元素：

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;