Using Elementor To Edit Pages
What is Elementor?
REI Houselist 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 Elemesntor Pro for it to work with REI Landlist WP. 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, except for the Properties pages. For that, you will be using the built-in WordPress blocks theme Gutenberg.
A quick way to check which pages can be edited by Elementor 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:
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
You will then be presented with a live preview of the page you selected and to the left, you will see the Elementor panel.
If you have installed the demo and want to work with the template provided you can simply click on the section and edit it in real-time, alternatively, you can add your own sections using basic, general and WordPress widget options under the Elements tab of the Elementor panel.
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. 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:
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.
Customizing 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
At the bottom of the Elementor panel, click on the eye icon, next to the Update/Publish button to preview.
If you aren't ready for your changes to go live, click the arrow next to the Update/Publish button and select Save Draft.
After you have published a page, if you want to change something, do so, then select Update at the bottom of the Elementor panel. Your work will automatically publish.
Making your Website Mobile Responsive
With the majority of website traffic now originating from mobile/tablet devices, it is more important than ever to ensure that your website 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.