1. Documentation
  2. WooFramework Tweaks

Create a custom homepage using SiteOrigins Page Builder plugin

Many of our themes include a “Business” 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 use 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 a recent post.

Install the plugins ↑ Back to top

We’ll be utilising features of the following plugins:

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 ↑ Back to top

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.new-page

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 ↑ Back to top

Click the add row button and choose 2 columns to create a row containing 2 equal width columns:add-row

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.editwidget

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.drag

Save the page and then preview it. You should see something like this:preview1

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:changewidth

Testimonials ↑ Back to top

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!

Let’s 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.edittestimonials

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:preview2

Display features ↑ Back to top

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:edittestimonials

This will produce a row of 4 features beneath the testimonial and look something like this:preview3

(Please note that in this demonstration I’m using the Icons for Features plugin to display icons for the features).

Display projects and posts ↑ Back to top

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 for this widget, for now, we’ll just display the most recent post using the loop.php template file.postloop

Drag and drop the widgets accordingly then beneath your features you should see recent projects and a blog post like so:preview4

Putting it all together ↑ Back to top

All together your page should now look something like this:custom-page

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.

Enjoy!

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment