Quick Website Builder Tutorial

Index

📱HEY! Looks like your are using a mobile to view this page.

I recommend using a computer or laptop to build your website.

1- Intro ✔

The goal: Open your own business website today.

Get excited, because in this quick tutorial, you’ll create a sleek, modern website for your business, even if you have never built websites before. No coding skills needed.

Following this tutorial, you can create a business website that costs you UNDER $50 PER YEAR.
This is the yearly fee for the hosting and your domain.

This guide is for:

Beginners who want to create their own business site that looks good and allows customers to contact them.
Anyone who wants to have full control over their website and start learning web design basics.

This quick guide does not cover building a web shop, but it can be added on your site later on.

On average, opening your website by following this tutorial will take you only one or two evenings.

What we are going to use to build the website:

WordPress, as the platform
Elementor, as the page builder
OVH, for domain and hosting for your website

What do you need:

Computer or laptop
Few hours of time without distractions
Bookmark this guide and keep it open (CRTL + D on your keyboard)

🏃 A SPRINT TO THE FINISH LINE

To save time, I’m showing you my best practices, without explaining them in detail.

I’ve been building professional websites since 2016, and now you get my skills for free.

2- OVH Domain & Hosting

1. First step in this section is to choose your website address, also called a domain.

The easiest way to find a domain for your business is by going to ovh.com, and scroll down to find the field where you can type in an address to see if it’s available and how much it costs.

Choose one with .com address that is short as possible and easy to write.

i.e. Avoid any special characters and words that have more than one spelling.

Once you are happy with your selection, click continue.

Next, select

2. Second step is choosing a hosting service for the domain. Hosting is simply the online disk space where your website lives.

If you did the previous step, OVH automatically offers you a hosting plan. Choose the Personal plan, because it has very good properties that are more than enough for a new business website.

Next, select WordPress to be installed to your website, and then select the

► Because fast loading speed is very important for Google.

SSL Let’s Encrypt certificate is automatically included in your plan. This makes your website secure.

3. Third step is to create an account to OVH by giving your name, email address and a password.

Open a notepad and write down your login information so you don’t forget it.

Agree to the terms and click Create and account. You will receive an verification email from OVH, so go on and open your email to click on the link provided.

You can do this! It’s almost like opening a new email account, just follow the steps!
Now you are ready to log in to your OVH back-office.

4. Fourth step is to log in and open your OVH control panel. When you are logged in, click on the Web cloud tab that is on the top row.

Now you will see your control panel for your first hosting service. Once the page opens, you’ll notice on the left-side menu the text Hosting plans on the second row.

Click that and then click on your domain that becomes visible in the drop-down menu.

Click on it, and on the page that opens, browse to tab 1-click Modules where you can see that WordPress is installed.

Click on the circle with three dots at the end of the row, right after where it says the login name for accessing WordPress.

From this drop-down menu choose Access the module’s administration interface and we are done here!

You only need to do this step once. Later on you can access the website directly by typing in the address in your browser.

3- WordPress

Congratulations! Now you have a domain and your WordPress site online. Type in your WordPress login details, check Remember Me, and click Log In.

Don’t worry, literally no-one can find it yet, so you have ample time to make it look good.

First thing we want to do is to make the home page look good, and we can do that by installing the Elementor plugin.

When you log in, the first view you see is the Dashboard, the main view of the WordPress back-office.

Everything you want to do here can be found on the left-side menu. Let’s go ahead and click on the Plugins.

Next, click on the Add New button on the top of the page that just opened. You find that next to the Plugins title.

On this page, select the search field on the right that says ‘Search plugins…’, and type in Elementor.

When you see Elementor Website Builder, click Install, and once it’s completed, click Activate.

The free version of Elementor has limited options, so next we want to head to proelements.org, and download the free add-on on your computer.

Once downloaded, go back to the page we just were in WordPress, and click on Upload plugin button to install the add-on. Browse to your downloads folder and select the proelements.zip file and click Install Now.

To make sure it works, click the Installed Plugins from the left side menu, and scroll down to see that Pro Elements is activated. If not, click to activate it.

