Days 21 – 25: Learn How to Edit Pages Using Elementor in 25 Minutes!

00:01 Welcome to the Elementor Challenge. All right. Do your best to follow along and you can pause, stop, rewind, watch it three times if you need to.

00:11 But I’m about to show you everything you need to know to understand Elementor at a beginner level. Even intermediate in some cases I’d say.

00:20 So let’s get started. Click on pages, go to Add New Page and that’ll take you into the block editor. Give your page a title.

00:30 Doesn’t really matter what it is. and then click Edit with Elementor to open the Elementor Editor page. Later, you can publish this page if you want, so you can keep it for reference.

00:43 But in the quick edit, you can publish it but make it private so that no one on the front-end can see it.

00:48 Or you can just keep it as a draft, right? So that, again, people visiting a website will definitely not come across it by accident.

00:57 This page is just for your reference. So let’s get started, let’s click on the plus sign, go to Flexbox and we’re going to add the one with two columns.

01:07 The first thing I’m going to show you to do is how to add borders. So click on the top left hand icon for Container and then you’ll see the Container Settings and the left hand panel, click on Style and then go down to Border.

01:21 I’m going to choose Solid but it doesn’t matter which type you choose and I’m going to change the color. I’m going to choose the standard accent color that comes with Elementor, but you should see your astro colors that you added in the customizer below.

01:36 I’m going to make the border thicker. I’m going to add a 5 to make it thicker with the width and I make the corners which are square.

01:44 I’m going to make them rounder. So I’m going put a 5. So now the borders are rounded. Rather than doing all the work of going over to this container, and changing all the exact same settings.

01:57 I’m going to click right-click, and then click Copy. I’m not going to paste. I’m going to paste Style. So that way, I save my time.

02:06 I don’t have to go and find all the same settings, especially if you have trouble remembering exactly what you did.

02:14 Now notice how there’s not enough spacing between the two columns. I’m going to click on the three or six dots for the main parent container, go down layout to where it says gaps, and I’m going to adjust this to number 10, okay?

02:29 When you see numbers like this in the Elementor editing panel, you can also adjust them. Using your mouse, just pulling left or right.

02:39 If you were to have two more containers below these ones within the same parent container, then you could also adjust the gap between the rows as well.

02:52 You can make that a 10 if needed if you needed to. Now I’m gonna show you how to edit the background of a container.

03:02 So I’m gonna edit the background of this one. Click on the paintbrush here. I’m going to click on the globe again, but actually now I’m going to use the color pickers, so that’s the other way so you can add the other way that you can add colors.

03:14 I’m going to make it red. And I’m going to show you how you can also add a gradient. So if you go if I go to this one, I can click on not down here, but here where it says gradient and see there are two colors.

03:37 So the first color is not chosen. I’m going to choose it there. And so the first color is black and the next color is pink.

03:46 And if you pull on the dot under location you see how it brings the first color from the top to the bottom.

03:55 And if you pull on the dot for the second one it brings the location from the bottom to the top.

04:01 Let’s say you want to change the angle. Rather, you want the colors on the left and right, for example. Or completely reversed.

04:10 That is what that is for. If you click on type, you can do radial. And so one color is in the middle, and the other one is around the edges.

04:17 And you can change the placement right of the radial. So really neat. Now I’m going to show you how to add a background image, but I’m going to reverse all of this.

04:29 So what’s really neat with Elementor is if you go to the E at the top in the new Elementor version of Elementor, click on History, you can go back to a previous change that you made.

04:45 So I want to go back to where I just edited the gap between the columns, for example. If you have the older version of Elementor, then you will see the setting the clock icon down here, below the Elementor editing panel.

05:06 Okay, so to get back to the Widgets and just click on the plus sign, I’m going to show you how to add a background image to the whole parent container.

05:15 Go back to the six dots there, click on style under container settings and go to Paintbrush again and add a picture.

05:29 Now you can’t see the full thing yet but I’ll show you later how to adjust the picture in the background.

05:38 First we’re going to add some content so that we can make the container taller. So click on the plus sign, I’m going to add a heading as well as some body text.

05:55 So that’s the text editor right underneath. And of course, I’m going to add a button as well. So I’m going to leave the content as it is.

