How to add, configure and customize the Divi Publications Slider module.

The Divi Post Slider Modulecan display recent blog posts, reviews, featured projects, inspiring quotes, upcoming events and more.

They can be large, small, fixed width or full width. This module also supports parallel-effect funds as well as full-width video backgrounds. The slider can be animated automatically via slides or set up for manual navigation.

View a Live Demo of this Module

How to Add the Divi Post Slider Module to Your Page

• Add a new page or edit an existing page.

• By default, the Gutenberg Standard Editor loads whenever you add a new post or page in WordPress.

• Click the purple button below the title of the page. UseThe Divi Builder.

When you reload the page, you will see three options:

• Build from scratch

• Choose a pre-designed design

• Build with AI

Build from scratch

Choose a pre-designed design

Build with AI

Add the Post Slider Module

• Click on the green icon+ +to insert a row.

• Click on the gray icon+ +within the row to open the Divi Module Library, which contains all the modules included with the Divi theme.

• Find the modulePost Sliderand click to load it.
  The module library is also searchable; type the name of the module you want in the search bar above.

All options in the Post Slider Module Options

After you add the post slider module, the module settings will automatically appear. Here you can set up content and design styles. The adjustments are divided into three groups using tabs at the top:Content,DesignandAdvanced.

Tab Content

Within this tab, you will find the content options for the post-slider module.

• Number of Posts (Post Count)- Determines the number of posts that will be displayed in the slider.

• Categories Included- Define the categories you want to display in the slider. By default, all categories are displayed. The optionCurrent categorycan be used in a Theme Builder Theme page template for search results (learn how to do it here).

• Sort By (Order By)- Choose the order in which you want posts to be displayed:

  • By Date (new to old)

  • By Date (old to new)

  • By Title: A-Z

  • By Title: Z-A

  • Random (Random)

• Button (Button)- By default, the text of the button isRead More. If you want the text to be another, you can write it here. Example: Continue Reading, Continue Reading, etc.

• Show Content (Content Display)- SelectShow Excerptto display an excerpt from the post, orShow Contentto display the full content.

• Use Post Excerpts (Use Post Excerpts)- Turn off this option if you want to ignore manually defined extracts that are always generated automatically.

• Excerpt Length (Excerpt Length)- By default, extracts have 270 characters. Write a numeric value if you want to lengthen or shorten that amount.

• Offset Number (Offset Number)- Choose the number of posts you want to omit. For example, if you want the slider to start from the third most recent post, write 3 here.

Elements

• Show Arrows (Show Arrows)- Turn on or off to show or hide slider's navigation arrows.

• Show Controls (Show Controls)- Turn on or off to show or hide controls at the bottom (navigation points).

• Show Read More Button (Show Read More Button)- Turn on or off to show or hide the Read More button.

• Show Postal Goal (Show Post Goal)- Activate or disable to show or hide the goal post information (author, category, date, etc.).

Featured Image

• Show Featured Image (Show Featured Image)- Turn on or off to show or hide the featured picture of the post.

• Fantasy Image Placement (Featured Image Placement)- Determine how the featured image is displayed:

  • In background (background)

  • On the left

  • On the right

  • Top

  • Below the slider

By default, the image is displayed as a background.

Link

If you want to apply a clickable link to the entire module, you can do so here.

• Module Link URL (Module Link URL)- Paste the URL you want the module to link. This makes the whole module clickable and redirect to the pasted URL.

• Link Target (Module Link Target)- Defines whether the link opens in the same window or in a new tab:

  • In the same window

  • In a new tab

Fund

In the background options group, you can configure:

• Background color

• Gradient of the background

• Background image

• Background video

• Background pattern

• Background mask

Note: In the demonstrations below, the display featured image option is disabled to view the background.

When you turn off the featured image and choose a background image, that image will appear below all the posts in the slider. The same applies to background videos.

How to Add a Background Color

• Click the first tab, the paint cube icon.

• ClickAdd Background Colorand choose a color from your site's color palette, or use the dropper icon to choose a new color.

How to Add a Grade of Fund

• Click the second tab, the gradient icon.

• ClickAdd Graduate from the Fund.

• To change the colors of the gradient, click the gradient points and select a color from your site palette or use the dropper to choose a new color. You can add more points by clicking on the gradient bar.

Gradient Options

• Gradient type: change the type from the drop-down menu.

