All Divi Modules Explained and Demonstrated incl. CSS Tricks – Part 2

Dec 19, 2020 | Divi

In this video I will demonstrate all Divi modules. I will also show you some tricks with the modules that I get the most questions about! This is part 2 of the 5 part Divi Modules series.

πŸ‘‡πŸ»πŸ‘‡πŸ»πŸ‘‡πŸ» Start here πŸ‘‡πŸ»πŸ‘‡πŸ»πŸ‘‡πŸ»

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

β‡’ Software that I recommend:
Get Divi with 20% discount β‡’ https://wpressdoctor.com/getdivi/​
Hosting & Domain provider β‡’ https://wpressdoctor.com/nr1webhosting/​
Speed up your WordPress website β‡’
https://wpressdoctor.com/nr1cachingpl…​

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

All scripts and CSS snippets: πŸ“œ https://wpressdoctor.com/divi-modules…​

⏱️Timestamps⏱️
0:00​ Intro
0:41​ Contact Form
11:18​ Countdown Timer
14:50​ Divider Module
20:10​ Email Opt-in Module
27:18​ Filterable Portfolio
34:23​ Galery Module
41:05​ Image Module
48:55​ Login Module
55:19​ Maps Module
58:21​ Menu Module

Thank you for watching, part 3 is here: https://www.youtube.com/watch?v=HbVRL…​ πŸ˜€

βœ…For tips and tricks on getting the most out of Divi and WordPress, don’t forget to subscribe: https://wpressdoctor.com/sub

All Divi Modules Explained and Demonstrated incl. CSS Tricks – Part 2

πŸ“–TransscriptπŸ“–

Hey Friends, it’s the WordPress Doctor here. Welcome to part two of the Divi – All Modules video series. In this video I’m gonna take you by the hand and demonstrate and show you and explain to you all kind of different Divi modules, I’m going to also show you the most use CSS tricks that I use for my clients on their websites. For example, how can we remove this zero on the countdown timer? How can we remove this ‘All’ tab in your filterable portfolio? How can we add google ReCaptcha v3, but also remove that irritating logo on the front end? And of course, how can we create this gallery module and make it responsive two or three columns on your mobile device. So let’s go, because we’re going to start right now.

For the next module we’re going to create a contact form. Press ‘Contact form’ and as you can see, immediately a couple of fields will appear. The contact form is a pretty basic module that you will use in every kind of website. You have the name, the email address messages, all the fields are right there. So the first thing you will do is, of course, change the fields like you seem fit. So if I want to add another field, just press this button. And here I can enter another field so here’s the idea you have to give it someone so let’s make it a telephone number. This field ID is only for the back end, and the title is what people will see. And now we can just press ‘ok’ and we can drag and drop this field, just to where you want to have it. Let’s have it right there. The problem is now, it is full-width. So what I want, I want to make it… go to ‘Design’ -> ‘Layout’ and press ‘no’. Now you can see it just flips through the half of this module. Let’s make another field next to the telephone number. We’re gonna just clone this one. You have different types of input fields. You can make an input field, a email field, a text area, checkboxes, radio buttons, or select drop down. Let’s make this one a select drop down. And the options will be… as you can see now the placeholder is still “telephone”. So first of all we’re going to change that one. Let’s call this one… the fields ID will be just “Purpose”, and the title will be: “What is the purpose of your visit?” And ff course, now we’ll go to ‘field options’ and then we’re going to create options in the drop down menu. So the first option is: “I want to install rocket launchers behind my headlights like James Bond!” The second option is: “I want to have a ejection seat just like Jason Bourne” And the last option is: “I want to let the puke of my boyfriend being removed from my seat after I drove like a idiot”. Alright let’s save this. And what you can see right now is this field has been added right here. If I’m gonna save this module, and let’s save this page and let’s look at the front end how it looks. And let’s quickly go down to our fields, and as you can see, now you can choose any kind of drop down. This is pretty simple, pretty straightforward. It’s a pretty easy module now let’s style it a little bit more. If you want to style this field just hit on these brush buttons. And as you can see you have the global design, which is the design of all the form fields, but you can also change the design of the individual fields. And you press the gear icon again. And as you can see now you can style it just for that field so if you want to change the background color for example for only the Name field, this is the way you could do this. If you don’t want it, just hit this button, the discard all changes, and you would go back to this. If you just want to change the entire design just press on ‘Design’, go to ‘Fields’, and you can change for example the background color. Let’s make the background color a little bit more smoother. This is very nice. Let’s make a text color white, as you can’t read it. And we want to focus the background color to make it entire black so when you start typing it turns really dark black. This is really nice so people can really see what they’re typing. The focus text color should be the same as the field text color in this case, it is white. With the fields margin, you can change the margin of the entire contract form of course, and use the fields padding to make all fields bigger as you can see. Now we can create really big fields. I really like some more padding on the fields, so that the texts are a little bit more lined out, I really like that. What I still want is to make the field text size a little bit bigger. Yes, that is way better. And the fonts that, of course, go with Poppins right this is smooth. So now it really looks very smooth, you can actually make the title of your contact form. Alright, so if you enter a title, you can see it right there. No you can’s see it but it is right here. So let’s make it white for demonstration purposes. So you can create ‘Contact Form’ right there and this is your title. I actually never use this one, I use a different module for title, a text module or a title module. And that works way better. The success message is the message that people see when they fill out the form and they press Submit. So something like: “Thank you very much. We will be contacting you within 48 hours. The submit button is of course the name of the submit button, and sometimes I change this to to: “Show me the money” or… “Yeah, send me the quote!” And here we go to email, this is pretty important when you attempt to fill out your email address, to which this form will be submitted. So enter your email address [email protected] And the message pattern -Oh, we can talk days about this one. If you press this button you will see all the field IDs available for this message. If you just leave it empty what I most of the time do, you’ll get all the fields inside of your email, if you want to style this message. Well, you can just enter these things but it’s very clumsy. So %% you have to use your field IDs to create this one. So, for example, message and % well this is not very intuitive and very logical so I want to suggest to just leave it empty and you get your default message patterh. If you see empty mails when people fill it out then you have to fill this out. There are a lot of examples online. Now what I usually do is use this redirect option to redirect people to a “Thank you” page. Why is this important? Well, you really have to have a contact page so you can absolutely track this in your Google Analytics to see what will happen, how many people fill out the form, but just also very handy for other people to know that the form is actually sent out. Spam protection is, of course, very logical to have. Basic Captcha is just this, it’s a very simple math. I would suggest you always use reCAPTCHA. If you want to use reCAPTCHA, it’s pretty easy to do, just go to Google and type in “reCAPTCHA Google” press enter, and here you go to the reCAPTCHA website. If you log into the admin console. You can just easily now add one, for example, this is the cars website, I want a version 3, my domain enter your domain and has to be exactly your domain, or else, it doesn’t work. WPressDoctor.com I’m going to accept this. And I want to send alerts and I press Submit. If I do that, I get a site key and a secret key I just copy this one, go to my website. Copy the site-key right there. Go to the secret key, copy this one copy it right there. The account name will be [email protected], because that is my email address and I press Submit. As you can see it has been accepted into the reCAPTCHA accounts. Now we can just save this and now reCAPTCHA v3 will be active on my website, it is very, very easy. So we’re going to style this button, and we’re going to use custom styles -well it is really basic it is just exactly the same as we did with the other buttons so you can just really go all the way you would like to go with these buttons. Of course you have to make it the same as this one, but you get the idea. You could also add a conditional logic, let me do an example of conditional logic real fast. We’re going to add a new field and this will be the field ID will be ‘trouble’ and the title will be “Are you in trouble with the FBI or CIA?” And why, because it’s the input fields, or let’s make it a radio button, and the option: “Yes, I am wanted in 24 countries.” And the other option is: “No, only my neighbor is with the FBI” And the other option is: “I can tell you, but I have to kill you if I do”. And this field is of course required. Now I want to be this field conditional logic. So that means if “What is the purpose of your visit” equals “I want to install rocket launchers”, then this field should appear. Alright, we’re going to save this. Save the page. And when I refresh this page you will see this field, and when I change this one to “I want to have ejection seat”, no nothing happens. And this one is: yes. Here we go, here are the fields. So the conditional logic is pretty straightforward. As I scroll up this website you will see that this reCAPTCHA field is really annoying because it is visible on the entire pages! I really don’t want that, actually I want it removed without a plugin. So how are we going to do that, I’m quickly going to show you, because I am the WPress Doctor and I want to help you out. Just go to your Divi options, and you go all the way down and add some custom CSS, and just paste in this little bit of CSS. This little bit of CSS is in the description of this video, we will change the google recaptcha batch to opacity:0. Press Save Changes. And I reload this page, you will now see that The Google reCAPTCHA badge is gone, and it will still work on your website, pretty awesome.

