How to Create an Awesome One Page Website with WordPress and Visual Composer
Building a WordPress website for the first time can be very confusing, there are a lot of different themes to choose from and the WordPress repository is full plugins that all seem promising but you are not sure if you really need them. WordPress 4.4 comes with a default theme named twenty sixteen, which is a very well designed theme and very suitable to build a website around.
All my themes are built around the Genesis Framework but I understand that for those who are just starting out, this might seem like an unnecessary purchase at first. Frankly, it took me several months before I realized that Genesis was the way to go. For those who are not looking to buy a premium theme, I have made a tutorial how to make an awesome website with WordPress twenty sixteen theme.
What do you need for this tutorial:
In order to follow along with this tutorial, you will need the following.
1. A Hosting Account
To use this tutorial, you will need a hosting account. Personally, I use SiteGround for all my websites and for good reasons. If you still need a hosting provider, I highly recommend SiteGround to get all the tools you need to get started.
Sign up with SiteGround to receive a free domain name, click here for 50% discount on their hosting services!
Alternatively, you could also set up your website using a local server. For more information be sure to check out this article.
2. Twenty-sixteen Child Theme
This tutorial uses a custom child theme that I personally developed. A child theme ensures that you can update your theme in the future without losing important files. All the customizations have already been set in this child theme, making it a breeze to build your own one-page website.
3. Visual Composer Plugin & Ultimate Addon for Visual Composer
Visual Composer is a plugin that functions as a page-builder and gives you a lot of widgets to use within this page-builder. Using this plugin, it is possible to build a website from scratch without writing a single line of code using their drag and drop feature. Coupled with the Ultimate Addon package, you could implement almost any feature in any WordPress theme using the same easy interface. These plugins together cost $52 which is less than most premium themes.
Still not convinced? Check out the tutorial video below and see how I use these plugins to easily build a WordPress site.
4. One Page Content Pack
In the tutorial, I use stock images that I already have edited to fit the website perfectly. You are of course free to use your own images but if you wish to use mine you could download them using the link below.
Let's get started!
Alright, we have covered all the basics and are ready to go. Find the tutorial video below. If you wish to follow the written steps you can find these below the video.
Written instructions tutorial
Follow the instructions beneath to create the one page website in the video. Good luck and let me know if you have any questions.
- Install WordPress
- Download and Install twenty sixteen Child Theme
- Download picture pack
- Install Plugins: - Contact Form 7, Dynamic to Top, Page Scroll to id, Ultimate Addons for VC, WPBakery Visual Composer
- Create Home Page, create Menu for Home + Custom Link Menu for: About, services, Portfolio, Contact. Set the menu to primary menu.
- Go to Ultimate —> Google Fonts —> Search Font Oleo Script —> add font to collection
- Go to settings —> reading —> choose static page —> home
- Delete all widgets in the widget area
Choose backend editor
First Row (Home):
Add a single column row, row stretch: row and content (no paddings). Design options: choose home background image (as Cover).
Add empty space, height 250px
Add custom heading, text: Pure Awesomeness!! Element tag: H1, align: Center, Font size: 45, Text color: #fff, Font Family: Lobster, Font Style: 400 regular
Add custom heading, text: Clean Coded and Unique Design!, element tag: h2, align: center, font size: 25, text color: #fff, font family: Roboto, font style: 400 regular
Add Icon, Font Awesome, Icon Arrow, Color: white, Size: large, Align: center, link: #about, css: appear from center.
Second Row (About):
Add a single column row, row id: about, rest all default settings.
Add Custom Heading, text: About Us, element tag: h2, align: center, font size: 34, text color: #4f4f4f, Font Family: Oleo Script, Font Style: 400 regular
Add Separator (line), Color Custom: #4f4f4f, Align: Center, Style: Dashed, Width: 3px, Element width: 100%.
Add Custom Heading, text: This awesome website theme is so simple and straightforward, you can be online within the hour! Fully customized websites and no coding or technical experiences required! Really try it! , element tag: h2, align: center, size: 24, font family: robots, font style: 400 regular.
Add empty space, height 20px
Add a second row with two columns in the current row.
In the left column, add empty space, height 20px. Then add a text block: My name is Joep van der Poel and I am the founder of Tropical U.P, the hub for everything related to online business. I created this tutorial to show you how easy it is to make your own website using the visual composer plugin and a free WordPress Theme I developed. There really is no reason to not get started right away.
In the right column add the info list widget. General settings: Icon to the left, Icon color: #4f4f4f, Icon font size: 24. Connector, line color: #fff
Now add a Info list item. Title: Simple and Clean Design , Font Icon Manager, List Icon: Check, Description: Very clean and minimal design for your WordPress Site, putting the focus on your brand.
Now copy the first list item 2 times.
2nd info list item. Title: No Technical Skills Required , Description: Absolutely no technical experience is required to set up your website, just follow the steps from the tutorial and you are good to go.
3rd info list item. Title: Drag and Drop , description: Simply drag and drop elements that you wish to add to your website, no need to write a single line of code.
Third row (Services):
Add a row with a single column, row stretch: stretch row, row ID: services. Background, color: #33b17a
Add an empty space: height 5px
Add a custom heading. Text: Our Services , element tag: h2, align: center, font size: 34, text color: #fff, Font Family: Oleo Script, Font Style: 400 regular
Bonus Tip: Just copy the previous custom header of the about page and change the color. You can do the same for the upcoming section custom headers.
Add a row with three columns. In the first column add a Icon. Icon library: Font Awesome, Icon: Rocket. Color, custom: #33b17a, background shape: circle, background color: custom: #fff, size: extra large, icon alignment: center
Now add a text block under the icon: H2: Lighting Fast p: Your new website is lighting fast, making it a breeze for clients to browse your site. Now align: center, color: #fff
Second column: Copy the Icon from first column: icon: Line Chart. Copy text block from first column: H2: Future Growth , p: Our mission is the future growth and success of your company, together we shall triumph. Tip: switch to text editor for easy editing.
Third column: Copy the icon and text block: Icon: Money. H2: Save Money , p: Don’t spend money on an expensive designer, spend it on growing your business.
Now add an empty space beneath: height: 1px
Add another row with three columns. Copy an icon and text block from the previous row in each column, so their format is similar.
First column: Icon: Desktop. H2: Clean Design , p: Clean and minimalistic webdesign that emphasizes your product.
Second column: Icon: Paint Brush. H2: Easy Changes , p: Change elements within your website with the click of a button.
Third column: Icon: Cutlery. H2: Start Now! , p: Get your own website online in less time and money than a lunch downtown.
Add some empty space: height 10px.
Fourth Row (portfolio):
Add a row with a single column. Row stretch: stretch row and content (no paddings). Row ID: portfolio
Add a custom heading (or copy the About section custom heading). Text: Portfolio, element tag: h2, align: center, font size: 34, text color: #4f4f4f, Font Family: Oleo Script, Font Style: 400 regular
Add a separator. Custom color: #4f4f4f, dashed. border width: 3px, element width: 50%
Add a custom heading. Text: See some of our work below! , element tag: H2, align: center, font size: 24px, font family: Roboto, font style: 400 regular.
Add a Advanced Carousel box. Slider type: Horizontal, Slides to scroll: one at a time. Items to show: 1 for each device type. Navigation, arrow size: 24, dots navigation: no.
Inside the advanced carousel box add an info banner. Title: Awareness , Description: Embrace your environment and every day full of new opportunities. Information alignment: Center. Image, banner image: portfolio1, image alignment: center. Design, Banner min height: 350px. Typography Title: font family: Oleo Script, style: bold, font size: 30px, color: #fff Typography Description: Font: Oleo Script, style: Italic, font size: 26px, color: #fff
Copy the first info banner: Title: Spread the Love , description: Build communities of value and together we triumph. Image: Portfolio2
Copy the first info banner: Title: Give Back , description: Build a sustainable business by delivering value to others! Image: portfolio3
Add a new row with six columns. In the second column add a counter. Icon: User, size: 32px, color: #333333, icon position: top, counter title: Happy Customers , counter value: 500 , title font size: 18, counter font size: 28px.
In the third column add a counter. Icon: Heart. Size: 32px, color: #333333, icon position: top, counter title: Successful Projects , counter value: 1250 . title font size: 18, counter font size: 28.
In the fourth column add a counter. Icon: Flag. Size 32px, color: #333333, icon position: top, counter title: Audience Reached , counter value: 5000, title font size: 18, counter font size: 28.
In the fifth column add a counter. Icon: Map-marker. Size: 32px, color: #333333, icon position: top, counter title: Countries Active in , counter value: 35, title font size: 18, counter font size: 28
Fifth Row (contact):
Add a single column row. Row stretch: stretch row. Row ID: Contact. Background style: Single Color: color: #e8e8e8
Add empty space: height 5px
Add custom heading: Text: Contact Us, element tag: h2, align: center, font size: 34, text color: #4f4f4f, Font Family: Oleo Script, Font Style: 400 regular.
Add Separator (line), Color Custom: #4f4f4f, Align: Center, Style: Dashed, Width: 3px, Element width: 100%.
Save the Page
Go to the side menu, contact. Edit your personal information in the contact form. Click save and copy the short-code.
Go back to your home page. Add a text block and copy the short-code in the text block.
Now click save.
Go to settings in the left menu bar: copy the selector: m_PageScroll2id
Scroll down and locate the Offset, set to 30
Click save settings.
Go to your menu setting, make sure that in view settings above you have selected link relationships. Now open the settings for about. Under Link relationship, copy the selector (m_PageScroll2id). Set the URL to: #about.
Now do the same for: Services, Portfolio and Contact.
Optional: Create a Social Menu
You can create a social menu in your footer by creating a new menu. Now add custom links to your menu with the URL to your Facebook, Twitter, YouTube, Instagram, etc. Set the location to social links menu. Don’t worry about the navigation Label, the theme automatically sets the right icon based on the URL.
To the top scroller
The last thing we want to do is to add the to the top scroller. Go to appearance —> To Top.
Position: bottom right
Background color: #8c8c8c
Border color: #5b5b5b
Congratulations! You have successfully created a professional one page website!