如何像 Facebook Newsroom 的 Post Slider 一樣設計 Divi 的 Post Slider Module

帖子滑塊是一種優雅的解決方案，用於向讀者展示各種內容。 突出顯示的帖子可以以多種方式組織，從類別到現在。 在今天的項目中，我們正在查看 Facebook 新聞室博客頁面中的一個示例，該頁面顯示了一個名為“頭條新聞”的帖子類別。 這是一個非常有吸引力的滑塊，強調了帖子標題和特色圖片。 我們將使用 Divi 的 Post Slider 模塊重新創建此滑塊的外觀。

之前和之後：Divi Post 滑塊模塊

下面的第一張圖片顯示了帶有默認設置的 divi post 滑塊模塊，而第二張圖片是通過設置和一些自定義 CSS 中的一些調整創建的修改。

前

後

概念與靈感

如前所述，今天帖子滑塊樣式的模型來自 Facebook 新聞室。 正如您可能已經猜到的那樣，這是一個致力於 Facebook 的所有內容的新聞博客。 雖然我們大多數人都知道 Facebook 是社交媒體巨頭，但快速瀏覽此博客將拓寬您的視野。 Facebook 新聞室頁面上的博客帖子滑塊上個季度的收入為 88 億美元，每天有 12.3 億活躍用戶，為今天的項目提供了一個有價值的模型。

準備設計元素

在準備此設計時，您需要一些帶有特色圖片的博客文章。 如果您不熟悉為帖子設置特色圖片，您可以在頁面右下方的編輯帖子頁面上找到該設置。

如果每個特色圖像的大小為 600 像素 x 400 像素，則此滑塊設計效果最佳，但確切尺寸並不重要。

您可能還想在帖子編輯器頁面底部的“摘錄”輸入框中為每個帖子添加一些摘錄文本。 如果您有帖子摘錄，該帖子將顯示您的帖子摘錄，但如果您沒有，則會使用您實際內容的一部分。

使用 Divi 實現設計

訂閱我們的 YouTube 頻道

如果您正在跟進並且還沒有頁面設置來顯示您的帖子滑塊，只需創建一個新頁面並單擊“使用 Visual Builder”開始進行所需的修改。

我們首先添加一個具有 1 列結構行的常規部分。

然後將 Post Slider Module 添加到該行。

我們的修改從“內容”設置開始，這是在 Visual Builder 中添加任何新模塊後的默認位置。

對默認內容設置進行以下更改：

將“帖子編號”設置為您想要的帖子數量。 對於這個例子，我使用 3。

然後將“Use Post Excerpt if Defined”設置為yes，並將“Automatic Excerpt Length”設置為180。

現在我們準備好通過單擊模塊設置模式頂部的選項卡進入設計設置。

對設計設置進行以下更改：