So the next module we’re going to discuss is the Countdown timer. And we’re going to create it right here so we’re going to add a new row. And I’m going to add a countdown timer Yeah. So the countdown timer is pretty simple, it is a countdown timer. It’s a timer that will count down to a certain event. Guys, please forgive me because you won’t see my mouse (cursor) during this module and also the next module but after that, the mouse (cursor) is coming back. Please forgive me. So, if you press the gear icon, you can just change the date, very useful. Change the time of course you see it changing live. Now, you’re going to add your title right here: “The fun is about to start” and you can create of course, a link from the whole module but I wouldn’t recommend it. Alright, let’s go to the background, let’s make it white. No everything disappears, no we’re not gonna make it white. We’re first going to change the title. Let’s make the title in the font Montserrat. That is pretty cool. Let’s make the numbers, change the numbers to also Montserrat. And let’s make the color a little bit. Let’s see, blueish of course, yes, and you can change the labels, also when you press this brush icon. You can change them to another color. Let’s make them a little bit more white and change the font to Montserrat. Let’s make them a little bit bigger. And we save this one. And actually I want this to be full width. So we’re going to the ‘Row settings’, we’re going to ‘Design’ we go to ‘sizing’. We’re going to make this width go to 100%. And also the max width we’re going to increase it to 100%, and this is very awesome. Now you have a cool full-width countdown timer. So the background is really not what it’s supposed to be. So we’re going to change it again. I really like designing because you always notice different things that you want to change when you’re working on it. Right so now we have this one, and I want also to create a very cool shadow. So we go to ‘Design’, we go to ‘Shadow’, we’re adding the shadow right there. But you must be thinking yeah shadows, it’s pretty boring but no we can give it another color. So let’s go with the blue, and then we’re going to make this spread like this, and we don’t going to give it any, well, just Nope, not any blur. And we’re going to just put a little bit down. You can also make it inside of your module. Alright, now the most common question I get asked is how do we remove the first number on the days, because my event is not 100 days away and it really doesn’t look very professional. So to change that we have to leave the module and we are going to the settings of this page right there. We’re going to ‘Advanced’ -> ‘Custom CSS’, if you just paste in this snippet you can find it in the description of this video, and now the first number is gone. This really looks way better. Alright, let’s go to the next module.

