如何在 Divi 中切換關於懸停的博客文章摘錄

已發表: 2021-08-02

在懸停時切換博客文章摘錄是一種保持博客文章緊湊網格佈局的有效方法，而不會完全放棄這些摘錄。 這個想法是最初隱藏摘錄，然後在將鼠標懸停在網格內的帖子項目上時切換它們的可見性。 這允許用戶在瀏覽器視口中查看更多帖子，同時為用戶提供通過將鼠標懸停在帖子上來查看他們感興趣的帖子摘錄的選項。

在本教程中，我們將向您展示如何在 Divi 中懸停時切換博客文章摘錄。 為此，我們將添加一些自定義 CSS 片段，這些片段將在懸停時切換博客模塊帖子項目的摘錄（不需要 JQuery）。 代碼到位後，您可以使用 Divi 的內置設置隨意設置博客模塊的樣式。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

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

下載文件
免費下載

免費下載

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

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

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

分區通知框

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

擴展角標籤

首先，您需要執行以下操作：

  1. 如果您還沒有安裝並激活 Divi 主題。
  2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
  3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

如何在 Divi 中切換關於懸停的博客文章摘錄

創建博客模塊佈局

首先，我們需要為我們的博客文章創建一個基本的佈局。 對於此示例，我們將添加一個單列行，其中包含一個博客模塊。

創建行

向該部分添加一列行。

行寬

在行設置模式中，更新以下設計設置以調整寬度。

  • 寬度：95%
  • 最大寬度：1200px

添加博客模塊

在行的列中，添加一個新的博客模塊。

博客模塊設置

接下來，通過選擇顯示閱讀更多按鈕來更新博客模塊內容設置。

在設計選項卡下，為博客選擇網格佈局。

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

  • CSS 類：toggle-blog-excerpt

在下一步中，我們將使用此類作為自定義 CSS 代碼的選擇器。

使用代碼模塊添加自定義 CSS

此時，我們的博客文章有了一個基本的網格佈局，並在博客模塊中添加了一個自定義 CSS 類。 我們將使用這個 CSS 類選擇器來定位這個特定的博客模塊，並將懸停時的切換效果添加到帖子項目的帖子摘錄部分。

要添加 CSS，我們將使用代碼模塊。 在博客模塊下方添加一個新的代碼模塊。

粘貼後摘錄切換效果所需的以下自定義 CSS。 確保將 CSS 包裝在必要的樣式標籤中。 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

讓我們在實時頁面上查看到目前為止的結果。

結果

我們將在文章末尾更詳細地介紹代碼。 但是現在，讓我們看看到目前為止的結果。

使用 Divi Builder 為博客模塊添加其他樣式

現在 CSS 已經到位，可以為我們的博客文章摘錄提供切換效果，我們可以使用 Divi Builder 向博客模塊添加任何其他樣式。

對於此示例，我們將對樣式進行最小的調整，但也可以隨意探索您自己的樣式。

樣式帖子標題

  • 標題字體粗細：粗體
  • 標題文字顏色：#6d6a7e
  • 標題文字大小：20px
  • 標題行高度：1.3em

樣式閱讀更多文本

  • 閱讀更多字體粗細：粗體
  • 閱讀更多字體樣式：TT
  • 閱讀更多文字顏色：#6d6a7e
  • 閱讀更多字母間距：1px
  • 閱讀更多 線高：3.5em

樣式分頁

  • 分頁字體粗細：粗體
  • 分頁字體樣式：TT
  • 分頁文字顏色：#6d6a7e
  • 分頁字母間距：1px

刪除邊框

  • 網格佈局邊框寬度：0px

懸停時的樣式框陰影

  • 盒子陰影：見截圖
  • 框陰影垂直位置：0px
  • 框陰影模糊強度：38px
  • 陰影顏色（桌面）：透明
  • 陰影顏色（懸停）：rgba(109,106,126,0.25)

最後結果

關於 CSS 代碼

如果您對之前添加到代碼模塊中的自定義 CSS 的細分感興趣，請看這裡。

首先，我們需要將所有 CSS 包裝在一個媒體查詢中，該媒體查詢只會將 CSS 應用於桌面瀏覽器。 

@media all and (min-width: 981px) {

}

其次，我們需要將持續時間為 500 毫秒的過渡添加到帖子內容/摘錄，以便將鼠標懸停在帖子項目上時將發生的樣式更改。

  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }

第三，我們需要確保在使用可視化構建器時帖子內容/摘錄仍然可見，以便我們可以進行編輯。

  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }

第四，我們需要在頁面加載時默認隱藏帖子內容/摘錄。 為此，我們使用可見性：隱藏來隱藏內容。 然後我們添加 opacity:0 以便我們在將 opacity:1 添加到懸停狀態時可以獲得淡入淡出的過渡效果。 當我們將 max-height:500px 添加到懸停狀態時，我們還使用 max-height:0px 來獲得滑動切換效果。

  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }

第五，當帖子項（.et_pb_post）處於懸停狀態時，我們顯示帖子內容/摘錄。 為此，我們將可見性更改為可見，將不透明度更改為 1，將最大高度更改為 500 像素。

  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }

對於最後的片段，我們可以為所有帖子項目提供相同的最小高度，以獲得更乾淨的垂直對齊的網格佈局。

  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }

下面再看一下最終代碼。 

@media all and (min-width: 981px) {
  /* add transition for post content*/
  .toggle-blog-excerpt .et_pb_post .post-content {
    -webkit-transition: all 500ms !important;
    transition: all 500ms !important;
  }
  /* keep post content visible in visual builder */
  body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
    max-height:none;
  }
  /* hide post content */
  .toggle-blog-excerpt .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
    max-height:0px;
  }
  /* show post content when hovering over post item */
  .toggle-blog-excerpt .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
    max-height: 500px;
  }
  /* set min-height for all post items */
  .toggle-blog-excerpt .et_pb_post {
    min-height: 400px;  
  }
}

最後的想法

如本教程所示，添加一些 CSS 片段可以為您提供切換博客文章摘錄所需的功能，並具有良好的懸停效果。 這種方法最好的部分是我們可以通過使用 Divi 的內置選項向博客模塊添加我們想要的任何其他樣式來構建此功能。 這將允許您為帖子項目添加更高級的樣式，包括更多的懸停效果。 希望這將有助於為您的 Divi 網站的博客在設計和功能方面提供額外的提升。

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

乾杯!