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 pixabay.com 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 facebook.com 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.
