Sélectionner une page

How to Style Divi’s Post Slider Module Like Tesco Living’s Post Slider

par | Nov 23, 2016 | Wordpress-en

How to Style Divi’s Post Slider Module Like Tesco Living’s Post Slider


This post is part 3 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!

Today we continue our series on styling the Divi Post Slider module. We’re using model sliders from well-known blogs around the web and attempting to recreate their appearance in Divi. These tutorials allow us to explore the Divi Post Slider module in-depth, pushing it’s flexibility to the limit. In today’s post, our model is the post slider found on the Tesco Living website.

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

Before

divi-post-slider-before

After

tesco-post-slider-after-1

The Concept & Inspiration

tescolivingcapture

Inspiration for today’s post slider style comes from Tesco, the world’s second largest retailer. Tesco Magazine is one of the UK’s top selling magazines with content focused around food, family, and living. The publication’s website, TescoLiving.com is where we find the post slider for this tutorial.

The concept for Tesco’s post slider is simplicity. A prominent featured image is displayed to the left of the post category, title, and excerpt, while only arrows are displayed for navigation. Slide number and number of slides in the set are also displayed next to the navigation arrows.

Preparing the Design Elements

For this slider, you’ll need three posts with featured images with a recommended size of 800px X 500px. Each of your posts must also include a short excerpt of one to two sentences. Notice also that this post slider uses sentence case for the post title. To truly capture this style you’ll need to change your titles accordingly. All of these settings will be found on your “edit post” page. To get there from your dashboard, click on “posts” on the left sidebar menu, and then click the post title.

creating-posts

Next we need to add FontAwesome to your Divi site. Navigate in your WordPress Admin to Divi > Theme Options > Integration > Add code to the of your blog and paste the following snippet there.

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Finish up by clicking the green “Save Changes” button.

Implementing the Design with Divi

Since the Tesco Living post slider is a full-width slider, you’ll need a single column row with a post slider module on your page. From the Divi Visual Builder, click on the green plus sign to add a row, then select single column, then the Post Slider module.

add-post-slider-module

General Settings

post-slider-module-general-settings

In the General Settings tab of the Post Slider Module, do the following:

  • Set the number of posts to your desired number.
  • Switch “show controls” to no.
  • Change the “Background Color” to #ffffff (white).
  • Change the text color from “light” to “dark”.
  • Make sure your “Image Placement” is set to Left.
  • Change “Use Background Overlay” to no.
  • Change “Remove Inner Shadow” to yes.

Design Settings

post-slider-module-design-settings

In the Design Settings tab of the Post Slider Module, do the following:

  • Set “Top Padding” and “Bottom Padding” to 0px.
  • Set the “Header Font” to Nunito; bold.
  • Set the “Body Font” to Lato.
  • Set the “Body Font Size” to 16px.
  • Switch “Use Custom Styles for Button” to yes.
  • Set “Button Text Style” to 14px.
  • Set the “Button Text Color” to #666666
  • Set the “Button Border Width” to 1px.
  • Set the “Button Border Radius” to 0px.
  • Set the “Button Font” to Lato; bold.

Custom CSS

post-slider-module-css-tab

In the Custom CSS tab of the Post Slider Module, add “tesco-slider” to the CSS ID field and then click the green check box to save your settings.

Then, navigate to the page settings by clicking on the bottom controls dock icon followed by the gear icon.

post-slider-page-settings

post-slider-module-page-settings-css-tab

Click on the CSS tab and paste the following code snippet in the custom css panel:

/* TESCO SLIDER - GENERAL */
#tesco-slider .et_pb_slides .et_pb_slide { padding: 0; overflow: hidden; }
#tesco-slider .et_pb_slides .et_pb_container { height: auto !important; padding-bottom: 60px; }

/* TESCO SLIDER - IMAGE */
#tesco-slider .et_pb_slide_image { width: 61.25%; margin: 0 !important; top: 0; }
#tesco-slider .et_pb_slide_image img { max-height: 100% !important; }

/* TESCO SLIDER - DESCRIPTION */
#tesco-slider .et_pb_slide_description { width: 38.75%; display: block; padding: 25px !important; }

/* TESCO SLIDER - TITLE */
#tesco-slider .et_pb_slide_title { margin-top: 40px; }

/* TESCO SLIDER - CATEGORY */
#tesco-slider .post-meta { font-size: 0px !important; position: absolute; top: 25px; }
#tesco-slider .post-meta span { display: none; }
#tesco-slider .post-meta a { font-size: 15px !important; color: #878486 !important; }

/* TESCO SLIDER - NAVIGATION */
#tesco-slider .et-pb-slider-arrows { position: absolute; left: 63.25%; bottom: 10px; z-index: 20; }
#tesco-slider .et-pb-arrow-next, #tesco-slider .et_pb_slider:hover .et-pb-arrow-next, #tesco-slider .et_mobile_device .et-pb-arrow-next { right: 0 !important; }
#tesco-slider .et-pb-arrow-prev, #tesco-slider .et_pb_slider:hover .et-pb-arrow-prev, #tesco-slider .et_mobile_device .et-pb-arrow-prev { left: 0 !important; }
#tesco-slider .et-pb-arrow-prev, #tesco-slider .et-pb-arrow-next { position: initial; padding: 0 5px; margin: 0; display: inline-block; opacity: 1; -webkit-transition: none; -moz-transition: none; transition: none; }
#tesco-slider .et-pb-arrow-prev:before, #tesco-slider .et-pb-arrow-next:before { font-family: 'FontAwesome' !important; font-size: 34px; color: #333; }
#tesco-slider .et-pb-arrow-prev:before { content: 'f053'; }
#tesco-slider .et-pb-arrow-next:before { content: 'f054'; }
#tesco-slider .et-pb-arrow-next:hover, #tesco-slider .et-pb-arrow-prev:hover { opacity: 0.5; }

/* TESCO SLIDER - NNUMBERS */
#tesco-slider .et_pb_slides .et_pb_slide:before { margin-left: 100px; opacity: 0; position: absolute; bottom: 17px; left: 61.25%; }
#tesco-slider .et_pb_slides .et-pb-active-slide:before { opacity: 1; }
#tesco-slider .et_pb_slides .et_pb_slide:nth-child(1)::before { content: '1 of 3'; }
#tesco-slider .et_pb_slides .et_pb_slide:nth-child(2)::before { content: '2 of 3'; }
#tesco-slider .et_pb_slides .et_pb_slide:nth-child(3)::before { content: '3 of 3'; }

/* TESCO SLIDER - RESPONSIVE */
@media only screen and (max-width: 960px) {
    #tesco-slider .et_pb_slides .et_pb_slide .et_pb_slide_image, #tesco-slider .et_pb_slides .et_pb_slide .et_pb_slide_description  { width: 100% !important; text-align: left; display: block; position: initial !important; }
    #tesco-slider .et_pb_slides .et_pb_slide .et_pb_slide_description { padding: 25px 0 0 0 !important; }
    #tesco-slider .et_pb_slide_title { margin-top: 40px !important; }
    #tesco-slider .et-pb-slider-arrows { left: 0; }
    #tesco-slider .et_pb_slides .et_pb_slide:before { margin-left: 0; left: 80px; }
}

/* TESCO SLIDER ANIMATIONS - OPTIONAL */
#tesco-slider .et_pb_slider .et_pb_slide_image,
#tesco-slider .et-pb-active-slide .et_pb_slide_image,
#tesco-slider .et_pb_slide:first-child .et_pb_slide_image img.active {
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    -ms-animation-duration: 0.7s;
    -o-animation-duration: 0.7s;
    animation-duration: 0.7s;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
    -ms-animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    animation-delay: 0.9s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

#tesco-slider .et_pb_slider .et_pb_slide_image {
    -webkit-animation-name: fadeBottom; 
    -moz-animation-name: fadeBottom; 
    -ms-animation-name: fadeBottom; 
    -o-animation-name: fadeBottom; 
    animation-name: fadeBottom;
}

#tesco-slider .et-pb-active-slide .et_pb_slide_image,
#tesco-slider .et_pb_slide:first-child .et_pb_slide_image img.active { 
    -webkit-animation-name: fadeTop; 
    -moz-animation-name: fadeTop; 
    -ms-animation-name: fadeTop; 
    -o-animation-name: fadeTop; 
    animation-name: fadeTop; 
}

Then click the green button to save your changes.

The Final Result

When all of the settings, snippets, and adjustments above have been made you will still have one more thing to do. With the visual editor’s bottom control dock still expanded, click the “Save Draft” or “Publish” or “Update” button in the right hand corner of your screen. Then, at the top left, in the black admin bar, exit the visual builder. You will be left with a beautiful, Tesco Living inspired post slider.

tesco-post-slider-after-1

Tomorrow: How to Style Divi’s Post Slider Module like Facebook Newsroom’s Post Slider

I certainly hope you’re enjoying this mini series as much as I’m enjoying creating it. As we continue to explore new ways to style and use the Divi Post Slider module, we also gain a better understanding of Divi in general.

Don’t forget! We still have two posts left in the mini series “5 Ways to Style & Use Divi’s Post Slider Module.” Tomorrow we will look at the Facebook Newsroom post slider and learn to create an interesting 3D tag element.

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



Source link