Building a professional WordPress website 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. Elementor helps us recreate our designs exactly, down to the last pixel. At KIJO, we are so confident in Elementor’s capacity for unique website design, we use it by default.
When your website needs a new page or a section of copy needs updating, we’re here to advise you. This article shows you around the website builder we use, so you can make small changes yourself. 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.
Elementor is an easy-to-use page builder that allows designers to create WordPress websites from scratch. Released in 2016, Elementor 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.
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.
Add a section, choosing the number of columns. Then drag as many widgets as you want into each column. For example, this could be a Heading and a text box in one, and 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, in which 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. Just 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, which will snap into place when you release the mouse.
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. 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’. Go to ‘Style’ to change colours.
In Elementor, templates are previewable, so 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 3 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 and by speaking to your agency before making any changes to templates. Agencies should also provide you with your style guide and design system, ensuring that branding and colour schemes are consistent across the site.
Before you go ahead and edit your bespoke website, there are a few things we would advise you to consider. It may be that your web design agency is better placed to perform certain tasks, where editing mistakes 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 an agency. Professionals know the fastest routes to the outcome you want.
Editing the content within a widget happens in isolation, without impacting 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, as far back as you need to go. Under actions & revisions, you can return to any version of your site.
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. 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 the experts and simply contact us today.
We’re currently developing our series of Elementor ‘How To’ videos to help you with simple website edits. Watch this space!
