“文章滑块”或帖子滑块模块 WordPress主题 Divi 允许您在主页上以独特的方式显示您选择的文章。在很多博客上，这种类型的模块通常用于展示特色文章。但是您可以对它进行不同的使用，例如显示文章建议。

如何在Divi Builder上添加文章滑块模块

在向页面添加文章滑块模块之前，必须首先跳至Divi Builder。一旦 Divi主题安装在您的网站上，您会注意到布顿 使用Divi Builder 每次创建新页面时，位于发布商上方。单击此按钮以激活Divi Builder，并访问所有Divi Builder模块。然后点击按钮 使用Visual Builder 以可视模式启动发电机。您也可以点击按钮 使用Visual Builder 如果您已连接到WordPress仪表板，则在前台浏览网站时。

进入Visual Builder后，您可以单击灰色加号按钮将新模块添加到页面。新模块只能添加到行内。如果要开始新页面，请记住首先在页面中添加一行。

在模块列表中找到“张贴滑块”模块，然后单击它以将其添加到页面中。模块列表是可搜索的，这意味着您还可以键入单词“ Post Cursors”，然后单击“ Enter”以自动查找并添加Post Cusors模块！添加模块后，模块选项列表将为您打招呼。这些选项分为三个主要组： 包装内容 , 概念 et 先进 .

用例示例：发布滑块（文章）以显示最新的

在此示例中，我将添加一个帖子滑块，以在博客页面顶部展示三个最新的帖子。每张幻灯片将选定的帖子图像显示为背景图像，帖子标题和帖子元以及一个“更多阅读”按钮。

使用Visual Builder，在博客页面顶部添加一个全角（一列）行的新标准部分。然后在新行中插入Post Slider模块。

在“光标设置”下，更新以下选项：

内容选项

讯息编号：3

德观念选项

标题字体：Roboto（大写）标题字体大小：50px标题文本颜色：＃edef5d标题字母间距：1px主体字体大小：16主体字母空间：1px主体行高度：1.4em Meta字体：Open Sans，斜体，大写Meta字体大小：18px Meta文本颜色：#cccccc Meta行高：2em使用自定义样式的按钮：YES文本大小：26px Button文本颜色：＃edef5d按钮宽度：0px按钮图标：>仅显示图标

保存设置

这就是它！

内容选项文章滑块模块

在内容选项卡中，您将找到模块的所有内容元素，例如文本，图像和图标。所有控制什么出现在模块中的内容将始终在此标签中找到。

项目数（员额数）

选择要在滑块中显示的项目数。

包括类别

选择要包括在滑块中的类别。

订购

在这里，您可以调整文章的显示顺序。

按钮文本

定义将在“阅读更多”按钮上显示的文本。默认保留空白（了解更多）

内容显示

显示全部内容不会在滑块中截断您的帖子。片段显示仅显示片段文本。

使用文章摘录（如果已定义）

如果要跳过手动定义的片段并仍然自动生成，请禁用此选项。

自动提取长度

定义自动生成的摘录的长度。默认保留空白（270）

显示箭头

此设置将激活和禁用导航箭头。

显示控件

此设置将启用和禁用光标底部的圆圈按钮。

显示“阅读更多”按钮

此设置将启用和禁用“阅读更多”按钮。

显示消息Meta

此设置将启用和禁用meta部分。

显示特色图片

此设置可打开和关闭在滑块中选择的图像。

放置图像

选择要在幻灯片中显示所选图像的方式

背景颜色

使用颜色选择器选择此模块的背景色。

背景图像

上载所需的图像，或输入要用作滑块背景的图像的URL。

背景图片的位置

为每张幻灯片选择背景图片的CSS位置。

背景图片尺寸

选择用于每张幻灯片的CSS背景图像大小。

管理员标签

这将更改构造函数中的模块标签，以便于识别。在Visual Builder中使用WireFrame视图时，这些标签将出现在Divi Builder界面的模块块中。

滑块模块设计选项

在“设计”选项卡中，您将找到所有模块样式选项，例如字体，颜色，大小和间距。这是用于更改模块外观的选项卡。每个Divi模块都有一长串的设计设置，可用于更改任何内容。

去除内部阴影

默认情况下，这将删除应用于所有幻灯片的CSS内部阴影。

使用背景叠加

启用后，自定义叠加层颜色将添加到背景图片上方和滑块内容后面。

背景叠加颜色