I’m going to show you the next module, its a Divider. Here we go. So with this Divider you can create and make any kind of lines with it. Which is very funny. And if you go to ‘Design’ we go to ‘Sizing’ first, let’s make it a bit bigger. So you see what we’re doing. And if we now go up and we go to ‘Line’. You can change the color of the line. Let’s make it a little bit more of this template. And this line style can be dashed, it can be dotted, it can be double, it can be groove, it can be ridge, it can be outset, it can be a lot of very things. It also can be nothing! And you ask: “Why do you have a divider with no line in it?” Well if you put the line to none, you can add some spacing anywhere on your website that you would like to do this. As you can see you can add some padding right there. And you don’t have to change the margins itself but you can change create a empty space with it. We’re not gonna do that right now so we’re gonna remove those paddings, press ‘reset’. Go back to line again. And we want it to be a dashed line. Allright. The line position is where you want to have it centered within the modules surrounding it. So let’s make it vertically centered so now it’s in the middle. If you go to ‘Spacing’, you change the margin at the bottom to zero, you can see that the line just really goes to stick on the module below it. But we don’t want that, we want a little bit of spacing so that is a nice way to do it. All right, let’s go back to the sizing. And we’re going to make it a little bit smaller. So, now it looks a little bit more nicer. You can change the width of your module right there. You can align it again to another place if you want to have it centered, or you want to have the left side. And let’s make it stick to the bottom of the other module. And of course you can use filters and you can transform it any way you want it. But you can also use the background color to create for example a gradient. Now, if you do this with white or transparent for example you can do some real funny stuff. As you can see, if you do this, we have to remove the design. We have to go to ‘Design’ -> ‘Line’ and change this color, and we’re going to make it transparent. But as you can see now – if you have the background image we’re gonna create the color that we just used. Here we go. And if you just change the starting positions, then now you can use – when you go to ‘Advanced’ you go to ‘Scroll effects’ you make it ‘Horizontal motion’. Then, now you can do some funny things with it. And now you can actually when we change the ending to zero, and we change the viewport on the button to there, you can actually create some pretty funny thing with it. As you can see. So one of the most common question I get asked is: “Can we make this Divider stand vertically, like this bar right there to make it appear between two columns?” Well, yes you can but you have to get a different approach to make it responsive, because if we just go to ‘Design’ and we go to ‘Transform’ and we’re going to rotate it with 90 degrees, then we have to put on the right place and when I just changed my size of my website, it will not work and it will move all around. So what are we going to do. First we’re going to ‘Content’ -> ‘Visibility’. And we are going to press ‘No’. We go to ‘Design’, we go to ‘Border’ we pick on the left one we set the colors allright and then we’re going to make it dashed. And we’re gonna make it 2 pixels. All right, then we close this one, we go to ‘Sizing’. We’re gonna change the width to 2%. We’re gonna change the height to 500 pixels. Look at that. Now we have a vertical divider It’s awesome! But as you can see, this is really not the way we want it. We want it to appear between the two columns. Okay, we close the ‘Sizing’, we go to ‘Advanced’ and we go to ‘Position’ and we’re going to put a position on ‘Absolute’. And now you can see something really has happened. And now you can change the vertical offset to put it on the place that you really like to have, I want to make it, I want to have it here. And let’s lower it a bit so that it lines out with the… So, and I’m going to change this one, so that it lines out a little bit more beautiful, with the image. Now save this page, and when I start moving this page, and we start resizing it, you see it will stay the same. And that is exactly how I like it, it will stay the same on all different screens, of course, you have to style it on mobile, because then it will just get up over here and on tablets. But, of course, style it the way you want it. This is the perfect way to get a vertical divider, which is fully responsive and working the way it should.

