We’ll take you step by step through the process of building your own website from the ground up! Read below to find out what you’ll need and how it’s done!
Disclosure: This guide contains affiliate links. If you purchase any product or service following a link on this page, we may earn a small commission at zero additional cost to you. This helps us keep our site running, to continue providing you with valuable content.
Your Domain name is the unique name that represents your website on the internet.
Our domain name on this website is wealthbywifi.com
A domain name is important in so many ways. It helps boost your site’s credibility, increases brand awareness and much more!
You can use the tool below to check if the domain name you want is available and purchase it!
PRO TIP: When choosing your domain name, you will notice that there is a drop down with multiple domain “extensions.” We highly suggest going for a .COM domain name! If the domain you are looking for is not available in .COM – a few good alternatives are .CO / .NET / .ORG
If the domain name you are looking for still is not available, we find it useful to add the word “The” to the domain name, use dashes, or a combination of both to achieve obtaining the domain that represents your website. Luckily domain names are cheap (about $12.99 per year), so it’s not too expensive to change it if you end up thinking of a better one, or if the domain you originally wanted becomes available at a later time!
If you haven’t purchased a domain name yet, don’t worry. In the next step, we will show you how to get a FREE domain name!
Web hosting is what allows you to store all of your websites content on a secure server, making your website accessible via the web!
Web hosting is relatively cheap, and is one of the most important parts of your website.
We highly recommend Bluehost to host your website! We’ve used many different hosting providers over the years and have found Bluehost to be the most reliable and easiest to use, in our opinion.
Also, if you signup for hosting with Bluehost you will get a domain registration FREE for the first year. We always recommend getting your domain from the same company as your hosting if possible, as it makes getting your site up and running a bit easier and will typically save you money.
2. Next, you will need to choose your hosting plan. We recommend Choice Plus, but this option is up to you.
3. Now it’s time to choose and register your domain (Free for 12 months).
As we stated before, if you setup a new hosting plan with Bluehost you will get a free domain registration for 12 months! If you already own a domain, you can enter it on the right under “Use a domain you own.” Keep in mind, if you are going to be using a domain you already own, there will be a few extra steps to take after your hosting account registration is complete, such as modifying your name servers. Bluehost provides instructions on how to do this here.
Now that you have your domain registered and hosting account setup, it’s time to setup your website. We highly recommend using wordpress as the platform to build your site on, and bluehost makes it easy to do so.
In order to setup your website on wordpress, you will need to do what is called a “Site Installation.” This is very easy to do, and will only need to be done once (unless you decide to build a new website).
Simply follow the instructions below:
Now you can head over to your domain and check out your new website to make sure the installation worked!
It will look something like below, pretty plain and boring. Don’t worry, this is just the bare bones of your website… We’ll show you how to turn it into a masterpiece in the following steps!
1. Install Elementor
Before we begin building, we need to be sure to install Elementor! This page builder tool is the key to building a beautiful, professional website with ease. Click the button below to install Elementor for free.
After you click the button above, click “Get Started” on the page you are brought to. Elementor will ask you a few questions about your website to and walk you through the install process.
You’ll be asked if you have a wordpress website. Click “Continue” under “Yes“
Next you’ll be asked to enter your sites URL. Be sure to have the https:// in front of your url when you enter it.
wealthbywifi.com = WRONG
https://wealthbywifi.com = CORRECT
Then click “Check for WordPress“
Once Elementor finds your site, you will see a message saying “You’re Good to Go!”
Click “Install Elementor“
Finally, you will be brought to the plugin page.
Click “Install Now“
After clicking Install Now, Elementor will be installed on your wordpress website as a plugin. Be sure to ACTIVATE Elementor as it will not automatically be activated even though it is installed!
2. Choose a New Theme for Your Website
4. Now, in the search bar type “neve” and the theme will show up as shown below
5. You will then simply hover over the theme and click “Install.” Once installed you will need to click “Activate” to set it as the site theme.
3. Import a Starter Site (Demo Site)
Building a new website from a blank canvas can be a bit difficult, but luckily, that is where starter sites come to the rescue! A starter site will give you a foundation to build off of, which makes things much easier!
To view the available starter sites, go to your wordpress dashboard. From the left sidebar menu click “Appearance” and from the subitems click “Neve Options.” Once in the Neve Options section, click “Starter Sites”
You will then see the message shown below, prompting you to install and activate the Cloud Templates & Patterns Collection plugin. Go ahead and click “Install and Activate”
Now under “Starter Sites” you will see quite a few available demos. Be sure to keep “Elementor” selected when searching for a demo you want to use. Also, while many of these demos are free, you’ll notice some of them have a “Premium” banner on them, meaning you will need the PRO version of the Neve theme. The rest of the demos are free to use!
As you can see, they have a demos for a variety of use cases. Choose whichever demo most closely relates to your website’s needs and the structure you are looking for!
For this guide, we will be building our example website using the “Web Agency” demo, but the process will be the same for each demo. We’ll begin by hovering over the demo we want to use and clicking “Import“
After you click “Import” you will be prompted to install a few things. Go ahead and click “Import entire site“
This is what it will look like when all of the content has successfully imported.
Remember that plain and boring site? Go check it out now! Click “View Website“
To begin customizing your theme, simply do the following:
After clicking “Neve Options” you will see the following customization options. You can begin playing around with these settings yourself, however we will go over a few of the main ones in the following steps.
Upload Logo, Add Your Favicon, Set Site Title & Tagline
Click “Upload Logo” under the Customizer quick links. Here you will be able to upload your site logo, site icon (favicon) and set your site title and tagline. Make sure to click “Publish” after making changes!
PRO TIP: We suggest uploading your logo in PNG format with a transparent background, with the logo image cropped to content.
Click “Set Colors” under the Customizer quick links. Here you will be able to set your site’s primary colors. I suggest playing around with these options until you find the right combination of color settings to meet your style goals.
Choose Your Typography
Click “Customize Fonts” under the Customizer quick links. Here you will be able to set the fonts, font sizes, line heights, letter spacing, etc. for all headings and body text on your site.
These are just a few of the customizations you can achieve. It is definitely best for you to test out these customizations and begin to become familiar with what and how they change the look and feel of your site, until you achieve your style goal.
Adding pages and content to your site is when things start to get exciting. Most websites typically have a few standard pages which may include:
We’ll guide you through setting up a page for each of these in the following steps. The way you create each page is essentially the same, except you would be modifying the actual content for each different page. With that in mind, once you get the hang of creating pages and editing the content, you’ll be able to start creating all the different pages you’d like with ease.
1. Create a Homepage (Frontpage)
The first page you want to create is your homepage (frontpage). If you installed one of the starter sites, as shown in a previous step, chances are, you will already have a homepage created and set as your websites front page. If not, please do the following:
If you are not using the “Neve” theme, there may not specifically be a “Layout” section in your wordpress customizer. You will just need to find “Homepage Settings” in the customizer and the process will be the same from there.
Now that we have our homepage created and set, lets actually head to the live page! Once there, you will notice an Admin Bar at the top of the page, which will only be visible to you as the admin if you are logged in. To start editing our page, click “Edit with Elementor” in the admin bar, as shown below.
Now you’ll start to understand why we stressed the importance of Elementor! It is a powerful visual building tool, and makes the process of creating beautiful, custom websites EASY.
Add and Edit Elements
You’ll notice that if you click on a page element, options to edit that element will pop up on the sidebar to the left. In the example below, we clicked on the text element below the main title.
We can now enter new content for this text element as shown below.
If you click “style” you will then get options to edit the content’s style such as Alignment, Text Color, Typography (font), and much more!
You should definitely play around with these settings, and discover all the different modifications you can make to these elements.
By clicking the the icon in the top right of the elementor sidebar as shown below, you will see the list of elements you can add to your page.
To add one of these elements, simply drag and drop if where you want it to go.
Once you’ve placed the element where you want it, you can then click on the element and edit it as shown previously.
Again, you should test out adding new elements and editing them to get comfortable with the platform, and perfect the design and structure you desire for your new website.
Elements do not have to be placed above and below each other in a single column fashion. You may also wish to just separate content on your page into different sections. In this case, you can create a new “Section” by hovering over the top of an existing section and clicking the “+” as shown below, and dotted outline box will pop up with another “+” symbol in a circle and a folder symbol in a circle, click the “+” button to add a new section. If your new section will be added to the bottom of the page, you will already see the “+” button and folder button.
Once you click the “+” button you will be asked to select your structure. This is the amount of columns and their structure you’d like your section to initially have. We are going to select the second structure (50, 50) for our example.
Now that we have chosen our structure, our new section has been added! We can now proceed to drag and drop the elements we wish to have in each column of our new section.
As you can see, we added a Text Editor element in the left column, and an Image element in the right column. You can see that they are side by side and not above and below each other. This would be the same exact process for any of the other structures you could have chosen.
You can adjust your section structures even further by hovering over the section you’d like to modify and clicking the solumn icon shown below.
As with elements, you will be able to edit the column in the left side bar. As you can see, we made the right on the right with the image element dropped in it, increased to 60% of the section width, as opposed to the original 50%. This has automatically adjusted the column on the left to 40%, giving us a 40, 60 structure – modified from the original 50, 50 we chose for this new section.
We can also right click the column icon (same one we clicked to edit the section column above), and a list of options will appear. This will give us options to edit the column, duplicate the column, or add a new column. For our example, we will click “Add New Column“
As you can see, we have no added a third column to our section, in which you can drag and drop any element you wish. And again, you can modify all 3 of these columns and their widths as we did before, and truly customize the exact structure you want.
With this knowledge of adding and editing elements, sections, and columns, you can now have-at-it and start designing the exact structure you want for your page. There are so many further modifications you can make with alignments, padding, margins, and much more, for all of these things that it would way too much to include in this guide. The best way, as stated before, to learn what you can do and tweak your website-build to perfection, is to simply go through each setting, option, and element. See what they do, how they are affected, and push your build to it’s limits!
2. Add More Pages (About, Contact, Shop/Services, Blog…)
Now that you have your homepage setup, you will want to start adding more pages to your new website. In order to add a new page, simply do the following:
Now, type the title of your page and click “Publish” → “Edit with Elementor“
Now you can begin creating sections, and drag & dropping your Elementor elements to build your page. This is the same process outlined in the section above when we built our homepage!
As you can see, we simply added a Heading, Text Editor, Social Icons, Button, Image, Divider, and Quote elements to start building our new page from a blank canvas in minutes! Of course this is just the result of simply dragging and dropping the elements onto the page. You will then need to go in and customize the sections structure, and each element, until you achieve your desired look! The possibilities are endless. This process can then be repeated for all of your pages. EASY.
3. Add a Blog
Your blog page will be where all of your blog posts are listed. Luckily, when you installed the Neve theme and imported a starter site, a blog page was created for you! To view your blog page simply head to your wordpress dashboard → Pages → All Pages and you will see a page title with “Posts Page” next to it. As you can see on our site below, the Blog (posts page) was created for us and titled “News.”
You can go ahead and click “View” to see your current blog page.
Add Blog Posts
Since our blog page is ready to go, all we need to do now is start adding our blog posts.
Go to your wordpress dashboard and from the left sidebar click Posts → All Posts
Here you will be able to see all of your blog posts (and the sample blog posts created from installing your starter site – you can delete these if you’d like)
To add a new blog post simply click “Add New“
Similar to when you create a new page, you will need to title your blog, add your blog content, and click “Publish“.
You can also click “Edit with Elementor” to further customize and build your blog post, just as you would building a page with Elementor!
If you plan to sell items on your website, you will need to setup an online shop (e-commerce).
Setting up a online shop is really easy to do, and we have even made an entire guide dedicated to doing just that!
To get start adding an Online Shop to your website, follow this free step by step guide.
1. Title your menu: Add a title for your new menu. A title is important, as you may wish to create multiple menus in the future for different areas of your website in the future. In our example, we are just naming our menu “Main Menu” as it will be the websites primary menu.
2. Select pages to add to your menu: Here you will select which pages you would like to add to your menu. You can see your Most Recent, View All, or Search for pages to add.
3. Click “Add to Menu”: Once you have selected the pages you’d like to add to your new menu, you will need to click “Add to Menu” to add them.
4. Arrange menu structure: Once you have added all of your pages to your menu, you may want to arrange the menu structure, such as what order the pages will be in your menu, and drag pages slightly to the right underneath another page if you’d like to make that page a drop item of the page above it in the menu. For example, in the menu above I have the “Contact” page positioned as a sub item of the “About Us” page. So when a visitor to the site hovers their mouse over “About Us” in the main menu, a drop down will appear and the “Contact” page will be an item in that dropdown list.
5. Choose menu location: This is where you can choose where you wish to display your menu. In this case, we’d like the menu to appear in the site header, so we have selected “Primary Menu.”
6. Save menu: Lastly, we must save the work we have done to create this new menu by clicking “Save Menu.”
And there you have it, you have successfully created your first menu! This process can be repeated for any further menus you wish to create. For example, some website choose to have different menu options / structures for their footer.
You can now head to your homepage and see your new menu in your header!