將“背景疊加顏色”更改為白色 (#ffffff)。

將“點導航自定義顏色”更改為 #576d90。

將“文本顏色”更改為深色。

現在將“Header Font”設為粗體，將“Header Font Size”設置為34px，將“Header text Color”設置為#3b5998，將“Header Line Height”設置為42px。

現在將“Body Text Color”設置為#141924，將“Body Line Height”設置為24px。

現在單擊“為按鈕使用自定義樣式”將其更改為是。 將“按鈕文本大小”更改為 16px，“按鈕邊框寬度”更改為 0px，“按鈕懸停文本顏色”更改為 #666666，“按鈕懸停背景顏色”更改為 rgba(0,0,0,0)。

現在單擊模塊設置模式頂部的“高級”選項卡。 在CSS ID下的文本輸入中，添加“fb-post-slider”。 這允許我們向這個特定模塊添加樣式，而不會對頁面上可能顯示的其他帖子模塊產生任何影響。

現在向各種元素添加 CSS 代碼，如下所示：

前

position:absolute;
top:57px;
right:-6px;
content:"";
border:4px solid transparent;
border-top-color:#2C477F;
border-left-color:#2C477F;

主要元素

border-radius: 3px;
border:1px solid #dedede; 

後

position:absolute;
top:25px;
right:-7px;
display:block;
content:"Top Stories";
color:#F9F4F7;
background-color:#4573CC;
padding:4px 15px;
border-radius:2px;
z-index:2!important;

幻燈片描述

min-height:460px;
width: 35%;
min-width: 300px;
float:left;
padding: 57px 45px 50px 35px!important;
font-family: 'Alegreya Sans', sans-serif;
text-align:left

幻燈片標題

font-family: 'Alegreya Sans', sans-serif;

滑動按鈕

padding:0!important;
margin-top:0;

滑動控制器

margin-bottom:-55px;

滑動箭頭

color:#ffffff!important;
background-color:rgba(0,0,0,.4);
font-weight:bold;
border-radius:2px;
 -ms-transform: scale(1.2, 2.5); /* IE 9 */
 -webkit-transform: scale(1.2, 2.5); /* Safari */
 transform: scale(1.2, 2.5);

現在通過單擊模式右下角的複選標記來保存模塊設置。

您可以在 Visual Builder 中看到，還有一些方法可以讓我們的帖子滑塊看起來就像 Facebook 新聞室頁面上的滑塊一樣。

這是 CSS 無法解決的任何問題，我們將能夠通過直接從 Visual Builder 將剩餘代碼添加到頁面設置來觀察它的形成。 要到達那裡，請單擊頁面底部中心的“展開設置”圖標，然後單擊“頁面設置”圖標。

如果您在更大的顯示器上工作，我建議將模態移動到 Post Slider 的一側，以便您可以看到我們添加的每一位代碼的作用。 這將更好地幫助您理解用於設置我們模塊樣式的 CSS。

首先，我們將通過將以下 CSS 添加到“自定義 CSS”文本區域來處理背景圖像的大小和位置（當前隱藏在白色覆蓋層後面），以及滑塊文本和覆蓋層的位置。

#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
    background-size: 70%;
    background-position: top right;
    padding-left: 0;
    overflow: visible!important;
}
 
#fb-post-slider.et_pb_slider_with_overlay .et_pb_slide_overlay_container {
    width: 30%;
    min-width: 300px;
}

現在我們將處理隱藏我們的帖子元數據，日期除外，並將日期的位置移動到標題上方。 為此，將以下代碼添加到之前輸入的代碼正下方的自定義 CSS 文本輸入中。

#fb-post-slider .et_pb_slide_content .post-meta {
    height: 0px;
    overflow: hidden
}
#fb-post-slider .et_pb_slide_content .post-meta .published {
    position: absolute;
    top: 32px;
    left: 35px;
    color: #898f9c;
    font-size: 16px
}

我們就在那裡，只有一些小例外。 當您將鼠標懸停在我們的 Post Slider 模塊上時，您會注意到上一個和下一個箭頭都會出現。 在 Facebook 新聞編輯室滑塊上，只顯示下一個箭頭。 通過將以下 CSS 添加到之前輸入的代碼正下方的自定義 CSS 文本輸入中，可以輕鬆解決此問題。

#fb-post-slider .et-pb-arrow-prev {
    display: none
}

現在我們需要使用以下代碼重新定位滑塊下方的導航點。 順便說一下，您還會注意到將滑塊的溢出屬性設置為可見會顯示我們之前為環繞右上角的“Top Stories”標籤創建的 3D 效果。

#fb-post-slider.et_pb_post_slider_0 .et-pb-controllers a {
    height: 8px;
    width: 8px;
    order-radius: 50%
}
#fb-post-slider.et_pb_slider {
    overflow: visible!important
}

最後，這最後一點代碼將更改我們滑塊的動畫，以更緊密地匹配我們的模型滑塊。 儘管不是完美的匹配，但它是我在不使用 jQuery 解決方案的情況下所能得到的最接近的。 還有一些媒體查詢使我們的滑塊更具響應性。

.et-pb-active-slide .et_pb_slide_description {
    animation-name: fadeIn;
}
.et_pb_slide.et-pb-active-slide {
    transition: opacity 2.5s!important
}
 
@media all and (max-width: 1252px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 90%
    }
}
@media all and (max-width: 980px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 100%;
        background-position: top center;
    }
}

現在您可以通過單擊屏幕右下角的保存按鈕來保存頁面。 保存頁面後，退出可視化構建器以查看完成的帖子滑塊，其靈感來自 Facebook 新聞室頁面上的帖子滑塊。

最後的想法

好吧，無論您覺得這個特殊設計有用與否，我希望它提供了對 Divi 的 Post Slider Module 中一些更高級設置的詳細介紹，並激發了您對可能的想像。