• Gradient direction: Adjust the direction by dragging the bar or writing a numerical value.

• Repeat degraded: Activate this option if you want the gradient to repeat.

• Gradient unit: changes how degraded points are calculated.

• Place gradient on the background image: activate so that the gradient is above the background image.

How to Add a Background Image

• Click the third tab, the image icon.

• Click on the gray icon+ +to open the Media Library and select or upload an image.

Background Image Options

• Use side effect: active so that the image has parallel effect (the image moves faster than the foreground content, giving 3D effect). By default it is disabled.

• Background image size: Select a size from the menu.

• Background image position: Select the position from the menu.

• Background image repeat: choose whether and how the image is repeated.

• Background image mix: choose how the image is mixed with other layers.

How to Add a Background Video

• Click the fourth tab, the video icon.

• Click on the gray icon+ +to open the Media Library and select or upload a video.

Background Video Options

• Mp4 vs WebM: It is recommended to upload both formats because not all browsers support WebM. Uploading both ensures full compatibility.

• Background video width: Type a numerical value to define the width.

• High of the background video: Type a numerical value to define height.

• Pause video when another video is played: enable the background video to pause if another video is playing. By default, the video is paused when it is not in view. If you want it to continue, turn off this option.

How to Add a Background Pattern

• Click the fifth tab, the pattern icon.

• ClickAdd Background Pattern.

• Choose the type of pattern you want from the drop-down menu.

Fund Pattern Options

• Pattern color: Choose a color from the palette or use the dropper.

• Pattern transformation: broken, reverses or transforms the pattern horizontally or vertically.

• Pattern size: Select real size, cover, adjust, stretch or custom size (width and high options appear for custom size).

• Pattern repeat source: Select where repetition begins from.
  

How to add a Background Mask

• Click onsixth tabthe icon ofMask.

• ClickAdd Background Mask.

• Select thetype of maskthat you want from the drop-down menu.

Background Mask Options

• Mask Color- Choose the color of the mask from your site palette or use the dropper to select a new one.

• Mask Transformation- Transform the mask horizontally or vertically, rotate or invest it.

• Mask Aspect Proportion- Set the ratio between width and height.

• Mask Size- Select the size: real, cover, adjust, stretch to fill or custom size. If you choose customized, the options forwidth and highwhich you can define with the slider or numerical values.

• Mask Fusion Mode- Define how the mask interacts with the layers underneath. You can choose from 16 different modes.

---

Administrator Label

TheAdministrator Labelallows you to give a name to the module that only you can see, to keep everything organized. By default, the name will be that of the module, but you can change it as you like.

---

Design Tab

Here you will find all the options forstyle and appearanceof the modulePublications Slider.

---

Overlay

• Use Fund Overlay- Activate this option to show an overlap on the background.

• Color of Background Overlay- Choose a color from the site palette or use the dropper. To make it transparent, click the circle with a red line.

• Use Text Overlay- Activate to display a background color under the text.

---

Navigation

• Color of Arrows- Choose the color of the navigation arrows.

• Color of Point Navigation- Choose the color of the navigation points.

---

Image

(These options only apply if the featured image is not as a background)

• Rounded Corners of Image- Enter a number to round the edges. Higher values = rounder corners.

• Image Edge Styles- You can add edges on all sides or individually (upper, right, bottom, left).

• Width of the Edge- Set the edge thickness (minimum 1 px).

• Color of the Edge- Choose a color from the site palette or with the dropper.

• Edge Style- Choose between solid, discontinuous, dotted, double, groove, crest, interior, exterior or none.

• Shadow of the Image Box- Defines the position (horizontal and vertical), blur, expansion, color and whether the shadow is inner or outer.

• Tone of the Image- Adjust the color tone.

• Saturation of Image- Adjust the intensity of the color.

• Brightness of Image- Adjust clarity.

• Contrast of Image- Adjust the difference between clear and dark.

• Reverse Image- Reverse colors.

• Image Sepia- Apply a sepia tone (old brown).

• Opacity of Image- Controls transparency.

• Image Blur- Adjust the blur level.

• Image Fusion Mode- Define how the image is mixed with the background.

---

Text

Configure general text styles:

• Text Alignment- Left, center, right or justified.

• Text Color- Light or dark palette (defined in theme options).

• Text Shadow- Add shadow to the whole text. You can adjust direction, blur and color.

---

Text of the Title

