This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
In the previous part to this tutorial miniseries How to Build a WordPress Website With Elementor I showed you how to set up a WordPress website using the Elementor page builder. We installed the plugins needed, including the Envato Elements WordPress plugin, then used a template kit to prepare a simple four page website.
In this, the second and final part, we’ll be customizing those pages. So let’s get started!
Refresher: What is Elementor?
Elementor is a page builder plugin for WordPress. It allows you to define layouts; add, edit, and remove elements; and use various templates to create websites of all kinds. It comes in both a free and Pro version, depending on your needs.
In this tutorial I’ll be showing you how to customize what we’ve already built with Elementor, by changing the colors, typography, and layout of various pages, as well as uploading a logo, and creating navigation for the site.
Customizing Pages With Elementor
1. Customizing Our Website
Let’s begin by looking at customizing the colors of our website. We’ll select a page to edit by going to Pages, then choosing the home page. We create a new section (for demonstration purposes) at the top of the page by hitting the + icon on the tab of the hero element:
Using the option presented to us in our new section, we select a two column layout. We can then drag some widgets into the columns we’ve created.
To edit colors go to the Elementor editor Menu > Default Colors, and you’ll see the currently applied color palette:
We can then choose any of the alternative palettes listed under More Palettes. The changes will be reflected in the page at realtime.
Those are global styles, but let’s say we want to edit colors on a widget level–how would we do that? Begin by clicking the widget you want to edit. This will reveal another menu to the left. Select Style to see the color settings.
Any changes made here will not be affected by any future changes you make to the global styles; you’ve just over-written them for this widget.
Customizing Fonts
Moving on, to edit fonts globally across the template go to Menu > Default Fonts. You’ll be able to set typography styles for headings, body copy, and accent text. And it works just like the colors we looked at before: make global changes here to affect the whole template, or enter a widget to override those settings at widget level.
2. Finishing Touches
There are one or two extra details which we’ll want to change whilst we’re editing our Elementor website. For example, the “Twenty Seventeen” theme hero section which is present on all our pages should go:
We can do this by going back to the page in our admin, and changing the page template from Elementor Full Width to Elementor Canvas.
Duplicating Elements
Let’s add a fourth “Flip Box” to our homepage. Flip boxes are a premium feature of Elementor and they allow us to create blocks which reveal extra information on rollover. We can duplicate one of the existing boxes and the layout of the section will automatically become a four column layout instead of three:
Clicking on the new fourth Flip Box will bring up a whole bunch of options, so we can change the colors, the content, the icon, the animation, the background image, and it all happens with pointing and clicking (not a shred of code!)
Altering Margins
One other thing I’d like to change is the margin on our animated headings (see the menu page, for example). The uppermost string of text is sitting right on top of the main heading.
By selecting the heading, then clicking the edit (pencil icon) button, then the Advanced tab, we can alter the specific settings for this element. Here I’ll change the top margin from -60px to 0. Fixed.
Changing Background on a Section
Lower down on the menu page we see a background image which I’d like to change. This can be done by clicking the section then going to the Style tab.
We can change the image, and then by going to the Background Overlay settings underneath we can also change the opacity, the location, and even more advanced options like CSS Filters (again, without touching a line of code).
Using Blocks
When we create a new section on a page, instead of manually populating it with columns, widgets, and so on, we can also use something Elementor refers to as “Blocks”. Blocks are reusable chunks of content which you can select from a library or create yourself.
For example, on the home page, create a new section at the top again (once more, purely for demonstration purposes). Hit the Folder icon, and go to Blocks in the modal which pops up. This will give you a whole collection of blocks which you can then filter–try filtering by “header”:
Having chosen a heading block we’ll be taken to our homepage, which will now have the newly created section ready for us to fill.
Once we’ve filled and made changes to our block, we can optionally right-click it, then go to Save as Template. This block will now be saved in the library under My Templates, ready for reuse on other pages.
See For Yourself!
Elementor allows us to change every conceivable aspect of our new website; the textual content, icon lists, padding on certain hero sections, contact form widgets, you name it! I hope you found this tutorial miniseries useful, don’t forget to leave any questions or comments you have in the section below.
Useful Links
Elementor Templates are now available on Envato Elements—here’s an explanatory video, plus other learning resources to help you up your Elementor game!