So the next module we’re going to talk about is the Email optin. Now the email optin, you can choose to add people to your email subscriber newsletter. So let’s create one real quick right there. First of all we’re gonna add the title. And we’re gonna change the description, and it’s situated in the body. Right, it’s pretty good and here you can add a footer, you can tell us the legal stuff of your newsletter for example: “I will only send you three times a day a email! I promise to not sell your email address to other firms. You have my word on that!” All right, this looks pretty awesome. Now of course, we will connect our email account. Here you can choose your email account, which you use for your online marketing. Just select the one you’re using, let’s check out MailChimp right there. And we can -and now you press “Add” And now you can add your account name and your API key. Let’s try it right now. You log into your MailChimp account. Then you go to ‘Website’, you go to ‘Domains’. Then you go to ‘Extras’ and go to ‘API keys’. Here you can find your own API key you just copy this code. And in Divi you paste the code right there. You press ‘Submit’. And now you can select the list. If you have selected the list, you can press this ‘Save changes’ button, and now the module has been connected successfully to MailChimp, it is that easy, and it works with all kinds of email providers. Alright let’s customize this module a bit more, we go to fields. Here you can change this one to use a single name field. I usually use this, because this is less more of a hassle than filling out two fields. And if your service provider allows it you can have custom fields. Just press this button and you can add new custom fields, but they have to be enabled within your email provider. So we’re not going to use custom fields right now. Well what happens on our success. I want the success to go to a custom URL. Let’s redirect them to the page: /sign-up-thanks/ and that they will see a beautiful page which says: “Thank you”. And we don’t need any queries to go to the redirect URL. This is useful if you want to track it. Spam protection is of course very useful if you want to use reCAPTCHA v3 for example. Well we have just enabled in the other video, so you could just select it right there. We’re not going to use this for now. This will make the module link out to another page or website. For this module I would really not recommend this because we want people to fill this out. So let’s change the background, let’s make it dark blue. And what you can also do if you have a PNG like this one, you can actually change the entire module to go to make it something like this. That is pretty funny if you ask me for a little effect. Let’s go to the ‘Design’ tab. With these options you can just change your layout of your email optin module, anytime you would like. You can do it on the right side, you can do it on the top site you can do the body on the bottom side, just do it the way you like to do. I would have the body on left, and form on the right. So with the fields you can customize of course the background color of your fields. So let’s change the text color of this one make it more darker, and the sort of field focus background colors let’s leave them white and the text color, let’s make it black again. All right with this margin you can actually create some more space between all these fields. And with this padding, you can make the fields even larger. If you would like that. Of course, we’re gonna make this pop out with Poppins. What else I like to do is to really not make these things full-width. Why is this? Well, now you have only two fields and they’re even on one row. So it really feels more easier to fill them out, but we do gonna change the title heading, we’re going to change this to Montserrat, and we’re going to align it in the center I really like that one. Okay, we can also change the title text, let’s make it bigger, and the spacing now that is all right. So, all the other things of changing his module are just very really easy. This is the result message text, this is if you have the success action set to display a message. All right, let’s style the button a little bit more to make it more pop out the background color of the button, you can of course change the border width if you want that it really looks ridiculous. Let’s just remove the border entirely. So here you can say if you want a button yes or no. Now we’re on the sizing page you can make this module, a bit more smaller, which I do like because I really think that this module is really big on the website. You can add a border if you want to, you can make it even go a little bit more round because it’s the style of this website, so make it rounded, that would be really better. You can add a border here if you would like to do that. And of course you can add a shadow. You can use filters to create a more sepia effect on this field, which is really funny in some cases. So with the filters you can do something really awesome. That is: we’re going to change the opacity to make it a little bit more cloudy, but when you hover over it, the opacity will be normal. So this is pretty funny if you now go to the front end of the website, and you can actually see that this module just is really interactive. So witht he transform options, of course, you can just give it a little bit of a more 3D effect, if you want to do that. You can go nuts with this, it is really funny, right, and of course we have the animations we have the normal animations, but I would like to, I think, I would go to a ‘Scroll effect’ because this is pretty funny to make it just fading in and out. So, at the end, this is our beautiful website with of course our beautiful signup module, coming in right there. And if you hover your mouse over it, it just pops out a little bit. This is really cool. So I’m very happy with this one. All right, let’s go to the next module