• Header Level- h1, h2, h3, h4, h5, h6.

• Source of the Title- Select a custom font or load a custom one.

• Thickness of the Source- Defines the thickness of the text.

• Source Style- Cursive, capital letters, underlined, crossed.

• Title Alignment- Left, center, right, justified.

• Color of Title- From the palette or using the dropper.

• Title Text Size- Use the slider or write a value.

• Spacing between Letters- Define the space between characters.

• Line Height- Space between lines of text.

• Shadow of the Title- Add shade with custom direction, blur and color.

---

Text of the Corps

• Source of the Corps- Choose or upload a font.

• Source thickness- Choose how thick the text is.

• Source Style- Cursive, capital letters, underlined, crossed.

• Text Alignment- Left, center, right, justified.

• Text Color- From the palette or dropper.

• Text Size- Adjust the size.

• Spacing between Letters- More number = more space.

• Line Height- More number = more space between lines.

• Shadow of the Text- Customizable direction, blur and color.

---

Target text

• Meta source- Defines the source for author, date, category.

• Thickness and Style- Same adjustments as the title and body.

• Alignment, Color, Size, Spacing and Line Height- As in previous sections.

• Shadow of the Meta Text- Fully adjustable.

---

Button

• Use Custom Styles- Turn it on to modify the button individually.

• Button Text Size- Adjust the size.

• Button Text Color- Choose from palette or dropper.

• Button Fund- Solid color, degraded or image.

• Button Edge Width- Defines the thickness of the rim.

• Button Edge Color- Select color from palette.

• Button Edge Radio- Rounded corners.

• Spacing between Letters- More value = more space.

• Button Source- Defines type and thickness.

• Button Font Style- Cursive, capital letters, etc.

• Show Icon- Enable or disable.

• Button icon / Color / Position- Customize the icon.

• Show Icon Only as the Mouse Pass"Yes or not.

• Button Alignment- Left, center or right.

• Text Shadow of the Button- Direction, blur, color.

• Margins and Button Filling- External and internal spaces.

• Button Box Shadow- Customize outer or inner shadow.

---

Size

• Width / Maximum width- Define horizontal size.

• Alignment of the module- Left, downtown, right.

• Content Width / Maximum Content Width- Adjust content.

• Minimum Height / Height / Maximum Height- Total height control.

---

Spacing

You can apply margins and fill by entering numerical values.

• Margin- Space outside the module.

• Filling- Space within the module.

• Chain Icon- Use it to block proportions (e.g. same value above and down).

Default values:

• Margin: 0

• Filling:

  • Higher: 16 %

  • Lower: 16 %

  • Left: 8 %

  • Right: 8%
    

Edge

Add an edge to the module. You can add a full edge or edge only to one side of the module. Adjust the width using the slider and select a color. Choose an edge style by clicking on the drop-down menu.

Rounded corners- Write a numerical value if you want rounded edge corners. The higher the number, the more rounded the corners will be. Corner values are automatically linked (as indicated by the blue string icon highlighted in the middle); however, if you want to have different values for each corner, click on the blue. If the values are automatically linked, they will always have the same value and will be automatically updated if one is changed.

Edge Styles- Adds an edge on all sides of the module or on individual sides (upper, right, lower and left).

Color of the Edge- Choose the color of the edge. You can select a color from the site's default palette or click the dropper icon to find a new color.

Edge Style- Select your preferred edge style: solid, discontinuous, dotted, double, ribbed, crest, inserted, protruded or none.

---

Shadow of Box

Add a shadow to the entire module. Once you select a shadow style, you can customize the following options:

• Horizontal Position of Box Shadow- Defines the horizontal position of the shadow.

• Vertical Box Shadow Position- Defines the vertical position of the shadow.

• Shadow Blur Intensity- Define how blurred the shadow will be. The greater the value, the more blurred and smooth the shadow will be.

• Shadow Expansion Intensity- Define how dense the shadow will be. Greater value creates a more intense shadow.

• Color of Shadow- Define the color of the shadow.

• Box Shadow Position- Defines whether the shadow will be inside or outside the module.

---

Filters

Adjust the filter in the module:

• Matiz (Hue)- Defines the nuance angle of a color.

• Saturation- Defines how intense color saturation will be.

• Brightness- Define how bright the colors will be.

• Contrast- Define how different the light and dark areas will be.

• Invest- Reverses nuance, saturation and brightness according to the specified value.

