This tutorial is going to give you a massive head start in building a great website. I’m going to show you step by step from the beginning how to build a website. If you need a great website your in the right place, lets get started. As part of this tutorial I’ve included some sponsored links to the tools that I recommend. These links will make it easy for you to follow along as well as help support this content at no additional cost to you.
Tools used in this tutorial:
Avada Theme WordPress Theme
First Step: Setup Hosting and Configure WordPress
The first thing that you need to build your website is to have a place to build it. The best and easiest way to do this is to build your site online at a hosting company. I like SiteGround because they offer a good balance between quality hosting, a good price and quality customer service.
After you have signed up for your hosting account and selected a domain name the next step is to install WordPress on your server.
Login to your SiteGround account and select the my Accounts Tab. Here you will find all of the basic information about your hosting account.
Next Click on the “Go to cPanel” button. The cPanel contains many of the settings and features you can use to make adjustments to your website hosting.
Once on the cPanel look under the “Autoinstallers” section or the “WordPress Tools” section for the WordPress Installer.
On the installer click on the “Install” Tab. Choose a protocol for your website decide if you want to show the www. or not display the www. when users visit your website. If you have paid for a SSL certificate for your domain you will want to choose of of the https:// options.
Next if you have multiple domains on your account choose the domain that you would like WordPress installed on.
I do not recommend choosing a directory. Most people will want their WordPress installation to be right at their main domain.
Give your site a name and site description.
Choose an Admin user name. Choose something unique. Don’t use Admin or Administrator. Those names are too common and can make easier for hackers to break into your website. Choose a complex and unique password. I highly recommend using a services like LastPass or 1Password to help you create and remember complex passwords. You will find that in the course of building and developing a website you will create lots of different online accounts. It a good idea of have unique secure passwords for each account you create. LastPass or 1Password or a similar service makes it easier to manage and use all of those passwords.
SiteGround give you the option of installing a plugin called Limit Login Attempts. I recommend that you have them install that plugin. It’s another easy to implement way to help protect your site from hackers.
You don’t need to select a theme because we are going to use our own theme to build our website.
Then click Install.
When the installation is complete you will be show a link to the Administrator area of your website it’s your domain followed by /wp-admin.
You can click on that link and login to your website for the first time.
Once we have installed WordPress there are a few things that we need to do to make sure that WordPress is cleaned up and configured properly.
Remove Additional Plugins
On the left had side of your admin panel you will see a section called “plugins” click on that section to view the plugins installed on your website. I recommend removing all of the plugins with the exclusion of the Loginizer plugin and Akismet plugin.
You can remove a plugin by clicking on the “deactivate” link and once it is deactivated you can then use the “delete” link
Remove Any Pages, Posts or Comments
On the left had side of your dashboard go to each section Pages, Posts and Comments. Delete any pre installed pages posts and comments.
Set the Permalinks (Very Important)
This is the most important step in configuring WordPress and that is to make sure that you have set the Permalink structure to “Post Name”. To do this:
Click on settings in your dashboard. Then under settings click on Permalinks. Choose the Post name option.
Install The Avada WordPress Theme
Once you have WordPress Installed and configured on your site it’s time to install a theme. In the WordPress world the theme is what gives your site it’s look. Some themes are static templates with little or no control over layout, colors and style. Some themes give you all sorts of control over layout, colors and style.
I prefer themes that give you lots of controls. The theme that we are going to use in this tutorial is the Avada Theme. As you saw in the video this theme allows you to create many different looks for your website.
Click here to check out the Avada theme for yourself.
The link above will take you directly to the Avada theme page on the Theme Forest Market place.
Once you have purchased the Avada theme on Theme Forest you will see it under the download sections of your Account.
Select the “Installable WordPress Files Only” from the downloads menu next to the Avada theme in your account
You will know that you have downloaded the correct file because it will be around 35 MB. Keep the file zipped. If the file you downloaded was more like 200MB then you will need to unzip this file and find the Avada.zip file to upload to your site.
Back on the backend or your website in your WordPress Dashboard go to Appearances > Themes. At the top of the Themes section click Add New
Upload the zipped Avada Theme file. After uploading Install and activate the theme. This may take a few minutes so be patient.
After the theme has been installed click “Activate”
You will be taken to a screen that will ask you to install the required theme plugins.
Click on Go Install Plugins and then install the Fusion Core Plugins. This will in stall the page builder plugin as well as the Fusion Slider and the Elastic Slider.
After installing the required plugins you will be taken to a page with additional bundled plugins. I don’t recommend installing these plugins unless you absolutely need them. Additional plugins can cause your site to run slowly and cause additional problems in the future. If you don’t need the functionality that the plugin provides don’t install it.
Now we have our theme installed it’s time to start building our site.
The great thing about page builder themes and in particular the Avada theme is the ability to design and customize the look and feel of you site and each individual page on your site.
Sometimes getting inspiration for what to build and then turning that inspiration into a side can be hard. You can get a little help from the designers who built the Avada Theme demos.
How I got some design tips from the Avada Theme Demo page Designers.
On the main Avada Menu there is a tab called “Install Demos”. I DO NOT RECOMMEND that you install these demos where you are building your main site, but you could install these demos on a separate installation of WordPress either on your hosting account, or could install WordPress on your Mac or Windows Computer. I have tutorials that will show you how to do this.
With your favorite demos installed on a separate install of WordPress you could then reverse engineer the settings that created your favorite looks. In this tutorial I’m going to give you a head start on building your site by walking you thru the common setting and configurations so you can build your site faster and more easily. When your ready to add more to your site or get stuck think about taking a look at some of the great Avada Theme demos and seeing how their designers achieved the looks that they did.
Avada Theme Setup
The first think that I like to do when setting up a website is to configure the colors so that they match the branding of the company or organization that the site is being built for. In this tutorial I’m using a hotel as the example company. I’m going to base the main website highlight colors on the Hotels logo color.
Setting the Logo in the Avada Theme
Let’s first add our main website branding piece our logo.
Go to the Avada Menu at the top or in the Dashboard. Select Theme Options then select the logo tab.
Click to remove the existing default Avada logo. Upload your logo image. I recommend a file size of about 250 x 125. Click save all changes at the top.
Setting the colors in the Avada Theme
The default Avada theme highlight colors are a bright green. This makes it really easy to spot where we need to change the default colors of the theme to the colors that we would like to use.
In the Avada theme options go the the Styling tab. At the top select a theme skin. This is the main background color of your site. The options are light or dark. Providing either a light or dark main site background.
The next selection is the pre defined color scheme. You can experiment with this setting, but I recommend just leaving it the way it is and changing your sites highlight colors manually. Be aware that once you have manually changed your sites colors you do not want to select an option from the color scheme as this will erase any custom changes that you have made. That setting should have a safety switch on it!
Still on the Styling tab select the background colors section. Change all of the bright green colors to your primary highlight color.
You will find that in the styling tab you need to change the colors under Background colors, Element Colors and Main Menu Colors. Everything else has neutral colors.
The next colors that we need to change are the colors of the default buttons built into the theme. You will find those settings under the Shortcodes tab. Inside the Shortcodes tab open the Button Shortcode section. Scroll down to the Button Gradient Top Color and Button Gradient Bottom color. I you would like to have your buttons have a gradient look to them then choose a separate top and bottom color. If you would like your button to have just one solid color then choose the same color for both top and bottom.
Next choose a button hover colors. If you wish to use 3D styled buttons change the button bevel color.
While still inside the Shortcodes tab also change the highlight colors under the
Counter Box Shortcode
Counter Circles Shortcode
Drop cap Shortcode
Flip Boxes Shortcode
Pricing table Shortcode
Progress Bar Shortcode
After making those changes be sure to press the save all changes button!
Avada Theme Typography Settings
The Avada Theme offers a lot of options for creating a custom look for your site, including an extensive set of options for customizing the typography on your site. You will find the typography settings in the Avada Menu under Theme Options and then the Typography tab.
I recommend using the google fonts settings. It’s easy, there are a lot of choices and most browsers will accept those settings without any problems.
I also like my font size to be larger so that it is easier For my Viewer to read. I moved up all of the text sizes by 2 and the heading sizes by between about 5 – 10.
Removing the Title Bar in the Avada Theme
By default the Avada theme has a title bar on each page. You can remove that setting under Theme Options > Page Title and then choose Hide under the Page Title Bar setting. You can Turn on the page title on a page by page basis. Just look for the Page title setting at the bottom of the bottom of each page that you create.
Backup Your Custom Theme Settings
Once you have finished configuring the default theme settings scroll down to the bottom of the theme options page is a tab that says backup. You can use this to back up the custom settings that you just created. That way if in the future the settings get accidentally changed you can easily revert back to your preferred settings.
Building a home page in the Avada Theme
The first step to building our home page is to create a new page in our WordPress dashboard. Select pages on the left. At the top of pages section click on Add New. Call this page “Home”. Then click on the fusion builder page to activate it. Click Publish on the Right.
Now we need to make a second page for our blog posts. Blog posts are a great way to share information with your audience or customers. I like having this information on a separate page so our Home page can focus on our most important items. We can add a feed to our blog on our home page later if we want to.
At the top click on Add New. Give the page a name it could be anything you like for this tutorial I’m going to call it “Blog”. Click on Publish.
On the dashboard menu to Settings and then Reading. In the Front page displays section choose: “A static page”. Then for your front page choose the “Home” page that you just created and for the Posts page choose the “Blog” page that you just created. I also like to set the “For each article in a feed show” setting to summary. That way on our blog page it will only show a summary of our posts and not the entire posts. Viewers will have to click thru a read more link to view the full content of the post.
We have now set our site up so the first page that your viewers will see when they go to your URL will be the “Home” page. All of the Posts that you create will show up on the “Blog” page.
Setting up a Full Screen header image on our Home page.
Setting up a full window header image or video has become a popular and effective way of adding a beautiful design element to your website. You can see examples of this technique on some of Apples web pages the Tesla home page and Airbnb. If you know the right settings and tools to use this is something that is easy to accomplish with the Avada Theme. Let’s look at exactly how we do it.
To set this up we’re going to use the included Fusion Slider which is already installed as part of the Fusion Core Plugin. This was installed when we first loaded the theme. We are using a slider and we can choose to have multiple full screen images or just one static image. In this example we are going to use just one static image.
To get started go to your WordPress dashboard. Look down towards the bottom of the dashboard menu for the Fusion Slider controls. Click on Add or Edit Sliders. The slider is container that the slides will go into. In this case the single slide that we will create for our home page.
Under Add Slider give the slider a name “Home”. Scroll down to the Full Screen Slider section. Click the box to make the slider full width and height on the loading of your website. I also selected the Parallax Scrolling Effect because I like the look of the lower content scrolling over the header image.
The rest of the settings won’t effect the look we are trying to achieve so scroll down to the bottom and click on Add Slider.
Next we need to add a slide to this slider. On the left of your dashboard under Fusion Slider select Add or Edit Slides. Click on Add New Slide.
Give the slide a name like “Home Page”. Select a Background Type of Image which is the default setting. Change the Content Alignment to Center.
In the Heading Area type in the Content that you would like as the title for this slide.
Change the heading font size to 82 so that it really stands out. Be sure that the Heading Background is set to Yes, which it should be by default. This will help to separate our text from our background image so that it is easier for our viewers to read it.
Next add some text to the Caption Area. In the Caption Font Size change it to 36.
Next if you want to add a button or two to your slide you can do so under the Slide Link Settings. Under Slide Link Type you can choose if you would like the entire Slide to link to to one place or if you would like to have 1 or 2 buttons that link to other pages.
If you choose Button the default button shortcode will populate the Button #1 and Button #2 fields. This button short code will by default use the highlight colors that you already added to your site.
To add a link into the short code look at the very beginning of the code where it says, button link = “”, Enter in the URL that you would like the button to link to. If you don’t have a page set up for it yet just enter in a #.
Next look at the very last part of the Shortcode where it says, Button Text [/button]. Here replace the words Button Text with the words you would like the button to display.
Delete all of the shortcode from Button #2 because we are just going to have 1 button in this example.
Next and most important is to add the Image to our slide. Near the top of the Add Slide Setting and on the Right is a box labeled Featured Image. Click the Set featured image button. I recommend uploading an optimized image of about 1400px wide and a height of 500 – 900. What ever image you put in will automatically be scaled to fit the window of your viewer. After uploading click the Set featured image button at the bottom right of the upload window.
The final thing we need to do to set up this slide is add it to the Slider that we created. Above the Featured Image box is box that says. Fusion Sliders. Click the check box next to the Home Page Slider that we created.
Then click Publish, or Update.
Add a Fullwidth Image Slider to the Home Page
To add our slider to our home page we need to go back and edit our home page. In the WordPress dashboard go to pages in the menu on the left. Select the Home page that you created earlier.
Scroll down and you will see a box labeled Fusion Page Options. the top tab is called sliders. Select that tab. Slider position default should be fine or you can select below. The Slider Type should be set to Fusion Slider.
Select Fusion Slider should be set the the Home or Home Page Slider that we created. Scroll back up and click on Update in the Publish box. Now at the very top click View Page.
Now we have a full screen image. The only thing that would make it look nicer would be to remove the background color from the header logo and menu area.
How to Make the Header and Menu Transparent in the Avada Theme
Click on Edit Page.
Scroll down to the Fusion Page Options.
Select the Header Tab. Find the Background Opacity section and set it to 0. Scroll up and click update inside of the Publish box. Now click View Page at the top.
Note: If you have the sticky header enabled, which it is by default your menu will always stay at the top of the window. However you will not see that functionality until you add more content to your page.
Using the Fusion Builder to Build a Home Page with the Avada Theme.
Page builders are great for laying out and designing your pages. The fusion page builder does a good job of helping you create the page that you want. With lots of control over the column widths and many elements that you can use to add content to your page. Let’s continue with our tutorial by building an example page.
Navigate to the page editor and select the home page. Make sure that the Fusion builder is activated. You will be able to tell if it is activated because you will see a edit section called Fusion Builder.
With the Column Options Selected click on the Full Width Container button to add a full Width container to your page.
Add an image background to this section by choosing the pen tip icon from the newly added Full width Containers top bar.
Select the Background tab from the top. Then Choose Upload in the Background Image section. Click the insert into page button on the bottom right. Then click save.
Now add some content to this container.
From the top of the Fusion Builder box select the Builder Elements Button. This will open up a selection of all of the builder elements that you can use to add content to your page.
Choose the Image Frame element and drag that into the Full Width container that you just added to your page. Hover over the newly added Image Frame and select the pen icon from the top right of it.
Scroll down to the Image Section and select Upload. For this demo I used a slightly Larger version of the Hotel logo. Then click the insert into page button. Then click save.
Now select the Text Block from the Builder Elements. Drag that below the Image Frame element. Select the Pen Icon from the top of the text block to edit it.
Click the Tool Bar Toggle button to show the additional text styling options. Click the center text icon and change the text style from Paragraph to Heading 3. Add your text inside the textbook and click save.
Next add a Separator element. Choose the pen icon on that element to make changes to the Separator element.
Under style choose Single Border Solid. Let’s add some space around the separator. Change the Margin Top to 40. Change the Margin Bottom to 50. Now we will have some space around the Top and Bottom of the Separator.
Change the Separator Color to your highlight color. then click save at the bottom.
Now below the separator lets add 2 columns. Click on the Column Options. Drag a 1/3 column and a then a 2/3 column below the Separator Element.
Add a Text Block to the 1/3 column. Use the pen icon inside the Text Block to add some text to it. You can style your text in this section the way that you want it. Add a title text to the top using the Heading 1 style. Then add some paragraph text below that using the Paragraph style. Click save.
Now lets add a button bellow the text. Use the Button Block and drag it below the text block in the 1/3 section.
For the Button URL enter in a URL or if you don’t have the page that you want to link it to you can use a # as a place marker.
Choose Button Style Custom
For Button Size choose Extra Large. For Button type choose Flat. Button Shape square. Now scroll down to the Button Text and type in the text that you will like to appear on the button.
Scroll down to Button Gradient Top and Bottom and use your sites primary highlight color or choose the color that you you would like it to have. Select your Accent Color and Hover Color. Select an icon for your button if you would like and then choose the placement location for it. Click save.
In the 2/3 section drag in an Image Frame. Click the pen icon. In the Image Frame settings choose.
Frame Style type > Drop Shadow
HoverType > Zoom In
Border Size > 2 px
Align > Center
Then under Image Upload Upload your image and click save.
Before moving on be sure to click the Update button inside the Edit Page section on the right. This is the only way to save all of the changes that you have made on this page. Even though you have been clicking save that just saves the information temporarily until you click the Update button on the page.
Now lets view the page.
Lets make some changes so that these new sections that we added look better. First it would be nice to have the Background image in the section full width of the window like our initial page image is. Next the Text block and the image section should have some more space around them so that they look nicer and have more separation from the background image.
Click on Edit Page
On the right change the template in the Page Attributes Box change the Template setting to 100% Width. This will allow our background image in the Full Width section to truly be full width.
Now let’s add a white background to our 1/3 and 2/3 sections. Click on the pen icon on the 1/3 section. Scroll down to background color and give it a white background either by using the color picker or using the hex color code #fff
Now we need to add some additional space around the text and button. Scroll down to the Padding control and enter a value of 30px. Click save.
Now lets do the same thing for the 2/3 section. Click on the pen icon in the 2/3 section. Go to Center Content and change that setting to Yes.
Go down to the Background Color option and use the color picker to select white or enter in the hex code #fff. Scroll down to the padding control an add a padding value of 20px. Click save.
Click the Update button in the Publish section of the Page editor. Click on the View Page at the top to see the changes.
Let’s Add some additional sections to our home page
Go back to edit the Home Page.
Click on the Full Width section button or drag it down below our original section.
Click on the Builder Elements button to add the Tagline Box element to our new Full Width Element.
Click on the pen icon for the Tagline box to edit it.
Use the color picker to change the background color to write or use the hex code #fff
Make the border color dark grey or enter in hex code #a5a5a5
Set the Content Alignment to center
Add some text for the button in the Button Text section
Put a # as a place holder for the link.
Set the button size to Large
Set the button type to Flat, button shape to square and button color to default.
Scroll down and add a Tagline Title and some text inside the Additional Content section.
Lets add a new section about the Hotel’s Spa.
Add a new Full Width section. Inside the Full width section add a 1/3 Column and a 2/3 column.
Add a Text Block element. To the 1/3 Column. Enter in 2 lines as titles for this section. Set the text in the first line to H3 and the Text in the second line to H1.
Below the Text Block Element add a Separator Element.
Set Style to Single Border Solid.
For the separator color use your sites highlight color.
Set the Margin top to 30px and the Margin Bottom to 30px.
Set a Separator width of 20 so that it doesn’t go all the way across the section.
Drag a Text Block below the Separator and add some additional text to it about the Spa Area.
Now drag an Image Frame in to the 2/3 section. Use the pen tool to adjust the settings for the Image Frame.
For Frame Style choose Drop Shadow.
For the Hover Type choose lift up.
Creating a Full Width section with 3 separate full background image columns
Add a new Full Width Section and add 3 1/3 columns to it.
Add a background image to the first and last columns by clicking on the pen tool and then selecting the Background section. Set the Column spacing to no. Choose to upload a background image. The images I used were optimized images 600 x 600.
Go to the middle 1/3 section and set the column spacing to no. Set a background color that compliments the background images on either side of it.
Set the padding to 40 px. This will give us some space around the text that we will add to this column.
Drag a Title Block to the Middle 1/3 box.
Set the Header Size to 1. Set the Title Alignment to Center. Set the Separator to None.
Now add a separator element below the Title Block.
Choose a Single Border Solid for the style. Set the Marting Top and Bottom to 40. Set the Color to white so that it will stand out from or background color.
Add a text block below the separator. Add some text. Center the text. Highlight all of the text and use the text color setting to white. Be aware that this will make the text look like it has disappeared because it will blend into the white background of the editor.
Now go back and view the page. You’ll notice that it doesn’t look quite right. There are a few more changes that we need to make.
Go back to the Page editor.
Scroll down to the last section we were working on.
Choose the pen icon on that full width section. Set the Interior Content width to 100% Yes
Set the Columns of equal height to Yes
Now we have a really nice looking home page.
Modifying the Footer in WordPress with the Avada Theme
In this section we will look at how to add some basic content to our sites footer and then
Adjusting the footer copyright text and removing information about the theme creators can sometimes be a real pain. Involving the need to modify the PHP code of your website. Fortunately with the Avada theme they have made this really simple.
Start by adjusting the Footer copyright text. Go to the Avada menu and then click Theme Options.
Click on the Footer Tab. Scroll down to the Footer Copyright Area Options. Here you can choose to show or hide the Copyright Bar. In the Copyright Text area you adjust the default text to the information that you would like to show.
Next let’s look at how to add some additional content and information to the footer area.
In the WordPress dashboard go to Appearance > Widgets
Widgets are content boxes that can be added to various parts of your website. In this case by default the Avada Theme has added A blog sidebar widget what will show up on your blog page as well as 4 Footer Widgets. These will put content into your footer from left to right 1 being left and 4 being right. However if you only put content in say 4 for example and put nothing in 1 -3 4 will default to the left side of the screen.
The Avada theme adds several useful widgets that we can add to our footer. Let’s start with the Avada: Contact Info widget. Drag the Contact Info Widget from the left onto the Footer Widget section on the right. Click on the Avada: Contact Info widget inside of the Footer Widget 1 to open it up. You will see several fields that you can use to enter in the Contact information for your company.
I like to look of the Avada: Recent Works widget which shows tiny thumbnail images from your Portfolio Posts in a grid. On my demo site for this tutorial I already added several Portfolio pages and added featured images to them. Let’s add this widget to the Footer Widget Area 2.
If you are on Twitter you can add the Avada: Twitter Widget that will add your most recent tweets. Inside the Avada: Twitter Widget is a link to instructions on how to set it up.
And then finally lets add the Avada: Social Links widget in the Footer Widget 4 Area. Lots of options to choose from. You can scroll down to the area with the Link fields. You can either add the links to your social media signups or you can add a # for now just to see what it will look like on your page.
Edit the Main WordPress Menu on your site.
After you have added a few pages to your website you will probably want to add those pages to the main menu of your site. Here is how you do that.
On your YouTube dashboard got to Appearance > Menus
Near the top click on the link that says create a new menu. Give the menu a name some think like “Main Menu” then click the Create Menu Button.
At the bottom of that section where it says Menu Settings click on the box next to theme locations that says “Main Navigation”
Now lets add some pages to our menu. Look over to the left of the page under pages. Click on the “View All” tab. Choose the pages that you would like to add to your menu and click the Add to Menu button.
Now those pages will appear on the right. You can drag the pages around to fall in the order that you would like. If you drag a page under another one slightly to the right it will indent and it will be a sub menu item or dropdown item on your actual published menu. You can also click on each menu item and change the displayed name if you would like.
At the bottom click Save Menu.
In this tutorial I’ve given you an introduction to building a webpage using the Avada Theme. The theme offers a lot of flexibility for you to create the kind of website and web pages that will make you and your company look good. I’ve shown you my top recommendation for a hosting company. And given you some really helpful tips that you can use to streamline your site building process. If you made it all the way to the end of this tutorial congratulations. Leave a comment below!