At KIJO, we are so confident in Elementor’s capacity for unique website design, we use it ourselves. Elementor helps us recreate our designs exactly, down to the last pixel. But, how do you get to grips with the basics of this popular page builder? We thought we’d put together the Elementor basics; an Elementor tutorial if you will. So, after your website’s been designed, you can make any small, additional changes yourself.
Building a professional WordPress with Elementor is so intuitive, it’s almost like drawing freehand. The user interface is designed to make all types of content accessible and easily customised. When your website needs a new page or a section of copy needs updating, your website designer should be on hand to help. However, if your website design package didn’t include future support, this article will show you around Elementor.
Once you’ve got to grips with the layout, you’ll be able to add sections, columns and widgets to a page and customise each element too.
Elementor is an easy-to-use, live, front-end page builder that allows designers to create WordPress websites from scratch. It includes a drag and drop editor and provides instant visual feedback. On WordPress, it works as a web design plugin which are extra programmes you install on top of the fundamental WordPress code.
Released in 2016, the platform offers unbeatable flexibility at a great price point. The key to its popularity has been that most of the features are free! Elementor also works with any template, so you can start using Elementor at any stage in your WordPress website development. It also enables users to easily create a house style and include existing marketing material helping ensure brand consistency and standardisation across colours, fonts, links, overall formatting and more.
Once you have installed the Elementor plugin on your WordPress CMS, you can start building pages. You can build from scratch, or select a pre-built template to customise.
In the WordPress dashboard, go to Pages > Add New > Edit with Elementor or use the ‘Create New page’ shortcut.
Then, add a section, choosing the number of columns. Next, drag as many widgets as you want into each column. For example, this could be a Heading and a Text Box in one and then an image in the other. You can identify columns by the black dotted lines around them.
Each element of a page is controlled using its ‘handle’. As you roll your mouse over a section, you’ll see the handle appear as a blue tab at the top edge. Column handles are grey with a columns icon, and widget handles show a blue pencil-drawing icon. Right-clicking the handle opens a dropdown menu. Here you can select ‘edit’, ‘duplicate’, ‘delete’ or ‘add new’.
You can move any element around easily, whether it’s a widget, a column or a whole section. Simply click and hold on the handle and drag them around. A blue indicator will show when you’ve reached a space that is the right size for the element. When you release the mouse, this will then snap into place.
When you select ‘Edit’, the editing options for each element open in the left-hand panel, showing three tabs. For sections, these are ‘Layout’, ‘Style’ and ‘Advanced’. For columns and widgets, the ‘Layout’ tab is replaced by a ‘Content’ tab.
In the ‘Layout’ or ‘Content’ tab, you can adjust the element’s height, font size and column width. These can be adjusted by the number of pixels or using the slider, depending on your preference. You can also adjust the column width by dragging the dashed line between the columns. When you drag a widget into the column, your widget will automatically become the width of the column, so you don’t need to stretch or squash it to fit.
Go to the ‘Style’ tab to edit a section or column’s background, border or typography. You can even upload images to use as backgrounds or overlays. In Elementor Pro’s latest update, you can even add gradient colours to column backgrounds.
To add an image, choose the Image widget from the panel and drag it to the correct column. The editing panel will automatically show the Content editing options for your Image widget. So, you can go ahead and click ‘Choose Your Image’ either within the page or in the panel. Upload an image from your computer or select one from your WordPress Media Library.
The editing panel’s ‘Content’ tab is also where you adjust image size, alignment, captions and links.
Adding any widget type works in the same way as adding an image. For example, add a button by dragging the button widget into a column. Set the link the button leads to and adjust the button’s size under ‘Content’. Then, go to ‘Style’ to change colours if required.
In Elementor, templates are previewable. This means you can see all of your content within them before you commit. You can add a template onto the end of an existing page to extend your content, or use the template to start a new page.
Inserting a template is so simple you can do it in just three steps:
Once you have inserted a template, you can add or remove content blocks in the same way as above.
Your web design agency will create a bespoke template as they create your website. Avoid creating inconsistencies or problems in your website by speaking to your agency team before making any changes to templates. Agencies should also provide you with your style guide and design system as this ensures that branding and colour schemes are consistent across the site. If this hasn’t been supplied to you, ask for it.
Before you go ahead and edit your bespoke website design, there are a few things we would advise you to consider before clicking save. It may be that your web design agency is better placed to perform certain tasks as if an edit may cause chaos, this can create more work for everyone. When you’re considering making a change yourself, ask these questions first:
If you are simply updating the copy of a section or swapping a couple of columns around, it should be fine for you to do this yourself. Longer or more complex tasks like changing the layout or adding multiple pages are often better left to your web design agency. This is because the professionals know the fastest routes to the outcome you want and can do it with minimal disruption (and in most cases seamlessly) to the rest of your website.
Editing the content within a widget happens in isolation. This means it won’t impact the other parts of your page. However, moving widgets around or editing global settings can create unforeseen changes which might be hard to undo. If you’re not absolutely certain what else your changes will affect, you should check with your web design agency before publishing.
Luckily, with Elementor everything is reversible. You can reset a widget, column or section back to default settings if you need to, or undo each edit individually. Even more fortunately, you can reset as far back as you need to go. Under ‘Actions & Revisions’, you can return to any version of your site.
Alternatively, call on your web design agency to help.
Getting to grips with your website’s page builder is important if you’re going to have control over the content. While small changes and micro-edits can be done quickly in-house, for feature-rich websites there is always a fine balance to maintain. We hope our Elementor tutorial regarding the Elementor basics have been useful.
It’s worth remembering that website design agencies are teams of professionals dedicated to creating pixel-perfect websites for their clients. If the changes you want to make are complex, time-consuming or might upset the layout, it’s best to call in your dedicated team. If you have a website with us, just contact us today with the issue you’re having and we’ll do all we can to help.
Interested in having a beautiful, professional Elementor website design for your business? Reach out to the expert KIJO team today; we’d love to work with you.
