下載免費的圖書預覽 Divi 登陸頁面佈局，包括錨鏈接和 CTA

無論您是銷售實體書還是電子書，擁有一個有效的著陸頁都可以創造奇蹟。 您可以以傳統方式訪問此登錄頁面，也可以將其轉換為圖書預覽登錄頁面。 圖書預覽登錄頁面允許人們提前閱讀您圖書的某些部分或章節。 它還配備了錨鏈接，可​​以無縫瀏覽不同的部分或章節。 最重要的是，您還希望將 CTA 放在聚光燈下，以將流量吸引到您銷售圖書的任何地方。

在本教程中，我們將使用 Divi 從頭開始重新創建一個令人驚嘆的圖書預覽登錄頁面。 如果您想立即將其添加到您的網站，您還可以免費下載佈局 JSON。

讓我們開始吧！

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載圖書預覽登陸頁面佈局

要了解免費圖書預覽登錄頁面佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

讓我們開始重建吧！

訂閱我們的 YouTube 頻道

添加新的常規部分

間距

首先創建一個新頁面並向其添加常規部分。 打開部分設置並刪除所有自定義頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

添加行

列結構

繼續使用以下列結構向該部分添加新行：

背景顏色

尚未添加任何模塊，打開行設置並添加白色背景色。

• 背景顏色：#ffffff

第 3 列漸變背景

也向第三列添加漸變背景。

• 顏色 1：#6a30ff
• 顏色 2：#a202ff
• 第 3 列漸變類型：線性
• 第 3 列梯度方向：166deg

漿紗

然後，轉到大小設置並通過添加以下大小設置允許行佔據屏幕的整個寬度：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是
• 寬度：100%
• 最大寬度：100%

間距

轉到間距設置並刪除行的自定義頂部和底部填充。 還將一些填充值添加到第一列和第三列。

• 頂部填充：0vw
• 底部填充：0vw
• 第 1 列頂部填充：15vw（台式機）、10vw（平板電腦和手機）
• 第 2 列底部填充：15vw（台式機）、10vw（平板電腦和手機）
• 第 1 列左填充：7vw

第 2 列 CSS ID

正如您在這篇文章的預覽中所注意到的，第二列附加了一個滾動條。 如果您想稍後在帖子中設置此滾動條的樣式，請繼續向第二列添加 CSS ID。

• 第 2 列 CSS ID：樣式滾動條

第 2 列主要元素

我們接下來要做的是通過將以下 CSS 代碼行添加到第 2 列主要元素來允許該列可滾動：

overflow-y: scroll;
height: 57.87vw;
scroll-behavior: smooth;

將文本模塊 #1 添加到第 1 列

添加內容

現在我們已經修改了所有行設置，我們可以開始添加模塊了！ 從第 1 列中的文本模塊開始，然後添加一些您選擇的內容。

文字設置

轉到模塊的文本設置並進行一些更改。

• 文字字體：Lato
• 顏色：#666666
• 文字大小：1.6vw（桌面）、3vw（平板電腦）、4vw（手機）
• 文本行高：2vw

將分頻器模塊添加到第 1 列

能見度

我們將添加的下一個模塊是 Divider 模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

顏色

然後，轉到設計選項卡並更改顏色。

• 顏色：#5802ed

漿紗

也可以調整大小值。

• 分隔線重量：4px
• 寬度：3vw（桌面）、6vw（平板電腦）、9vw（手機）
• 高度：0px

間距

並添加一些自定義的頂部和底部填充來創造空間。

• 上邊距：1vw（桌面）、3vw（平板電腦）、4vw（手機）
• 底邊距：7vw

將文本模塊 #2 添加到第 1 列

添加內容

進入第三個模塊，這是另一個文本模塊。 在這裡，我們在內容框中添加了一個符號 (►)，後跟第一章標題。

添加鏈接

我們將整個模塊鏈接到一個錨點 ID，稍後我們將在這篇文章中添加它。

• 模塊鏈接網址：https://yourwebsite.com/pagetitle/#chapter-1

文字設置

繼續轉到文本設置並按照您想要的方式設置內容樣式。

• 文字字體：Lato
• 文字字體粗細：輕
• 文字顏色：#666666
• 文字大小：1.3vw（桌面）、2vw（平板電腦）、3.3vw（手機）

間距

添加一些自定義的頂部和底部填充。

• 頂部填充：1vw
• 底部填充：1vw

克隆文本模塊 #2 兩次

完成對文本模塊的修改後，將其克隆兩次（或最多可共享多少章節）。

更改內容

修改每個重複項的內容。

