關於如何在 Divi 中設置分頁樣式的便捷指南

分頁是網站中經常被忽視的元素之一，尤其是在設計方面。 並且有多個地方可能適合在您的網站中使用分頁。 基本上，分頁（或分頁菜單）允許用戶瀏覽多個項目頁面（例如帖子存檔）。 這對於減少初始頁面內容特別有用。

Divi 有多個模塊，包括可以使用內置設置設置樣式的分頁（如畫廊模塊）。 其中一些模塊（如博客和投資組合）繼承了 Divi 主題（或 WordPress）的默認分頁，對於某些站點可以過度簡化。 但是在插件的幫助下，您可以用更複雜的分頁替換整個主題的分頁。 然後，您可以根據需要使用 CSS 設置樣式。

在本教程中，我將向您展示如何在整個 Divi 中設置分頁樣式。 這是我們將要討論的內容：

• 在 Divi 中設置分頁樣式時需要考慮的事項
• 造型 Divi Gallery 模塊和可過濾的作品集模塊分頁
• 圖庫模塊和可過濾作品集模塊的高級分頁樣式
• 樣式博客模塊和投資組合模塊分頁
• 使用 WP-PageNavi 插件向 Divi 添加複雜的分頁
• 使用自定義 CSS 設置 WP-PageNavi 分頁樣式

讓我們開始吧。

搶先看

這篇文章主要是關於如何設置分頁樣式。 但是，這裡有一些複雜的分頁樣式，我將向您展示如何構建。

入門

訂閱我們的 YouTube 頻道

對於本教程，您將需要以下內容：

• 已安裝並激活 Divi 主題。
• 要測試不同模塊的分頁設計，您需要一些模擬內容。 例如，為了設計作品集（或可過濾的作品集）模塊分頁，您需要將大約 12-16 個項目添加到您的主題中，以便您有足夠的內容讓分頁生效。 對於圖庫模塊，您還需要大約 12-16 張圖像來填充圖庫。
• 如果您要使用 WP-PageNavi 插件，則需要安裝並激活該插件。 這是一個免費插件，可以從您站點的 WordPress 儀表板中的 WordPress 目錄下載。 只需導航到插件 > 添加新並蒐索 WP-PageNavi。
  

準備好一些模擬內容後，您就可以創建新頁面了。 從您的 WordPress 儀表板，導航到頁面 > 添加新。 為您提供頁面標題並部署 Divi Builder。 選擇“從頭開始構建”選項。 然後單擊以在前端構建。

現在您已準備好開始測試一些分頁設計。

在 Divi 中設置分頁樣式時需要考慮的事項

一般來說，您可能不想對分頁的設計過於瘋狂，因為與任何導航菜單一樣，保持簡單和直觀很重要。 但是，在 Divi 中設計分頁時，您可能需要考慮以下幾點。

分頁字體

分頁是擺脫網站使用的主要字體的好地方。 您想選擇適合用戶界面和導航的最佳字體。 由於分頁主要包含數字，因此您需要確保字體顯示所有數字的高度和寬度相等（排版專家稱之為襯里和表格）。 我最喜歡的一些保守派包括 Oxygen、Nunito Sans 和 Source Sans Pro。 如果你的分頁中有很多頁面，你可能需要使用像 Fjalla One 或 Roboto Condensed 這樣的壓縮字體來釋放一些空間。

分頁字體樣式

您還可以嘗試一些字體樣式來設置您的分頁。 例如，您可以使用大寫字體樣式使“下一個”和“上一個”鏈接更加明顯並等於頁碼的高度。 但是，考慮到鏈接已經在導航菜單中，添加下劃線字體樣式可能有點多餘。

分頁字母間距

字母間距是為分頁添加更多水平間距的好方法。 這可以添加一個很好的設計元素並使導航脫穎而出。

分頁文本對齊

在 Divi 中，您可以輕鬆地將分頁與頁面的左側、中間或右側對齊。 因此，無論何時設計網頁，都不要忘記這一點。

可點擊空間

為分頁鏈接留出足夠的可點擊空間很重要。 默認情況下，這將是相當小的。 您可以通過使用較大的文本或增加行高來增加可點擊的空間。 但是您也可以使用一些 CSS 在這些鏈接周圍添加一些填充。

