Elementor is a free drag and drop page builder that allows you to create your website in a visual way, from a front-end perspective – regardless of your skillset. Using blocks and columns you’re able to create high quality web page design with no coding required. Elementor is easy to set up and use, is optimized for SEO, and with over 2 million active installs it is WordPress’ BEST page builder plug-in.
Elementor is an extremely useful tool that makes building a WOW-worthy and reader grabbing website so much easier! It’s time to use it to your strengths to create layouts that take your audience on a journey and direct them to the places that they need to be. This post will show you how to set up Elementor, plus some tips from the perspective of an experienced user.
How to set up Elementor
The first stage of using Elementor is, of course, getting it properly set-up for use. This post will walk you through initial setup and how to use Elementor to start creating eye-catching pages.
Installing & Activating Elementor
You need to install the plugin by visiting ‘Plugin – Add New’ within your WordPress dashboard and searching for ‘Elementor’. You will then ‘Activate’ this plugin.
Note: Elementor is a free plugin, but it’s premium options are amazing and worthy of a look.
Configuring Elementor
Once you have the plugin actively installed, you will want to configure it to make the design cohesive throughout your whole website.
The two most important areas here are disabling the default colours and fonts. To do this, visit ‘Elementor – Settings’. Here you will find these options.
Next move to the ‘Style’ tab and make the page width 1400px, which is the preferred width for Elementor’s templates. You can change this at any time.
Creating Your First Page Layout
Getting started with a new page layout, whether you’re creating a page from scratch or using a template, you will want to set your page to full width. You can do this by visiting the ‘Pages – New Page’ area in your Dashboard. In the right hand column change the page template to ‘Full-Width’.
At the top of this page in a blue box, you can select ‘Edit with Elementor’ which takes you to the Elementor editor drag and drop interface. Widgets are on the left and page content is on the right.
To begin, add a new section in the content area or add a template. You’ll be asked to choose your page structure. There are 12 options to choose from, based around columns. Once chosen, you can start to drag elements and widgets into your columns. These elements are custom designed for everything you may need – headlines, forms, galleries, testimonials and so much more.
Using Pre-Loaded Elementor Templates
Elementor offers over 100 free templates to serve as the base to your design. You’ll find blocks and fully designed pages for your use among even more pro templates. You can further customize them to create a more personalized look for you, your blog and your brand.
To use a template, click the icon in the content area. Here you can search and upload new templates, as well as favoriting any that you may like to refer back to before clicking ‘Insert’ to use it within your page.
Do you want to recreate an existing page with new content? Save your design as a template and use it again by inserting it into a new page as you did with the Elementor templates above. To save your template, click the green arrow next to ‘Publish’ and select ‘Save Template’.
Need gorgeous & effective sales pages?
Check out this set of landing pages by BluChic! These are easy to use Elementor-based templates to help you create stunning landing pages that convert to sales (and it helps that they’re super pretty too).
Setting the Styling & Customization
This is where you are able to truly refine and perfect your design. It will take your website up a notch and present yourself with the professionals.
By selecting the widget or element that you want to edit, you can hone in and perfect design elements such as;
- Margins – the white space around the outside of your element.
- Padding – the white space on the inside of your element.
- Z-index – the depth that the element sits within your page when layering elements.
- Text colors, fonts and size
- Image links – inputting the link that an image leads to.
- and more…
Selecting the ‘Advanced’ tab allows you to see all customization and styling options. Work your way through the whole page, changing these design elements to direct your readers focus, optimize and create consistency in your web page design.
Are you designing a landing page?
Check out more of my landing-page specific design advice here!
Responsive Design
Whether you’re viewing on a mobile, tablet or computer, Elementor lets you customize your design for viewers on any device to ensure that your website is fully responsive (also helping your Google ranking) and looking great on all screen sizes.
By default, Elementor is setup to be editing a desktop view. Along the bottom of the ‘Style’ area, you will see three tabs labelled ‘Desktop’, ‘Mobile’ and ‘Tablet’. You can swap between each tab during the duration of your page design to ensure that you are designing our website in a user friendly way across all devices. You’ll specifically want to pay attention to padding and margins within this area.
Try Elementor for Free!
A professional and quality looking website is the first step to presenting yourself as the knowledgeable educator that you are – thus, driving affiliate sales. Remember that first impressions are often visual ones. Make your words shine with design and layout to match and see your audience grow, trust and turn to you as their go-to blogger by creating an eye-catching and user friendly website today!
BONUS: 100+ Free Stock Photos
Get access to 100+ stock photos that you can use within your website design here! As well as stock photos you’ll find all the design ideas, inspiration and hand-holding you need to DIY your design AND have it look great. We have all been there, starting a business on a shoestring, and now I want to help.
Don’t forget to Pin it!
If you enjoyed the content of this blog post and found it valuable, please save it to Pinterest so that other people can read it too!
CLICK HERE TO PIN IT
Meet the Guest Blogger
Kat Fraser, Owner of Fraser & Co Design, is a professional graphic designer specializing in brand and website design for wedding bloggers and businesses. She focuses on getting straight to the heart of your brand – because that’s what sells it.
Leave a Reply