Now you have unlocked more options in Elementor and we are ready for the next step.

4- Elementor

Let’s go on and create an amazing home page for your website using Elementor!

In total we’ll add 5 elements, so just follow along.

Move your mouse to the top of the screen and open the + New drop-down menu. Select Page.

By default, WordPress opens up its default editor, go ahead and type on the Title line ‘Home Page’.

Next we want to click on the blue Edit with Elementor above the title to make something cool. After it’s done loading, you will now see the Elementor Editor.

Don’t worry about the Header and footer (the top and bottom elements on the page) right now, we will edit those in the end to finish up this tutorial.

To make this simple and easy to follow, just create the home page exactly like I do, and afterwards you can edit it as much as you want to your liking.

If at any point you make a mistake, on the bottom left corner you will find the History button, that lets you undo your last edits. It is the third button from left.

1. First we want to add a big title with a big image in the background.

To find a free picture let’s go to pexels.com and find something that suits our purpose here. Feel free to use any landscape picture for this tutorial. Download it to your computer.

To add it to your home page, let’s first create a title by clicking on the plus sign in the box which says ‘Drag widget here’. and choosing the full layout, when it prompts ‘Select your structure’.

Next, on the left-side menu, click and drag the Heading element to the box we just created. That is the second element on the menu.

Now you can type in your tagline, either by using the white editor box in the left-menu, or directly writing on the screen. Don’t think about it too much for now, you can come back later to change it.

To change the color and the font, go to the Style tab on the top row of the left-side menu. Click on the Text color to change the color, and click on the Typography pen icon, to change the font.

♦

Then we want to add a background image for the text. To have an image behind the text, make sure you have selected the widest, light-blue lined box around the image.

When you hoover your mouse over the title area, the outermost box pops up a small light-blue tab that has three icons. Click the one on the middle that has six dots to select the section.

To explain this quickly, each block on the page has three layers of boxes, the outermost box, section, that covers the width of the screen, the middle container, column, and the box that is the element.

Here, we want to select the outermost box, because we want the image to cover the whole width of the screen.

When you have the section selected, click on the Style tab on the left-side menu. Now you see the a line that says Background Type, followed by four icons. Select the first one that has an icon of a brush.

Now you will see an image box appear below with a plus sign in the middle. Click on that and you will open the Media Library. On the top under the title Insert Media, you will see the Upload files tab.

Click on that, and then click on Select files to browse in your downloads folder where you saved the image from pexels.com. Select the image and wait for it to upload.

Once you have uploaded the image, click Insert Media button on the bottom right corner.

Now the image should fill the screen. If it doesn’t fill the screen, it’s possible that you added the background to the column or to the element. If you see whitespace around the background image, go back and try again.

If the image still looks wonky, select the section, select the Style tab, and under the background image you will find the options for Position, Attachment, Repeat and Size. Change the Attachment to Fixed and the Size to Cover. This will create a cool effect when your scroll down the page.

If you want to increase the padding around the title to have a bigger image, click on the title, go to the last tab called Advanced, and change the padding.

First click the small percentage sign % between EM and REM to change the values to percentage. Then, uncheck the chain icon right below it.

Next, type 6 on the TOP field, and 6 on the BOTTOM field.

Good job! Now the first element is done, and you are quickly learning how to use Elementor. Click the green Publish button to save our progress.

2. For the second element, we want to add a row of icons with short descriptions. Click on the dotted box below, and choose a full layout.

Now on the left menu, type in ‘icon box’ in the search field, and drag the element to the box we just created. The description here can be one of the services you provide or one of the biggest benefits the client will get from buying from you.

Let’s write some copy here to fill out the box. The text editor is very easy to use, and you can either write directly on the screen, or use the text editor on the left menu.

Now we can choose an icon that fits the description we just wrote. Click on the icon on menu, and browse the library to find something that fits the purpose.

Once ready, you can now move your cursor to the edge of the middle box with black dotted outline. Right-click on the icon on the top right corner, and select from the drop-down menu the option Duplicate.

Now you have two elements on the same column. Repeat that once more to get a third one.

