How to Style Divi’s Post Slider like Design Milk’s Post Slider

Last Updated on September 16, 2022 by 26 Comments

How to Style Divi’s Post Slider like Design Milk’s Post Slider
Blog / Divi Resources / How to Style Divi’s Post Slider like Design Milk’s Post Slider
Play Button

This post is part 1 of 5 in our mini series titled 5 Creative Ways to Style the Divi Post Slider Module. Stay tuned this week for all five unique examples of Divi’s Post Slider Module, with a tutorial on how to achieve each one!


Post sliders are a commonly used design element for online publications. They’re a great way to emphasize recent posts or specific post categories. Post sliders present your content to your audience rather that waiting for them to find it. The appearance of your post slider will often determine whether or not your audience is enticed to read a post.

The Divi Post Slider Module looks great even with it’s default settings, but there will be situations that require you to modify its appearance. This series will explore five different post slider designs found in some popular online publications, and how similar designs can be created using Divi’s Post Slider Module.

Let’s take a look at the design we’ll be doing today!

Today’s Before & After: The Divi Post Slider Module

The first image below shows the divi post slider module with it’s default settings and no featured image, while the second is a modification created with just a few tweaks in settings and some custom CSS.

Before

divi-post-slider-default

After

Divi-Post-Slider-After

How to Style Divi’s Post Slider like Design Milk’s Post Slider

Subscribe To Our Youtube Channel

The Concept & Inspiration

designmilk-post-slider

Inspiration for our first post slider style comes from Design Milk, an online magazine dedicated to trends in modern style. Design Milk is a popular publication among interior designers, architects, and artists, and has been featured in The San Francisco Chronicle, LA Times, Time Out New York, and others. The post slider on the Design Milk website is both simple and elegant and provides a nice starting point for this series.

Preparing the Design Elements

In preparation for this design, you’ll need to create a few blog posts. Ideally, you’ll already have some created but if you’re just doing this tutorial as an exercise you can create a few very simply with some lorem ipsum text.

You’ll also need to make sure you’ve selected a featured image for each of the posts that will appear in the slider. If you aren’t familiar with setting featured images, you can find the setting along the right side and toward the bottom of the post editor page.

featured-image-meta-box

Click the “Set featured image” link on the bottom of the right sidebar, then choose or upload a new image. This slider will look best if each of the featured images are equal in size. I chose 800px by 600px for mine, but the exact size isn’t critical.

You will also want to add an excerpt for each of your posts in the “Excerpt” input box found toward the bottom of the post editor page. This slider design will display your post excerpt like a sub-heading below the title, so you’ll want to keep it short and sweet.

excerpt-meta-box

Implementing the Design with Divi

If you’re following along and don’t already have a page setup to display your post slider, simply create a new page by clicking “Pages” on the left sidebar of the WP Admin, then “Add New”. Now click the “Use the Divi Builder” button and then “Load From Library” and select Divi’s predefined layout “Page Right Sidebar”. This layout is closest to the general layout of the Design Milk page.

pre-defined-layouts

Once the layout is loaded, you can click on “Use Visual Builder” to start making the needed modifications.

use-visual-builder

In case you’re new to Divi’s Visual Builder, let’s take a quick tour of this incredible new tool. Move your mouse around the screen and notice the borders and toolbars that appear as you hover over the various page elements.

The color coding is the same as that of the Divi Builder. Sections will be blue, orange, or purple depending on if they are regular, specialty, or full width respectively. Rows are always green, and Modules are always gray.

The toolbar icons are pretty much self-explanatory and include tooltips in case there’s any doubt of their function. There is also a main settings bar at the bottom of the screen with the save button on the right and various responsive views available on the left. It will also be helpful to note that cmd+z (ctrl+z) provides several levels of undo just in case.

frontend-predefined-layout

Adding & Configuring the Divi Post Slider Module

Let’s begin by deleting the top text module just under the header and replacing it with a Post Slider Module.

