Many of our themes include a “Business” or custom homepage template that allows you to create a traditionally laid out landing page giving visitors and overview of your business. This is a good starting point however sometimes you might want some more flexibility to create truly unique layouts.
Enter SiteOrigins Page Builder
SiteOrigin’s Page Builder is a fantastic plugin which allows you to create complex page layouts and pull in content via widgets. It’s well worth watching the video on their plugin listing page to get an idea of the functionality this plugin provides.
In this article we’re going to explore using this plugin (along with some of our own) and Canvas (although you can use any theme) to create a custom homepage displaying features, testimonials, products, projects and some recent posts.
Install the plugins
We’ll be utilising features of the following plugins so step 1 is to install them:
Only the Page Builder is necessary, but we’ll be using the others to add different elements to the page. For brevity I’m going to assume that if you’re using these plugins then you’ve already added some content to them (products etc).
Create the page and display some products
For the first section on this page we’re going to display a featured ‘hero’ product and the 4 most recent products alongside it.
Step one is to create the page itself and set it to use the full width layout.
To add the products we’ll be using WooCommerce shortcodes and text widgets placed in regions created by the page builder.
Add a widget row
Click the add row button and choose 2 columns to create a row containing 2 equal width columns. These columns are where widgets can be placed. The Page Builder will give you a basic visual representation of how this will look on the frontend.
Next, click Add Widget, search for “text” and click it to open the text widget dialog box. Leave the title blank and in the content box add the WooCommerce shortcode:
[featured_products per_page="1" columns="1"]
Click “Done” to add the widget.
Next, add another text widget and use the shortcode:
[recent_products per_page="4" columns="2"]
This will add a second widget to the first of the 2 columns we created in our row. Simply drag the second widget into the second column to arrange the products.
Save the page and then preview it. You should see something like this:
At this stage you might want to play with the number of products displayed and/or the column widths to get the layout just right. To line everything up nicely I’ve tweaked the first column to be 55% wide, making the second 45% by dragging the column separator in the page builder. This is the result:
Testimonials
Now that we’ve got some products up on our homepage, let’s display a customer testimonial so that everyone knows how great our customer service is!
Lets add another row, this time with just a single column. Afterwards click Add Widget again and search for “Testimonials”. Click the testimonials widget and configure it to display a single testimonial, picking a specific post ID if that’s your preference.
Click “Done” to add the widget. Again, this will be added to column 1 of row 1, so just drag it down to the new row we just created then save the page.
The testimonial will now appear beneath your products and look something like this:
Display Features
Beneath the testimonial we’ll display some features. Create another row with 1 column, click Add Widget and search for “Features” and click it. We’re going to display a row of 4 features by specifying the widget options like so:
This will produce a row of 4 features beneath the testimonial and look something like this:
(Please note that in this demonstration I’m using the Icons for Features plugin to display icons for the features).
Display Projects and Posts
Finally, let’s display some projects and some recent posts. Add another row, this time with 2 columns. Click Add Widget and add another text widget. We’ll use this text widget to display projects by adding the shortcode
[projects limit="2" columns="2"]
Click done then drag the widget to the appropriate column.
Click Add Widget again and search for “Post Loop”. This widget is included in Page Builder and as the name suggests will allow you to display a loop of recent posts. There are several options in this widget, for now we’ll just display the most recent post using the loop.php template file.
Drag and drop the widgets accordingly as you did with the products earlier.
Putting it all together
All together your page should now look something like this:
Hopefully this demonstration gives you an idea of what’s possible by simply using the Page Builder plugin, some shortcodes and widgets. This is of course a fairly basic example. By adding a little custom css, tweaking the layout, introducing a slider, adding more columns etc you can create a truly unique page layout with a variety of content, right from the dashboard. The possibilities are endless!