On our babysitter website the next module we’re going to talk about is the ‘Filterable portfolio’. As you can see when you add the module, it is a huge portfolio with just giant pictures of your projects. Well, let’s just change it a little bit, we go to ‘Design’ we go to ‘Layout’ and you change it to a ‘Grid’. Now, this is more like it. As you can see I now have a module where you can actually change all the projects on the go. So basically the normal one is selected the ‘all’ projects but you can use your project categories. Well how does this module gets his information? Well, it’s pretty easy: When you go to your dashboard and you go to ‘Projects’, you go to ‘All projects’. Here you can see all the projects that you just saw in my filterable portfolio. Here I have created some categories, as you can see and the categories are used by the module to get the tabs. You just add your projects and you just give them the right category. And as you can see those are the categories right here. And here you can see the projects we have just created. Alright so let’s style this module, what can you do with this? Alright, first you go to your content. And here you can choose which categories to include and which one to exclude, for example, if I only want to use the ‘infant category’ I just click on this one, and you only see the infant tab right there. But I want also the newborn, the teenagers, and toddlers on this project page. So, you will see them all right there. It really works very easy. The post count is of course, how many projects, you want to display. Let’s go for three for example, then you only see three in every different category. Let’s go further to the ‘Elements’, in the elements you can choose if you want to show the title, yes or no. If you want to show the category yes or no. And if you want to show the pagination. If I only go for three for example, I would need no pagination. And where is it? Well, it is hidden a bit, it is down here. But I know if you want to have more and it doesn’t fit your layout you can use the pagination to change your layout. Alright, so the categories -usually I don’t show them because I have the categories right up here, but you say, “Well, only if they use the All button, the ‘all tab’, this is useful.” However, I’m going to show you in just a bit how to remove this ‘all tab’ because I really don’t like the ‘all tab’, I just want people to see the categories, and don’t see the all category tab. Just a second, we’re going to fix this. And here you can of course change the background, which we’ll be doing in just a bit. We got to ‘Design’ and ‘Layout’ we already changed it to the grid. And if you click on ‘Overlay’ here you you can choose what overlay you want to have when you hover your mouse over it. Let’s make these Zoom color white. Let’s change the icon to a magnifying glass -that is really nice. And now we can change this one also to a little bit more blueish of the style of this website. And of course with the image rounded corners, you can make the image a little bit more rounded – oh this is a little bit too much. Let’s make it 25px, because it fits the style of this website. Okay. Of course you can make a border on the image, I like this style for this website so this is great. And let’s go with a shadow. And we can also make it white if your going with a shadow then the white is also cool because we have the blue and a white right there so it is great. Okay, let’s go to the ‘Text’. You can change the text of everything so we’re gonna change this text and gonna place it in the center, because I like to change this one. Let’s make it a more Poppins. So let’s go through the next one, click on ‘Text’ and here you can make the alignments of the entire text module I usually use this to center this module because it looks way better right now. All right, let’s go to the next one. The next one is the ‘Filter criteria text’, if you press here you can change the font of the filter. And you can of course style a little bit to make it more blue, or a, let’s make it more the style of this website -this looks pretty awesome. You can make it even bigger, that is… I think it is smaller for this website. We can more add more spacing, I would not recommend that. And of course you can add the line height, if you have multiple rows because your categories are really thick you can change them right there. Sizing is of course very useful if you want to change the max wide of your entire module to make it a little bit smaller. As you see now, the whole design changes of this thing, which is really great if you have a little more spacing, or you just want to make it smaller. If you want to make it full width, you just go to your row settings, click on the row, you go to ‘Design’, you go to ‘Sizing’ and you can change your white to 100% and your max width also to 100%. As you can see now the sizing is just 100%. Well, we’re not going to use it on this website but now you know how you can make it full width. I press CTRL-Z on my keyboard, and we go on with this module. The most common question I get with this module is how can we remove the ‘all’ button and you just go to this one. Because the ‘all’ is just so huge and it shows everything and I don’t really want that. Well, it’s pretty easy if you know how. First of all, we need to add some coding which makes sure that it’s selecting the first one in the projects. So we’re going to add another module and the other module is going to be a code module. And you just paste the code found in the description of this video, save this page. And then also we’re gonna need some a little bit of CSS to hide this button, we go to the Page Settings, we go to ‘Advanced’, we go to ‘Custom CSS’. And there you just paste this code also found in the same snippet. As you can see immediately, the ‘all’ button just disappears. So save this page, and now when we look at the front end of this website, you will see that the ‘all’ tab has just been removed, and you go immediately to the first tab available. This works pretty awesome. Alright, let’s go to the next module.

