An iPad Slider in Divi
by Andras Guseo | The divi magazine © 2015
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
#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
#ipad-slider .et-pb-controllers .et-pb-active-control { background-color: #2ea3f2 !important; }
Step 9 - Size does matter
/* 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
- 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.