All Divi Modules Overview incl. CSS Tricks – Part 4

Apr 14, 2021 | Divi

In this 4rd video I will continue to demonstrate all Divi modules. I will also show you some CSS with the modules that I use for my clients. This is part 4 of the 5 part series Divi Modules.

👇🏻👇🏻👇🏻 Start here 👇🏻👇🏻👇🏻

Do you want to support my channel? Leave a like or buy Divi / Elementor Pro with 10% discount via the link below. That will help me enormously to create these free videos for you and keep going!

⇒ Software that I recommend:
Divi with 10% discount
Elementor Pro
SiteGround 70% discount 
WP Rocket 10% discount

I want you to succeed with your website, so lets get started.

All scripts and CSS snippets: 📜…


0:00 Intro
0:43 Slider Module
20:34 Social Media Follow Module
28:12 Tabs Module
34:08 Testimonial Module
37:51 Text Module
41:45 Toggle Module
46:12 Video Module
52:11 Video Slider Module

Thank you for watching, part 5 is here: 😀

✅For tips and tricks on getting the most out of Divi and WordPress, don’t forget to subscribe:


📖 Read the rest of the transcript at #Divi #AllModules #WordPress

All Divi Modules Overview incl. CSS Tricks – Part 4


Hey you guys! Welcome to part four of this five video series about all Divi modules. In this video, I’m gonna take you by the hand and show you the next Divi modules but I’m also going to show you some CSS that I use mostly in creating client websites. For example, I will show you how to add two buttons in the slider module, how to create an awesome tab module with two images on top, and I’m also going to show you how to use those custom bullets in your text module, how to change your icons in your toggle module and last but not least: I’ll show you how you can change your play button in your video module or video slider. Alright, let’s get started with the first module. So, the next module, we are going to do is a slider. The slider is one of the most used modules in Divi, we are going to create a awesome slider and I’m also going to show you how to change the animations that are in there by default. So the first thing we’re going to do we’re going to add some content to our slides. So, the first slide would be like this. “Eplore the world” “With the WPRess Doctor”. And the button will be “Learn more”. Alright so let’s change the fonts, just press on the brush icon and you can go this one. Let’s make this Oswald, and we’re going to make this a little bit bold, and also the font size, let’s make it like this and we’re going to align it on the left side. Now for the second row, we’re going to also press the brush icon, we’re going to change this also to Oswald almost the same, and we’re not going to make it bold, we’re going to make it semi-bold, we’re going to enlarge the text size we’re going to align it on the left, and also the button, we are going to align it on the left side, we’re going to use custom styles. Let’s make this size a little bit smaller. Like this. And we’re going to make the font, also the same because this looks great. And let’s make that semi-bold. Alright, that’s pretty cool, that’s getting some more padding to this one, adding some more line height, more spacing. Now, if you have more than two rows for example, if you have more than this. “We are going to show you all around the world with this beautiful course, etc.” What you now notice is that your line-height will also add some more spacing between the two lines. I don’t really want that but I do want some more spacing between the title and the text below it. What can we do? Well, of course, first we’re going to change the line height change it to 1.2 That’s great. And now we’re going to save this slide, and then we go to ‘Advanced’ in the slider settings not in the individual slides but in slider settings we go to ‘Advanced’ -> ‘Custom CSS’, and we go into scroll down and we go to the slide title, and here we going to add margin-bottom: 20px. And there you go. Now we have added some space below the title, and if you also want to add some space below the text, just go to your Slide button and add margin-top: 25 px; and now you have more, a little bit more spacing right there. Don’t forget to check how it looks on your mobile device. And if you don’t like it, go to this button press, ‘Phone’, and here you can also change the CSS. If you don’t want it, then just add margin-bottom: 0px; for example. Or maybe you like to have 25 I think its better. And also for tablets, and of course for desktop. Alright so now you know how to add more spacing. Now what I do want with this one, I want to add a video background because I like that way more than just this boring background. Alright we going to ‘Content’, we go to this slide, and we go to ‘Background’. You can add a video background or right there. So, where are you going to get royalty free videos? Well let me give you an example of a website I use often, you go to and you go to videos. Any here you can search for example, trees. Awesome. Now, all these videos are entirely free to use at your convenience. So let’s use this one. I like this one, it’s beautiful. Alright, we press free download. So for the sizing of your video, I would go with something like 1922. As you can see the size also increases so keep that in mind. As most people use fast internet nowadays, it isn’t really a problem. If you notice that your website is getting slower and you get bad results go with a lower quality, but with a smaller file size. For this example, we are going to use the 1922. Press ‘download’. And we can save the file. You can also say thanks to the video author, that’s pretty awesome. Now we go back to Divi, and we’re going to add the background video right there, you have to upload your file to the media library. And upload your video to your website. Right here it is, press ‘Upload video’. This looks pretty awesome. So what I want to do is I want to make this one full width. You can also use of course the full width module in the full width section, but I’m going to cover that in the next video. So let’s use just this one. Go to your ‘Row settings’ go to ‘Design’ go to sizing, go to 1% Max white also 100%. And here you go. Alright, then you go to spacing out to make a complete go to your padding, make it zero padding bottom zero padding top. Press safe, then you also see down here, we still have this little row, as you can see it is from my section, so we go to the section settings, you go to design, you go to spacing, you go padding top zero padding bottom also zero. And now, everything’s lined up perfectly and now we have a awesome full white slider, but we’re not using the full white row. This is great. As you can see it really looks us. Alright, let’s continue with our slider settings. If you want to add another slide into your slider just press this copy button, and now you can customize the second slider, we go into this one. Explore your country, in this score, you can learn everything about your own country, because you need to stop gaming and get out more. And of course we want a awesome background for you. So, we’re going back to Pixabay. Let’s look on beach, and let’s go with the beach from Currys. I really like. So we’re also going to download this and we go to the background of this one. And we’re going to delete this one, We’re going to add another one. So now we have a beautiful video right there. Alright, so something you need to know on some devices some videos can be rendered quickly enough or they won’t render at all. This really depends on the browser and the system of the person visiting your website so what I always do. I always make sure this background is, or it is removed, order is a placeholder image in place so that when the video doesn’t load they just see a beautiful picture. So what you’re going to do is need a frame from this video to add it into our background image, how are we going to do it, I’m going to show you really easy how to do it using a free video player. So what I’m doing right here I’m opening this video in FLC media player. It is a beautiful free version lightweight video player, please, all videos is awesome it’s free where I use it all the time. And it’s really great. So what you’re going to do you’re going to slide to the place where you want to make a picture of this frame, and then you just press. Hold it right there, response it, and then you have a little button down now which is make a video snaps shot, just press that button, And now, a snapshot is being generated. Is that easy, yes it is that easy. Go back to your default website, add a background image upload the image we have just created. I’ve changed the file name to beach w plus doctor and her old text and upload the image right there. Alright so now we have the screenshots of a part of the video inside the background, so that we’re absolutely sure that these things will get loaded if the video doesn’t play. Keep that in mind because it’s very important. And if you now remove this background video you can see, this is the way people will see it. Now you also need to do this, for this particular slide with the threes. And then we just upload this image right there. And now we’ve created the video background which is compatible with all their systems, all the browsers so we are all good to go. This is great. I also want to add a little shout out to the title, because you can read the title when the background is white. So what we’re going to do just down there and press this button titled text shadow. And here you can just change the position of it, and you can adjust, I like it a little bit there. And I want to make it a little bit more darker. So, all right, this is awesome. So I also want this exact same shadow to appear on the other slide so what we’re going to do text shadow, we just press the right bugs on your website. We got to press extent title text shadow, just press this, we want to extend it to all modules, and we only want to do is due to this section because this is just one section so unsafe. To do this I press extent. And now if I go to the, I’m going to save this one I’m gonna go to the next slider, and right now the shadow has also been added to this slide so that is pretty easy if you want to change different styles of your slides just in one go. This is a way to do it. So you can also add a image to your slide just press this button, and just pick an image, and just press upload and then your image will appear on the left side of your page. You can of course add a video a view will look like a video will look like this, it is either a image or a video, you can’t have both. But I like the image, so let’s just use a. Alright guys, important thing I do want to point out, if you want to change some settings have all the slides in one go, just go to the slider settings, not all of the individual slides will have the slider settings in general, and you go to, for example, image, and you can make, let’s say, a border around all the images in all the slides that is very useful to change different signs, different settings in all the slides in one go, it will save you a lot of time. So, also the title tags we have just changed the shadow below it, but as you can see right now, if I want to change it again to me for example or red or blue, nothing will happen. On this slide, why, because this slide has been changed, individually, but what you will notice is the slides are not moving by themselves they are just standing there, how are we going to change that, well go back to Devi, go into the settings of your slider and you go to design, and we go to Animation, all the way in the bottom, and there you go, you press this switch ultimate animation. And here you can change the automatic animation speed in milliseconds. So that means when I do, for 1000s, it means four seconds. Let’s save this and let’s see how this looks on the front ends, 1234, and this works pretty good. So you can definitely change the amount of time it takes before the next slide, but around four or five or six seconds depending on the content, you can choose whatever you like. So the first thing most client asked is how do we remove this animation of the images as you can see the image is sliding from the left and the text is sliding from below, how can we change those settings. Well, it’s pretty easy if you know how, just go back to your visual builder. We go to fonts, you go to Custom CSS, and you go all the way down. And we go to slide description and we paste in the text animation name is not. Now this CSS snippet will also be available in the description of this video where you can find a link for all the CSS snips that we’re using today. You can all, as you can see right now, the description is always on displays is not moving anywhere two images however, are still moving. So you go down there and you go to your slide image. And there you face in the same snippet animation name is, as you can see now the images, and text will stay in the same place. You can also change different animation styles. For example, if you change this to fade in, you can see that the description of this slide will feed in. That’s pretty awesome. You can also do fade left. And it will come from the left side of your screen. You can also do, for example, fade in from the bottom, you get this effect. And you could also say, we’re going to live it in from x. And now, your text will flip in in your website, you’re so would you could also add this to your, for example your image. So if you put this on flipping, y, and the other one or flipping x, this is what you see one. So that’s pretty awesome. So you can change anything, I’ll post it in the CSS snippets in the description of this video so you can find all the possibilities you have within the Divi slider. So another question I get asked, really often is, how can we add two buttons inside the sliders. Well, it’s also pretty easy if you know how just go into the settings of your slider, go to the slide where you want to add two buttons, and it’s, go to your body Dex click on text, and you just paste in this code right there you can find in the description of this video in the snippets, and now you have two buttons, and those are actually pretty cool. You can just change the name of the button one and right there, and you can of course change the link it is over here, and button two right there and the link also there. So now you know how to add two buttons. Alright let’s style the slider some more before we go on to the next module. Now we have to leave this button area, empty because we have already have two buttons. Alright let’s save this one right if you go to elements, you can control the elements of your slider, do you want to use the you see those arrows on the sides when someone hovers over your module, yes or no. And do you want to show the controls, what are the controls well, if you look down there. These are the controls on your slider. I usually remove them. I really don’t like them, but it’s common that you use one of the two so people can interact with your slider. You can also make the entire module a link, of course, the background. Well, you don’t need it because the individual sliders now have backgrounds, if you go to design you go to overlay you can change a background overlay as you can see right now what it does on the screen, it makes it a little bit darker. You can of course change the color right here to make it entirely black, or just a little bit, or you can do whatever you want with this, it is pretty amazing so you can always read your text. You can also use not only background overlay but also a text overlay. Now you can have a nice figure right there so people can actually see your text. And I would also suggest always make it a little bit of gradient but it’s totally dependent on your style. You can just change the corners of your overlay text right it’s pretty awesome right let’s, let’s use the background of I like this very much. You can change the color of your navigations. Now, we have just started off. So let’s turn them on, and you go to navigation, and now you can see the commercials the navigation they’re red. Right now, you can make them any color you like. And also when he doesn’t have negation is down there you can make them, purple, you can make them think you can make it white. The image is the image right there you can create rounded corners on the image. Well, our image is, as you can see you can see a little bit down there but not very much because we are using a PNG, and you can create, of course, a border on your image. Well, let’s not do that right now. So, that is, the last thing I want to show you because of the rest. You all know how it works if you don’t know, follow my other videos about the titles, about the Divi modules. And you can also go with animation you can flip your entire module to animate like this, I would not advise you to do so because, first of all, speed it will only show this animation, after the entire page has been loaded, and that causes for a delay of a couple of milliseconds, and you don’t want people to wait that long. So, I would say just keep this on none. And at the enemy at ultramatic animation for example like seven seconds. All right, this button continue ultimately slide on hover should be on so when you hover your mouse over the image, then your animation will continue, you’re going to sort of turn it off if you want people to unable to read it and it won’t slide while they have their cursor on your slider module but it’s totally up to you. Alright, so for the last thing I want to show you if you go to Advanced and you go to visibility. You can even change some things specific for other devices like your mobile show your content on mobile, yes or no. Show your call to action on mobile, those are the buttons. Show your image your video on mobile, yes or no, you can actually turn it off, and you can of course, hide it but this is a free module so this is what will happen on your mobile device. If I turn the image on, he will show it, it will be shown on top, or never turn it up, removed. As you can see right now it’s a little bit too low, but the header isn’t okay. And the call to action on mobile Yes Now, any content on mobile. That was the last thing I want to show you is a little bit different than the other modules, and we are going to the next module. The next module is a the social media, follow module, we’re gonna click it off right there, the social media module, I use it a lot, because it’s very useful when you want to add your social media accounts into your website is pretty easy. So the first thing you will see is the Facebook and Twitter has already been activated. Let’s first center it on the screen so we got to design we go to alignment, and you click on this button right there. As you can see right now it is centered on the middle of my screen, this looks very great. All right, this, let’s get back to content. So you can add your social networks, right here with this plus button, just press it and just add your button you want to add, I want to add Insta. And I also want to add my YouTube channel. And of course I also want to add the last one is my female accounts so press safe, and now we have a bunch of social media accounts which we can work with. So let’s go to eigene right now, the link target should always be in a new tab, because when someone clicks on this they’re leaving your website, you want to make it possible for them to easily close the tab and come back to your website. So keep that on new tab, the follow button if you enable this, you will see immediately next to the I guess the following text. This is a call to action, and to be honest, I never use the Follow button next to my show for BI, but you can, of course, enable it. So let’s, let’s keep it enabled right now. In the background you can add a background to your entire module. As you can see, I wouldn’t use it in this setting, right now, so let’s keep it that one admin label is just for you on the back end, right, if you go to design and you go to alignment you can choose where you want them all to be, let’s center them. And if you go to icon now things start to become really awesome because you can change in one go, the color of all the icons of your social media networks as you can see right now let’s make them red No, let’s keep them white, it is better if you want to use the custom size you can change it so you can make them really big. Let’s keep it this way, the decks. Well, this is the text about in the follow button. So, if you kind of make it light, then things change a bit, if you make it dark then it will be like this, I like the light one. The following button, you can use custom styles for it. Of course you can make it a bit bigger, because I have changed the size of the icon so let’s make the Follow button, the same size. And you can of course change text, and you can of course change the background of, of all the buttons. So now you can make them a little bit more bluish or let’s make them the style of this website, and, oh, and let’s make it more red with white or red with black, for example. So, you can change it right there. The border White is of course the border around the Follow button. Pretty awesome, and the border radius is well, you get the point you can make them. Right. Okay. The letter spacing will change the size of between the letters, just keep them off. And now we have just changed this one too, for example, Cody star. Well, This follow buttons are really getting ugly right now but you get the point you can change your follow buttons up here, so let’s turn this entire button off because I really don’t like follow buttons at all. All right, let’s go back to design the item size yes keep them, not too small but just keep them big enough for you, let’s make them a little bit bigger for learning purposes. The text the Follow button is sizing, we were right here this is the sizing of your module, which will be not using right now, the spacing of course you can edit the border at borders to all the different icons. This can be useful if you want to change them and make them look more the style of your website. So this is pretty useful. Shout out. Let’s give them all a little bit of shout out right there. The filters, of course, and the Transform option. You can of course do some crazy stuff with your IQ so that looks really funny. If you want to create a little bit of a three V thing right there. And of course your animation, which you can use on every Divi module, because the most common question I get is how do we get more spacing between the icons. Well you can, if you go to spacing and you go to left, nothing happens right so little padding right there. Nothing really happened to give them more space between the icons. So how are we going to do that. Well, You go to advanced, you go to Custom CSS, and you go to the show show icon and you type in margin. Right. Is 135 pixels. And here you go, now you have 25 pixels between the icons. you can of course, James is also to percentages, or he wide, so it is all being calculated on the few wide of your screen the bigger screen, the more space there is. That would be great to go with three and if you now switch to mobile view, you will see that the few white, the space between the items is less than when you go to desktop. You see, so it’s been calculated by the few white of your screen is pretty useful one. So now you know how to create the social media buttons but I also want to show you something more, because when you go to your content, and you go to your Facebook. Now you can add Of course your link. Always at the HTTPS slash w present doctor I don’t have a Facebook account. This is how it works, and here you can change the background color. So let’s say for example you want all the items to be the same color, you can do that let’s make them pull back all of them. That looks pretty awesome, you go to Twitter, make it black, you go to Instagram, you make it black, and you go to YouTube you make it black, and we go to Gmail, and also make it like now, this is really Stoffel if you want to show the icons, just not so much, and all the same colors. It is so possible, we go into the settings of the individual social network so enter your link right there changed the background, you can change it for social media network which is really great. Alright so that’s basically it because there’s not much more to say about the social media follow module. I often use this module in my headers and in my footers, because it’s really great for that. Alright, let’s go to the next module. Welcome back. The next module is a baby steps, so we’re going to add the depth right here below this one. So we just went to the slider social media follow now we go with the tabs, what are the tabs, well just as you see right here, those are tabs like you use in your browser or anything else. It’s very useful if you want to get some more information about your journeys or your technical information, and you have different topics, and you don’t want to create an entire page you just create tabs tabs are pretty useful so let’s give it some content right now, this step title will be WordPress will some time ago. It is open source and bla bla bla bla bla bla bla bla bla bla bla blah blah blah. Alright so now you know what’s in there. All right, the next step will be calling Devi, the most, and this greatest visual builder. It gives you endless possibilities while blah blah blah blah blah blah blah. And of course we’re going to create a nother one, which is speed. The best way to get more speed out of your installation, bla bla bla bla bla bla bla bla bla. All right, now we have something to work with. So if you go to the front end of your website this way tabs work you just press on it, and you can see the actual text right let’s style this module a little bit further, let’s go to design and go to your body text, you can change the text of the body for all your different tabs, let’s change this to, neato, and we have to make it a little bit bigger. Let’s try 18 And here you can change of course the text as with every different module, you know how it works, let’s go to tap Next. The depth. Next is the tabs on the top right here will you see the brush items right now. If I press it will go to this one, you can make the background color of your tab, a color, whatever you want. So let’s make it a little bit like this one, the inactive depth, we can make them white, for example, that background color, could be black and adaptdx color could be black, or you can make them for example, it’ll be great like this so people know exactly where they are right now, the depth font should be the same, I think, neato is great, or wellness skill as well it’s also pretty cool. We have to make it a little bit bigger. Yes, all right. If you go to sizing you can just change your module exactly the same with spacing your border around your entire module, I would not use this right now, the box shadow, of course, you press on content you go to your WordPress step first one and then you go to design you can actually change the text, of course, and the titles of this individual depth is really great. You can change the text color and it will change only in this one and not in the other one you can also change the background color right now to make it for example he is blue. And now when you see it when you go to the other one. This one is not affected by the changes we did in the WordPress version, nothing in the other tab about WordPress, not about Divi, so it’s pretty cool you can change anything you want, you can actually add a background image, so you can see what happened, you can actually add images on the background of your tabs. It’s pretty cool. It’s actually a pretty normal text module but with depth so you know how to change a left one, don’t you, this is actually pretty boring. What if we can create two tabs with two images, or even more. And you could actually create something really awesome with that one. Let me show you what I mean, you go into the settings of your module. And we’re going to delete this one, we go to advance a CSS ID and we add this class, I can taps breasts, if we go to the settings on this page, we go to advanced custom CSS, you basically have this code that you can find in the description of this video. Now, Now we’re going to add some images so you go to media library and add two images that you want to use in your tabs. Well, let’s say I want to use for this one I want to use this heart. We’re going to paste it in right here just remove those one and add them in right there. And I also want to use this one, and I go to my second URL, I’m gonna make this one. Alright, pretty cool. So now when you save this one, and we got to save this page. And now when we load it on the front end, this is what you will see we have used these modules to create something more awesome. Now you might be thinking well what can I do with this one. Well, it’s pretty easy. For example, let’s change this to ask a personal quote, and the other one is for example, ask a question professional coat, and now as you can see people can actually switch between these two and they can see a different form, or right there. So, this is how you can do it. I totally trust your creativity to use this and create something really awesome, right, the code is in the description of this video and if you take a look at this code more in detail, then you will see that there is a lot more that you can change you can add and you can customize So good luck with this module I know you can create something really awesome. Alright, we’re going to the next module. Alright so the next module we’re going to discuss is a one, I use a lot, and it is called the testimonial modules, this is what Divi standard testimonial module looks like it is a icon with a image, and your content in May. Well it’s pretty awesome. So let’s just fill it in really quick. So when you click on image you can add this image right there, right, Johnny, you’re awesome. But if you go to elements you can disable the code icon yes or no. Let’s go to Design. You can style the quote icon. So I want to first of all want to make it a little bit bigger. This is great. We’re going to fix that later on the background color of the coat I can I will make it white, and I want this one to be blueish like the style right there. If you go to image you can actually style your image right there. You can choose the bite, and the height of your image. I would suggest you keep it the same, but this way you can make it a very long image, or you can just make it a round image is totally up to you if you want to go bigger than 200 pixels of course that is possible. For example, let’s go with 400 pixels, or you can use percentages or whatever. So we’ll go back to 200. I think 200 is incorrect. We want of course the rounded corners so let’s make that 50% And when you do it, it becomes a really smooth, really nice completely rounded image shows, that is what I want you get at a border right there to your image, if you want it, so you can of course add a shadow to your image right there looks really great change all these styles well, and let’s change the body font, we’re going to change this one to neato, gonna make it a little bit bigger, or else you can really read it, let’s change it to 18 right, awesome. And if you just point your mouse at your module you now see all these brushes, where you can change actually exactly the same things that we are doing right now, Buddy text. This is the author text. Let’s make it black. And this is, for example, his position text. Let’s make this one, bold, and this is the company text so you can change this one to to another color right there. So this is the way you can actually style this entire module, it’s so simple, and it’s just the way that you imagine it to work. It’s really easy so I’ve just shown you the most use things that I change. And I also like to add some more spacing between the icon and the deck so we go to a false custom css, and you go to the testimonial description, and you add margin top is 50 px. Yo now. Now you can see that we have pushed the text down but if you also want to change the image right down you can go to portrait and also add the same amount, margin top, for example 50 px on the testimonial portrait box. So this is the way you can actually really easy change this entire thing. This module is really straight to the point is really easy so let’s go on to the next module. The next module is the most used module in the defeat world, it is. Let’s go to it. We scroll all the way down and we are in the last modules right now, it’s the text module, I’m going to show you how to change this one, you can just add some little text in it, and you can of course just style it the way you know how you can style your text modules. So that is pretty basic and really straightforward. What you might not know is that these options here on the top here you can style your links. Your unordered list your ordered list, And your blockquote inside your desks, you might not know that already. So if I go to my accountant and go to write checks, I’m going to add a little Buddha list, I’m just going to create something that you might want to know because the most requested feature on this one is how can we change the bullet list, so let’s make this one bullet lists, WordPress Divi is awesome. You go to the texaan add design settings and you go down here you can change the list style tag you can make a circle of it, you can make square of it, or you can make nothing of it. And that’s all there is. Why isn’t there anymore. Well, I got you covered my friend, you we go. You go to a fancy go to CSS Ida classes and we’re gonna give this one a CSS class, we just go custom underscore bullets gonna save this one. Now we go to the Page Settings, we go to fonts we go to Custom CSS. And now you just paste in this custom CSS snippet, and you can find it in the description of this video, so just paste it in, and as you can see right now what happens. This enables you to use all these icons as your bullets in Divi, isn’t that awesome. So as you can see right now, I have used the slash for IE, in my Divi bullets as you can see right now you have two bullets, and a checkmark. So, what are we going to do, we’re going to save this one, we going back into our next module, we go to design, to go to decks, and then we go to our unordered list, and then we are going to the diet is not exactly like that. She now save it, you can see right now that we have checkmarks as our bullet list. And on the back end, Google will still see that those are bullets, so it works really awesome if you want to use another icon, it’s very easy. Just go to the elegant theme fonts link is also in the CSS snippet, so if you want, for example, this arrow right here, we would need e03c, just copy it, go back to your CSS, and just replace this one, remove everything before, and the x itself and remove anything at behind the C. Here you go, No, you have changed the bullet signal to create this beautiful icon. Well, this is just awesome. And of course, you can style it all the way you want. The margin right for example you can make this like, let me show you what happens if you just change the margin on the right side, then you can just change the distance between the text and your bullets. You can also change the margin on the entire left side to make it more lined out with the module above. If you for example, want to make them green just add color is and your HEXCode and then you will get the right color of your icons. Isn’t that awesome? Alright, let’s go to the next module. So the next module we’re going to talk about is the let’s see right there is the, we’re almost done guys. Oh no, the toggle module. So, the sample module is actually quite the same as the accordion module we talked about in another video, but this one is just only one toggle, so let me show you how this works, you title, Joseph course here, your awesome toggle, title, and the content goes in there, of course, right then you have to state, right there, the state will say, well, is your trouble open by default, or is it close by default, something that our Cordier module still needs to have this middle option is is great background here you can change the background of your entire toggle module and this will change all the backgrounds of your module, I would not recommend this. So, let’s just close it. If you go to design you can change the color of your icon. So let’s say let’s make it dark blue, and you could even change the font size of your icon. As you can see the toggle itself that open toggle background color, that is when you press this button, what kind of background does really have. But if you do that what you will see right now is when you click on it, it will change after the animation, so you can actually remove the animation, or just remove the background color. The close toggle background color can be different. So for example, it can be black, and your text. Well, we can make it white, and we can change the font of course, do anything you want. So, this is pretty obvious and pretty logical right just hit that icon there that brush icon and you can change the toggle, oh if I change my background, why am I good is gone, so you get is not very much good so use something that is pretty okay. But you can see all the time like this. Actually, this entire module is really simple because the next is just your clothes title text color. If you want to be made clothes, white, and when you have your title text, open it is black, is pretty easy. So, this is one of those modules that it’s pretty awesome to add a custom construction shout out to your, to your module you can also add a border to it if you really like that. It really pops out. So one of the questions I most got is how do I change this I can and can we give us some more space, yes of course you can just go through spacing and go to your padding and just add a little bit more spacing right there. And now you can see that you can just move this all the way around that even a toggle button if you don’t want to change, toggle, I can just delete this one you can only change this one, which is pretty awesome. All right, border box Show filter stress for everything is pretty much straightforward issue note but now it’s the question, how can we change the icon of this toggle button. Well, you need something, we got to save this one, you go to options up this page, you go to a fancy go to Custom CSS, and here you paste in the snippet, I, you can find a description of this video and you can just paste it in there, right there. As you can see that this icon just has changed to dislike, which is pretty awesome. If you ask me if you want to have another I can just go to the website. Elegant Themes. And here you can just select any icon you want, be sure to only use it from the x. So if you want to use this one just copy this entire thing. Go back to your CSS and removed it to numbers and make it for example remove everything before the X and remove also this one. So now you have it. Here is your icon that we have selected. So that’s the way how it works with these items. Alright, so that’s basically it. Let’s go to the next module. So on this awesome juicy website, I want to add a new module, and it’s almost a left of this video. So we’re gonna hit the plus button, and we’re going to see what is this, it’s safe, video module right we’re going to add a video right there. Well, the video module is actually very very useful and I use it a lot of times, to implement any videos that you want. So, for example, if you want to have a YouTube URL, just press the video, and press Insert from URL just paste in your YouTube video or your female video or whatever video you want and just drop the URL right there and press Insert into post. Now your video has been insert. So you can also add your own videos, just go to Media Library, upload a file or when it’s already there, just press it and press upload video and now your video will be added to the video module. The video module. It has to be pushed to play it will automatically play, if you want to have it ultimately displayed. Then you have to use it as a background for example, just go to the Row Settings, go to background, click on the video I can add your background right there press upload a video, and then you press ok and this is what happens. So, and then it will play out automatically, but if you’d want to do this, then you also need to add a few Reb M files so to maximize your compatibility with different devices, how you can create a web M video, well it’s pretty easy, you just use your mp4 video, just go to this web app website from Cloud confer it’s really awesome company they let you go for free files up to 10,000 days so it’s pretty awesome. Just select your video and change nothing about all this stuff and nothing about this stuff, you want to trim it, you can trim it, and then you can just press the button comfort now, and it will be confirmed and downloaded to your computer and you could upload it again in defeat. So that’s the way how you can add this webcam video but it is if you want to use it as a background, we are not talking about, that’s what we are actually talking about the video module. So battery, video, video module is. I use this video inside of the video module, it looks great. I don’t like all these YouTube elements like this Dagfinn Watch Later share and watch on YouTube. I just want this picture with a play button, just go to replay and press generate from video. Now, it will take the thumbnail from YouTube, and put it in right there. This is amazing. This doesn’t work for some reason you can just press this gear icon, you go to your media library and choose any image you like I just uploaded my file. Now I can use that one. Or I can just use this one and now we have a overlay from a different guide, like this thumbnail so it’s pretty cool. However, labels on is totally invisible right now because of the white background. So what are we going to do about it, we go to design, because a Play icon, and we just make it black. It is that easy. Yes, it is that easy. You can even change this size of this one. If you press on overlay you can change the overlay, if this color to maybe for example completely wide or a little bit in between like that. This is pretty great. If you go to sizing. You can of course change the byte of your module, which is pretty useful. You could change the module, alignment, anywhere you want on the page but let’s, let’s leave it like this one. Of course you can add a border, I really like the box shadows with this feel modules, because they really pop out a bit, and I really love that with this one. And of course, you can use the filters as you know it will change and everything on this particular video. Basically, this module is pretty easy. But what if you want to change the icon. Use Free Play button. How are we going to do that. Well, it’s pretty easy if you know how to go to the options of this page, we go to finance and just base in the CSS snippet which has a background and it says your URL image right here, dot png. So we’re going to do you go to media library, and you’re going to add or use image like this one is pretty cool. You press copy URL to clipboard, and remember the dimensions, 86, by 90 Alright, let’s go back, we’re going to paste in the URL right there, and now we only have to change the height and the white 90 by 86. And now you can see we have this awesome play button on our custom play button in our Divi video module, and if I now save this. Let’s exit the visual builder. And you can see now you have this awesome play button. However, it’s not centered in the middle. So if you want to send it, we have to go back to this is your Biller, we go to the option so up to speech we go to fonts custom CSS. And here you can find the place where it should be. So if you want to lower this bottom a bit well you just go to there and you go in margin top and add some 150 pixels for example, and how you see the deep button just down to be really honest, you have to change just one and replace this one with the right one. But hey, let’s use a shortcut right now, just add margin top 50 px right now. Alright, that’s it. So now, now you know also how to use your own images as a video play button in the module. Let’s go to the last module. So for our next and last module we are going to stay on this juice website, and we’re going to add a, a field slider. Now, the field slider is not actually what you think it would do like slideshow videos No, it looks quite a bit different so let’s just insert our first video, then you go and duplicate it and now you can see what will happen. This is how the slider looks like it’s actually multiple videos below, that one, you can actually can see right now, if a slider with all the videos that I’ve read to maximum four fields here below but you can also just copy and duplicate anymore, and you can press this button to see the rest of the videos alright but you get the point. So let’s go with these four videos. Now the first thing you will see that these videos are just new video new video new video, just press this button, go into admin label. Here you can give it a label, this is the one, if you cancel this we’re going to have this one press to save. Alright, so now we can actually see what’s inside the field slider pretty useful don’t forget, if you go to elements right now you can choose to show the arrows, these are the arrows, you can just press, no, now they are gone, or yes, the slider controls you can use a thumbnail track, as they call it already done, navigation, the navigation is really hard to see. So you have to make it bigger and a different color, but I like the sound mill track a bit more, you can go to the overlay. Well, I would suggest to use this one because as you can see now it is way more smoother if you’re using videos from YouTube. Now we don’t have all the commercials, it will just grab all the thumbnails from it and just place them in right there. This looks great. If you click on the background you can change the background for the thumbnail track right there. This looks pretty awesome. And of course, but I do like the box shadow with this module however if you click on the box shadow, it will create individual shadows. Also below the thumbnail track so that’s pretty awesome. I want to just turn it on because it looks alright Boris phrasing sizing, it’s all the same play control color is also the same as I told you in my video before in the video module is exactly the same. So he you can change. Oh. Now, my question is, of course, can you use our CSS snippets to also change this play button to the one we had before. Well, let’s, let’s see if it works. As you can see actually yes, the snippet also works with the video slider, and if you wondering how can I change the generated thumbnail or anything, just click a few minutes back to go to the video module because it is exactly the same, so the only thing I’m missing is video module is how to create an automatic slider because they say it’s a video slider, but I can’t seem to find a outro animation. Hmm. So that’s definitely something they could improve. Alright, if you liked this video hit that like button and if you want to see more about full white modules, it will be the last video in this series, so maybe I’ll see you there. And as always have a awesome day.

Solid Security PRO Tutorial 2024

Solid Security PRO Tutorial 2024

Security is very important these days. Check out Solid Security PRO here: – You don’t want to get hacked. In this tutorial we will be setting up Solid Security PRO to really secure your website.