How To Build An Awesome WordPress Business Website – Step by Step – 2017

Hello There!
This is 2017 and Welcome to my Step by Step Premium WordPress Business Website Tutorial. Here I will show you how to create a WordPress website step by Step that is 100% responsive and looks modern and awesome using the premium WordPress BeTheme.

You do not need any prior Coding (php) or (css) knowledge and you will be able to achieve great results and gain solid understanding of WordPress and the BeTheme by the end of my tutorial. All you need to do is to simply follow along step by step and I will take you where you need to be. Everything you need to do and need to know to build an awesome Business WordPress Website is right here.

Like I say in the video, the relationship just does not stop on this video and this page. Fee free to reach out if you have any questions regarding the steps or you find an error so I can correct that for the rest of the audience. I wish you the Best Of Luck and Welcome any constructive feedback. So Are you ready to create the best Website that you have ever created ?

How To Build An Awesome WordPress Business Website – Step by Step

Awesome, Now that you have Domain and Hosting, Lets Install WordPress on it. It is as simple as clicking a button and my video shows you exactly how. Please watch the video at XX:YY. Here are the steps:

  • Log On to SiteGround Account
  • The second tab is “My Accounts”. Click on it
  • Click on the Orange Button “Go To Cpanel”. Click on “Proceed” if a Pop up message is displayed
  • Your CPANEL will be displayed. Simply scroll down to “WordPress Tools” and Click on the “WordPress Installer”
  • WordPress Installation Page will be displayed. At the bottom, simply click on Install Now.
  • Fill out the installation form. I am selecting http for the protocol, slecting my domain from the drop down, leaving the installation directory empty for installing to the domain. Provide a Site Name, description and do not select “Enable Multisite”
  • Fill out the admin Account detail. Please Write the username, password and use a valid email that you can check. This is what you will use to log in to your WordPress Website.
  • Do not select any Plugins or Themes and click on Install. A progress bar will be displayed and at the end you will be able to access the backend (management dashboard) of your WordPress Installation.

You can get the theme by clicking the link. Get BeTheme from ThemeForest.net

Keep in Mind that you are not only buying this theme for my tutorial. You are buying a totally kick ass WordPress Premium Theme from a well reputed company. The Theme comes with Powerful framework, a great and light weight Visual Builder, very modern and attractive UX screen elements and flexible options so you can customize it per your needs. And Of course the 230+ WordPress Layouts that you will be able to use Out of the Box and my Video shows you EXACTLY HOW in detail. By using my link I will get credit for the sale but you do not pay anything extra but the Theme price. I appreciate it and it helps me make such tutorial and pay my bills.

Installing the theme is very simple. You need to simply download the theme from your ThemeForest Account and Upload it to your Dashboard. Simply follow these steps.

  • Log into you Themeforest.net account.
  • Hover over your username and click “Downloads”. In front of the “Be Theme” click on the green Download button and from the dropdown click on the “All files and Documentation”
  • Download the theme on to your computer and once saved right click on the zipped file and “Extract” the zip file
  • Now back on your WordPress site’s dashboard, hover over Appearance and Click on “Themes”
  • Click on “Add New” at the top.
  • Click on “Upload Theme” Button and then click on “Choose File Button”
  • Browse for the extracted theme folder and select “BeTheme.zip” and Click on “Install Now”
  • Wait till you see the next Screen and Click on the “Activate” link.
  • Do not close the window and move on to the next step.

Your Theme is activated and installed at this point. Before importing the sample content you will need to install the plugins. Simply Follow the steps below:

  • From your WordPress Dashboard, hover over “Appearance” and click on “Install Plugins”
  • Click on the Install link underneath the First Plugin and once done go back to the list and do it for the next plugin till all plugins are installed. You can also select all and do a bulk install but you will have to be a little patient for that 🙂

Next we want to activate the plugins.

  • From Your WordPress Dashboard, Click on “Plugins”
  • Click on the activate under each plugin that you just installed.
  • Bonus Tip: Remove any unncessary plugin like “Askimet” or “Hello Dolly” e.t.c.

