An iPad Slider in Divi

by Andras Guseo | The divi magazine © 2015

Please note, this tutorial was created with Divi 2.3. Based on tests it also works with Divi 2.4.

An iPad slider in Divi

This is a quick tutorial on how to create a slider with an iPad frame in Divi in 10 easy steps.

Click on the right arrow to start.

You can download the resources of this example from the Store for free.

Step 1 - Gathering resources

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:

(Right click, then Save target as…)

Step 2 - Preparations

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. ūüôā

Now comes the trick...

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.)

Step 3 - Setting the stage

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;
}

Step 4 - A bit of cleaning

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 */
}

Step 5 - Setting the limits

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;
}

Step 6 - Positioning the arrows

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; }

Step 7 - Taking control

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;
}

Step 8 - A little makeup

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;
}

Step 9 - Size does matter

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 */
}

Step 10 - Save & Done

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! ūüôā

If you're lost ...

If you need help in implementing this iPad slider, or something totally different with Divi, then you can hire me.

Just contact me and we will work out the rest.

The solution is already used at:

Do you want to be in the list?

Write me
on

Submit a Comment

Your email address will not be published. Required fields are marked *

css.php