Using Elementor to Edit Pages
What is Elementor?
REI Landlist 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 Landlist. 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 the properties page.
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
To edit pages with Elementor go to Pages > All Pages in your WordPress Dashboard and hover over the page you want to edit. You will then see an option to Edit with Elementor. Click on that hyperlink.
You'll then be presented with a live preview of the page you selected, and to the left, you will see the Elementor panel.
Because the theme comes with automatically installed 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. 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 of the page. 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.
Try it Out: Change the Number of Homepage Featured Properties
The homepage shows 3 featured properties by default. Let's change that and show 6 properties instead.
The properties are generated using the shortcode
[rei_landlist]. The shortcode outputs 3 properties by default. To change that number, add the
ppp parameter like this for example:
Give it a try and see how the change is applied instantly to the preview.
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've 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.
How to Make your Landing Page Mobile Responsive
With the majority of website traffic now coming 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'll get the option to select whether you want to change the element for desktop, mobile or a tablet, as you can see below:
To learn more about the mobile responsive features of Elementor, check out these two articles from their documentation, where they discuss the feature in more depth.