What is Elementor?
REI Houseleads uses a powerful and user-friendly page editor, Elementor. This plugin allows you to have complete control over your website and uses drag and drop technology to make the whole design process much simpler.
Elementor also allows you to ‘live edit’ the content that’s in your blocks so you can make modifications and see results instantly.
Note: You don’t need to subscribe to Elementor Pro for it to work with REI Houseleads. The free version will suffice.
What Sections of your Site uses Elementor?
All sections of your website will be able to be edited through Elementor.
A quick way to check whether or not you can use Elementor to edit a page is to go to the Pages section on the left of your WordPress Dashboard and select All Pages. You will then see a note next to each page that uses Elementor as you can see below:
If you did want to add some styling to the page simply hover over the page and click on Edit. You will be directed to the WordPress page editor, Gutenberg, which uses blocks. Each block can be stylized to your liking under the Block tab you see on the right-hand side.
Using Elementor to Edit Pages
In order to edit pages go to Pages > All Pages and hover over the page you want to edit. You will then see an option to Edit with Elementor. Click on that hyperlink.
You will then be presented with a live preview of the page you selected and to the left you will see the Elementor panel.
Because when you installed the theme, you also installed the demo content, you’ll have a template right in front of you so you can start editing that to your liking. Simply click on the section and edit it in real-time. Alternatively, you can add your own extra sections using the Basic, General and WordPress widget options under the Elements tab of the Elementor panel.
How to Add a Section
When you hover over parts of your page, a light blue box will appear around the outside, this box defines a ‘section’. A section has the following key components to it: a section handle, a column handle, and a widget handle.
To add a new section, simply click on the + in the section handle. In the screenshot above, you see the option to add a section at the top of the page. A new section will appear with a couple of options:
Click on the pink plus sign to add a widget or you can drag them across from the Elementor Panel on the left-hand side. For example, if you want to add an image section you would do the following:
How to Delete/Move a Section
To delete a section, simply click the X on the section handle.
To move it, click on the 6 dots icon in the middle of the section handle and drag it to where you want it.
How to Customize a Section
Each section in Elementor is fully customizable. Once you click on a section, the main Elementor panel will show you all the options you have to customize the section.
For example, in the heading widget, there are three tabs dedicated to customization; Content, Style and Advanced. Each with their own subdivisions offering even more custom options.
If there is something that you don’t see, you can even add custom CSS to tailor the section to your liking. Just head to Advanced > Custom CSS and then paste in your code.
If you want to find out more about what each Elementor widget does, you can check out their full documentation here for an explanation.
Previewing, Saving and Publishing your Page
Once you have customized all the sections to your liking. You’re ready to preview, save and publish.
Note: Before you publish for the first time the green ‘Update’ button you see in the images below will read as ‘Publish’.
After you have published a page, if you want to change something, do so, then select Update in the bottom of the Elementor panel. Your work will automatically publish.
How to Make your Landing Page Mobile Responsive
With the majority of website traffic now originating from mobile/tablet devices, it is more important than ever to ensure that your landing page is fully optimized for mobile.
Elementor comes with the ability to change certain parts of your site to look more appealing on different sized screens. The elements you can change are:
Padding and Margins
In these sections of the Elementor Panel, you will see a logo next to the element you want to change. It will be a picture of a desktop.
Click on this and you will get the option to select whether you want to change the element for the desktop, mobile or tablet version as you can see below:
To learn more about the mobile responsive features of Elementor, check out these two articles, where they discuss the feature in-depth.