Summary: Site Origin itself creates free blog templates (aka Themes) for WordPress. This article shows how to use Site Origin’s plugin Page Builder with WordPress. Create copy-able templates for all your needs on posts, pages, and your homepage. It’s cutting edge stuff we love!
Most of us don’t want to spend months stuck on design dilemmas only to delay the launch of our website. This happens all too often because it is so easy to get stuck on post layouts, homepage design, our sidebar and whatever else is not working out right. I know because I’ve been there! Sometimes it may seem like it will never be done. The truth is starting a blog is always a work in progress – but the great news is that process does not have to take such a long time.
This is where prebuilt layouts come in. In this post, I’d like to show you how to use Site Origin’s prebuilt layouts. You can quickly develop a blog page and post style that works for both you and more importantly your readers. If this strategy helps you make blog posts quicker in WordPress, tell us in the comments!
Who should read this? …WordPress beginners struggling with design
Often, we have to let go of the notion that our site needs to look perfect before we launch it. The truth is it needs a good start but it doesn’t have to be perfect. Simple can be beautiful! Prebuilt layouts work!
This is a tutorial for WordPress beginners and those who want to create consistent blog post design while saving time editing and setting up each blog post. Of course, we also assume you are not familiar with prebuilt layouts. It about how you can design your WordPress website/blog using Site Origin’s prebuilt layout option, a feature tucked inside of the page builder plugin.
Some reasons to use this guide are;
- You see other bloggers make stylish posts with images, buttons, quotes and more but aren’t sure how it’s done
- You create an epic blog post and copy the design for other posts.
Creating your site should be more fun than frustrating! You shouldn’t have to pay a ton of money to a web developer/designer to create it for you. Thankfully you don’t have to. You can create, design and customize your own for free!
What will you learn?
- How to install and utilize page builder, prebuilt layouts, and Custom CSS
- How to create your design without having to struggle with where to begin.
- Any beginner can have a beautiful blog!
Provided in this tutorial are helpful links should you need help along the way!
Can I promise it will work for you?
Not exactly. I would love to promise you that. However, the truth is the results are up to you. Nothing great is created without effort.
What I do promise is that effort produces results. Creating and designing a website or blog is not something you learn overnight. You will learn as you go. Which is why prebuilt layouts are perfect for beginner bloggers.
If you found this tutorial then I’m sure you are someone who is eager to learn how to create and design your site. Let’s get started!
SiteOrigin – Who are they?
Site origin is a WordPress theme and plugin studio. It was first started in 2011 by Greg Priday. Since then it has grown in popularity. With over 2 million installs of their themes and SiteOrigin plugins, they are doing quite well! Currently, their strongest theme is Vantage. Greg Narayan our forum founder, has created a great tutorial using the Vantage theme. You can find it here in our knowledge base.
If you are interested in checking out the Vantage theme Click Here to go directly his tutorial and Demo Site. Additionally, he has many shorter length tutorials available if you would like to head over at some point to his YouTube Channel. All their themes are quite nice. Site Origin themes are free with the option to upgrade to premium. They are equipped with a support forum and a wealth of information on their themes and plugins.
Two things to consider before you start;
1. What WordPress theme do you run?
- For testing out the suggestions in this tutorial any theme you have installed will be fine.
- It is very important that you use a test page to practice on. Nobody likes taking a chance on losing hard work!
2. What are your home page and blog settings configured to?
For help with the settings and set up for your Front Page and Blog Page
Getting to know prebuilt layouts
In this section we’ll start to look at the prebuilt layouts you can choose, and how to use them.
Firstly, a little bit about the layouts we’ll look at. They are all:
- Beginner friendly for anyone looking for a simple start!
- Awesome prebuilt templates to choose from!
- Very easy to work with and customize
- Provides a fantastic option for quick and fairly easy design
- Great for homepages, other pages, and blog posts
- Can copy to your other page or posts to maintain your chosen format layout.
- Can use various layouts for different pages and posts.
- A smooth set up option to get you started!
We will cover the basics in 8 steps on how to begin and utilize these plugins to create both your home page, other pages, and blog posts.
Getting Setup with Site Origin Plugins
- They are great multi-purpose strong plugins for the creation of great design and function for your website/blog.
- They are very compatible with most WordPress themes.
- In this tutorial, we will take a look at all three.
1/ Plugin Installation
Note: Installing and using WordPress plugins is not an available option for wordpress.com. You must have a wordpress.org website.
- Go to your WordPress Dashboard to install the suggested plugins below
- Select from the left side of dashboard options – plugins … Select add new
- Type into the search box the plugin you are looking to install.
- Once found, select the desired plugin simply install and activate.
2/ Site Origin Page Builder plugin
Now that we understand how to install a plugin, let’s install the Page Builder plugin with contains our prebuilt layouts we’ll use using. To do this is very simple. Using the general steps above to get to your plugins library, then click Add New > Search for ‘SiteOrigin Page Builder’ > Install > Activate. You’ll now have a new tab in your new page and post editor. It should now say Text | Visual | Page Builder. If you click on Page Builder you’ll have all the features to make drag and drop pages, copy layouts, and more now! Good job!
3/ Install SiteOrigin Widgets Bundle Plugin
Same process as above to give your blog more widgets that go with the Page Builder plugin. Search SiteOrigin Widgets Bundle > Install > Activate. Now you have more widget you can use to create posts or pages. You can use these widgets at any time, delete them, recreate them, whatever you want because they are free and unlimited.
4/ (Optional Plugin) Site Origin Custom CSS Plugin
You can use prebuilt layout options with page builder without this plugin. However, I highly recommend it. This is a fun plugin that works wonderful magic! This Custom CSS plugin is essential for so many design and functions. From color options to almost everything else this is a ‘must have’ plugin!
To learn more about this plugin and how to use it see Greg’s video tutorial on Custom CSS plugin by SiteOrigin. Here Greg uses the Vantage theme as an example. You can use this plugin for virtually most WordPress themes.
5/ Preparing to choose your layout
Let’s create out first page using your first prebuilt layout! If you’d like to see an example of something we made quickly and easily, checkout this blog post. Sure it’s not perfect, but using our method here and the ‘Beautifully Baked’ layout we were able to instantly create a blog post with lots of content including a quote, full width image, featured boxes and more.
Here’s what you need to do:
- Set up a test page
- Title your page
- Open page builder
- Select prebuilt layout or layouts
6/ Choose your prebuilt layout
This part should be fun as you have several prebuilt layouts to choose from. Don’t spend more than 3-5 minutes choosing one, just go for it and play around!
- By opening page builder and selecting prebuilt layouts you should now be in the layout directory.
- Here you will have about 24 prebuilt layouts spread out between page 1 and 2.
- Select a simple layout to test it out. You can also preview each layout to see what it looks like.
- on the bottom right of the screen, you will see the option to select insert.
- When you select insert you are given three choices.
- Insert after- content already existing in your page or post.
- Insert before – content already existing in your page or post.
- Replace current- this selection will replace current content.
The best thing to do here is to use a created test page to check out all options.
For the purpose of this tutorial, we are going to use our created test page and select replace existing content.
7/ Create your own unique design layout
If you don’t want to use all the prebuilt layout features creating your own it is very easy to personalize your layout. You can give your look and much more personal look and feel making it your own unique creation! Though I don’t cover in depth about personalizing your layout in this tutorial you can have fun and play around with it.
Widgets- delete the widget you don’t want. Replace with widget or widgets you would prefer to use. You can use whichever widgets you want whether they be by SiteOrigin or others.
Colors – If you are not satisfied with the available color choices that came with your theme. The SiteOrigin plugin addressed earlier, allows you to choose whichever color and font you like. I do suggest if you have not used this plugin before to definitely refer to Greg’s helpful tutorial about this plugin. It is very beginner friendly and works design magic!
Add, delete and duplicate rows and widgets that you want to carry throughout.
8/ Keeping it simple, clean, and effective!
It’s easy to get stuck on design, layout, and function of your site. The best way to start is to create a simple layout and design. We hope using Site Origin’s Prebuilt Layout’s helps you do just that!
It is much easier to add more and more over time. Let’s face it we can all use more time to focus on great content! One final suggestion is to create a few blog posts with different designs, then observe which one performs best. Once you know which blog post (and design) is doing best, take that formula and apply it to your other posts to make more of your blog posts become widely popular. Same goes for pages!
Are you still stuck on how to make blog posts and pages quickly and easily? Join in the comments to get help and learn from others facing the same issues on their blogs!