These videos give a very helpful quick tour of the main features you will need to know.
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. For more detailed infomation about the Elementor widgets see docs.elementor.com, and for a step-by-step guide to using WordPress go to our How to use WordPress page.
Don’t try to edit any page created using the Elementor plugin using the standard WordPress dashboard. Instead, do one of the following…
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.
All elements can be duplicated and dragged around to change the order essentially allowing them to be used as building blocks for a page.
Hover over a section and you will see three icons – the first adds a new section, the second allows you to move the section and the third deletes the selected section. Hover over a column or widget and you will see small squares – use these to move the elements.
Whether editing a section, column or widget, right click for further options…
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 – Layout, Style and Advanced.
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 are widgets that we have pre-designed to enable you to
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.
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…
If you want to ask us any questions, please do drop us an email…
Banners and adverts can be created using Elementor. If you have an upcoming event or series you may have lots of information you want to communicate – a good idea is to create a simple advert/banner that links to a page with more info. This is more friendly to read and will be legible on mobile and tablet (where a flyer that’s been pasted into the site will probably not be).
Here’s a few examples of what can be created using Elementor…
First you need to add a section using the ‘+’ icon. Select either one or two columns (I’ve used two here). Then go to the widgets panel and add an inner section. Go to the inner section settings and select a minimum height. I’ve chosen 250px for this advert. Now you should be ready to create your advert.
Next you need to select the inner section and go to ‘style’, then ‘background’.
To add a background photo (like the one below) select ‘image’ in ‘background type’ and add the image you want. You may need to change the size to ‘cover’. If the image has a lot of contrast (most probably will be), select the ‘background overlay’ tab and add a subtle opacity.
To add a background video (like the Christmas Carols example above), select ‘video’ in ‘background type’. Add the web address of a YouTube video (either yours or one you have permission to use). It’s a good idea to also add a ‘background fallback’, in case the video doesn’t work for any reason.
To add a background colour (like the Family BBQ example above), select ‘image’ in ‘background type’ and simply add a background colour from the palette.
Now you can add text. It’s a good idea to keep text to a minimum – lots of text can be hard to read and make a page look cluttered. You can always have a link to a page with more information.
To add text, drag the ‘heading’ widget into the advert. Choose the alignment you want, then go to ‘style’ to change the colour, size, weight and anything else regarding the typography.
It’s a good idea to have the bulk of information on a separate page.
To create a button, drag the ‘button’ widget below the text. You can make various changes to the colour, size, alignment and typography. Make sure the button is legible and the colour doesn’t clash with the rest of the advert.
To add the link, go to the ‘content’ tab and add the url in the ‘link’ box. If you want the link to open in a new window, click the settings icon and select the tick box below.
You have now created your advert!
Depending on the page and context of the advert, you may want it to sit as more of a banner and fill the whole width of the page. This is easily done by deleting columns.
It’s also always worth checking how it looks on mobile, tablet and desktop. You may need to tweak the settings to allow for viewing in each format.