Getting Started with Elementor

The Home Page, the header and footer of the website as well as and many other pages with more complex layouts are built using a custom page builder plugin called Elementor. Elementor is a drag and drop page builder that comes with hundreds widgets and templates to expedite content creation.

(1) – This is the content area. You’ll see your regular theme outside this area, and you’ll build your own design roughly in the area marked with the grey dotted line.

    (2) – These are available elements/widgets. These are the building blocks that you’ll put together to design your page. If a block is selected, this section is also used to edit the settings for the highlighted block.

    (3) – These are settings. These help you undo changes, preview your design on different devices, and more.

Elementor gives you two structural elements that help you:

• Position elements
• Style elements as a group (e.g. add a background to an entire section of your page)

These structural elements are:

• Sections – the broadest layout block.
• Columns – sit inside a section. You can either have one column or add multiple columns.

Adding new elements to your design

To add a new element to a section or column, you just drag it from the left sidebar onto the visual preview of your page:

To start editing the Home Page, while logged in, click on the Edit with Elementor option in the WordPress toolbar if viewing the frontend of the website. Otherwise, head to the Pages section via the left sidebar, then search for Home and click Edit with Elementor which is displayed when hovering over the page.

Editing the Footer #

To edit the Footer, hover over the WordPress toolbar when viewing the frontend of the website. You can get to the front end of the website when you are signed in by moving your mouse to the top left and selecting the Visit Site option.

Now select Edit with Elementor and choose Footer.

Once you are in the Elementor edit screen you can edit section the same manner as a normal page, by editing the text that is displayed. The content that comprises the Header and Footer Menu however is dynamically controlled from the  Appearance > Menus section in the WordPress dashboard.