使用颜色选择器选择背景颜色。

使用文字叠加

启用此选项后，将在光标文本后面添加背景色，以使其在背景图像上更具可读性。

文字叠加边框半径

边框的半径影响文本覆盖区域的角的圆度。默认情况下，这些角的边缘略为圆角，为3像素。您可以将该值减小为0以创建一个矩形框，或者增大该值以使拐角更加圆滑。

使用视差效果

启用此选项将在滚动时为背景图像提供固定位置。

视差法

在这里，您可以设置用于视差效果的方法-CSS或True Parallax。

自定义颜色箭头

当您将鼠标悬停在滑块模块上时，将出现箭头，以允许访问者浏览每张幻灯片。默认情况下，这些箭头继承幻灯片主要文本的颜色。但是，您可以使用此设置为这些箭头定义自定义颜色。

点导航自定义颜色

在每个光标中，点导航项出现在光标内容下方。这些元素允许用户浏览光标。您可以使用此设置中的颜色选择器来定义用于这些元素的自定义颜色。

文字颜色

在这里，您可以选择文字是浅色还是深色。如果您有深色背景的幻灯片，请选择浅色文本。如果你
背景清晰，请使用深色文字。

标题字体

您可以通过从下拉菜单中选择所需的字体来更改标题文本的字体。 Divi随附了数十种由Google字体支持的出色字体。默认情况下，Divi对页面上的所有文本使用Open Sans字体。您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

标题字体大小

您可以在此处调整标题文本的大小。您可以拖动范围滑块以增大或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需的文本大小值。输入字段支持不同的度量单位，这意味着您可以根据尺寸值输入“ px”或“ em”以更改其单位类型。

标题文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。如果要更改标题文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。

标题字母间距

字母间距会影响每个字母之间的间距。如果要增加标题文本中每个字母之间的间隔，请使用范围滑块调整间隔，或在滑块右侧的输入字段中输入所需的间隔大小。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

标题行高度

行高会影响标题文本每一行之间的间距。如果要增加每一行之间的间距，请使用范围滑块调整间距或在光标右侧的输入字段。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

正文字体

您可以通过从下拉菜单中选择所需的字体来更改您的字体。 Divi随附了数十种由Google字体支持的出色字体。默认情况下，Divi对页面上的所有文本使用Open Sans字体。您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

正文字体大小

在这里您可以调整您的正文文本大小。您可以拖动范围滑块以增大或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需的文本大小值。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

正文文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。如果要更改文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。

正文字母的间距

字母间距会影响每个字母之间的间距。如果要增加文本中每个字母之间的间距，请使用范围滑块调整间距或在滑块右侧的输入字段中输入所需的间距大小。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

身体线的高度

行高会影响正文中每一行之间的间距如果要增加每一行之间的间距，请使用范围滑块调整间距或在输入字段中输入所需的间距大小位于光标右侧。输入字段支持不同的度量单位，这意味着您可以根据尺寸值输入“ px”或“ em”以更改其单位类型。

元警察

您可以通过从下拉菜单中选择所需的字体来更改元文本的字体。 Divi随附了数十种由Google字体支持的出色字体。默认情况下，Divi对页面上的所有文本使用Open Sans字体。您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

元字体大小

在这里，您可以调整元文本的大小。您可以拖动范围滑块以增加或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需文本大小的值。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

元文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。如果要更改元文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。

元字母间距

字母间距会影响每个字母之间的间距。如果要增加元文本中每个字母之间的间距，请使用范围滑块调整间距，或在滑块右侧的输入字段中输入所需的间距大小。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

元线高度

行高会影响图元文本每行之间的间距。如果要增加每行之间的间距，请使用范围滑块调整间距或在输入字段中输入所需的间距大小位于光标右侧。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

上部填充

此参数控制模块顶部和模块中文本内容之间的内部空间。如果要增加或减少此空间，请在此处输入所需的值。例如，要减少光标的空间和整体大小，可以输入100px的值。您还可以输入一个百分比值，例如10％，以使高度更加动态。

底部填充

此参数控制模块底部和模块中文本内容之间的内部空间。如果要增加或减少此空间，请在此处输入所需的值。例如，要减少光标的空间和整体大小，可以输入100px的值。您还可以输入一个百分比值，例如10％，以使高度更加动态。

对按钮使用自定义样式

启用此选项会显示各种按钮自定义设置，您可以使用这些设置来更改模块按钮的外观。