更改鏈接

以及模塊鏈接 URL 末尾的錨 ID。 在這種情況下，這意味著將“#chapter-2”添加到第一個副本，將“#chapter-3”添加到第二個副本。

將文本模塊添加到第 2 列

添加內容

轉到下一列，這是一個可滾動的列。 在這裡，我們將使用文本模塊來添加圖書預覽的不同頁面。 首先添加具有您選擇的一些內容的第一個文本模塊。

背景顏色

然後，轉到背景設置並添加白色背景色。

• 背景顏色：#ffffff

文字設置

還要修改文本設置。

• 文字字體：Lato
• 文字大小：0.8vw（桌面）、1.6vw（平板電腦）、2.1vw（手機）
• 文本行高：1.7vw（桌面）、3.3vw（平板電腦）、3.8vw（手機）

H2 文本設置

也可以使用 H2 文本設置。

• 標題 2 字體：Lato
• 標題 2 字體粗細：重
• 標題 2 文本顏色：#5802ed
• 標題 2 文字大小：2vw（桌面）、2.5vw（平板電腦）、2.9vw（手機）
• 標題 2 行高：2.3vw

間距

繼續轉到間距設置並添加以下自定義邊距和填充值：

• 上邊距：2vw（桌面）、7vw（平板電腦）、10vw（手機）
• 下邊距：2vw（桌面）、7vw（平板電腦）、10vw（手機）
• 左邊距：5vw
• 右邊距：5vw
• 頂部填充：6vw
• 底部填充：6vw
• 左填充：6vw
• 右填充：6vw

盒子陰影

通過添加微妙的框陰影來塑造文本模塊。

• 框陰影模糊強度：50px
• 陰影顏色：rgba(0,0,0,0.09)

CSS ID

繼續向文本模塊添加 CSS ID。 確保您使用的 CSS ID 與您在行的第一列中鏈接到的 CSS ID 相同。

• CSS ID：第 1 章

克隆文本模塊兩次

一旦您為文本模塊設置了樣式，就可以根據需要多次克隆它。

更改內容

更改每個文本模塊副本的內容。

更改 CSS ID

連同 CSS ID。

• CSS ID：第 2 章
• CSS ID：第 3 章

將文本模塊添加到第 3 列

添加內容

進入下一列和最後一列！ 添加具有您選擇的某些內容的文本模塊。

文字設置

然後，轉到設計選項卡並更改文本設置。

• 文字字體：Lato
• 文字字體粗細：重
• 文字顏色：#ffffff
• 文字大小：2vw（桌面）、3vw（平板電腦）、4vw（手機）
• 文本行高：2vw
• 文字方向：居中

間距

接下來添加一些自定義的左右填充。

• 左：2vw
• 右：2vw

將按鈕模塊添加到第 3 列

添加副本

繼續將按鈕模塊添加到第三列，並使用您選擇的一些副本。

結盟

接下來更改按鈕對齊方式。

• 按鈕對齊：居中

按鈕設置

還要修改按鈕設置。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：1vw（桌面）、1.5vw（平板電腦）、2.4vw（手機）
• 按鈕文字顏色：#5802ed
• 按鈕背景顏色：#ffffff
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：10vw
• 按鈕字母間距：0px
• 字體粗細：超粗
• 字體樣式：大寫

間距

並添加一些自定義邊距和填充值來設置模塊的樣式和位置。

• 上邊距：2vw（桌面）、4vw（平板電腦）、5vw（手機）
• 頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 底部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 左填充：3vw（桌面）、7vw（平板電腦）、9vw（手機）
• 右填充：3vw（桌面）、7vw（平板電腦）、9vw（手機）

樣式滾動條

打開頁面設置

本教程的最後一部分致力於為第二列的滾動條設置樣式。 是否設置列滾動條的樣式完全取決於您。 不設置樣式不會改變任何功能。 如果您決定設置滾動條的樣式，請打開頁面設置。

添加 CSS 代碼

然後，轉到高級選項卡並將一些自定義 CSS 添加到自定義 CSS 框，您就完成了！

#style-scrollbar::-webkit-scrollbar {
width: 1.1vw;
}
#style-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
#style-scrollbar::-webkit-scrollbar-thumb {
background: #333333;
}

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何創建一個令人驚嘆且有效的圖書預覽登錄頁面，其中包含指向您圖書不同部分或章節的錨鏈接以及一個引人注目的 CTA。 我們還免費共享了佈局 JSON，因此您可以立即開始將其添加到您正在創建的任何網站！ 如果您有任何問題或建議，請務必在下面的評論部分留言。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。