Free Page Builder Plugin

How to create great looking landing pages with a free WordPress theme and page builder

If you absolutely need a free tool to create great looking webpages with WordPress then you are in luck. Page Builder by Site Origin> is a free plugin> that you can use to build webpages by simply clicking and dragging. Ofcourse, there are advanced page builders out there that come with premium themes (I have made a list at the end of this page) which can make your life much easier and your website even nicer. For now however, I will show you how to use all the available Free tools to make a great looking landing page with WordPress.

In this guide we will create a great looking landing page for your WordPress website. Wordpress is free opensource software used by professional webdesigners to build custom websites. If you don’t know how to install WordPress, click here to check out my free guide on how to set up a professional looking website with the world’s most popular website platform. After you have downloaded and set up WordPress you will be able to install the Page Builder plugin on top of that for free.

I will also show you how to get more widgets with a free Widget Bundle plugin. The widget bundle allows you to easily add things like Google Maps, Buttons, Price Table, Images, Post Carousel, Social Media Buttons, and more.

First - Get a Free theme for your website

In this example we will be using a free theme called Sydney. After that, I will show you how to install a free page builder plugin that works with this free theme.

WARNING: Free themes and page builders are ok to use if you want to create a basic website. I do recommend however using premium themes and page builders if you want to make a really nice website. You can get some really nice premium themes that come with page builders as part of the package from Themeforest.

To install the Sydney theme

Make sure you have installed wordpress - click here to read my full tutorial
Go to Appearance -> Themes
Search for Sydney
Install and Activate the Sydney Theme

Install the Page Builder Plugin - Free

Before I show you how to build your first page we need to install several Free plugins to give as all the needed functionality.

To install Page Builder, go to Plugins -> Add New inside your wordpress dashboard
Search for Page Builder and click install beside Page Builder by Site Origin.

Install the SiteOrigin Widgets Bundle - Free

As I have mentioned above, this plugin will allow you to add cool little widgets to your website like Maps, Social Buttons, Price Tables, etc.

To get the Widgets Bundle search for and Install the SiteOrigin Widgets Bundle.

Install the Title Remover Plugin - Free

The title remover plugin is a great plugin to use for removing the default titles that appear on all your pages by default. A combination of this plugin together with the page builder plugin will allow you to make beautiful pages without getting into code.

To get this plugin, Search for and Install Title Remover - by Brittany Internet Services

Install the Spacer Plugin - Free

The final plugin you need to add is “Spacer”. This will allow you to add spaces between different elements on your page. I will show you how it works below once we start designing our first page.

Search for and Install Spacer - by Justin Saad

Edit the Website Header

We will now make a few changes to the default theme settings to style the look of your website

Remove the tagline "Just another Wordpress Site" from the header of your website

Go to Appearance -> Customize
Click on Site title/tagline/logo
Remove the tagline that says "Just another Wordpress Site"
The title of your website should now look like the example image - where it says "My Website"
Click Save & Publish to save changes
Clik on the X in the top left corner to return to the main WordPress dashboard

Edit the slider

A Slider is the big splash image with the sliding text that appears on your main homepage. To edit this image and the sliding text do the following:

Go to Appearance -> Cutomize from your main wordpress dashboard
Click on Header Area, then click on Header Slider
Here you can change the Slider Speed or turn it off completely if you wish
You can remove or change any of the images for your slider - you can get free images from unsplash.com
Scroll down to Call to Action Button. You can change the text in the button, but leave the URL for your call to action button as is. This way when the button is clicked, the page will slowly scroll down on its own to the next section under the header. You will see what I mean later on in this tutorial.
Save and Publish your changes
Click the X in the top left corner to return to the main area

How to change Colors

You may now want to change some of the colors to match your slider image if you have uploaded your own image for the slider.

Go to Appearance -> Customize from your main wordpress dashboard
Click on Colors to see the color menu
To change the color of the Button that appears in the middle of your slider - change the Primary Color
To change the Menu Color - change the Menu Background color
I think you get the idea - you can change other colors from here as well
Save & Publish and click X to return to the main wordpress dashboard

Edit the Menu

Before we can edit the menu we need to have a couple of pages to add to it. Let's create a few dummy pages to show you what I mean.

Let's first create an About Page. Click on Pages -> Add New while you are in the main Wordpress Dashboard. Enter "About" as the page title (without the quotes), and click Publish. You can fill in the content later by coming back to Pages and clicking on edit.
Lets create another page called Contact. Again click on Pages -> Add New. Call the page "Contact" and click Publish
We now have 2 pages that we can add to the menu so you understand how the process works.

Let's add these pages to the Menu now

