How to Create Mobile Walkthroughs with Divi’s Slider Module (Free Download!)

Posted on March 9, 2019 by in Divi Resources | 4 comments

How to Create Mobile Walkthroughs with Divi’s Slider Module (Free Download!)

Sliders have always been really popular in web design. One of their biggest advantages is the fact that visitors can swipe through them on mobile devices. Nowadays, swiping is the new clicking, so it goes without saying that including sliders can help improve the mobile user experience visitors have on your website. When building a website with Divi, you can easily add the Slider Module to any row or section you’re working on. And with a bit of creativity and experimenting, you can achieve stunning web designs.

One of the things you can do is create a mobile walkthrough with the Slider Module. You can add as many slides as you want and the walkthrough will look equally as good on desktop and tablet, although it’s initially designed for mobile devices. In this post, we’ll recreate a stunning example from scratch and offer the section for download at the end of it.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome we’ll recreate on different screen sizes.

Static

mobile walkthrough

GIF

mobile walkthrough

Let’s Start Recreating!

Add New Section

Spacing

Let’s start creating! Add a new page or open an existing one and add a new regular section to it. Open the section settings and add some custom padding values that match the different screen sizes.

  • Top Padding: 4vw (Desktop), 5vw (Tablet), 3vw (Phone)
  • Bottom Padding: 4vw (Desktop), 5vw (Tablet), 3vw (Phone)
  • Left Padding: 30vw (Desktop), 18vw (Tablet), 3vw (Phone)
  • Right Padding: 30vw (Desktop), 18vw (Tablet), 3vw (Phone)

mobile walkthrough

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

mobile walkthrough

Gradient Background

Without adding any modules yet, open the row settings and add a radial gradient background.

  • Color 1: #f9f9f9
  • Color 2: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Top
  • Start Position: 40%
  • End Position: 40%

mobile walkthrough

Sizing

Continue by going to the sizing settings of the row and remove all the space between columns.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

mobile walkthrough

Spacing

We’re also adding some bottom padding to the row.

  • Bottom Padding: 30px

mobile walkthrough

Border

Next, add ’20px’ to each one of the corners in the border settings.

mobile walkthrough

Box Shadow

Last but not least, add a subtle box shadow to the row to create some depth on the page.

  • Box Shadow Blur Strength: 80px
  • Shadow Color: rgba(0,0,0,0.07)

mobile walkthrough

Add Slider Module

Change Background Color

Once you’re done modifying the row settings, you can go ahead and add a Slider Module. Open the module’s settings and modify the background color. All the changes you make in the design tab will automatically apply to all slides you add afterward.

  • Background Color: rgba(255,255,255,0)

mobile walkthrough

Text Settings

Then, go to the design tab and change the text settings.

  • Text Orientation: Center
  • Shadow Color: rgba(0,0,0,0)

mobile walkthrough

Body Text Settings

Modify the body text settings next.

  • Body Font: Default (Open Sans)
  • Body Text Size: 0.6vw (Desktop), 1.5vw (Tablet), 2.4vw (Phone)
  • Body Line Height: 2.2em (Desktop), 2.3em (Tablet), 2.4em (Phone)

mobile walkthrough

Spacing

Add some custom top and bottom padding too.

  • Top Padding: 2vw
  • Bottom Padding: 2vw

mobile walkthrough

Button Custom CSS

We’ll also need to add some custom padding and margin values to the button of the Slider Module in particular. Because this element is combined with different elements in each slide, you’ll have to add the padding and margin manually using CSS code in the advanced tab.

padding-left: 80px;
padding-right: 80px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 80px;

mobile walkthrough

Remove Active Sliders

Once you’re done modifying all the general slide settings, you can go ahead and remove the active slides that are already there. Instead of using these ones, we’re going to create one from scratch in the next part of the post. This will help us modify and customize everything faster.

mobile walkthrough

Customize First Slide

Customize Content in Content Box

Add a new slide to the Slider Module and start customizing the content in the content box. In the print screens below, you’ll notice that we’re adding the image to the content box instead of to the image settings. This will allow us to place the image above the written content. You can find the illustrations that we’ve used by going to the Graphic Illustrator Layout Pack post and downloading the images at the end of it. We’re also adding and styling an H3 title in the content box instead of the title field to have it show up exactly where we want to.

mobile walkthrough

mobile walkthrough

Button Link

Continue by going to the link settings and add a link to the button that’ll redirect visitors to a more detailed page about the slide in question.

mobile walkthrough

Gradient Background

Then, add a gradient background using the following settings:

  • Color 1: #aaacff
  • Color 2: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Top
  • Start Position: 30%
  • End Position: 30%

mobile walkthrough

Navigation

Modify the text settings next.

  • Arrows Custom Color: #f4f4f4
  • Dot Nav Custom Color: #000000

mobile walkthrough

Text Settings

And change the text color in the text settings of the slide.

  • Text Color: Dark

mobile walkthrough

Button

Last but not least, modify the button to make it look exactly the way you want to.

  • Use Custom Styles for Button: Yes
  • Button Text Size: 0.8vw (Desktop), 2vw (Tablet), 3vw (Phone)
  • Button Text Color: #ffffff
  • Button Background Color: #aaacff
  • Button Border Width: 0px
  • Button Border Radius: 10px

mobile walkthrough

mobile walkthrough

Clone Slide as Many Times as Needed

Once you’re done creating and customizing the first slide, you can go ahead and clone the slide up to as many times as you want. You’ll need to make some manual modifications to each one of the duplicates.

mobile walkthrough

Change Content in Content Box

The first thing you’ll need to change is the content in the content box. This includes the image/illustration that is being used. You can find both illustrations that were used in this tutorial by going to the Graphic Illustrator Layout Pack post and downloading the images at the end of it.

mobile walkthrough

mobile walkthrough

Change Link

Change the button link as well.

mobile walkthrough

Modify Gradient Background

You can also customize the color palette of each duplicate slide by changing the first gradient color.

  • Color 1: #ffccaa

mobile walkthrough

Change Button Background Color

Use that same color to change the button background color. Repeat these steps for each one of the duplicates you create and you’re done!

  • Button Background Color: #ffccaa

mobile walkthrough

Download The Mobile Walkthrough Section for FREE

To lay your hands on the free mobile walkthrough section, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome we’ll recreate on different screen sizes.

Static

mobile walkthrough

GIF

mobile walkthrough

Final Thoughts

In this post, we’ve shown you how to use Divi’s Slider Module to create a gorgeous mobile walkthrough. Although it was initially designed for mobile screen sizes, it looks equally as good on tablet and desktop. You can use this approach to create all kinds of slide sections on your website and seamlessly interact with your visitors. We hope this tutorial inspires you to get creative with Divi’s Slider Module. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

4 Comments

  1. Thank you for the tutorial. Divi is obviously the best WordPress framework on the market.

  2. very useful thank you!

  3. Very nice.
    I have some clients that I need to give step by step instructions. This looks like it might work very well. They can step through a process without having to scroll down through pages. They can just swipe forward and back through screen shots and instruction.

Leave a Reply

Comments are reviewed and must adhere to our comments policy.

576,027 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest