a deep bow of respect. I have text that I want moved to the side (this works great!) The CSS used here is a little more complicated than usual so we will pause and just explain a few points. Note that the amount of text you enter here will determine the height of your slides. Divi gallery module should have title & caption right below the image. All of the positioning is done using percentages so I think it should be responsive. This post may contain referral links which may earn a commission for this site. It uses a transition called ease-in-out. We also adjusted the horizontal position a little to reflect the new vertical positioning –. Hi, Thanks for getting back to me, i have now managed to get the slider to show how i wanted. Similarly, some of the positioning and font sizes used here may need to be modified for optimum display on small devices. I’m trying to move the text on the first slider for http://www.ndis.prorehab.com.au. We did this by adding two extra classes to the first slide. If you want to try this in your website, add the CSS to your website (ideally, in your child theme), create a button and attach the .alarm class to the button by adding alarm (without the initial dot) to the Button Settings->Advanced->CSS ID & CLasses->CSS Class. Be sure to wait for for it! So for example, the above sets a top padding of 5% and increases the bottom padding to 27% to balance it out (as 5%+27% = 32%). The Divi slider is designed to display different text on every slide and animate it as it appears, but what if you want the images to change and the text to remain the same with no animation? (make sure you do this or bad things will happen – the HTML will not be recognised) then, Slider Settings->Advanced->CSS ID & CLasses->CSS Class then. I would like the text overlay / title and description etc to be full screen, is this an easy thing to achieve? Get all of our articles and tutorials delivered direct to your inbox! Great! We can move the text up by reducing the top padding, but need to correspondingly increase the bottom padding to keep 32% padding. Add the CSS Snippet. Hi Rod, I think that is awkward because Divi does not actually allow you to name the slides with your own classname. Before we talk about animating Divi slider text though, we are going to take a look at the structure of the slider. Here is an example of using animation and positioning together –, Again, we can treat the title and body text separately if we want to –, All of the animation examples so far have happened simultaneously. Hi my friend and thank you for your super usefull instructions, I have a question: if I place a divi slider module in my site, in the mobile version, the width size of the heading text and description of slides cannot fit the 100% width of a mobile phone, the text will wrapped automatically at 50% of the display size, I tried to place, in any possible place without results, can you give me a starting point? Enter the body content of your slider here. Thanks! UPDATE 7th May 2018: Recipe #23 – How to create a scrolling image carousel continues to be the most popular recipe on Divi Soup.We know there are some issues with browsers like Microsoft Edge, due to updates within the application. One of the classes, .hps, will be used on all slides and we can use it to make changes that effect all slides (we may not actually make any changes here but…. As an example, in the slider below, we have used two slides, each with a heading and content. Some of these examples will be fairly simple and will just require some adjustments to the Divi module settings. Now, some of these endpoints are not needed, because there is no change from one period to the next, for example, the second and third periods for TitleAppear have identical characteristics and the 66% endpoint could be romoved. QUESTION 2: I’ll be adding images over time. We can do this by changing the top and bottom padding of the slider description. Here is an example. Using the default centre position is ok but we might improve this by moving the text to the right.