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.
To find a specific themes by category check out - Themeforest