In this lesson, you will learn how to edit, change the styling and add copy with Elementor.
This section will cover the basics of simply changing the text.
Visit https://-YOUR SITE-/wp-admin and log in using your credentials. If you have not set a password or do not know what it is, click the “Lost your password?” link below the WordPress login box.
Go to the website or front end of the site and find the page you would like to make edits to.
At the very top of your website’s page, you will see a toolbar option that says “edit with Elementor” – click this to edit the page with the Elementor or builder or select which template you would like to edit from the drop-down menu in that tab.
Header Template: The top area of your site where you will find your menu and logo
Footer Template: The bottom part of your site where things like your terms and conditions may be found.
Single Post Template: A template for your single blog posts (or other things like services) – be careful when editing this content as it will edit every post that utilizes that specific template. PLUS, it often contains dynamic content – for instance, it pulls the post title from the WordPress or backend of your site.
Hover over the text you want to edit and click the pencil blue pencil button that appears.
Either edit the text in-line on the actual page or edit the text area in the Elementor Panel on the right-hand side of the page.
Press the green “Update” button to save your work
This section will cover the basics of changing the styling of your text, such as text size, color, and decoration.
Click on the element you want to make style changes to so that it opens the Elementor Panel on the left side.
In the Elementor panel, click the “style” tab for the widget and edit the way the text looks.
Press the green “Update” button to save your work
Elementor | Introduction to the Editor
00:01
Hi, let’s walk through how you edit your content on your website. We’ll start with the text on your website so you’ll visit any page. Where Elementor is installed, you’d know that Elementor was here because it would say edit with elementor. So to edit this actual page, you would do it just edit with elementor. If you wanted to say do the header or the footer, those would be header or footer depending on your theme and what your template files look like, and what they’re called. All right, so let’s start with just the basic page edit with elementor. It opens up the elementor panel.
00:42
From there, you’ll get access to all of our widgets. Of course, you can edit your text, which is pretty simple. If you want to add new text, you just, you know, rewrite it. So click on the little edit button, go over here, and design. The signer. Amazing person. Ok, so we have edited that text. You can do the same on every spot here. Now, changing the styling on the text is going to be your preference, so you may like how it looks, and that’s great.
01:18
You may want to do custom styling. Then if you’re going to do custom styling, you go to the styling panel. So you click on this element. Once again, you go to the heading, you go to style, and then you can go to typography. So just for reference, right now, this is set to a global element, meaning that everything that is set to this, so this is H1, all shares the same thing so that we don’t have to upload lots and lots of various versions of the text so if you want to do a custom though, you can just click the edit.
01:52
And then you can change the family, the font family, so then the size. Each of these has a different kind of style. So PX is like the classic height. E M tom is kind of related to the screen. And then REM Is actually best for accessibility, so I tend to switch that over to REM Whenever possible. You can do the weight of the text, so how bold it is from 100 to 900 to, wherever you want it to be. And then from there, you can make it upper place. Capitalize whatever you’d like. Styles are italic, oblique, or normal. And then we can do an underline and overline a line through or none.
02:40
You can also change the line height, so that’s the space between the text. Or we can even make it wider. So the letter spacing gets more or even makes it less. You can change the word spacing. And then there are many other things you can do that are more stylists. And that can be text stroke, so this is the outline of the text. So if we go like this, and maybe we change this to blue, you see that the outline changes. There’s also a text-shadow, which’ll give a shadow to the text. And those are the most important things you can know you can do there. So if you want to go back to the global color, you can come in here, and you can pick from any of the choices here.
03:31
And those are just preset things that you can kind of play with. So we’ll go back to each one, and then we’re going to set these back to default by doing this little circle. And it gets set back to where it was really simple. You’ll notice each of the different widgets. So these are all kinds of different styles of widgets. We’ll have different areas to edit.
03:53
For instance, this is an icon list, so you click here and change the text. Ace, ace. And then, you can add a link. The same thing with these is just haters. Same thing here. This guy, however, is a button, so you can change the button text, you can add the link. You can do something inside the site if you just want to look up a quick page internal URL. And then content. And then, just that you wanted to go to your about page, you can bring it up that way.
04:35
And then now this link is going to go there. You can style your button here or in the global section. We’re going to go through styling it within the page itself. So you click style, you can change the typography once again, you can do text styling, and you can change the color. Let’s make this black. Ah, you can also do it manually. Let’s make it red. You can change the hover color, which means it changes to black when you hover over this. There is a motion element, so when they hover, a ball happens, and you can switch that out.
05:08
You can use nothing, or you can use a pulse or whatever feels best for you. The border-radius is around the outside, so let’s give the background color so you can see what that looks like. Let’s make this black, so now the outside, so border-radius. Let’s start with padding is the space between the outside edges and your text. So we can change that to 50 and then say you want more of a pill shape for your button. You can then change this to a radius and then adjust it even more so whatever size or shape you would like it to be. Art is the main way of dealing with your text.
05:56
Now each element will have something different, but mostly you just need to remember to push the edit and then change the text within the element and the styling tab there. All right, good luck.
Pinpoint your brand vision with my style quiz. You’ll get a free downloadable brand board and even generate a homepage with your personal brand style!