So the next module we’re going to discuss in this video is the Gallery Module, you can press this big button right there to add some images to the gallery. So let’s press it right now, and select all the images you want to use or just hold shift and press one or press Ctrl and you can use this one, or whatever, just press Select. Let’s go to the next option, we have ‘Image order’ right there. You can make it random so that the images, every time appear random. That’s very cool. The ‘Image count’ of course how many images, do you want to show. On this page, or this module. I’m gonna make it 99. If you don’t want a second row four is excellent. All right, if you go to elements you can disable this one to show the title and the caption. Those are those names down there sometimes it’s useful. This time, I don’t want it. ‘Pagination’ is just when you have less images of course. Link the entire module, I would not recommend that. A background for this module can be useful. As you can see in this design we have the header, and we have the color section right there so I won’t be needing a background for this one. Let’s go to design, and we’ll go to layout, so you can change the layout to a slider if you like to use a image slider. But let’s stick with the grid right now. The thumbnail orientation is very useful, because most of my images right here are portraits. So let’s change this to portrait and see what happens. This looks a bit nicer. It’s more organized. So if you’re creating a website for yourself or your business, I would suggest you make all these images the same height in the same width. You can do it with a simple tool like Photoshop or Paint or whatever you use to change your pictures. Let’s go to ‘Overlay’. The overlay is very useful. And of course, it’s the same overlay we always use. For the icon let’s use this one. It’s the color also used in the rest of the website. So that is a really nice tone. And for the background let’s go with a bit of greyish right there. This is awesome. The icon, let’s change this one because the standard behavior of this module is that it will come and go in the gallery. As you can see, it’s pretty nice. so if you have bigger pictures the lightbox will expand like this, but this is the normal way that it goes. So that’s why I want to use a magnification icon so people know when they click on it, they will get a bigger image. The image itself, you can make it more rounded which is pretty nice. I think this is way awesomer, way smoother than we just had. Let’s add a little border. It’s also very nice it gives a very nice touch to it, and a shadow is very cool. I really liked it without a border right now because of the white background. If you go to ‘Text’ you can change the text below the images so let’s turn it on, real quick. And you can also go to ‘Title’. Your title text you can change the fonts. These are the fonts below all the pictures. You want to have a other fonts, you can make it uppercase you can make it well, anything you want you can do with this module. Its pretty awesome ofcourse. If I want to use this, and our styles were important for me, I would make them the same color as this section below. Why would I do that? Because it really distracts you from the image itself, and I want this module to not distract me, but to get my attention to the pictures, because I am for example a photographer and I want to sell my photos, or I want to sell my services as a photographer. Just make this a little bit smooth. Then you have filters, if you want all your photos to look the same way without using Photoshop every time you can use this one. Just remember also your titles will go with it. This looks like a haunted website so let’s change it back. Animation is of course how does the animations start on your website. Well, this looks awesome. No it doesn’t. But if you want some animation you can add it right there, just make it smoother. You can add a delay if you have more modules, and the starting opacity really depends on how intense you want it to look. A common question I get is: How do I change the width between the pictures? It’s pretty easy but you can find it in the module options you need to go to the row settings. You go to ‘Design’. Click on ‘Sizing’. Click on ‘Use custom gutter wide’ and change it just the way you would like it. If you use a gutter width hat is very small, you should really remove those rounded corners. Now this looks awesome but you see, I really should have made all these images the same height as this doesn’t look very cool. If you like this design you will quickly notice a problem when you look on your website on mobile. Let me show you what happens when you go to your mobile fview, you will see that it all gets stacked. So let’s say I want a two column on my website. Well there is a way to do it, just go to your settings of your module, go to ‘Advanced’ go to ‘Custom CSS’, we go to ‘Gallery item’ and we paste in this CSS snippet, you can find in the description of this video. Now this is 50%, let’s make it 33.3%. And I only want three columns to have on a tablet. Here we go, now you have on your tablet you have three columns.

40:20