fbpx

Page Builder In WordPress

Use Elementor to make small, no hassle changes to your website

Elementor For Your Business

Why do we use Elementor Page Builder in WordPress?

There’re many different reasons to use Elementor page builder in WordPress. In this blog we’re focusing on it’s positive impact within small to medium businesses.

We mainly use Elementor when clients want to take more control over their website content without contacting their developer (us) every time. 

Whether you want to create and maintain your websites blog posts or add new portfolio items, testimonials, services etc Elementor makes this a reality for everyone with the most basic of computer literacy. 

blank

Explaination of Elementor

What is Elementor page builder in WordPress?

Elementor is a popular page builder plugin for WordPress. With this plugin you can create beautiful pages and dynamic websites.

The extremely easy to use interface is a hit with all of our clients who use it and it only takes a few minutes to get the hang of the basics.

Besides the page builder aspect of Elementor the plugin also offers many other features that are essential to maintaining your website such as integration with SEO plugins, replacement URL tools and a maintenance mode to name just a few.

Elementor Basics

How to use Elementor Page Builder

Logging in and locating your content

1 - Login to your WordPress Admin Panel

To start with you’ll want to login to your WordPress admin dashboard. Usually located at yoursite.com/wp-admin

You’ll then want to navigate to the post or page that you would like to change the content on

Screenshot of the dashboard within WordPress
You'll see a page similar to this.

2 - Navigate to the Website Content you want to Edit

Once you’ve found the page or post you need to edit you should click the “Edit with Elementor” Button

The anatomy of Elementor Page Builder in WordPress

The Elementor page builder layout

An Elementor page is built using a combination of three structural components. Sections, columns and widgets.

1 - Sections

Sections are like rows or blocks that you place into your page. Sections can have their own background, be that a static image, slideshow or video.

Your Sections are denoted in the page builder with a blue outline and you can access the sections menus by clicking on the blue tab relating to that section.

blank
Blue tab to acces section toolbar

2 - Columns

Within each section you can insert columns. This splits each section down the middle.  You can have one or multiple columns within each section.

Sections are denoted by a grey dotted line and a small grey tab in the top left hand corner. Click this tab to access the column toolbar.

 

blank
Here you can see two columns

3 - Widgets

Within each column you can enter any number of widgets. 

There is an extensive set of widgets available within the basic Elementor pro plan such as images, videos, google maps, buttons and spacers.

At matthewbushen.com we provide every Elementor site with a fully licenced version of Elementor Pro which includes further features such as blog integrations, testimonial sliders, pricing tables, social integration and much more.

We also integrate where necessary, fully licenced versions of Essential Addons for Elementor, PowerPack elements, happy addons and more. This give us a huge range of features to deploy onto your website for your future use.

Widgets are identified with a blue outline and a small edit icon in the top right hand side of the blue box.

To access new widgets click on the dotted icon in your left hand toolbar. Then simply drag and drop the widgets into the desired column

blank
A sample of widgets available

Editing Website Text

1 - Click on your Website Text

Click directly on the text that you would like to alter within your website page.

2 - Adjust your website text

Delete and Alter as appropriate. You’ll notice a toolbar popup on the left-hand side. Here you can add links and format the text to suit the style you desire (we will cover styling exclusively in later tutorials).

Within the “Style ” section, under “typography” you can change the size, font, weight and more.

3 - Save your changes

Click “Update” in order to save your changes.

blank
Click the green "Update" button at the bottom of the page.

Replacing Website Images

1 - Identify how the image is displayed

It’s important to note that images can be displayed in various different ways. 

Images can be displayed as a background to a section, either as a static image or as a slideshow, the background to a column or incorporated into the element itself.

2 - Replace section image

Navigate to the blue tab at the top of the section and click.

The side toolbar will change to show specific section tools. 

Click on “style” and click the “background” dropdown menu.

Under the heading “Background Type” you will see icons representing a “classic background, gradient, video or slideshow.

Click the tab which represents the content you wish to show.

 

blank
Section Image replacement tools

By clicking within the “image” box you will be presented with a screen full of all the images you’ve uploaded to your WordPress site in the past. 

You can Use any of these images or you can simply drag and drop your new images (hopefully you’ve optimised them first) into the media library and click “insert media”

For slideshows you should choose multiple images. 

Congratulations you’ve just replaced your first section image.

blank
WordPress Media Library

3 - Save your changes

Click “Update” in order to save your changes.

Meet our founder

blank

Matthew Bushen

Web Development Expert

Cardiff Web Developer | Working with UK business for a custom and personalised approach. I analyse and implement online solutions to grow your small to medium business.

blank

Got LinkedIn?

Connect with me personally.
I regularly post how to’s on website success.