按钮文字大小

此设置可用于增加或减小按钮中文本的大小。该按钮会随着文本大小的增加和减少而适应。

按钮文字颜色

默认情况下，按钮采用主题定制器中定义的主题的强调色。此选项使您可以为该模块的按钮分配自定义文本颜色。使用颜色选择器选择自定义颜色以更改按钮颜色。

按钮背景颜色

默认情况下，按钮具有透明的背景色。可以通过从颜色选择器中选择所需的背景颜色来更改此设置。

按钮边框宽度

默认情况下，所有Divi按钮的边框均为2px。使用此设置可以增加或减少边框。输入0即可删除边框。

按钮边框颜色

默认情况下，按钮边框采用主题自定义程序中定义的主题的强调色。此选项使您可以为该模块的按钮分配自定义边框颜色。使用颜色选择器选择自定义颜色，以更改按钮边框的颜色。

按钮边框半径

边框的半径会影响按钮角的圆度。默认情况下，Divi中的按钮具有较小的边框半径，该边框将角四舍五入3个像素。您可以将该值减小为0以创建一个方形按钮，或者显着增大该值以创建具有圆形边缘的按钮。

按钮的字母间距

字母间距会影响每个字母之间的间距。如果要增加按钮文本中每个字母之间的间隔，请使用范围滑块调整间隔或在滑块右侧的输入字段中输入所需的间隔大小。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

警察按钮

您可以通过从下拉菜单中选择所需的字体来更改按钮文本的字体。 Divi随附了数十种由Google字体支持的出色字体。默认情况下，Divi对页面上的所有文本使用Open Sans字体。您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

添加按钮图标

禁用后，此设置将从您的按钮中删除图标。默认情况下，所有Divi按钮都将在悬停时显示一个箭头图标。

按钮图示

如果启用了图标，则可以使用此设置选择要在按钮中使用的图标。 Divi有不同的图标可供选择。

颜色图标按钮

调整此设置将更改按钮上显示的图标的颜色。默认情况下，图标颜色与按钮文本颜色相同，但是此设置可让您独立调整颜色。

图标放置按钮

您可以选择在按钮的左侧或右侧显示按钮的图标。

将鼠标悬停在按钮上时仅显示图标

默认情况下，仅在悬停时显示按钮图标。如果您希望图标始终出现，请关闭此设置。

按钮悬停文本颜色

当访客的鼠标悬停在按钮上时，将使用此颜色。颜色将与之前设置中定义的基础颜色不同。

悬停按钮背景颜色

当访客的鼠标悬停在按钮上时，将使用此颜色。颜色将与之前设置中定义的基础颜色不同。

颜色悬停边框按钮

当访客的鼠标悬停在按钮上时，将使用此颜色。颜色将与之前设置中定义的基础颜色不同。

悬停边框半径按钮

当访问者的鼠标悬停在按钮上时，将使用此值。该值将不同于先前设置中定义的基值。

指向音符间距按钮

当访问者的鼠标悬停在按钮上时，将使用此值。该值将不同于先前设置中定义的基值。

Post Slider的高级选项

在高级选项卡上，您将找到经验丰富的Web设计人员可能会有用的选项，例如自定义CSS和HTML属性。在这里，您可以将自定义CSS应用于模块的许多元素中的任何一个。您还可以将自定义CSS类和ID应用于模块，该自定义CSS类和ID可用于在子主题的style.css文件中自定义模块。

CSS ID

输入用于此模块的可选CSS ID。 ID可用于创建自定义CSS样式或链接到页面的特定部分。

CSS类

输入用于此模块的可选CSS类。 CSS类可用于创建自定义CSS样式。您可以添加多个类，以空格分隔。这些类可用于Divi子主题或使用Divi主题选项或Divi Builder页面上的设置添加到页面或网站的自定义CSS样式表中。

自定义CSS

自定义CSS也可以应用于模块和任何模块内部。在“自定义CSS”部分中，您将找到一个文本字段，您可以在其中直接将自定义CSS样式表添加到每个元素。这些设置中的CSS条目已经包装在样式标签中。因此，只需输入用分号分隔的CSS规则即可。

自动动画

如果您希望光标自动滑动，而访问者不必单击下一个按钮，请启用此选项，然后根据需要调整下面的旋转速度。

自动动画速度（以毫秒为单位）

