Elementor : A Full GirlBoss Beginner’s Guide
HEDONISTIT'S EXPERT DREAM TEAM
Guest post by Anna Gelfman, owner of G Digital, website building and automation expert.
Just before I hand the reins to Ana, our WordPress expert, here’s a quick note from yours truly :
The current version of my website {launched in January 2020} was built with the Elementor Pro plugin. Together with a professional website builder company, my site took nearly a year to develop, mostly because ever since I breathed life into my brand, it became very branched and I realized there’s only so much I can do myself, so I turned to the pros to achieve the final result I’d been dreaming of.
My website’s previous versions were built on different premium templates, which were all successful, although they were not based on the Elementor plugin {which didn’t even exist when I first started out as a blogger}. Using the Elementor plugin is life changing – both in terms of design and user experience, which is why I recommend considering it to anyone who doesn’t want to rack her brain over building their blog.
If you decided to build your own blog, first of all – congratulations! Second of all, you don’t have to invest tens of thousands by hiring the service of a professional company, rather you can do it yourself with the help of the guides you’ll find here on the blog ♥️
Which is exactly why I decided to join forces with Ana, our WordPress expert, who willingly agreed to share her extensive knowledge of the subject here.
Let’s start at the very beginning, Elementor is a page builder – which is in fact an plugin to WordPress that allows anyone and everyone to easily and intuitively build and design websites. The idea of building in Elementor is that it’s based on the drag & drop method, and it’s all very visual – so you can really see for yourself what the website will look like. All without any need to understand code.
It’s important to understand that the need Elementor was created out of necessity. Before Elementor, site builders had to stick to a certain template, with limited flexibility. Building and design were not visual, and accordingly so, beginners who didn’t know much in programming generated limited results. Elementor is optimized for website promotion and SEO, and is constantly improving and being upgraded by a community of programmers from all over the world. It is, by far, the best plugin for building a website on WordPress.
Elementor or Elementor Pro?
Elementor, as I mentioned, is a great WordPress-based website builder. It helps us create beautiful websites quickly and easily. Plus, Elementor is free of charge.
So what exactly is Elementor pro, and how is it different that Elementor?
Elementor pro completes the basic, free tool box provided by Elementor, and gives users the tools to create professional websites at only $49 a year {not including VAT}.
True – Elementor is basically a free plugin, but I highly recommend installing Elementor pro.
{Note – even after you purchase Elementor Pro, make sure not to delete the free Elementor plugin, or else it won’t work}.
There are plenty of benefits to Elementor pro – especially additional functions that allow you full flexibility in building your website, so that you can literally do anything you want with it.
The Pro version, for example, has 50 additional widgets, besides the existing 30, and comes with a theme builder, optional pop-ups such as forms or questionnaires, online shop, cool effects, and many more products that totally justify the price.
Bottom line is, if you’re already using Elementor, I really recommend taking advantage of its available capabilities for the benefit of the flexibility and quality of your website. Think of it as a yearly investment of $49 that gets you a website that looks like it cost more like a good few tens of thousands.
How to Install Elementor in a few Simple Steps
The good news is it is so easy to install Elementor!
Ready to jump in?
Step 1 –
The first thing you need to do is install the Elementor plugin, when surfing on your WordPress website, just click “Add New – Plugin”
Then type Elementor in the search panel.
Once you do that, click ‘Install Now’ and then ‘Activate’ to activate the plugin.
{You’ll notice in the screenshot the word ‘Update’ appears instead of ‘Install’, because I already have it installed.}
Step 2 –
If you decide to build your website with the upgraded Elementor Pro version, click here to purchase the Elementor Pro plugin, choose the ‘Personal' plan – fit for a single site – and purchase the plugin {Note the added cost of VAT}.
There are several ways to install the plugin for your WordPress, This one is the most convenient way:
1. Log in to your Elementor Pro account, click on ‘My Account’ on the top right-hand side.
2. the next screen will require your username and password to connect to the website, then click Log In.
3. On ‘My Account’ page, you will see a green “DOWNLOAD PLUGIN” button. Click on it and download the extension – it will be in ZIP file – Do not open the file, just leave it as a ZIP file.
4. Now, copy the code {the serial number} that appears next to the words ‘My License’.
5. Go to your WordPress site management interface, click on ‘Plugins’ and install a new plugin – click on the ‘UPLOAD PLUGIN’ button and select the ZIP file you just downloaded to your computer.
6. Click on ‘Install’ and after that click on the plugin. Once you're done installing the new plugin, you'll see a message of entering the plugin code {or you can see the word ‘LICENCE’ in the WordPress menu under the Elementor plugin and also run it there}.
7. Paste the long code you copied from the Elementor Pro site in the white field, and then click ‘Activate’.
If the code was properly copied and pasted, the plugin status should now appear as Active.
You did it! The Elementor Pro plugin was successfully installed – and you did it all on your own! 💪
Step 3 {Not Mandatory} –
After activating the plugin, you’ll want to define a uniform design for your website.
Go to Elementor – Settings, and disable the default colors and fonts setting.
Move on to Style, and define 1400 px as your width, which is ideal for working with Elementor.
By the way, you can return to these settings and change them again at any time.
Let’s Begin: Creating your First Page Structure
To begin building the first page, you first need to set the page to its maximum width, regardless of whether or not you’re working with a template or designing from scratch. Go to Pages – New Page in the menu {or rather, button panel}, and select Full Width.
Orientation: What’s Going On Here?
So as you see, it’s all really pretty simple and intuitive. On your left you have your widgets, and on your right your page content {right and left may change according to your website’s language}.
To begin, add a new section to the page, or select an existing template. To select the structure of your page, you’ll need to choose between 12 options, once you choose one of them, simply drag {it’s as simple as that!} the elements and widgets into each column.
The existing elements are designed to fit your every need: titles, forms, media library, and many more.
Start from scratch or use a Template?
Elementor has over 100 template designs to use as a base for your website. You’ll find entire blocks of design {like predesigned sections} and pages that are perfectly made. Of course the Elementor Pro has even more templates {200+}.
The advantage of a template is that it is already designed and it looks good. You can start from a template, and adapt it to your style, make it yours, it’s much easier.
Of course, for those who aren’t into it, and know in advance what they're looking for – you can also start from scratch. For inspiration {with an emphasis on being inspired rather than copying!}, I highly recommend checking out Pinterest or other websites and blogs, getting inspired, and building your dream website.
But, let’s go back to the templates. To use a template, click the symbol on the right hand side of the screen {the area with actual content}. This is where you can scroll through to find a template you like, or choose a few and then decide – just click ‘Insert’ to use your template of choice.
Want to create a new page with the same structure you just built? It’s too easy! Save your design as a template, and use it again – by selecting it from the templates, just like you did on the current page. To save your template, click the green arrow next to the ‘Publish’ button and select ‘Save Template’.
You Look Your Best When You’re at Ease: A Million Dollar Look
Once you’ve created the page structure and its content, here's what really makes your site professional and unique: the design.
One of the special things about Elementor is the ability to design precisely what you’re looking for. There are so many options, and designers can really have a party around here. But even if you’re not a designer – this will be the way to make a beautiful website.
By choosing the widgets or elements you’d like to edit, you can begin designing them according to 3 categories for each element/area:
Layout {if designing an area} – to edit the width, SEO of a title, etc.
Content {if designing an element} – to edit the actual element like text or image.
Design – all about typography, dimensions, backgrounds, and colors.
Advanced – You can see all options for customizing and designing the objects:
Margins around your elements
Padding – internal margins
Opening animation for each elements
Hide an element on Mobile/tablet or desktop
and more…
I highly recommend avoiding the “advanced” category as much as possible at first, as all of the options can confuse you. First, try to focus on using layout/content and design to explore and get to know Elementor better.
Another small but useful tip : Create your own uniform language, think about the user experience, and focus on what is important to you.
Fit to Mobile: Responsive Design
Keep in mind, when designing your site you’re probably working on a laptop, when in fact, most surfers today browse their mobile phones, and tablets as well. So, it is very important to create a website with responsive design, which Elementor does oh-so-well.
The default editing state is Desktop view. At the bottom of the style area, you will find three buttons: Desktop, Mobile and Tablet. By clicking each one of them you can preview what your design looks like, and make sure it works well and is easy to use and understand on mobile and tablet as well.
Pay particular attention to the external and internal margins and how they change in the transition to the Mobile / Tablet display.
Food for Thought: Features you Should Know About
Just another moment, and you're all set {excited?}… Here are some Elementor features you should know about that will help you build and design your site more easily:
- Copy/paste – just as you do with your texts, in Elementor you can apply this to whole elements: an area, column or widget, and even a whole page.
- Copy style – You can also copy the style of a certain element {right-click on the mouse will show an option titled Copy Style}
- Global fonts – you don’t have to constantly go back and search for your favorite fonts. To maintain a unified look, set them as global fonts and they will appear automatically throughout the site.
- Global colors – Like with the fonts, you can set several colors to be repeated on your site and easily reachable.
- Like shortcuts? Some love them, I know. Just type + CTRL / CMD and you will see the full shortcut list.
- Popups for the masses – Elementor offers plenty of pop-ups, for different uses: Subscribe to email, a pop-up that prevents users from leaving, one that welcomes users as they enter the site, a promotional banner, and more. Just be sure not to overuse them and annoy your visitors.
- Movement – In Elementor you can create animations and interactions at a really high level. You can animate each section of the site, decide which side it will move to, and at how many degrees, and exactly what its movement will be. Play around with it, it's really fun.
- How will you divide sections? I mean a line distinguishing each area from the next, that can be straight, wavy, diagonal, and more. There are 18 options for dividers so don’t be square. Pun intended.
To Infinity and Beyond: Here You Go!
Okay, now is your time. There is no limit to the imagination and Elementor can definitely handle it, and help you design your dream website.
As I said before, it's very simple to get acquainted with Elementor, all you have left to do is play around with the various options, don't be afraid of making mistakes, after all, you can always go back to the previous version designed by Redo, and of course, feel free to leave a comment here and share any issues that come up along the way. Good luck !
Ana Gelfman / G Digital
Ane is the owner of G Digital, and an expert on WordPress site-building and automation. She runs a professional course for building WordPress sites, teaches and instructs how to build a professional website without prior knowledge, quickly and easily, step by step. She also markets digital business, organizes professional conferences on digital marketing, gives lectures, private lessons, workshops, and other courses.
As a member of Hedonistit's expert dream team, Ana shares with us here on the blog guides and tutorials for WordPress and Elementor, and answers questions related to a field in our Facebook community – “The Blogging Babes”.
3 Responses
I loved this post very informative and useful! Thanks for sharing such kind of useful stuff. Scanner App Excellent and well described article. Thanks for sharing your knowledge.
Thanks for the great guide on starting with elementor. I am using Divi for more than 2 years. I am going to use elementor from next. I love the way you articulated.
Thanks & Regards
Hurray!! Successfully installed my elementor. The way you included the realistic images helped a lot in installation.
Great way to go…Thanks for this post:-)