06:08 I’m not going to change that’s upset to make the style different. So your headings within your page should be H2s at the highest, right?

06:22 H2 is for the titles of sections and then if let’s say I have a subtitle below this one, it would be H3, but this is just body text.

06:31 So to change the style of a heading, go to style. You can change the alignment, left center, right, all that wonderful stuff.

06:39 You can change the color. I’m going to go to color pickers since I don’t have any options there. Sure. You can change the typography, so it should be set in your customizer through Astra, but let’s say for this particular occasion, I want something a little bit different.

06:59 Let’s say Rosario. You can change the weight. You can make it thinner, right or thicker, you can change it to uppercase, lowercase, default is just normal, you can change it to italicized or not, you can add an underline, you can change the spacing between lines.

07:23 So if I had two lines of text right in the same header element, I could increase the space between them and you can change the space between the words themselves as well.

07:35 Also between the letters. If you want to set things back to their default, you can just go into those boxes with the pixel numbers and delete them.

07:49 And of course, you can change the size of your heading as well. For body paragraph, you can use these settings, but use the settings and style to change everything in the text editor, better to use some of these settings like a bold italicize if you just want to change let’s say one line, so we just

08:17 want to make the first part bold, right? And if you click here, two of our toggles, you’ll see there’s more options, so maybe I just want to make one of these words blue, for example.

08:29 Or I want to put this in the center, but I want this to be left aligned. So just like with the heading, if you click on the text editor, icon to go to the settings, and you go to style, see typography.

08:47 So you can make all those all those similar changes to the decoration, the style, the font, and so on. And you can change the color too.

08:55 Let’s go to the button. So if you click on the button itself, you’ll see content first, and you can change the link to the Calendly link or a purchase link.

09:05 You can obviously change the text as well. Go to style and you can change the position. You can make it centered or you can make it right aligned.

09:16 can change a typography too and you can change what the button does or looks like when you mouse hovers over it.

09:25 So right now the normal is green when there’s no mouse on top of it but if someone hovers over it you can have it change colors so people are aware right that it’s a button that it’s clear that this is a call to action that you want them to click on or you can change hover colors just for

09:42 style. You can also like with the borders for the containers, right, change the radius of the border for the button so that it’s really circular, really rounded, and you can add padding, right, or delete padding to make the button thicker or thinner.

10:13 So now that you understand how to use these three most common elements in Elementor, let’s go back to the image to adjust the background of the parent container.

10:24 Let’s pretend we’ve added everything we wanted, but the background image is still not visible enough. It’s not positioned properly. So let’s click on the six dots for the parent container.

10:35 And we’re going to go to layout and go to minimum height. So first, we’re going to make it taller, right?

10:42 Let’s make it 500 even. We can also make it taller by adjusting the padding. So I’m going to actually undo this.

10:52 And I’m going to go to advanced. And I’m going to unlink. Because if you have the link on, it changes all the numbers.

10:58 we just want to change the padding for the top, and we want to change the padding for the bottom. So that is an option as well, but see how it doesn’t adjust the padding of the inner containers because they have their own settings for that.

11:12 It adjusts the padding for just a parent one. So padding is for adding space, right, within an element, and margins are for adding space between.

11:20 I’ll show you that later. So let’s go back to style. and now let’s make sure we choose cover so under display size.

11:33 That means that the picture is going to stretch right from one side to the other so that the whole thing is shown and you see that the top part of the image is shown we want the center so we go to position we go to center center so you can play around right maybe with your image the focal point is to

11:51 is near the top or somehow it’s It’s near the bottom, so you can play around with the position. We can also make the image stay in place while the user scrolls.

12:04 So if you go to attachment and then click on fixed, you notice that you have that cool parallax background effect that comes from attachment.

12:13 Notice how it says it only works on desktop there. So that’s a possibility as well. But obviously there’s a big issue here.

12:20 We have a very bright image that makes the text hard to read. So we can add a background overlay. So go to the main container settings style and go down to background overlay.

12:31 And you can add an image or a color on top, right? But you can change the opacity, the transparency.

