ninefootone
editing with elementor & wordpress
introduction
This video gives a very helpful quick tour of the main features. Please note that the system has been upgraded since this video and so there are some small visual differences in how the system looks now.
The following instructions give an overview of the basics needed to edit a website built using WordPress & Elementor. Not all aspects of the WordPress admin area are covered in this guide – just the essentials for editing Elementor pages. See docs.elementor.com for more detailed information about different widgets.
Don’t try to edit any page created using the Elementor plugin using the standard WordPress dashboard. Instead, do one of the following…
accessing the editor
- On the pages overview (www.domain.com/wp-admin/edit.php?post_type=page) hover over a page and click ‘Edit with Elementor’
- On a single page edit window (eg. www.domain.com/wp-admin/post.php?post=487&action=edit) click the big ‘Edit with Elementor’ button
- On the front end (while logged in) click the ‘Edit with Elementor’ link in the admin bar
elementor overview
page structure
Each page is made up of sections (rows) which have a blue outline when hovered over and columns which have a gray outline. Widgets can be dropped into these.
To add a new section simply click the ‘add new section’ button at the bottom of a page or, if you want to add it between existing sections, hover over one of those sections and click the + icon.
adding, duplicating, deleting
All elements can be duplicated and dragged around to change the order essentially allowing them to be used as building blocks for a page.
Hovering over a section will show a set of icons. For columns and widgets you’ll need to hover over the element AND then hover over the small square that appears (left for columns, right for widgets). These icons will enable you to…
- move (all)
- duplicate (all)
- delete (all)
- save as a template/global widget (section/element)
- add (section/column)
the sidebar
When you first edit a page built with Elementor you’ll see a sidebar from where you can add elements and edit settings for all existing elements.
Initially you’ll see the basic elements that can be added eg. columns, headings, images, text etc. There is also a tab for ‘Global’ elements – any pre-designed widgets, specific to your site, will be stored here.
The top left ‘hamburger’ icon will show you various global settings for the page. We’d recommend not touching these settings apart from ‘Revision History’ which will enable you to go back if you’ve made a change you want to undo.
saving pages
At the bottom of the sidebar is the VERY IMPORTANT ‘Save’ button which you should get into the habit of clicking on a regular basis to avoid losing changes.
editing tab overview
Exactly what shows in the sidebar will depend on what is selected in the main preview window.
For all widgets you’ll see three options in the sidebar – Content, Style and Advanced.
- Content gives the means to edit the text, image, icon, link etc for widgets.
- Style provides options for background images, typographic styles (font size, colour and so on) etc.
- Advanced enables you to set margin, padding, z-index etc. If you don’t know what these are then ignore them!
responsive editing/preview
At the bottom of the sidebar there is an icon of a computer screen which you can press to preview the site at desktop, tablet and mobile screen sizes. This is very useful to ensure that any amends work well across all devices.
You’ll see this same icon on a number of elements (text size, alignment etc.). By default, whatever you set for desktop will flow down to tablet and mobile but where there is a computer screen icon next to a setting you can choose to have different parameters for each screen size.
To get a proper preview of the site use Ctrl / Cmd + P to enter preview mode (use that same shortcut to exit preview mode).
global widgets
Global widgets are widgets that we have pre-designed to enable you to
- maintain a visual consistency more easily across the site
- use a single element in multiple areas of a site which can be updated centrally
For example, if you want to add a button we can set a global widget so that the style of that button matches the rest of the site so you don’t have to manually style each one.
Global widgets, by default, are linked meaning that if you edit one it will update everywhere it’s used on the site. If you want to use global widgets to enable pre-styled elements which are different in each instance (eg. a different URL from a button) then add the widget, click ‘Unlink’ and then edit the element.
Access global widgets by clicking the top right icon (9 dots in a grid) and then clicking ‘Global’.
templates
Templates can be used to create whole pages or sections within a page. Where a global widget is just one element, a template can contain a mix of sections, rows and widgets.
The section below is one example of a template…