A Step-by-Step Guide for Beginners
Why and how to make a WordPress website by using a page builder, such as Elementor?
In just a couple of years, Elementor managed to become the most wanted page builder for WordPress. To be more precise, since released in 2016, it has reached 2 million active installs.
But, What Makes it so Popular?
Perhaps the fact that you can use the tool not only to create stunning web pages, but complete websites without any coding or design skills. Besides, the Pro version comes with a theme builder that enables you to create custom elements of a WordPress theme.
What’s in it for You?
Whether you are a (freelance) web developer, designer, marketer, or an entrepreneur in need to create fast and easy, professional and high-quality websites you are reading the right guide.
Our complete beginners guide will help you to build a professional, modern website from scratch. You’ll need to use WordPress (which is suitable for beginners), but there’s no need to have coding, or even advanced design skills. Making a WordPress website using Elementor is easier than you think.
Are you sceptical about WordPress websites? Don’t be – here’s a bunch of facts why WordPress websites are good.
What You’ll Need?
- A domain
A domain is a web address associated with your website, a place where visitors can access it (you are currently visiting the weareosm.com domain).
- (Web) Hosting
Web hosting is a place where your website is allocated on a web server, think of it as a rented home for your website.
To make it easier for you, we suggest buying a domain and hosting from one (reliable) provider.
- Elementor
You’ll need to download the Elementor plugin: free or paid version. We’ll explain the differences in a jiffy.
- Time and a bit of patience
Yes, this is a comprehensive guide so reading it will take some of your time, but if you work on your website alongside, you’ll create one in no time!
We’ll assume that you don’t have anything prepared or installed, so we’ll show you how to start from scratch.
Let’s get to business. Head to elementor.com and click that tempting call-to-action button!
First steps
It’s time to officially get started with your website-building journey! After clicking the Get started button, you’ll be asked if you already have a WordPress website. No matter if you do or don’t, the next steps are very simple.
If you are not already a WordPress site-owner, you’ll have several options to get a hosting from Elementor’s partners: FlyWheel, BlueHost, or SiteGround. Of course, you should check the plans they offer, but keep in mind that there are plenty of other reliable hosting providers out there.
A quick tip: Our recommendation is PaukHost: great pricing plans for a high quality service.
On the other hand, if you already have everything set up, just enter your site’s domain name, click the button “Install Elementor” and you’re good to go!
Now, no matter which path you took is time to install the Elementor plugin. As we’ve already mentioned, there is a free and a Pro (paid) version. As for the freemium plan, it is immediately available on the homepage.
Why should/shouldn’t you opt for the Pro plan?
Our aim here isn’t to talk you to choose the Elementor’s paid plan (as you can see, this article doesn’t have affiliate links or anything similar), but to get you familiarized with the benefits it has to offer. The fact is that Elementor Pro will enable you to enjoy a number of advanced features that will help you build exactly what you want. We recommend this plan to users who are interested in expressing their creativity, or for noobs who want a great, professional template that doesn’t need many edits. If you decided to “go pro”, head to the Elementor pricing page, and choose your plan.
Installing Elementor’s premium plan is very intuitive and you just need to follow the steps that will be shown on your screen (after downloading the Zip file just upload it!) .
If you are still not sure whether you should go pro, you can always upgrade to this plan later on. You’ll see that the guys from Elementor did a good job when it comes to their services upsell – you’ll see the Go Pro button in your Dashboard all the time ?.
Just a Couple of More Clicks…
By this time, you probably followed the WordPress installation steps and got the Admin password. Log into your WordPress Admin backend and install Elementor!
How?
Just hover over the Plugin section (left side of the menu) and click on Add New. On the new page that will open, in the text box type Elementor, press Enter and install the Elementor Page Builder. After the installation is complete you’ll see the Activate (the plugin) button – you want to click on it.
Woilà – now you have Elementor installed!
Ah yes, one important thing to keep in mind: even if you decided to choose the Pro plan, you need to install the free version first. Think of the Elementor Pro as being an extension of the freemium plan.
Now, Let’s Start Crafting!
Are you excited about creating your first web page?! Go to the Pages section and click on Add New – it will take you to your first, by default used as the Home Page (so you can name it that way also…). Click on Edit with Elementor and that’s where the fun starts!
How to use the Elementor templates to create stunning pages?
The great choice of templates is often the main reason for choosing the Elementor Pro plan. Still, the free version is just fine and you can build lovely pages and templates of your own.
One of the easiest ways to start your Elementor journey is to use templates. That way, you’ll immediately get access to many Elementor’s functions and benefits, rather than trying to figure them out (…or to overlook them). Just click on the Add Template button (on the right) and you’ll get access to a great choice of templates.
You’ll easily distinguish free templates from paid ones (this is just one option where you can upgrade to the Pro plan if you haven’t found a free template that suits your needs). When you find a layout you want to use, just click on the Insert button.
A quick tip: If you’ve done your homework and went through the template library, you’ll see that there’s one for (probably) each type of business: real estate, online course, interior design, photography, law firm, etc. Remember that these are just examples that can be customized for your business even if it isn’t in the same branch as the template. For example, in this post, we are going to create a digital marketer’s online portfolio, but with a freelance UX/UI designer template.
One important thing: Whatever changes you make to your website, don’t’ forget to hit the Save Draft or Save Template – if you want to make your own template that you’ll use for other sites. The buttons are in the lower left hand corner.
Customize your Website’s Elements:
#1 Content
How to edit the text on the homepage (..and any other page)?
You’ve officially started your site customization! There are plenty of user-friendly tools that will enable you to customize any content of your chosen template.
To edit text elements, and any other element, just click on it and on the left panel you’ll see different customization tools. In the text box on the left, you can edit the content and it will be shown (in real time) on the right side.
As for the text, you can edit the font size, type, color, add/remove special effects and much more. Check out the Content, Style and Advanced sections and play around. Of course, if the suggested font, or even the text suits your needs – feel free to use it.
The fun has just begun!
For example, here’s how the text looked like:
….and after adding some effects, here’s how it looks now:
In this screen recording example, you can see which effects we’ve used here, so you can get some ideas.
#2 Background
First impressions matter. A background is a core element of a site and its color, pattern, or image is something that grabs the user’s attention immediately. Luckily, Elementor allows you to edit the background however you like.
If you like the background aligned with your chosen template , there’s no need to edit it. However, a tiny tweak will give some personal touch to your website’s design. Get inspired by checking the latest trends in web design.
How to edit the background?
Navigate to the template edit section and click on the Style tab. You’ll see several options to change the background type (classic, gradient, video, slideshow), color, image, to add scrolling and mouse effects. Unlock your imagination!
#3 Fonts and Colors
If you already have a brand, you probably want to adjust your website design accordingly. As mentioned above, simply by clicking on the element you want to customize and editing it in the Style section on the left, you’ll make the desired changes.
Go to the Typography section and change the font family to be the same as one on your visit cards, presentations…
When it comes to colors, you can either use the Elementor’s color picker or specify the color code (if you know it).
#4 Images
Ok, now when you have your custom text, colors and fonts on point, you want to replace stock images with your own. Once again – if you find the images added in the template appropriate, there’ no need for further customization.
To change an image, same as you did with the text – click on it and hit the Style tab on the panel on the left. From there, it will be easy. Delete the current image, upload a new one, create carousel images…and much more. You can change the image size, position, add filters,etc.
Moreover, you can play with the image hover.
#5 Page Layout
By now you should have customized your website appearance to your liking. But, what if, for example, you have 4 services that your offer and the template you’ve chosen has just 3 columns? – Customize the website layout.
How to tweak your website’s layout?
Right-click on the inner section and click on the +Add column. Once you get a new column you can proceed to further editing. If you need more (same or similar columns) just duplicate the one you’ve already customized and add new content. What a time-saver, ha?
#6 Contact Form
As mentioned several times above, Elementor gives you many options to customize almost every element of your website. Therefore, you should adjust the contact forms you have on your Contact page (or wherever).
It is pretty simple: click the form widget and edit the information by clicking on individual elements. Besides, you can add additional fields for email, date, phone number, etc – clicking on the Add item button.
Elementor forms also allow you to add the email address that will be received for submissions and action that will happen after the form is filled out. Really, you don’t need an additional tool for sending emails – Elementor gets you covered!
#7 Header and Footer
Header and Footer are essential parts of any website so we advise having them. Let’s start with the header – to create one, click on the plus icon on the topmost element of your website (no matter which page). Click the Folder section:
After the template library loads, choose Blocks, and then the Header category.
After choosing the header block, insert it (by clicking the Insert button) and customize it like any other element. In the Layout settings you can edit the header width, adjust the spacing between widgets, and much more.
When you’ve finished with tweaking the header, head to Save as a template so you can reuse it across all pages on your site. Another time saving hack ☺.
Same goes with the footer, just this time, click the folder icon below the last section on the page. Again, you’ll have the option to choose Blocks → Footer → Insert. Don’t forget to click Save as a template when you’re finished with your customization.
Additional Customization:
After you’ve finished editing your template we suggest a few additional customizations in WordPress (not in Elementor). Just to make your website professional as it should be.
Here’s what you should add:
#1 Favicon, Logo and SEO Settings
A favicon is a small icon, graphic image associated with a particular website and its brand. They’re usually the size of 16×16 pixels and you see it next to the meta titles.
There’s not much to say about a business logo, just to recommend having one for your business and website.
As for the SEO settings, the meta title (tag) and meta description are some essential elements that should be included. You should configure them for each page. The meta title (also known as the title tag) is a summary of the page’s content. It appears in search engine results, browsers, social media and more. It is also a great place to add desired keywords for better rankings. Similar to a meta tag, a meta description allows you to summarize what your page content is all about, in a couple of sentences.
In WordPress, by going to the Appearance → Customize and click on the Site Identity tab you can edit the site’s title and description, add a logo and the favicon (site icon).
Final Words
Building websites shouldn’t be a hassle if using Elementor. However, if you are a complete newbie, this task might seem hard and daunting. Our aim with this guide was to encourage you to start your site building journey and to enjoy it! Of course, we’ve covered just the basics, stay tuned for more articles with more advanced tips & tricks, case studies and inspiration.
If you decide to start crafting with Elementor, don’t hesitate to share your experience with us and let us know if there’s anything else we should include in our guide.
However, if you need a hand with Elementor or just feel more comfortable that a team of professionals create a stunning website for you – we are eager to hear about your business. Shoot us a message and we’ll get back to you with a proposal, it’s FREE!