12:45 So if it’s a little bit darker, obviously it’s easier to read. Now, let me show you how to add a few other widgets you might want to use.

12:54 So let’s go to the second child container there, and I’m going to add below, go below the Pro section. I’m going to add an accordion, right?

13:07 That’s useful for FAQs or if you have a lot of information you want to share, but you don’t want to have too much text on your page.

13:13 So you hide some of it, and then the visitor clicks on what they decide to read. So, actually, within each accordion, you can add a container, but I’m just going to show you that under edit container content, you can add the text that you want for the title of each accordion.

13:35 If there’s an eye composition, you can say, if it’s at the start or the beginning of the title, you can decide if the first one, if they’re all going to be collapsed, all closed when someone comes to that web page or the first one’s going to be open but the other ones are going to be closed.

13:52 Under style you can decide that there’s going to be more space between the different accordions. You can again change the borders, change the padding.

14:04 You can make changes to the header in terms of typography and what the color looks like when you You can also change the content within the each accordion in terms of the background, the border radius, the padding, and so on.

14:27 Another useful widget below the Pro section is the icon box, where you can talk about the three key features or three key benefits of your products or services, so if you click on icon, you can choose something that’s related to your business or nonprofit.

14:48 Change the title, change the description. Under style, you can decide if the icon is going to be positioned left-right or center.

15:00 Same with all the content, all the content can be positioned left writing center. You can change the spacing between the icon and the heading.

15:10 You can change the color of the icon to something that suits your brand. You can change the size. And same with content.

15:22 You can change the typography. So lots of choices there. The one other element I want you to play around with is image because of course that’s going to be a very popular one, but I’m going to show you the image box actually because that may be even more useful again to show all your services so you

15:51 could have an image on top that’s representative of a service that you offer. You could change the title

16:00 Change the description at a link as well. Under style, you can decide what if the image is going to be positioned on the left or right.

16:08 Although be careful about how that looks on mobile. You can change the spacing between the title and the image. Under image, you can change the width.

16:18 That’s also the same for if you just choose the image elements where there’s no image box. You can change the opacity of the image to under content.

16:29 You can decide on the typography, the colors, and so on. There’s so much to play with with Elementor. Now let’s add animation.

16:39 So you don’t want to add too much animation. You don’t want your website to be too busy. So it’s best to add it to the elements that are more important like the heading, right, which is the title of the section or to a button, right, you’re called to action.

16:52 So let’s add it to the button. So click on the button, go to advance, which is where you’ll find motion effects for almost all the elements under advanced.

17:02 And those are pro, you need to pay, but you can go to entrance animations, you can click on the different types to explore what they’ll look like, like zooming in right or bouncing down.

17:15 and you can even change the speed if you want. Okay, so I think you get the idea about all of those.

17:23 Now let’s learn a little bit more about the parent container for what we can do. So you can also change the direction of the content in the parent container.

17:37 Right now everything is positioned so that it’s horizontal but you can change it so that things are vertical to each other.

17:46 You can also within one of the child containers and go to layout again, you can justify the content to the center or justify it with space in between, a little less space in between, and so on.

18:05 I’m just going to put it back to the start and you can align all the items to the left or to the right.

18:10 So those are those these options are if you want to make right sort of global decisions about what’s going on in that container.

18:21 Let’s create a new container. So I’m going to do the same thing and choose two columns and again I’ll show you how wonderful it is to just be able to click copy and then click paste style, paste style so that you don’t have to do all the same work, right, for every section.

18:48 Let’s say you’re also going to use the same exact style of header. You can click copy, and rather than copying and duplicating and dragging, you can just click copy, click paste, and there you go.

19:00 So you can do the same with all the other elements as well, and you can do the same across pages, something that you copy on, let’s say the about page, you can open up, write the other page that you might have here and then paste it on a container in that page as well.

19:21 Okay, so just a reminder that again, you can undo your actions by going to the E, going to history. So let’s say I change my mind.

19:33 I don’t want that container. So then it’s gone. The action is still there for now, if you want to change your mind again.

19:41 And if you go to revisions, I have none here, but you can go to a previous editing session. So once you click publish, that becomes the end of an editing session.

