如何像 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 中一些更高级设置的详细介绍，并激发了您对可能的想象。