adding-post-slider-module

General Settings

Our modifications begin with “General” settings, which is where you are by default after adding any new module.

  • Go ahead and set the number of posts and choose a category.
  • Change “Show Post Meta” to “No”.
  • Set text color to “Dark”.
  • Change “Image Placement” to “Left”.

post-slider-general-settings

Design Settings

Now let’s move on to the settings under the Design tab.

  • Set the top padding to 50px
  • Set the bottom padding to 40px
  • Change “Arrows Custom Color” to white (#FFFFFF)
  • Change “Dot Nav Custom Colors” to black (#000000)
  • Set the header font to all caps and the size to 25px

post-slider-settings-design

Now scroll to the bottom and make the following changes:

  • Change “Use Custom Styles for Button” to yes
  • Set the Button Text Size to 13px
  • Set the Button Text Color to black
  • Set the Button Border Width to 1px
  • Set the Button Border Radius to 0

post-slider-design-settings-2

Custom CSS Tab

Now you’ll need to add some code to the CSS tab. Click the “CSS” tab at the top of the module settings box. Now give the slider an ID of “dm-slider” by typing it into the CSS ID input.

post-slider-css-tab-css-d-1

Now add CSS code into the sections as follows:

Main Element:

border: 1px solid gray;

post-slider-settings-css-1

Slide Title:

margin-top: 10px; 
font-family: Georgia, serif !important;

post-slider-settings-css-2

Save your changes by clicking the check icon on the bottom right of the module settings box. Then save the page by clicking the “Save” button at the bottom right of the page.

frontend-builder-save

You can see in the Visual Builder that our post module is beginning to take shape, but it isn’t quite there.

offset-image

Adding Custom CSS via the Divi Theme Options

We still need to size and position our image, and change our navigation dots into rectangles. To accomplish these final details you’ll need to go the General settings of your Theme Options. To get there, exit the Visual Builder and return to your admin dashboard. Now on the left sidebar toward the bottom, click on “Divi”, which brings up your “Theme Options” settings.

divi-wp-dashboard

Scroll to the bottom of your screen and add the following code snippet into “Custom CSS” and then click “Save Changes”.

/*MOVE IMAGE TO TOP LEFT EDGE OF SLIDER*/


#dm-slider .et_pb_slide_image img {
    margin-top: 0px;
    margin-left: 0px;
    max-height: 100% !important;
}
#dm-slider .et_pb_slide {
    padding-left: 0px;
}
/* TURN DOTS INTO RECTANGLES */


#dm-slider .et-pb-controllers a {
    width: 24px;
    height: 4px;
    margin-right: 4px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
#dm-slider .et-pb-arrow-prev,
#dm-slider .et-pb-arrow-next {
    background-color: rgba(0, 0, 0, .25);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50% !important;
}
#dm-slider .et-pb-controllers {
    top: 30px !important;
    left: calc(47.25% + 20px)!important;
    width: 50%!important;
    height: 10px!important;
    text-align: left!important;
}

divi-custom-css-panel

Now open the page with your post slider and there you have it, a fresh new look for your Divi post slider inspired by the one found on the Design Milk homepage.

Divi-Post-Slider-After

Tomorrow: How to Style Divi’s Post Slider Module Like Bri + Co’s Post Slider

Well, whether you found this particular design useful or not, I hope it has provided a detailed look into some of the more advanced settings within Divi’s Post Slider Module, as well as piqued your imagination as to what is possible.

Don’t forget! This post is just 1 of 5 in the mini series “5 Creative Ways to Style the Divi Post Slider Module.” If you’d like to see what else I’ve come up with be sure to come back tomorrow where I will be showing you how to create a post slider like the one on Brit + Co’s website (brit.co).

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

15 Best Divi Plugins in 2024 (Top Choices)

15 Best Divi Plugins in 2024 (Top Choices)

Posted on February 20, 2024 in Divi Resources

Divi is a feature-rich theme for WordPress, offering a user-friendly, powerful website-building platform with a visual builder. It includes a large collection of modules and layouts that make building and customizing your website design easy. Divi boasts a thriving community of third-party...

View Full Post
Get a Free Fitness Trainer Layout Pack for Divi

Get a Free Fitness Trainer Layout Pack for Divi

Posted on February 19, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Fitness Trainer Layout Pack that’ll help you get your next Fitness...

View Full Post

26 Comments

  1. First, sorry for my english

    In my website, its posible delete the gray sides (left of the image and right of the post.

  2. Can you explain how to make this work for the FullWidth Post Slider module?

  3. Great post – thanks. I have white space on the top and bottom. I’ve double checked my settings in Visual mode and image size is 800×600 – any ideas?

  4. This tutorial, as with most of these, would require media queries with more CSS for a complete responsive solution. Actually, if you look at the design milk site you’ll notice that the mobile slider is a completely different design than the desktop slider. Another possibility would be to add another slider for mobile and hide it on desktop in the general settings.

  5. Great but mine has extra white space above and below the image ? How can I fix this? Thanks!

    • I had this initially but once I got my images to be 800 x 600 in my posts it was sorted.

      I changed the image in the media library, but found it only worked if I went into the post and updated the post.

      Although gaps reappear when you look at on mobile devices!

      • Thanks Ron ! I will try this.

  6. Thank you for a fantastic tutorial! One question, the image doesn’t display on mobile after adding the CSS even with the image enabled for mobile devices. Any way of fixing this?

    • I would appreciate a reply on this too. Looks great until you see it on a mobile

  7. In 3 word very nice post. Complete knowledge It will helps us a tone.
    Thank you
    Aregb

  8. Thanks. Very well written and some really useful steps.

    I don’t however care much for the design inspiration of the article (design milk). It’s the 1st one I’ve not liked. It looks messy and unbalanced to me and unlike any of the other ‘inspirational’ sites we’ve been shown. Maybe you’ll all disagree, but it’s only my opinion. Don’t shoot me!

    Thanks again.

    Kind regards

    Rob

    • I think it’s bound to happen that some concepts will not be for everyone. Hopefully we’ll continue to have more designs you enjoy than not!

  9. Great post Nathan, looking forward to the rest of it…

    It would have been nice to also have a series on Category page design and Tag page design, topics that for an unexplained reason to me do not have a response by Divi.
    Thanks
    Avi

  10. Thanks for the tutorial.
    The featured image you show under “Preparing the Design Elements” means that we need to create a featured image and write the excerpt beside it and then take a screenshot to the rectangle.
    is this correct?
    thanks

  11. Thanks in advance. I love this.

  12. Thank you! What did I wrong, when the padding is not working as you’ve shown? I paste the code, but nothing changed…

  13. Again a very useful post! Thanks!

    • Thanks in advance. I love this.

  14. It’s great to learn just how flexible divi actually is!

  15. Thanks a lot,

  16. Thanks! These step by step guides are excellent. I love the new emphasis on Divi-focused content on the blog.

  17. These kind of posts are very nice to learn how to code and to get criative ideas for new projects. Thanks!

  18. Will this work for video posts?

    I am very disappointed to see so many layouts that don’t work with all post styles found on this theme.

    Therefore making it very limited.

    • Hi David, I can understand how that would be frustrating. I think it’s important to keep in mind that in these tutorials, just as in web design in general, some solutions (most solutions) are not one size fits all. There are probably going to be Divi Daily pieces that do not apply to you and your ideal use cases all the time. However, if you have a request you can always leave them here in the comments and I will take note of them.

      • Anyway, you didn’t answer my question. Does it work with video posts or not?

      • Nathan, all I am asking is for blog layouts and sliders that take into account the fact that there isn’t just one post type.

        And that is actually one of the strengths of the Divi Theme.

        So please honor your full potential.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today