• Sepia- Apply a warm sepia-type tone (yellow/brown).

• Opacity- Defines how transparent or opaque the background will be (color, gradient, image, etc.).

• Blur- Defines the Gaussian blur level applied to the module.

Fusion Mode- It refers to how the module is mixed with the layers underneath it. By default, "normal" mode is selected.

---

Transformation

• Climbing

• Move

• Rotate

• Tilt

• Points of origin

Browse for each option. Set each by entering numerical values or dragging and expanding the box or circle.

You can block these values so that they are always identical by clicking the string icon at the bottom right.

---

Animation

Here you can apply animation to the module. Once you choose a style, you can adjust the following options:

• Duration of Animation- Defines how long it takes to complete an animation cycle.

• Delay in Animation- Define how long to wait from the animation is applied until it starts to run.

• Initial Opacity of Animation- Defines the opacity value with which the animation begins.

• Animation Speed Curve- Defines the method of accelerating/unaccelerating the animation. Smoothing animation at the beginning and end creates a smoother effect than a linear curve.

• Animation Repeat- By default, animations run only once. If you want it to repeat continuously, choose the "Loop" option.

---

Advanced Tab

In this tab you will find useful options for experienced web designers, such as custom CSS.

Here you can apply custom CSS to your module. You can also add custom classes and IDs to use more advanced styles or apply CSS code directly.

---

ID and CSS Classes

Assign a specific ID or CSS Class to the module. This is useful for applying custom CSS from your child theme stylesheet.

---

Custom CSS

• Free CSS- Write free CSS using the selectorselectorto point to this module. Example:selector h1 {color: network;}

• Elements of the Module- You can apply custom CSS directly in this tab. By clicking on "Module Elements", you will see individual sections to add specific CSS properties.

---

Attributes

This defines the relationship of the button link between the source to which it is linked and the page from which it is linked.

---

Conditions of Use

This tab lets you define when the module will be displayed according to certain conditions, such as:

• if the user has visited before,

• if you have already bought on your site,

• which browser you are using,

• which operating system it uses, and more.

You can add one or multiple conditions.

---

Visibility

• Disable in- Defines the visibility of the module. You can disable it (hide) in Phones, Tablets or Desktop by ticking the appropriate box.

• Horizontal Overflow- Defines what is shown when the content overflows sideways:

  • Visible- The content will be displayed if it exceeds the width of the module.

  • Displacement (Scroll)- A horizontal scroll bar appears if the content is greater than the width of the module.

  • Hidden- Content that exceeds width will be hidden.

  • Auto- The browser decides whether or not to display the scroll bar.

• Vertical Overflow- Similar to the previous one, but affects content that overflows up or down.

---

Transitions

Controls the duration, delay and speed curve of animations when passing the cursor (hover):

• Duration of the Transition- Defines how long the transition lasts (in milliseconds)

• Delay in the Transition- Define the waiting time before the transition begins.

• Transition Speed Curve- Defines the type of acceleration of the transition.

---

Position

• Position- Defines the position of the module:

  • Relative (default)- The module is positioned within the normal flow of the document.

  • Absolute- The module is removed from the normal flow and positioned in relation to its closest ancestor.

  • Fixed- Positioned in relation to the browser window, useful for modules that must remain visible when scroll (fixed).

• Vertical Displacement- Defines the vertical position of the module.

• Horizontal Displacement- Defines the horizontal position of the module.

• Z-Index- Define the order of the module. A larger number overlap on modules with a smaller number.

---

Displacement Effects

Defines the behavior of the module when the user scrolls:

• You can have the module fixed (paste) at the top, bottom or both.

• You can applyVertical Movementso that the module moves faster or slower than others
  

Save your design

Once you have finished designing and configuring the numeric counter module, click on thegreen arrowat the bottom right of the module forsave your design. If you close the module without saving,you will lose your job.

---

Then, save the page layout

Forsave the page layout, you can pressCMD + S on MacorCTRL + S on PC. You can also use Divi's bottom toolbar to save your design by clicking on thecircular purple icon with the three points ...to expand the toolbar and then click on theGreen Button Saveat the bottom right.

---

Exit the Visual Builder

Now that all your changes have been saved, clickExit the Visual Builderin the upper administration bar to exit the Visual Builder.

---

---

Continue learning

How to create a blog post marker with the moduleDivi Publications Slider.