分頁文字大小

分頁文本大小通常相當小。 這可能是為了防止它分散用戶對頁面內容的注意力。 但是，較大的文本大小可以增加分頁鏈接的可點擊空間，並使用戶更容易注意到。 我喜歡對較大的分頁文本使用 vw 長度單位，以便它可以很好地隨瀏覽器和內容縮放。

分頁行高

由於分頁通常停留在一行上，因此您可以為鏈接添加更多行高以增加額外的可點擊空間。

分頁文字陰影

如果使用不當，文本陰影可能會分散注意力。 除非您打算保持微妙，否則最好將其排除在外。 如果你想要那種東西，它也可以用來在你的文本周圍添加創造性的光芒。

分頁活動頁面

分頁的這一方面對於讓用戶在導航時知道他們當前所在的頁面很重要。 活動頁面鏈接和非活動頁面鏈接的樣式之間應該有明顯的對比。 默認情況下，Divi 將使用主題定制器中設置的主要強調色作為 Divi 中活動頁面鏈接的顏色。 但是，您可以使用 CSS 行覆蓋它。

對於具有分頁的模塊，Divi 具有內置的設計選項，可以為分頁的不同元素設置樣式。 此外，您可以在高級選項卡中輕鬆添加一些 CSS 片段，以便在一個方便的地方更好地控制設計。

但是對於主題級別的分頁，您可以使用帶有自定義 CSS 的 WP-PageNavi 插件獲得複雜的解決方案（稍後會詳細介紹）。

現在，讓我們從如何在 Divi Modules 中設置分頁樣式開始。

造型 Divi Gallery 模塊和可過濾的作品集模塊分頁

在新頁面上激活 Divi Builder 後，創建一個具有一列行的新常規部分。 然後向該行添加一個可過濾的投資組合模塊。 如前所述，確保您創建了 12-16 個項目，以便您可以看到分頁。

在可過濾的投資組合設置中，更新以下內容：

帖子數：4（因此您可以在分頁中看到更多頁面鏈接）

節目名稱：NO
顯示類別： 否

默認情況下，Divi 將顯示分頁，因此將該選項設置為 YES。

您應該會在投資組合的右下角看到分頁。

要設置分頁樣式，請轉到設計選項卡並打開分頁文本切換以查看所有可用選項。 更新以下內容：

佈局：網格
分頁字體：Source Sans Pro
分頁字體樣式：TT
分頁文本對齊：居中
分頁文字顏色：#cccccc
分頁文字大小：4vw（桌面），38px（平板電腦和手機）
分頁字母間距：1vw
分頁行高：2em

然後單擊高級選項卡並在分頁活動頁面下添加以下 CSS 片段：

color: #0096eb !important;

通過使用更大的行高使文本更大，為用戶提供更多可點擊的空間。 將對齊更改為居中並添加一點字母間距有助於使分頁更加明顯。 自定義分頁文本顏色與對比活動頁面顏色有助於用戶了解他們在哪個頁面上。

其他快速 CSS 片段

這裡有一些快速簡單的 CSS 片段來改變分頁設計。

要去掉位於分頁正上方的默認邊框線，您可以在 Portfolio Pagination 下輸入以下 CSS：

border: none;

為了給你的分頁一個完整的邊框，你可以在 Portfolio Pagination 下輸入以下 CSS：

border: 2px solid #dddddd;

要為您的分頁提供背景顏色，您可以在 Portfolio Pagination 下輸入以下 CSS：

background: #333333;

也適用於畫廊模塊

同樣的設計設置也適用於畫廊模塊。 事實上，您可以從可過濾組合模塊中復制分頁文本樣式並將它們粘貼到圖庫模塊中！ 只要確保你也轉移了任何 CSS 片段。

圖庫模塊和可過濾作品集模塊的高級分頁樣式

如果您想為可過濾組合和圖庫模塊的分頁獲得更高級的設計，您可以使用一些更高級的自定義 CSS。 我喜歡這個特定示例的地方在於，自定義 CSS 與模塊的內置設置協同工作。

為了演示，讓我們再次使用可過濾組合。 這一次，使用以下內容更新設計選項：

佈局：網格
分頁文字大小：16px
分頁行高：2.5em