Next, we change the icons and the descriptions to let our visitors know what other services or benefits they get from us. Again, you don’t have to finalize this now, so once you have three icon boxes, let’s move on.

3. For the third element, we will add a Text element from the element library.

Click on the dotted line box below, choose the full layout, and browse the element library on the left to find the Text element, and drag and drop it to the box.

The text here is basically a paragraph of what our business does, how it’s better than the competition, and how it solves the big problem of our client!

Less than 100 words is good, because no-one reads anything longer on the home page. If you don’t come up with text right now, just write few lines of anything, and come back later to finalize the text.

For this element, we can change the background to some other color, like light grey. We’ll do this by selecting again the outermost box, and this time select solid color. Move the cursor on the color picker to find a nice and light color that suits your website.

If it doesn’t fill the screen, make sure to change the margins and paddings to zero on the advanced tab.

Very good, now we have three elements in place, and your website starts to look like a real business site. Click the green Update button to save our progress.

4. For the fourth element, we want to add your picture, or the picture of your team and a small bio, that makes your business more relatable and friendly. We do this by clicking on the dotted line box, and choosing this time layout of 2 columns.

Go to the left menu and find an image from the element library. Drag that to the left side box. Now, click on the image to open the media library, select Add New, and browse your computer to find an image of you or your team, and upload it.

Click select, and you should see the picture lining up nicely on the left side. On the right side, let’s add a Text element again, by dragging and dropping it to its place.

For the text, simply explain who you are, what you do, how do you help clients to get what they want, and what is your mission, and so on. It doesn’t have to be long, just long enough, that it is in balance with the picture on the right.

For the fifth element, we will wrap this up to keep it easy and simple, and add a contact form, that visitors can use if they want to send you a message by email.

Click on the box with dotted line, choose full width layout, and type in the element library search field ‘form’. Drag and drop the contact form to the box we just created. Let’s top that up with a title. Click the icon on the top right corner of the left-side menu that has 9 small boxes. Select the Title, and drag that on top of your Contact form. Edit the title by clicking it first, and write something like, Contact us!

Now we can edit the contact form.

By default, it has the necessary information, but for this tutorial, let’s add another field in the form. Click add new, and choose from the drop-down menu a checkbox. Now, edit the field, and type in for example I am a business owner. This makes sense for me, to know if the person is running a business or is a consumer. So choose something that makes sense for you.

Lastly, we want to change the email address, that the emails send by this form actually reaches your inbox. Do this to change the email address.

To make it look nicer, let’s go back up and copy the background color of the previous element to match this one. Click on the corner of the Description element, and find the background color. Open the color picker and copy the color code by selecting it and right-clicking and choosing ‘copy’.

Then we go back down, select the background box of the contact form, find the background option, select solid color, open the color picker, and paste the color code by right-clicking on the field and selecting ‘paste’. Click Update to save our progress.

Now we have the Fifth Element in place and Bruce Willis would be very proud of us.

With this quick guide, you already now how you can add elements, and by moving your cursor to the top of the background element, you can drag them up and down to change the order of the elements.

Let’s move to the last part to finish up the first version of your business website.

5- Publish your site 🤸

To finish up this tutorial, let’s go over to change the header and the footer of our page. Make sure you have saved the page by clicking the green Update button to save your progress.

Scroll up to the top of the page, and move your cursor to the middle. A yellow tab should appear that says Edit the Header. Click that, and click yes.

Now, Elementor opens up a window, but we can safely close that. You should see a blank page, with only the familiar dotted line box. Click on the box, and choose 2-column layout. On the left-side we want to add your logo.

If you have a logo, drag and drop an image element on the left side, and browse your computer to upload the logo to your media library. Then select it.

If you don’t have a logo, add a Title element to the header on the left-side, and type in the name of your business. You can now go over to the typeface options, and change the font and the color to your liking.

On the right side, we can add some contact detail. Let’s add a text element by dragging and dropping it to the right side, and edit it to match our contact details.

For example, you can add your Whatsapp number and email address here. To make them work as links, first select the number, click on the link icon, and type in tel:yournumberhere and click on the return button. Now select the email address, click on the link icon, type mailto:youremailaddresshere and click the blue return button again.

Now, let’s go back to the element library and find out social links. You can access the element library from the icon that has 9 boxes inside it. Type in in the search field social icons, and drag and drop that below your contact details.

Next you can edit the links to your social media profiles, for example your business facebook page. Simply go to your facebook business page, copy the address, and paste it in Elementor to the right field. Do the same for Instagram, YouTube and LinkedIn, or wherever you have related social media profiles.

Save everything you have done, and now Elementor asks you where you want to show the header we just created. By default it’s site-wide, so you can click OK.

Now, let’s edit the footer. This time, scroll to the bottom of the page and choose edit footer.

Click on the box with the dotted line, and choose full-width layout. Add the Text element to box by dragging and dropping, and then we can add the text for the footer. Type down the name of the business, the year, and All Rights Reserved.

Select the text alignment to center the text on the screen.

Next, let’s select the background box, and choose a solid background color from the color picker. This can be a darker color to clarify it’s the end of the page. Once done, click save, and choose again, that the footer is shown on every page.

Later on, when you create new pages for your website, or start writing a blog, the header and the footer will be automatically shown on each page.

Well done!

We are very close to closing off this tutorial, as your home page is almost complete. Before we go, there is one crucial step we still need to take in order to finalize the home page.

Click on the icon with three lines on the top left corner of your screen. The last option says Exit to Dashboard. Click that, make sure you saved, and next you should see the WordPress default editor. Click on the WordPress logo on the top left corner to return to the dashboard.

The final thing we want to do here, is to customize the site. Move your mouse over the Appearance on the left-side menu and select Customize.

This time you will see the default WordPress home page with a white menu on the left side. Let’s start from the top, and edit the details of your new website.

Click open Site Identity and type in the name of your website. Next, write a tagline. If you have a logo, you can upload it here as well. It will be shown on the tab bar in your browser. It’s good to have something, so let me speedrun one example in photopea.com.

Create an new image with 512×512 pixels. Paint the background with your main color. Type in the first letter of your website and increase the font size until it fills up the image. Now save it to your desktop and upload it to WordPress.

Go back by clicking the arrow on the left side of the menu title.

Under colors you can choose a default background colour for your pages, as well as the background color for header and footer.

Please note that Elementor overrides some of the customization options on this page.

As the last thing, let’s change the page we just created to act as the home page.

Select Homepage settings from the menu.

Choose Static page and select the Home Page from the list.

Now click Publish, return to the dashboard by clicking the X on the top left corner.

From dashboard, go to the top of the page where it says the name of your site next to the WordPress logo, and click on the Visit Site to see the final result!

Congratulations!

Wow! You did it! 🏄🏼

If you followed this guide step by step, your business website is now online.

Did you believe you can do it? It wasn’t that hard was it?

Go ahead and share your new site with your friends and ask for feedback.

Right now you are likely eager to edit your website further, and try adding more elements, and I have full trust that you will learn to use Elementor like a pro in no time.

As a parting gift I want to give you the best question of web design I have ever heard:

Does the visitor understand in 2 seconds what the site is about?

Does the visitor understand in 2 seconds what the site is about?

The worst foul in web design is to confuse the visitor. Let’s do the opposite by keeping your website as easy and simple as possible.

That is to say, use clear and definitive words, that makes it very easy to understand what your site is about.

For example:

YES ‘We sell paint’ – easy to get

NO ‘Best quality for our customers’ – doesn’t mean anything

You might also have some questions about this whole process and the steps forward.

Most importantly, later on when you want to access the WordPress dashboard of your website, type in your browser your address followed by /wp-login.php

like this: yourwebsiteaddress.com/wp-login.php

When you are on that screen, save it as a bookmark to your browser to have quick access, and save the login details to your browser.

For more detailed consultation you can write to mark@scriiv.com or browse my website scriiv.com for more information.

If this was helpful, please share to your friends, and consider subscribing to SCRIIV channel on YouTube. Have fun building your website!