Thanks! It also specifies that the animation is to be run every two seconds, with a linear transition (the speed of the transition is constant) and that this is to be repeated forever. 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? Though this article is about positioning and animating Divi slider text, we can use the same approach for the slider buttons as well. Hopefully it'll do what you need, but let me know if not. You can also style every aspect of … • Fixed gallery module background parallax issue on the Front-End. Button URL Here is the slightly modified CSS and HTML needed to do this. Alternatively, you might want to try "text-align: justify;" which should make each line of text take up the same width. If you think back to our descriptions of how animations work, all you need to do is define the animation and attach it to the slide. We are going to have to do that ourselves in a moment. If we wanted to change the position of the content on all slides, we could simply use the hps class for that. Suppose you start with a full-width slider with a background image and some text, similar to that shown in the featured image above. We can move the text up by reducing the top padding, but need to correspondingly increase the bottom padding to keep 32% padding. Here is the CSS code we used to achieve this. individual. Don’t forget to also attach the slide-from-left class to the slider by adding the class name to Slider Settings->Advanced->CSS ID & CLasses->CSS Class. For each ‘state’, the CSS within the brackets can be anything. This is because we are not using the same styling as the slider uses fore the heading. We probably want to make sure that our text is not obscuring the point of interest within the image, that we can actually read the text and that we have enough contrast between the text and background colour. , but I need the lines of text center justified with each other. QUESTION 2: I’ll be adding images over time. It is on my to-do list though, so hopefully I'll be able to add it in a future update. Try it now. I’m trying to move the text on the first slider for So, in this example, the button color is white for the first 50% of the duration of the animation, then blue (#0e9fb4) for the next 30% of the duration then returns to white for the final 20% of the duration. The diagram above is just trying to outline the structure. Enter the body content of your slider here. For this reason, it can be a quick way to create a hero slider. Similarly, some of the positioning and font sizes used here may need to be modified for optimum display on small devices. If you found our blog article useful, why not subscribe? You can then use the font size options, etc, to make the title and description bigger if you'd like. Some of these examples will be fairly simple and will just require some adjustments to the Divi module settings. Registered in England and Wales, No. To do this we need to target .hps-1 and .hps-2 with different animations. We also adjusted the horizontal position a little to reflect the new vertical positioning –. There are a lot of other objects in the web page, of course. Divi has an option in the slide settings to toggle the vertical alignment between centered and bottom-aligned. Animation and postioning can be easily combined. Here is some code and wht this looks like –. By design, slide text is supposed to stay centered on mobile as well, isn't it? Is there a way to get the text to the left and the image to the right? The slide title is in an H2 called et_pb_slide_title and the body of the content is held inside an object called et_pb_slide_content. Also, how can I eliminate the fade in and out of the background image on a slide? I did this in the end by removing the text overlay in divi and adding some custom css to do the full width overlay Thanks very much for your help! It made me think if is it possible to have a fullwidth image carousel behind a fixed text and logo… Wondering if you already know how to do it…, Hi, glad you liked the tutorial. will allow us to target individual slides. any changes in the order and the timings will be applied to the wrong slides…, Your email address will not be published. We can do this by changing the top and bottom padding of the slider description. As it happens, Divi’s default animation is called fadeBottom and here it is along with (simplified) CSS that attaches it to the .et_pb_slide_description –. Because there are three periods, the animation is set to last for a multiple of three and the definitions of the animations have four ‘endpoints’. , Ha ha! I don't see it. If we want to add styling that is common to all slides, we can use the .hps class to do that. Thanks! As an aside, though we are using one of the built in animations, fadeInBottom, we could just as easily use an animation that we define ourselves. I just manage to get it right! Here is some code and wht this looks like –. When we do use an image, the text position changes slightly depending on the image position chosen. Once we start moving the content around, there is a good chance that this will effect the height of the slide. That way, you can easily control the text displayed under the images. In this scenario, the slide content is also centered. Hi Gary, any chance you can send me a link to the page you're working so that I can take a look (as it seems to be working on my site)? Note that the amount of text you enter here will determine the height of your slides. I am new to divi and still learning atm one thing i am having problems with is the text overlay of a slider! Before we talk about animating Divi slider text though, we are going to take a look at the structure of the slider. So far, we have not used an image as a slide background. Cheers! So, the example below has a single slide, called Slide Four, with a class name of .hps-4. So, in effect, we no longer need to target.et_pb_slide_description. Keyframes are a very flexible way of specifying animations. In this tutorial, I’m going to show you how. It is intended to be quite a smooth transition as it has a slow start and end. For the sake of clarity we have added a new slide and targeted it with the class .hps-3.The HTML used for the slide content is –, Here is the CSS needed to target the title and body text separately (you will not need the CSS to switch off the default slider animation if you have that already in your child theme) –. Hey Brian, I've previously written this post on how to do it: Now do the same for the second slide. To target individual objects we would normally give that object its own, unique classname. Hi Katie, there isn't at the moment, I'm afraid. Hi, Your tutorials are great! So far, we have modified the animation of the slide by using the built in animations from Divi. Nonetheless, we choose to leave it in, to make the CSS easier to change. Is there a way to have different timings for each slide? So, it jumps back to the ‘original’ position  –, So, one way to avoid this is to make sure that the position at the end of the animation is the same as the position if no animation had been applied. To change the animation on the slide content simply choose one of the alternative, built in animations and set the animation-name to use it. In fact, there are a number of transitions pre-defined in Divi and we have listed them here with a very short description of what each does. Now, before we get too far into positioning the text there is one other issue to talk about briefly. First, we can easily control the horizontal alignment by setting the "text-align" property to either "left", "right", or "center". If you add it too, you end up with invalid CSS that doesn't end up doing anything. Here's a quick tip for positioning the slide text on individual slides with the Divi Theme's full width slider. This will allow us to target specific slides. We used the H1 and P classes in the content and targeted them in the CSS. I guess you could just put CSS directly into each slide Settings tab…. 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? Divi Text Animation; Divi Text Color Motion; Divi Text Divider; Divi Text Highlight; Divi Text Hover Highlight; Divi Text Mask; Divi Text Stroke; Divi Text Stroke Motion; ... Gallery Slider. We did this by adding two extra classes to the first slide. Add the CSS Snippet. We prefer to avoid adding CSS into the Advanced->Custom CSS field because we don’t like distributing our CSS around Divi like this. We will use our new classes to taget the slide content instead. I'm glad you were able to get the effect you wanted, Simon . By default, Divi slider text and buttons are placed centrally, after transitioning in from below. Thanks! The background overlay is similar to the text overlay, but the overlay will be as large as the slider itself (i.e. To create a multi-line colored background highlight like this, just add a CSS class inside the module’s Advanced Tab Custom CSS input area. Here is an example (again, don’t forget to attach the bounce-from-left class to the slider) –, One thing to just mention before we go any further is that if the final state of your animated object isn’t the state it would have been in if no amination had been applied,  it will appear to ‘jump back’ at the end of the animation to its ‘non-animated’ state position. Firstly, we have defined our own animations, TitleAppear and BodyAppear. The @keyframesrule describes the timeline for the animation. We can target more elements by changing our HTML to add our own classnames rather than using the built in classes. To make them overlap, you can try to go to the Gallery module settings > Advanced > Custom CSS > Gallery … It is this third slide where we have animated the title and body separately. If you prefer to position centrally on mobile and tablet you could ADD the following AFTER the existing code…. If you use the Inspect feature of Google Chrome (or equivalent), you should be able to see the internal structure of the slider above. We do this so we can understand what we need to target when we make changes. @media (max-width:980px) { .hps-11 a.et_pb_more_button { left:20%; width:60%; } }. The .alarm class was attached to the button. this doesn’t happens with other modules, in example with text module I can have a 100% with text. 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%). 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. it’s available for us if we need it). It slides in from the left! We can now target the first slide specifically and do things to it without effecting any other slides. I have text that I want moved to the side (this works great!) This can be useful if it is difficult to read the text against the background, or when text obscures an important part of the background or simply when you want your text animation to be more impactful. What would be the best practice in positioning slide text for smaller screen resolutions? Get all of our articles and tutorials delivered direct to your inbox! I would like the text overlay / title and description etc to be full screen, is this an easy thing to achieve? Hi, Thanks for getting back to me, i have now managed to get the slider to show how i wanted. Now, the ‘heading’ is a little smaller on slide one than on slide two. We will make use of them in a moment to make some more changes. Hi Gretchen, you should be able to do it just by changing "text-align: right;" to "text-align: center;" in the above. We haven’t actually defined these classes yet, so they are doing nothing for now. It’s still not ideal though because the ordering of your slides and the ordering of your CSS clauses would need to match…. thank you, First of all, I’m really glad you liked the article and thank you for commenting. We are going to use CSS to position and animate the slider content. Every setting is inside the Divi builder, and you can instantly check if the design fits or not. Here is an example where, at the end of the animation, the text is 20% further to the right than it would be without any animation. Thanks Dan, for this tip and code! Hi, I've try your instruction on my site, it works perfect!! (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. We like to keep all of our CSS in one place, in our child theme. We have set the slider to automatically transition between slides, every 4 seconds, and, to simplify things, we have switched off the controls and arrow buttons. I’m afraid I’m not sure what you mean with your CSS though – sorry. It may not be sensible to style buttons differently on different slides, but it might be very useful to be able to position them differently. In this Divi mini series, we’re going to go over 5 Impressive Divi Gallery Layouts and how to create them. You can change the font of your caption text by selecting your desired font from the dropdown menu. Don’t forget to remove the button you set up in the slide previously – we are making the buttons ourselves now! please forgive me….. in one easy-to-use plugin. By default the text is right and the image is left on the fullwith slider. Great! The key elements to note are that the slides are contained in objects called et_pb_slide and that the container holding the title and body text is called et_pb_slide_description. We also know that many want to customize the recipe for a … add this CSS to switch off the default animation and add our animations to each slide. So it is difficult to target them. We can now target this button on this specific slide with some appropriate CSS  –, The Divi slider module adds a drop shadow to text in slides. So, we will force the minimum height (min-height) of the slider (of all of the slides in fact) to be 400px. The Divi Theme's gallery module shows the image titles and captions under each image, by default. The .custom-slider class can conveniently be used to do this. If we only used built in classes we would quickly run out of class names to use. So, fadeBottom starts with the text being invisible and 10% below its ‘normal’ position and gradually moves it back to its original position and makes it visible. Well, you can, with just one line of CSS. Using the default centre position is ok but we might improve this by moving the text to the right. Your code above should work on mobile because it's using percentages, correct? Divi comes with dozens of great fonts powered by Google Fonts. Caption Font Size Images of your products or advertisements that you wish to slide in a loop … Hi Simon, do you mean you want to overlay the entire slide with a color, rather than just having a small box around the text as you get with the "Text Overlay" option? Any article on how to make your CSS code responsive will discuss these techniques in greater detail than I can do here. You may not think this looks all that exciting but what you have done is awesome! Now, the CSS above is applied to all of the buttons on all of the slides. (sorry for lots of q's in one comment! so, if you flag the slider with a new class name like .my-slider you could use something like .my_slider .et_pb_slide_1 to target the first slide etc. Here is an example. Controlling the vertical alignment, especially to top-align the text is slightly trickier. I set the font size to be much smaller on mobile. Glad you found the problem, Randall . I'm glad you were able figure it out, Dick . Could you tell me why it’s not working? 2. It was kinda of half and half! With the Divi Gallery Module we can create awesome, eye catching galleries that’ll draw in our website visitors. Remove the heading, go to the Content field, be sure to use the Text version of the editor and enter this as the HTML to be used –. The choice of 400px is an arbitrary one but it seems to work well for this image and the slides we plan to use with it. again deep bow of respect. The example below isn’t awful, but we might want to move the content to the right. No great suprise then when we see this in action on our slider below. Note: I'm still developing this tip, so it hasn't been tested extensively and isn't yet available as an option in Divi Booster. It is this container that the default animation is applied to. For example to align the slider text to the top right corner of the slide, we can add the following into the slide's custom CSS field for the slide description: Breaking it down, there are two components. Thanks so much for posting this and contributing to the Divi world! So far, when we add an animation we have targeted .et_pb_slide_description. Now, if we simply want to target the title and body, we can do that with the built in classes. I’ve not tried this Rod but, if it was me, I might try and use nth-child to target the slides. We can position the text in the vertical as well, of course (again, there is no need to include the min-height if it already present in your styling file). 5401293. We do that by giving this slider a class name of .custom-slider-one. Another useful technique is to decrease the font-size on mobile, again using a media query. While there is an option to hide both the titles and captions, sometimes you may want to show only the captions but not the titles. On our slides, we are using H1 for the title and P for the body text. This slider is a great slider module that you can use to showcase images or videos, display some text, and also you can put a CTA on it. What do you think would happen if you used this CSS instead? If you actually want the text to end in a position that is different, you can use the slightly obscure animation-fill-mode:forwards. Can't figure out why Divi's default positioning is keeping it to the right on phone view. It’s not diffiuclt , though, to make your own animations. For now though, just note that we have got the default animation, which is fine. Hi Rod, I think that is awkward because Divi does not actually allow you to name the slides with your own classname. All of the positioning is done using percentages so I think it should be responsive. Or have I misunderstood what you're after? Hi there, I tried this approach and it turns not adaptive for mobile devices. Registered office 227A West Street, Fareham, Hampshire, PO16 0HZ. The default Divi text animation in sliders is achieved using keyframes. Hopefully, you can see a relationship between the structure above and the code revealed by Google Chrome Inspect. Here is what the above CSS looks like –, In exactly the same way as we targeted different slides by using different class names for each of them, we can target different objects within a slide by using thier class name. Divi Gallery Slider; Divi Glitch Text; Divi Gradient Text; Divi Image Hover Box Effect; Divi Image Icon Effect; Divi Image Reveal; Divi Image Scroll Effect; Divi Logo Carousel; ... Edit or remove this text inline or in the module Content settings. Slider B – Slider image slideshow with Dots set to Hidden. Content. You can also customize the style of your text using the bold, italic, all-caps and underline options. Our example CSS below uses fadeLeft. Create a new slider with a slide then go to the Content field of the slide and switch the tab to Text (make sure you do this or bad things will happen – the HTML will not be recognised) then add this HTML code to the content –. It uses a transition called ease-in-out. By default, Divi uses the Open Sans font for all text on your page. Here is some HTML that we can add to the slide content to ‘make’ a button (we are simply using an HTML Anchor element and applying the built in ET button classes to it). Here is what it looks like –, Drawing a diagram of this structure it would look like this –. For your text, you will need different positioning. Put this CSS into your child theme to see the effect. When we style the next slide we will use hps-2, a new classname for a new slide. I’ve googled it for the last 48 hours and it’s making me want to pull my hair out!! 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…. For example to align the slider text to the top right corner of the slide, we can add the following into the slide's custom CSS field for the slide description: Here's the copy-and-pasteable version: text-align: right; padding-top: 5% !important; padding-bottom: 27% !important; This article explains positioning and animating Divi Slider text with CSS, allowing you far greater control. and there are bound to be situations where, on mobile, my examples overflow to the right of the device. It appears the Divi Gallery displays only images stored in the WP Media Library. Let me know if that doesn't help. Slider A – Slider image slideshow with Dots set to Available. There are many good articles on the internet about creating child themes. I think with that change you should be able to control the position of the description, but let me know if you still can't get it to work. You can see the effect here. Most people know that the height of the slider is determined by the content of the slides and not by the size of the background image. The periods could be made different in the future. Is this possible? So, we think there are only really two choices for targetting individual slides… Either add your own CSS directly to the Advanced->Custom CSS field of each slide or add the new ‘target class’ directly to the slide content.