Page Builder PlugIn by Site Origins for WordPress

In this video I'm going to give you a broad overview of how to create a page using site origin page builder I'll go over the basic concepts things like adding content to your page and creating page structure this video is a good starting point if you're just getting to know page builder or if you need to brush up on the basic concepts I'm going to assume that you're really a page builder installed if you don't click on the annotation above for installation instructions after you've activated page builder you'll see the small page builder tab next to the visual and text tabs of the default WordPress editor click on this tab to switch to the page builder interface if you're editing an existing page you'll get the option to copy your content over to page builder what you see here is the page builder interface you can add a widget a row or a pre-built layout let's start by creating a row rows are the primary container inside site origin page builder they're where you'll be adding your content and specifying your layout in the row dialog you can choose the number of columns and then the column layout once you're done just click insert you can also add a row by right-clicking on an existing row and then choosing one of the predefined options in the contextual menu editing a row allows you to add and remove columns as well as edit some row styles we'll go over these row styles a little bit later at any stage you can move a row by using the move handle that's above each row we have our basic page structure let's start adding some content click on a column selected and then click add widget to bring up the widget adding dialog there are a lot of widgets you can choose from but the one that we'll be using the most is called the site origin editor widget you can find it here under the widgets bundle section or you can type editor into the search field you might be prompted to install the site origin widgets bundle plugin if you haven't already go ahead and install it then save and reload the page so here you'll be able to start entering your content both text and images a shortcut to adding a widget is to right-click inside the column and then select it in the contextual menu if it's not there you can use the search another option is to just duplicate an existing widget so after adding some content this is what our page looks like if you want to change the positions of rows and widgets you can just pick them up and drag them now let's take a look at row and widget styles to access row styles click on the spanner icon that's above the row row styles are down here on the right attributes will make sense to you if you have some web development experience this section allows you to add classes to rows and cells and you can add some custom CSS that page builder applies to each row next we have the layout section that allows you to change some loud related values for a row you can set the margin below a given row the gutter which is the amount of space between columns in a row and the padding around the entire row using a space between two padding values allows you to have separate top/bottom padding' and side padding this feature can come in very handy the row layout value allows you to change how page border displays the row the options are standard full width and full with stretched forwards stretched just means that the content inside your row is stretched while in normal full width just the container is stretched using the design section you can change the background color and background image you can also choose how Page Boulder displays your background image the option a lot of people are interested in is parallax you have a similar set of options when editing a widget done on the right side is a set of widget styles attributes are the CSS related fields layout allows you to set widget padding in much the same way you did for rows that I want to show you is pre-built louts starting with page builder 2.2 there's now a full directory of layouts that you can easily import into your pages these are a great learning tool to get insight into how these pages are created or you can just use them as a shortcut to building your own derived pages so that broad overview should give you the basic understanding you need to create pages using site origin page builder all future learning you do will usually revolve around learning widgets and which ones to add to your pages to get the desired effects I hope you enjoy learning and building with site origin page builder and I hope to hear from you along the way my name is Greg from sight origin and this is site origin page builder thanks for watching.