An iPad Slider in Divi

Get a good quality image of an iPad or the mobile device you want to use.

You can download the iPad used in this example here:

• iPad frame with white screen
• iPad frame with transparent screen

(Right click, then Save target as…)

On your chosen page, with the Page Builder enabled, insert a section and give it the ID “ipad-slider”.

Then insert a row with 1 full column and add a slider module.

When adding a slide, choose the iPad picture as the background image.

You can use a version which has a transparent iPad screen instead of white. In this case if you set up a background color for your slide, that will be the color of the iPad screen as well. Like on this slide. Otherwise the screen will stay white, like on the next slide.

Choose your text color based on the iPad screen. With a white screen it should be Dark. 🙂

From here we will do some CSS modifications. You can just copy/paste the code into the style.css file of your child theme.

If you are not using a child theme, then I strongly recommend you to do so. 🙂 That way, you can keep your changes even after a Divi update.

You can read more on Child Themes here.

All the coming CSS code will need to come between the following:

@media only screen and ( min-width: 981px ) {

    /* All the code after this slide comes here */

}

(See, the background is blue while the iPad screen is white. This is the image with the non-transparent screen.)

We set a fix height for the slider, otherwise the size of the background image would change depending on the amount of content.

#ipad-slider .et_pb_container {
        height: 640px;
}

We remove the shadow from around the frame, and change the text alignment if needed.

#ipad-slider .et_pb_slider .et_pb_slide {
        box-shadow: none; /* Remove the shadow from around */
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        text-align: left; /* If you don't want the text centered */
        padding: 0; /* To offset a change in Divi 2.4 */
}

We need to adjust the left and right padding, so the text stays within the frame.

You can adjust the top and bottom as well, depending on the amount of text you have or whether you want to have the text on the top, middle or bottom of the frame.

/* Adjust padding. An extra 20+px on each side */
#ipad-slider .et_pb_slide_description {
        padding-left: 295px;
        padding-right: 295px;
        padding-top: 97px;
        padding-bottom: 163px;
}

We need to adjust the position of the arrows.

/* Moving the arrows vertically to the center of the iPad */
#ipad-slider .et-pb-arrow-prev, #ipad-slider .et-pb-arrow-next {
        margin-top: -64px;
        color: #be1432; /* changing the color of the arrows */
}

/* Repositioning the arrows inside the frame horizontially */
#ipad-slider .et-pb-arrow-prev { left: 230px; }
#ipad-slider .et_pb_slider:hover .et-pb-arrow-prev { left: 252px; }
#ipad-slider .et-pb-arrow-next {  right: 230px; }
#ipad-slider .et_pb_slider:hover .et-pb-arrow-next { right: 252px; }

Now we move the slider controls to a different position inside the frame.

#ipad-slider .et-pb-controllers {
    bottom: 140px;

    /* If you want to move it to the right side like
       in this example, then add these 3 lines too */
    width: auto;
    left: auto;
    right: 268px;

    /* If you want to move it to the left side, then
       add these 2 lines instead */
    width: auto;
    left: 268px;
}

We are changing the color of the dot of the active slide, so it becomes visible on a white background.

#ipad-slider .et-pb-controllers .et-pb-active-control {
        background-color: #2ea3f2 !important;
}

Again, depending on the amount of text you have, you might want to change the font size in the slider.

/* Decreasing the font size a bit */
#ipad-slider .et_pb_slide_description h2 {
        font-size: 32px; /* original is 48px */
}
#ipad-slider .et_pb_slide_content {
        font-size: 14px; /* original is 18px */
}

Save your changes and you are all set! 🙂 Please note the following regarding these modifications:

• The indicated values work specifically with the used iPad frame image. If you are using a different image, your values might need to be changed. (You can contact me if you need help with adjusting.)
• This modification only considers a full display resolution where the minimum width of the browser window is 981 px. There might be an update coming soon which addresses all resolutions.

If you liked this tutorial don’t forget to like it and share it with others. And come back for more tips and tricks! 🙂