如果上面启用了“自动动画”选项，则可以在此处指示光标在每张幻灯片之间的褪色速度。数字越大，每次旋转之间的间隔时间越长。

继续在悬停时自动滑动

启用此选项将允许在鼠标悬停时继续自动滑动。

隐藏手机上的内容

随着移动设备上的屏幕尺寸变小，屏幕空间变得越来越有价值。有时，最好关闭一些不太重要的游标元素，以减小游标的大小并使其更具可读性。启用此设置会在移动设备上隐藏光标文本内容。

在移动设备上隐藏CTA

随着移动设备上的屏幕尺寸变小，屏幕空间变得越来越有价值。有时，最好关闭一些不太重要的游标元素，以减小游标的大小并使其更具可读性。启用此设置将在移动设备上隐藏对操作按钮的光标调用。

在手机上查看图像/视频

随着移动设备上的屏幕尺寸变小，屏幕空间变得越来越有价值。有时，最好关闭一些不太重要的游标元素，以减小游标的大小并使其更具可读性。启用此设置将在移动设备上显示幻灯片图像和视频（默认情况下它们被禁用）。

关闭

此选项使您可以控制模块所在的设备。您可以选择在平板电脑，智能手机或台式机上分别停用模块。如果要在不同的设备上使用不同的模块，或者要通过从页面中删除某些元素来简化移动设计，这将很有用。

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]下载DIVI主题[/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =下载 TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

其他Divi教程

类似商品

6评论

佛罗伦萨·雷诺夫上五月27，2020在15:45上午

感谢您的文章。是否可以并排显示多个物品以制成物品传送带？
谢谢
回答
- 蒂埃里·贝特朗 14 年 2020 月 21 日 56 时 XNUMX 分
  
  是的，有可能
  回答
Budon 6 年 2019 月 10 日 41 小时 XNUMX 分

你好，
。是否可以在同一个滑块中包含几篇文章。作为此YouTube页面的示例。
谢谢，祝你有美好的一天。
回答
- 蒂埃里·贝特朗 16 年 2019 月 3 日 49 小时 XNUMX 分
  
  你好，
  
  是的，有可能。这完全取决于您使用的插件。
  回答
  - 加西亚 20年2020月20日，00小时XNUMX分
    
    你怎么能放多个呢？
    回答
    - 蒂埃里·贝特朗 16 年 2020 月 5 日 16 时 XNUMX 分
      
      对不起，我不明白这个问题
      回答

发表评论更改或取消LA REPONSE

这个网站使用Akismet来减少不需要的。详细了解如何使用您的评论数据.

Divi教程：如何使用Divi Builder文章滑块

如何在Divi Builder上添加文章滑块模块

用例示例：发布滑块（文章）以显示最新的

内容选项

德观念选项

内容选项文章滑块模块

项目数（员额数）

包括类别

订购

按钮文本

内容显示

使用文章摘录（如果已定义）

自动提取长度

显示箭头

显示控件

显示“阅读更多”按钮

显示消息Meta

显示特色图片

放置图像

背景颜色

背景图像

背景图片的位置

背景图片尺寸

管理员标签

滑块模块设计选项

去除内部阴影

使用背景叠加

背景叠加颜色

使用文字叠加

文字叠加边框半径

使用视差效果

视差法

自定义颜色箭头

点导航自定义颜色

文字颜色

标题字体大小

标题文字颜色

标题字母间距

标题行高度

正文字体

正文字体大小

正文文字颜色

正文字母的间距

身体线的高度

元警察

元字体大小

元文字颜色

元字母间距

元线高度

上部填充

底部填充

按钮文字大小

按钮文字颜色

按钮背景颜色

按钮边框宽度

按钮边框颜色

按钮边框半径

按钮的字母间距

警察按钮

添加按钮图标

按钮图示

颜色图标按钮

图标放置按钮

将鼠标悬停在按钮上时仅显示图标

按钮悬停文本颜色

悬停按钮背景颜色

颜色悬停边框按钮

悬停边框半径按钮

指向音符间距按钮

Post Slider的高级选项

CSS ID

CSS类

自定义CSS

自动动画速度（以毫秒为单位）

继续在悬停时自动滑动

隐藏手机上的内容

在移动设备上隐藏CTA

在手机上查看图像/视频

关闭

其他Divi教程

分享这篇文章：

我喜欢这个：

发表评论更改或取消LA REPONSE