Click on Appearance -> Menus
A sample menu may already be available for you automatically the first time you enter menu settings. If yes, then click the blue "Create Menu" button (it's not in the picture, but it's a big blue button that's displayed instead of the Save button). If no sample menu is available, click the create a new menu link at the top.
To add new items to the menu, select the pages you want to add on the left side and click the Add to Menu button.
You can rearrange the order of the menu items by clicking and dragging them.
You can also add other items to the menu such as Links (you don't have to only add pages to the menu). To add a link to your home page, Click on Custom Links on the left side and enter a URL (like: http://your-site.com) with Link Text set to "Home". Click the Add to Menu button to add this link to the menu.
To remove items from the menu, click on the item to expand it and you will see a small Delete button you can click
Make sure you make this menu a primary menu - check on Primary Menu beside Theme Locations. A primary menu will always show at the top of your site in the header area.
Save your menu by clicking the Save Menu button
View your website in the browser to see how the menu looks now. I have provided a sample picture below.

Remove Page Wrapper - Top Padding

Next we will remove the extra padding between the header and where the page content will begin. We will be making our first page with content very soon.

Go to Appearance -> Customize
Click on General
Type in 0 in the Page Wrapper - top padding area
Leave the bottom padding as is
Save & Publish to save your changes
Click X in the top left corner to return to the main dashboard.

Create Your Home Page

After you have installed and activated the 4 plugins listed above, you are ready to create your home page.
To create a new page with PageBuilder we first need to create a regular page in WordPress.

Add a new page by clicking on Pages -> Add New.
Enter "Home" as the Title of your page
Next get rid of the sidebar and make your page full width. Select Full Width from the template dropdown menu.
Next you need to get rid of the default page title. Check the box beside Hide the Title for this Item.
Click Publish to save the changes you've made.
Wait a few seconds until the page saves and reloads before proceeding to the next step.

Launch Page Builder

To launch Page Builder, click on the Page Builder tab in the top right corner of the text editor.

Add a new Row

Before we can add content to the page we need to add a new row

To add a new row, click on the Row button.
On the next screen that opens, Set the row layout to 1 column
Click the Insertbutton to finish adding a new row

Add a Page Title

Next let's add a page title for your home page. Page Builder utilizes widgets that can be added to your website as blocks of content. You have installed these when you installed the Widget Bundle.

Click on the Add Widget button
Click on the Site Origin Headline widget
The widget will now be added inside the row
Hover over the widget and click the Editbutton
On the next screen that opens, type the title of your page in the text field
Select the color for the title - pick black for now
Click Done to finish adding the title
Click Update to save your page so you don't lose any of the changes

Add a Features List

In this example we will use the SiteOrigin Features widget to add a Feature List to your home page - look at the illustration to see what a feature list looks like.

Click on the Add Rowbutton and add another single column row to your page. To make a single column row remember to Set row layout to 1 and click Insert.
Next click on Add Widget and select SiteOrigin Features
The feature list widget should now appear in the second row of your page
Update your page to save changes - just to be safe

Edit the Feature List

We will now add 3 items to the feature list to make a nice looking home page that describes 3 services that your website offers.

Hover over the feature list and click the Edit button to edit it.

Click the little arrow button to expand the feature list so you can change the settings for that one feature - see the screen shot to see what I mean
Chose a background color under Container Background - I'm using the color #d65050
Pick an icon to appear inside by clicking Icon and selecting from a list of icons
Type in the Title Text - I'm using "Support" as my first feature title
Type in the description in the field that says Text
To add a link under the feature, you can type in "Read More" under More link text
More link URL - is where you insert a link (http://your-site.com/page-name/) for the page that you want to link to when the "More link text" is clicked. Remember you will have to make that page first before you can link to it.
After you've made your first feature - click the copy button twice (see screenshot to find the copy button) to make a copy of the first feature so you have 3 features
Next, click to expand each feature and change the icons and text for each one
Click Done to exit the feature screen
Update the page to save changes

Change Padding Around the Feature List

When you add rows to your page, the padding around the rows is too big sometimes - you can tell by the amount of space that exists between the headline and the feature list when you load the page in a web browser.

To remove the extra padding, do the following:

Click the Edit Row button for the row that has the feature list in it
In the Edit Row window that opens - click on Theme in the top right corner and set the Top/bottom padding to 0
Click Done when finished
Update the page to save changes

Adding a Spacer between content

In the beginning of this tutorial I mentioned that you need to install the Spacer plugin to be able to add spaces between elements on your page.

If you have already installed this plugin, click on Add Widget and add the SiteOrigin Editor widget.
Hover over the widget and click the Edit button
When you are in the editor, click the Add Spacer button.
You can change the height of the spacer by giving it a new height in pixels.
EXAMPLE: [spacer height="20px"]

Add Images to your posts and pages

You can make your landing page look like the following by simply adding some images.

Before you add images we need to add a new row with three columns.

Click on Add Row and set the Row Layout to 3 columns.
Next click on Add Widget and add the SiteOrigin Editor widget. If the widget is not placed in the appropriate column, click and drag it to the first column. Do the same for the other two columns.
Once the widget is in the right place, point your mouse over it and click Edit.

In the SiteOrigin Editor go to the right side of the window and click on Design - see illustration
Pick a Background Image and set the display to Cover so it takes up the entire space of its container.
Next Add a Spacer and give it the height that you want the image to be. We set ours to 250px in this example. [spacer height="250px"]
Click Done and repeat for the other two images

Final Step - Set your home page

After you are satisfied with the page that you've made, it's time to set it as your main home page for your website.

Go to Settings -> Reading from your main wordpress dashboard
Select the Static Page button
Select the page you've made from the list beside Front Page
Scroll down and Save your changes
Now the page you have made will show up as the main page when someone goes to www.your-site.com
That's it - we are done. Please join the community if you have questions or would like to contribute in any way

Premium Themes & Page Buiders

You may not be fully satisfied with the number of options that a free page builder offers and may want something more advanced. In that case we suggest you check out Themeforest for some premium templates that have really cool page builders.

Enfold Theme