Elementor User Manual (basics)

Last modified by Dejan Janosevic on 2021/12/17 14:23

For better user experience ITAF websites are using Elementor page builder within WordPress. The following instructions will get you more familiar with the basic options in Elementor and help you edit the content of your website pages. Note that for blog posts the Elementor page builder is NOT used (blog posts are edited with default WordPress editor).

Elementor overview

1.1 Page builder and its elements

You can enter the Elementor page builder by clicking the appropriate button found on several places like the top toolbar or bigĀ  blue button found in the page editor:

elementor-button-topbar.jpg

elementor-button-pages.jpg

Once the Elementor loads you will see its panel in the left column of the page:

elementor-editor.jpg

On the right side of the screen a webpage that you are editing can be seen. If you mouse hover the page elements a blue selection rectangle will appear with additional editing icons on top of each element conatiner.

elementor-continer-icons.jpg

1.2 Page editing

While editing a specific element on the page the left column panel will load the appropriate options. The element options are organized in 3 tabs:

- Content (specific content of the element)

- Style (styling the element with color, typography, size, shadow, border, border radius, etc.)

- Advanced (margin and padding, motion effects, background and border options, responsive options and custom CSS for the element)

elementor-element-editor.jpg

While editing a page you will also have the option to edit the header and footer elements (which are stored in separate location than the page you are currently editing) by clicking the appropriate orange handles on top element (for header) or at the bottom element (for footer):

editheaderhandle.png  editfooterpanel.png

After editing header or footer elements and saving the changes (by clicking the green Update button at the bottom of left column), you will have the option to go back to the original page that you were previously editing by clicking the orange handle:

editpagehandle.png

elementor-update-button.jpg

Tags: