There’s a reason Elementor is the most popular WordPress builder on the market, it’s amazing! It’s easy to use, beginner friendly and packed full of features. It has everything you need to build a WordPress website, the easy way.
With Elementor, you can build your website visually and without code using the Elementor Visual Builder. You don’t really need to use the WordPress dashboard or do much on the backend at all!
In this guide I’m going to be showing you the easy way to build a WordPress website with Elementor, because believe it or not, there are plenty of ways to overcomplicate the process, and not take advantage of all the amazing time saving tools Elementor provides.
Domains
To start with, let’s make sure your domain is connected to your hosting account, so you can begin building your website.
This is a simple process so no need to panic, I’ll walk you through it.
- Log in to wherever your domain is managed (or where the nameservers are set).
- Click on your domain, or look for where it says manage DNS
3. Locate the IP address of your hosting plan, which can usually be located within your cPanel or website management dashboard depending on which host you use
4. Create two A records for your domain name using the below format:
Host – @ | IP Address – <paste-ip-address-without-brackets> | TTL – lowest possible number
Host – www | IP Address – <paste-ip-address-without-brackets> |TTL – lowest possible number
One record is for the non www version of the domain, the second record is for the www version of the domain. Below is a completed example, as you can see in my screenshot.
Your domain will now be pointing to your hosting account, so that you can start building your website with Elementor.
Hosting
If your domain is pointing to your hosting, the next step is to install WordPress.
I won’t go into too much detail on this point here, as we have a detailed guide on How To Install WordPress you can read.
This process is different depending on which host you choose, and whether you are using managed WordPress hosting, or something like cPanel.
Check that WordPress is installed on your domain, and make a note of the admin username and password, you are then ready to proceed to the next step in the guide!
Installing Hello Elementor
You don’t need a theme to build websites with Elementor the easy way. I’ve been pretty vocal on that, and you can read more on this in my article on Why You Should Build Your WordPress Website With Elementor And Nothing Else.
However, there is a starter theme that you do need to make things easy as possible. Hello Elementor is a starter theme that makes your website super compatible with Elementor. It’s very slim with only a few files in and is not a theme in the traditional sense that you are used to.
Download Hello Elementor from the link above.
To install it on your WordPress website, navigate to Appearance > Themes and and click the ‘Add New’ button to upload the zip file you downloaded.
Installing Hello Elementor Child
No WordPress website would be built the easy way without a child theme! Child themes make sure that you don’t overwrite any custom code snippets you might write, when your parent theme is updated.
So any of those code snippets you might want to use to embed Google scripts, or modify your website, place them in the child theme functions.php or styles.css files instead of the parent. Don’t worry about this, once you install the child theme you’ll be using those child files by default.
Download Hello Elementor Child theme and install it, using the same method described above. The only difference is that to download this one, you’ll need to click the green ‘Code’ button on the Github link and then click download zip.
Using Hello Elementor and Hello Elementor Child aren’t required to follow along to this guide, but they will make things a lot easier in the long run and some of the steps later might not work exactly as expected if you don’t.
Installing Elementor & Elementor Pro
Next up is the easy part, install the Elementor & Elementor Pro plugins on your WordPress website. Elementor can be installed from the WordPress plugin marketplace.
Click on Plugins > Add New and search for Elementor.
Elementor Pro can be downloaded from within your Elementor account and then uploaded as a zip file. At the top of the plugins page there is a button that says Upload Plugin.
Make sure to connect your license key to your Elementor Pro plugin to ensure that all features work correctly.
Installing Classic Editor
Another optional step, but one that will save you a lot of headaches (which we hate), is installing the Classic Editor plugin.
Remember the Gutenberg update and the Gutenberg editor that it brought with it? We hated it! Turns out, a lot of other people did too.
Which led to the Classic Editor plugin being born. Install it and when editing pages or posts within WordPress you will be able to use the ‘classic’ editor view, that was in use before Gutenberg.
No Gutenberg on my watch.
We won’t be using the backend WordPress editor much anyway, but being able to avoid dealing with Gutenberg is a huge added bonus and will make things easier.
I would recommend downloading and installing it if you follow this guide, just so you can follow along to all the screenshots/instructions.
The Elementor Builder
Now that the setup is out of the way, on to the good stuff! The Elementor Builder that we’ve been hearing so much about.
The Elementor Builder can be opened on any page or post on your website, and also on custom post types that you enable it on. You can open the builder by following the below instructions:
- Create a new page from the WordPress dashboard, then click ‘Edit with Elementor’
2. Click ‘Edit with Elementor’ while viewing a page built with Elementor, you must be logged into WordPress
3. From the backend, click on Templates > Create New and you will be given the option of creating a new template using Elementor
4. Open Theme Builder by clicking Templates > Theme Builder and you can start creating various parts of your website using Elementor. Theme Builder is the new and improved template system mentioned above.
Using the Elementor Builder, you can build your entire website visually, using the drag and drop widgets and editing system. It is incredibly easy and intuitive to use!
Elementor is made up of widgets which create elements on the page. Drag and drop widgets from the Elementor Builder panel on the left of the screen, and watch Elements popup on your page.
There are widgets for everything, from basic stuff like layout and structure to payment buttons, video embeds, sliders and more.
Content
Widgets in Elementor have three option panels that let you control the content, styling and advanced settings of the element they create. Once the widget has been dragged and dropped, the element is what is actually rendered on your screen.
And, you guessed it, the first of these options is the content panel. This option panel lets you control the content of a widget, for example, what text will display on a button, or what video will be embedded in your video element.
If you want to change the content of a widget, this is where you should look!
Style
The Style panel of the Elementor editor contains options for what would traditionally be taken care of by CSS, the look and feel of your elements.
Each widget has its own built in style options specific to the widget. There are some global style options that can be found across most widgets however, and they include, but are not limited to:
- Text colour
- Typography
- Text shadow
- Spacing
- Width
- Size
- Border
- Border radius
- CSS filters
- Opacity
- Background colour
- Padding
- Margin
- Box shadow
- Gap
Phew, that’s a lot just for starters!
Advanced
The final options tab within the Elementor builder is the Advanced tab, and it contains, you guessed it, advanced stuff.
This tab can vary from widget to widget, but it includes option like, but not limited to:
- Margin
- Padding
- Z-Index
- CSS ID
- CSS Classes
- Motion Effects
- Background
- Border
- Positioning
- Responsive
- Attributes
- Custom CSS
Global Styling
Time for your first WordPress life hack! Up until now we’ve been going over the basics, getting you setup to build your website the easy way, now it’s time for the first real big time saver.
Global styling means styling lots of things once so you don’t have to repeat the same actions over and over again. For example, setting the font family and size for all your website headings in the global settings, rather than doing it on every single different h1, h2, h3 or h4.
Elementor makes this process an absolute breeze. No other theme or builder on the market provides such granular control over the global styling you can apply to your website elements. To get started, you’ll need the Elementor builder open and to click into Site Settings after clicking the icon of the 3 stacked lines (burger menu).
Typography
Typography can make or break a website. Nothing looks better than a website with consistent typography applied correctly.
By this I mean, making sure you use the same fonts, in the same sizes and weights, in the same places across your website.
If you’re having to do this individually on a page by page basis, or template by template, it will take you a while and you are bound to have inconsistencies!
Never fear though, global typography is here!
Body
This refers to the <body> tag and basically encompasses everything on your website. It is the top most level of styling for typography.
w3Schools defines the body as: “The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.”
So the styling you set on the body will apply to everything else on the page, headings, paragraphs etc. It’s a good place to start here, and apply the styling you’d like to apply to things like paragraphs, lists, quotes etc.
These are the basics to look at when styling typography:
- Font-family
- Text colour
- Weight (how thick or thin the text displays, boldness etc)
- Line height
Remember that with Elementor, you can also set the font size on tablet and mobile devices from the editor, so you can have a different font size on desktop, mobile and tablet devices. SImply click the desktop icon next to size to switch between desktop, mobile or tablet. More on this responsive stuff later!
Styling the body means that everything on the page will inherit the styling you apply here. It doesn’t mean that you can’t override that styling on individual elements however, simply click on an element and input styling on a specific element to override the global styling.
Headings
With the body styled, it’s time for the headings. This covers your h1, h2, h3, h4 tags. You can also style the h5 and h6 tags if you plan on making use of a lot of sub headings.
It’s the same process as with the body, select a font family, font size, font weight and line height (optional) for each tag.
Once this is done, when you insert a heading tag onto the page, it will inherit the styling you have setup here. This is very useful for quickly building new pages and templates, as the typography plays a big part of how the design works.
Links
There is also an option to style the links on your website. This is useful to ensure your links use the same font and colour scheme as the rest of your typography. You could even change the font weight, or underline the links, the possibilities are endless!
Buttons
Finally we have the buttons on your website. Buttons are an important part of most websites and generally function as calls to action, prompting your website visitors to take an action like submit a form, or visit a different part of your website.
And, of course, you can style them globally from the Site Settings panel like the rest of your typography. Not only can you style the actual text used in buttons, but you can style the design of your buttons.
Affecter votre acheter du viagra en ligne réputation en tant que chef wang.
Agence européenne pour levitra en suisse atteinte à la vie privée.
Aguaribay malbec n’est pas travaillé à cialis 20mg prix en pharmacie paris l’avance.
Aide au premier ordre, durée, https://www.cialispascherfr24.com/acheter-tadalafil-100mg-warframe/ activité physique.
Ai-je besoin d’une ordonnance pour le tadalafil.
As you can see from the above screenshot, there are more options than on the different typography elements previously.
The most important things to consider with your buttons are the background colour, padding, border radius and typography.
You need to make sure you’re using the same font, the button is the right colour and the size of the button matches your general design style.
Theme Builder
Next up we have the Elementor Theme Builder. This nifty tool is used to build templates for all the different parts of your website.
Elementor used to use the built in templating system, but the theme system is now the optimum way to build the different parts of your website. You can build everything on your website including the header, footer, pages, posts, product page, product archive, and even the 404 page!
The theme builder can be accessed from the Elementor editor by following these steps:
- Click the ‘burger menu’ icon in the top left of the editor
2. Click on Theme Builder in the menu and it will open the theme builder
3. Use Theme Builder to build parts of your website
Using Theme Builder
The way Theme Builder works is simple. On the left hand side of the screen in the above screenshot, is a list of the various different parts of your website that you can build using Theme Builder.
When you add up everything you can build, it turns out you can build your entire site using the different parts of Theme Builder available.
Let’s walk through it step by step.
Header
The header is usually your logo, menu and button, any other bits you want pinned to the top of your website on every page. It’s usually considered a global template, or section, of your website. This means it appears on every page, or almost every page.
Footer
The footer is another global template but appears at the bottom of your website. It’s most commonly a 3 column layout with elements like contact info, links, maybe a map or a blog post embedded.