19:50 So I can go back to a previous one from that day or a different day. The other thing that you especially need to check is how your design is looking on the different devices.

20:05 So everything is done by default in desktop. So when you click on tablet it’s going to inherit all the settings that you just did on the desktop version.

20:15 Now let’s say oh my god this looks terrible. There’s not enough space between the border and the edge of the tablet screen.

20:24 So then we can go to, at a container, go to Advanced, and notice now that the icon image that you see everywhere is for tablets.

20:32 So that means you’re only changing it for tablets, whereas with desktop, you are changing it for the other two devices, unless you go in and you set them to be different in tablet or mobile view.

20:47 So when we change it here in tablet, it will be now different from what it is in desktop. So let’s add some margin, or some padding, some padding to the left and to the right because we don’t want the border to be against the edge of the screen.

21:04 So there you go. Let’s say we duplicate this container, right? So now it’s below. And we want more space between these containers.

21:19 They’re just too close together. So we could go to edit the margin, go to advance, and margin will put space between elements.

21:32 But we just want to put margin at the top. So let’s put 50, for example. Right, so that’s what margins were to put space between elements.

21:39 margins. Margin can be negative, right? It can be minus 50, but padding cannot be negative. Let’s take a look at how it looks like on mobile.

21:57 And so, again, you can adjust things as you see fit. Like, for example, I see that these two rows, now they’re not columns because they’re stacked on top of each other.

22:08 These two rows have no spacing in between. So I can go to edit the parent container, go back to layout, go down to gap and put a space of 10.

22:19 If I want to only change the row and not the column gap, which there is a such thing, because here things are stacked.

22:28 So it’s just rows. Then I just click on the link. So I can make that 30, for example, to adjust the spacing between there.

22:38 Let me show you another thing about responsive design. That’s what we call it when we’re adjusted design for different devices.

22:46 Let’s say these two containers or parent containers are very similar but one’s a little bit different and this one you want for desktop to be seen on desktop and this one you want to be seen on tablet and mobile.

23:00 Well, you can go into edit container and to advance and go to where it says responsive. And you can say, I’m going to leave this one to show on desktop, but I’m going to hide it on mobile and tablet.

23:13 So on tablet, you’ll see it’s grayed out and on mobile as well. That means it cannot be seen. And then if I close this, which is like seeing a preview, I can see that indeed the first one is gone, right?

23:27 And the first one’s also gone on tablet, and then on desktop, suddenly I see both. So that can be very helpful if you have a design, you have a design that looks great on desktop, but the desktop doesn’t look so great on mobile, and so you want to create a new one just for mobile, but that cannot be seen

23:47 right on the other devices. That can work well, let’s say if you have a slider on your homepage, but maybe it’s too heavy, and slowing down on mobile so you just put an image as your background for your mobile banner.

24:04 The last thing I’ll mention is that if you really like a container that you may, let’s say this one’s awesome, you want to use it on a different page or you like the whole page and you want to use the page, the whole page again, but just slightly modify it, right, to keep the design and branding consistent.

24:22 You can save them as templates so you can click on the arrow next to publish click save as template or you can right click on the six dots and click save as template right it’ll prompt you on your screen to give it a name and you just click save and then next time you want to add a template I’ll show

24:42 you on a different website of mine as let’s click on the plus sign you click on the folder you could go to my templates and you choose something that is listed here and you click insert so let’s say I’m going to insert this.

24:57 If you want the style from your saved template to override what you already have, you would say apply. And so there you go.

25:07 Instead of having to recreate that particular heading and subheading right again because maybe let’s say a team member of yours doesn’t know how to use Elementor as well as you do, they can just go to your library of templates.

25:24 You can find the library of templates under Elementor in the backend.

25:41 So you just go to not Elementor, but Templates there, click on Save Templates. and you can see all your saved templates.

25:54 So this is your template library, which is good to keep updated. You might want to delete some that you’re no longer using.

25:59 So there’s no confusion, especially if there’s multiple people working on the website or sometimes you might want to go in and edit a template if let’s say something about the style or the branding has changed.

26:11 So that can be very helpful for keeping consistency with your design. So, I hope you were able to follow along with everything and take your knowledge from Elementor, from Theory to Practical.