At This point your WordPress website does not look anything similar to what I promised. Now we are going to do the magic and in a few minutes you will see some drastic improvements:

  • From your WordPress backend, hover over “Appearance” and Select “BeTheme Demo Data”
  • Now you will see a page “BeTheme Import Demo Data”. On this page, from the dropdown select “Demo”.
  • For the “Demo | Premade Layout”, select the Demo that you want to Import. I am using the “Agency Demo” in my tutorial. So I am assuming you will select “Agency”
  • Click on “Import Demo Data”
  • Wait for a Minute or so and you should see a message “All Done, Have Fun”

After you are done with the sample import, on your WordPress Dashboard:

  • Scroll right down till you see “Slider Revolution”. Click on “Slider Revolution”.
  • Click on “Import Slider”
  • A Window will Pop up. Click on the “Choose  File”
  • Now Go to the folder where you unzipped the BeTheme from Themeforest and look for “slider-revolution-demo”. Inside of the “slider-revolution-demo” double click on the “demos” folder select the “Agency.zip”
  • You will see an informational screen and will be brought back to the “Slider Revolution Screen”
  • From your Dashboard simply hover over “Site name” at the extreme top left, right click on Visit site and open it in a new tab (window)

At this point your site is looking much better but work needs to be done on the Google Map and the footer. Here is how you fix the Google Map:

  • Sign in to your Google Account and then click here https://developers.google.com/maps/documentation/javascript/get-api-key
  • Select an existing project or create a project in Google Maps API to get the key (I show this in the video)
  • Copy the key and come back to your WordPress Dashboard and navigate to “Appearance >> BeTheme Options”
  • From “Global >> Advanced” tab set the Key for “Google Map API Key”
  • Save the Options and refresh the tab where you can see the page
At this point if you do not want to change the video and header you can completely skip the steps. Why I decided to do that is because I will customize the header and put it at the top like conventional websites. You can also have Images as opposed to the Video or have multiple slides with overlay text and buttons. Please view my video tutorial on Slider Revolution if you are interested on know more about how to work with itHere are the steps to do what I am doing.

  • From Your WordPress DashBoard, click on Slider Revolution
  • Click on the slider named “Home Agency”
  • Optional: Delete the text layer, Image Layer and the Button or adjust it per your needs
  • Double Click on the Video in Slider Revolution. Remove the OGV Source URL and the Video MP4 Video URL
  • Infront of the MP4 URL Click on “Choose Library” and upload your MP4 Video. Click on the Update Button
  • Click on Save Slider

Gaining More Understanding about the Slider Revolution 5:

Free Slider Exchange to Download Free Sliders:

https://revolution.themepunch.com/free-slider-exchange/

To get a similar look and feel for the header follow these steps and I show all these in the video as well. Header in BeTheme is highly customizable and a lot of different layouts can be supported

  • From the Dashboard, hover over Appearance and select “Be Theme Options”
  • Select the second Options Category “Header and Subheader”
  • From the Style select “Transparent”
  • Now go to the third Options Category “Menu and Action Bar”
  • Hide the Action Bar” from the Option Bar Sub Category
  • Select the Option to make menu right aligned from the Menu Sub Category. Also Remove the Sub header image as shown in the video.
  • Put the following in the Custom CSS:
    body:not(.template-slider) #Header {min-height: 90px;}
  • Now from the Options Go to “Fonts” and click on “Size and Style”
  • Adjust the Menu text size
  • If you want to change the color of the menu you will need to go to the “Color” category in the Options.
  • Go to color options and change the Header Background color to white #FFFFFF. Also change the Sub Header Background color to green and text color to white.
To gain more understanding on how to create page layouts I encourage you to checkout the video:

Resources

Checkout the important Resources that will greatly help you understand the Be Theme and its Option Panel.

Get SiteGround Hosting and a free Domain:

Get the Premium Be Theme:

 

Hire Me To Do your Website:

I understand that a lot of my audience is busy and do not have the time to do it themselves. I offer all WordPress Services at an affordable rate and high quality. Hire me to customize your website!

Need Someone to Customize Your Site?

Do It For Me