From the course: Customizing a WordPress Theme from an Adobe XD Prototype

Overview of Elementor

From the course: Customizing a WordPress Theme from an Adobe XD Prototype

Start my 1-month free trial

Overview of Elementor

“

- [Instructor] Now it's time to start building our pages and add some content into our website. We're going to be modifying our pages using the Elementor plugin, which we installed earlier. I'm going to go into the page section and we already created some of the basic pages. I will click edit on my homepage and that's going to take me into default WordPress editor. Now currently, our page looks like this and we could add text and images here, but you'll see that Elementor is going to give us a lot more flexibility and a lot more control over the layout of our page. In order to use Elementor, you're going to click the edit with Elementor button and that's going to take you to the Elementor editor. Now Elementor is a WordPress plugin that helps you to design different parts of your website. It's essentially a page builder, but you can also use it to design custom format blog posts, style your own headers and footers, as well as create your own widgets that you can use anywhere on your site. There are many factors that make Elementor an excellent solution for anyone who wants to work on their website design right from the front end and play with intuitive, handy tools in a live drag and drop mode. You really don't need to know any code. Elementor is a freemium WordPress plugin, meaning they have both a free version and a paid version that has extra features. We'll be focusing on the free version in this course. Once you get into the Elementor editor, you'll see that there's two panes. The pane on the right side is the editing screen of your site. This is where you add and edit elements that form the layout of your page. Over here on the left side is the elements panel, and this is going to house all of the creative tools and widgets. You can use widgets to add elements into your page, things like headings, images, text, buttons, video, whatever. You can also search the widgets section because there are quite a few widgets located here, so if you're trying to narrow it down, you can use the search feature. So let's see how we can actually work with Elementor. The first step is to create a section. You create a section by clicking the plus sign right here, and that's going to allow you to add a new section, and obviously, you have different choices as to the number of columns that you're going to be creating inside of your section, so I'll create a three-column layout to start off with. Sections are always going to be visually represented with this blue stroke around them, and the bar at the top is going to let you select the section and edit it, so right now if I click on the blue bar, I can edit the section, and this is where I can control different attributes about that particular section. You could also click the plus to add a new section or you could click the x to delete a section. We'll go ahead and work with this existing section. When I hover over the column areas, you'll see that they display with a dotted black line. This is how we can select the various columns that are within that section. So we can select the column by clicking the left hand edit column button, and again, the panel on the left is going to allow us to control attributes about this particular column. I'm going to go to the element icon in the upper right and this is going to house all of the elements and I'm going to select a heading element and drag it into the first column. As you can see, the heading is now created within this column and you can edit that particular element by using the left hand pane. So we'll go ahead and just type BanksBoards, and I want to draw your attention to this section. We have three tabs here. The content tab is going to allow you to control the base attributes about that particular element. And it is worth noting that the elements section is going to change. It's kind of a chameleon. It'll give you different options based on the actual element that you're working with. The style tab is the next tab and this will allow you to control styling of that element. So if you wanted to change the color of the header or the typography of the header, you could go ahead and do that here. And you have all sorts of parameters that you can dial in to get as specific as you want. The advanced tab is going to contain settings that pertain to spacing, so you can set your margin and padding settings here. And if you scroll down, you'll see that there are some other tabs that are available, which will even give you more granular control about this particular element. So it's really easy to be able to add elements and if you just check the tabs, you'll be able to make augmentations to those particular elements as you start to add them into your page. If you want to preview the page in your WordPress website, you'll click the update button and this will lock in those changes. So if I go back to the front end part of my website and refresh, you can see that now those changes have been applied to the page. So I think that you'll agree that Elementor makes it very easy to just drag and drop various elements into your website and make modifications as needed.

Contents