在高級選項卡下，添加以下 CSS 類：

CSS 類：頁面空間

這將允許我們的 CSS 僅應用於此模塊。

現在保存您的設置並打開頁面設置彈出模式。 在高級選項卡下，在自定義 CSS 框中添加以下 CSS 代碼。

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
  border: none; 
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
  padding: 1em 1.5em;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
  border-color: #333333;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}

代碼就位後，您可以看到分頁現在為每個頁面鏈接提供了更多的可點擊空間。 並且鏈接還添加了背景顏色，使它們看起來更像是可點擊的按鈕。 懸停時的每個鏈接也會添加一個微妙的邊框。 活動頁面鏈接以對比鮮明的深色背景和較淺的文本顏色脫穎而出。

此代碼將為可過濾的投資組合模塊和圖庫模塊設置分頁樣式。 只需確保將 CSS 類“pagi-space”添加到模塊中即可生效。

這是可過濾投資組合模塊的結果。

樣式博客模塊和投資組合模塊分頁

博客模塊和投資組合模塊繼承了默認的 WordPress 分頁，允許您通過指向“舊條目”的鏈接和指向“下一個條目”的鏈接瀏覽您的帖子存檔。

以下是 Divi 主題中博客存檔頁面上的默認分頁：

博客模塊和投資組合模塊使用相同的分頁。

如果您使用博客模塊（或投資組合模塊），您可以使用內置設置設置分頁文本的樣式。

對於大多數情況，這是一個簡單而優雅的解決方案。 但是，如果您正在尋找更複雜的分頁來替換默認的 Divi/WordPress 分頁，那麼有一個非常簡單的解決方案可能會讓您大吃一驚。

使用 WP-PageNavi 插件向 Divi 添加複雜的分頁

如果您想要對整個 Divi 主題（包括博客模塊和投資組合模塊）進行更高級的分頁，您可以使用名為 WP-PageNavi 的流行插件將默認的 WordPress 分頁替換為不同的分頁。 這個插件適用於 Divi。 該設計是基本的，但可以使用 CSS 輕鬆定制。

將插件添加到 Divi

如果您還沒有這樣做，請按照帖子頂部的“入門”部分中的說明繼續安裝插件。 安裝並激活插件後，新的分頁形式將自動顯示在整個主題中。

它也會影響博客模塊和投資組合模塊。

插件設置

您可以通過導航到設置 > WP-PageNavi 從 WordPress 儀表板中找到插件設置。

這些設置主要用於自定義顯示的功能和文本內容。 但是，如果要設置分頁樣式，則需要使用一些自定義 CSS。

使用自定義 CSS 設置 WP-PageNavi 分頁樣式

由於您可能希望為整個主題設置分頁樣式，因此將 CSS 添加到主題定制器或您的子主題 style.css 文件是最有意義的。 繼續將以下 CSS 放入 Theme Customizer Additional CSS 框中：

/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
  padding: 0.3em 0.8em !important;
  font-size: 2em !important;
  color: #333333;
  line-height: 2em;
  background: #eeeeee;
  transition: all .5s;
}

/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
  background: none;
}

這是最終結果。

在博客模塊和投資組合模塊中設計 WP-PageNavi

如前所述，博客模塊和投資組合模塊繼承了默認的 WordPress 頁面導航。 由於這已被 WP-PageNavi 的新復雜分頁取代，因此模塊也將顯示此新分頁。

您可以使用內置的分頁文本設計選項為分頁添加更多樣式。

請記住，使用外部自定義 CSS 時，某些選項可能無法按預期工作。

最後的想法

在 Divi 中構建網站時，分頁不必繼續成為事後的想法。 有一些有用的內置選項可以幫助那些使用分頁的模塊。 使用一些自定義 CSS，您可以創建您想要的任何樣式。 WP-PageNavi 插件是一個優雅的解決方案，用於在整個 Divi 主題中添加複雜的分頁。 它不僅可以與 Divi 無縫協作，還為您提供了可以輕鬆自定義的其他選項。 設計 WP-PageNavi 分頁樣式確實需要一些 CSS，但希望本文中使用的模板能讓您走上正軌。

這篇文章中的示例設計故意簡單。

我期待在評論中收到您的來信。

乾杯!