SiteOrigin Page Builder – How to use SiteOrigin Page Builder to build a WordPress Website Part 1

SiteOrigin Page Builder – How to use SiteOrigin Page Builder to build a WordPress Website Part 1

July 12, 2019 3 By Bernardo Ryan



hey youtubers it's Alex so the video you're about to watch is the first of two videos where I show you how to build a one-page website using a powerful page builder plug-in called the site origin page builder plug-in now this tutorial is actually a part of a course that I teach online the name of the course is the ultimate WordPress bootcamp build monthly web sites using WordPress now in this course I'm going to show you how to build different kinds of websites using WordPress I'll show you how to build a blog a business website a website for charity a job order website and even a freaking social networking site using the WordPress this course has over 11 hours of content and by the end of the course you'll have all the skills and experience necessary to build any kind of website that you have in mind using WordPress now if this sounds interesting to you I'm gonna make it even more interesting because I'm gonna give you a discount normally the course sells for 50 bucks but I'm gonna add a coupon code and a link in the description box below where you can get the cost for 35 bucks so that's $15 off the course that has over 11 hours of content just waiting for you to the door so I hope you sign up for the course but I also hope you enjoy this tutorial if you have any questions or comments we got in the course or this particular tutorial put them in the comment section below and I'll be sure to answer them so I hope you enjoyed the tutorial and I will see you next time bye for now building a one page website now the website is gonna be for an event called what press conference 2016 how original so we're gonna be using it a theme called as I said origin or theme and we're gonna be using a plug-in called the site origin page builder plug-in and with this plugin we're gonna build out several sections for our website we'll have a section for our video a section for introductory text a section for instructors that will be presenting the way this conference another section that will contain a gallery of pictures from previous conferences and of course a pricing table showcasing some of the packages that will be made available in the conference testimonials from previous attendees and last but not least we're gonna have a section that will have an address showing the physical location of the conference so if you're interested in building out this website along with me you can always use this video as a reference to see what we're gonna be building in the next class so the very first class we're going to add a role for our video and then the next class we will of course add our introductory text followed by the next class we will add the role for instructors and so on and so forth so basically we're going to start from the very top here where we're building out our video role and of course we'll Randall by adding a Google map showcasing the physical location of our conference so if you're ready let's get started join me in the next class we will start building out our one-page website thank you for watching right so the first thing I'm gonna do is I'm going to install the page builder plug-in by site origin this is the back end of our website even the task upda dot-com and as you can see this is a very first installation of WordPress I haven't installed any themes or any plugins this is just a very fresh installation so I'm gonna come down to plugins add new and I'm just gonna search for the page builder plug-in and let's go with site origin enter and right so as you can see it's by site origin over 900,000 plus active installs this is a pretty good plugin I'm just go ahead and install that activate alright awesome so once you've activated the plug-in if you come down to settings you'll see the page builder tab right here so let's take a look at that and it's what we have alright so first things first you have the post types you here you can choose what kind of post types you'd like to be able to use page builder on our pages and posts are the two default per staff that we have with WordPress so if you if you don't want to use page builder on either one of these you can simply uncheck but I'm just gonna leave both checked as they are it's fine let's come down to widgets you don't have to do anything over here unless of course you have a very specific goal that you're trying to achieve pretty much what you have here has been set up for you already let's go down to layout and now over here this is a very very important tab first of all we have the responsive layout and it's enabled basically there's possibly out refers to how your website is gonna look like on a mobile device and obviously due to the change in the screen size you can compare the screen size of your mobile phone to that of your computer your website will have to look a little bit differently when it comes to the responsive layout so side the side origin page where the plug-in actually offers the ability to format your website on a responsive view automatically so you can either choose to leave it as it is enabled or you can choose to disable the responsive layout and then add your own designs but all strongly recommend that you live it enabled I would also recommend that you check the use table layout as well because again table devices have different screen sizes for mobile devices so you pretty much want to make sure that your website looks good regardless of what device it's been viewed on whether it's a computer whether it's a tablet or whether it's a mobile phone all right now over here tablet with a noble with you can choose to set at what size you would like to activate either they tablet with automobile with now again unless you know exactly what it is that you're doing if you have any experience working with CSS I would recommend that you don't change either one of these valves because these are pretty much safe and standard values that you have for the tablet with and mobile with just leave them as they are okay all right now we have the roll bottom margin and this simply refers to the space and bottom space in between rows we might change this as we go along if we find out that margins between our laws is a bit too much we can come down here and reduce the size all we can as well also increase the size from 30 to 37 or just simply bring it down to 25 for example but let's leave it back at 30 now the last word we can also choose to allow our last show to have a margin as well from the footer of our website so let's go ahead and check that now Ogata simply refers to the spacing between columns in each role and again the default is 30 and we're gonna leave it as it is if we would like to reduce the space maybe increase the space as we go on we'll come back here to change that now last but not least we have the full width container is set to body and this is pretty much a very safe value again now unless you know what it is that you're doing if you have an expense with CSS I would recommend that you just leave it as it is just leave it on the body and we will explain this full width container as we go along all right so let's come out to content which pretty much nothing here just leave this as as it is enabled all right so that's pretty much the initial setup for the site origin page builder plug-in join me in the next class where we will delve a little bit deeper into the plugin thank you for watching so now that we've installed the page builder plug-in the next step is to try and create a page so I'm just come down here to all pages click add new and the way the page builder plug-in works is you'd have to click on this tab right here that says page builder so let me take that and now we are in the page builder plug-in editor mode and the way the page builder plug-in works is you will typically add a role and then once you add a role you can choose to determine how many columns you'd like in that role and once you've determined that you cannot begin adding widgets so over here them just give you a very quick example i'm gonna click add row and now over here we have a row that has two columns by default you can see the row layout of hey that says – i can change the two one so it's the entire we have just one column inside the entire role or I could go up to let's say three for example and then have three columns that all have the same size speaking of size I can change the size of each column by changing this tab over here we have the one that says even one I can change it to let's say golden for example and now you can see the very first column has 50% of the entire width of the column of the row the second column has 30% while the last column has just 19.1% again you can play around with all these values just to see how they all look like you can see for example Tryon has the very first column will have a massive amount of the width with the very last column having just two percent let's play around again let's say heck 10 oh it's a head ton seems to be a little bit more even out except the first column is big the second column is a bit a little bit small while the third column is of course the smallest and then of course you can change the sizes of these columns by changing the last tab here that says left to right you can go right to left so that in this case it's the first column that's the smallest and then going higher and higher in terms of the size of the width so that's pretty much how to play around with the rows and the columns so let's just go back to one row make that even of course let's insert that now from here we can now choose to add widgets into our role now if I click on add widget over here we have the widgets that have come by default with the site origin plug-in or we can choose two other archives we can choose to add a search button for example we can add an image slider features and so on and so forth however we can install an additional plug-in that has a lot more widgets than what we see over here so what I'm gonna do is I'm just gonna close this out come down to plugins let me just open it open this in a new tab what I'm gonna do is I'm gonna search for a plug-in called that's a site origin widgets bundle press enter and as you can see we have it over here and it's by site origin make sure you install the one that's by site origin because over here you can see we have other ones which is for site origin by W pinked you've got another one here by ingenious solution just install the one that's by side ok side origin widgets bundle let's install that and then activate and now once I've activated over here you would see the tab that say set origin widgets let's click on that and now over here you can see we have all the widgets that we can actually use with our page builder plug-in you can see the ones that are active and the ones that are not yet active so by installing and activating this site origin with it's bundled plug-in we can now choose to activate a call-to-action button that we can use a contact form headline here image features I can let's just go ahead and activate every single widget let's let's activate image grid the icon as well it's social media buttons simple mr. layout price table testimonials and of course video player so these are all the widgets that we have available that we can use to build out a one page website so go ahead install the salad widgets bundle activate all the widgets and join me in the next class web would install and activate a particular thing called the site origin north theme that we're going to use with the page builder plugin thank you for watching the guys who developed the page builder plugin is that they also developed their own theme that works beautifully with the page builder plug-in and this thing is called a site origin north theme which I'm just going to go ahead and install right now such themes site origin north and it's over here so I dodged North just gonna go ahead and install that and then activate now once that's activated you have the about side origin north tab over here which I'm gonna click on and over here they've got some very nice messages for us they say it's gonna be free forever and we'll continue developing and enhancing it for years to come so thank you very much site origin North developers and as you can see North integrates beautifully with our free page builder plugin this powerful plugin gives you full drag-and-drop capabilities right inside north and you may have noticed that there is also a home page tab that we have over here so I'm just gonna click that and I'm just gonna in case yours isn't on make sure it's on over here just tap the button to make it on and this is pretty much the page we're gonna be building out our entire website so whenever anyone visits our website this is the page that will be loaded so before I close this video I need to point out that the page builder plug-in isn't exclusive to the site origin or theme you can use the plug-in with other themes as well and you can also use the site origin or theme with all the plugins as well for me it just makes sense to use at the same theme all right I used a plugin and a theme together that's been developed by the same developers that just makes more sense to me so thank you for watching the video go ahead install an activator set original theme turn on the custom home page and join me in the next class developer would begin to build out our warm page web site thank you for watching all right so here's a look at our front page and as you can see we have absolutely nothing so let's change that by eye then a video of our event and I'm actually gonna paste this video it's the Austrian economics research conference I know this has nothing to do with WordPress but we're just gonna use this video as a sample okay so I've got YouTube open and it's the videos called the Austrian economics research conference and this is also a free video that you can actually use under the Creative Commons section basically so alright let's just come down here click Edit homepage so what we're gonna do is we're going to add this video to a home page and I am going to click widget to begin with let's just go ahead and add a widget and what we're looking for is the site origin video player as you can see over here I'm just gonna click that now awesome so now we've got our site origin video player widget inside our role now over here to the right you can see we have the edit button so I'm gonna click on that and now over here we can choose to add a title if we want to which I'm just gonna ignore please don't need a title for the video and we have a video location we can either choose self-hosted external externally hosted now self hosted obviously if we have the video in our media library we don't so we're going with externally hosted and now it's asking for a URL so I'm just gonna copy this come back down here paste and then we can choose to set DVD to autoplay as soon as our page loads which I'm just gonna leave it unchecked let let the user click on the video of in order for it to play so let's just click done save the home page and let's view the page and see what we have alright not bad we have the video you click the play button and it plays that's awesome the problem here though is that this video is not extending to the full width of our browser so we wanted to go all the way to the full width so what I'm gonna do is I'm gonna come back I'm gonna click edit homepage I'm gonna come down here to our role and over here you can see we have the icon of a spanner hover over that and then click Edit role now what I'm going to do is I'm gonna click on layout and then from layout we have three options for standard full width and then fool with stretched now in most cases standard and full width will be of the with let's take a look at that again I'm just closed this let me open this in a new page in a new page let's just save that guy and I'm just right click open there's a new page in a new tab all right now you can see this from my blog to you the search button this is the full width of our container okay now standard and full width will typically have the same width size it really all depends on the kind of widget that you walk in with if it's a video widget the standard and the full width will be of the same size if you're working with a different widget like let's say an image widget the standard size of the image widget might be let's say a third of what we have here so if you change that to fool with it will stretch that image all the way to the width of the container however in this case we would like to stretch our video beyond this container and all to the very edges of our browser so what we're gonna do is we're gonna change the layout from standard all the way to fool with stretched okay let's check that click done save the home page let's come back here let's refresh the page and now you can see it going all the way to the very edges of our browser awesome however there is a slight problem though this video is way too tall for my liking now this is of course very subjective if you are the type of person who likes your videos being very big and large then by all means you don't have to take the next steps this is just fine however I would like my own video to stretch all the way to the edges of the browser but also have a very specific height and not this full this sort of full high that we have this is way too big for my liking the problem though is that if I click Edit on the site origin video player column and it over here there is no option over here to check or to set the height for our column for our video player so what I'm gonna do is I'm gonna play a little trick okay let's close this watch what I'm gonna do I'm gonna add another widget and this time I'm gonna add a text just a simple text ability text or HTML widget let's add that so now we have that underneath the set origin video player and from here I'm just gonna click Edit so what I'm gonna do is I'm gonna come down here to this video click Share click embed and I'm gonna copy this embed code copy this come back down here right-click and then paste it over here click done let's save the home page let's come back let's refresh and that's what we have all right so now we have the first video and then we have a second video which is this exact same size as the first video but we're gonna change that now over here I'm gonna click edit again now the advantage of embedding our video from YouTube this way is that it gives us the ability to change the height and even change the width of our video if you want you however the reason why our video is so tall is because we've told our page builder plug-in to stretch the contents of this roll onto the very ends of our browser now if you look over here we have a default width of 560 and a default height of 315 there isn't that much difference between the two so what happened is as the page builder plug-in is stretching the width of our video it's also simultaneously stretching the height of our video to match the change in the width as well so changing the way from 560 to let's say 2000 pixels will result in the height being somewhere around let's say 700 pixels and that's exactly why we have our video here being so tall so in order to change that in order to sort of trick or plugin what we're going to do is we're going to change our width from 560 – let's say 1000 so now there is a massive difference between the width and the height so let's go ahead change that click done click Save homepage come back with fresh and now you can see the massive difference between the two over here we have a full width with a full height but then over here we have a full width but the height has been adjusted accordingly to match the difference that we changed over here when we changed the width for us was it 515 or 550 I came here by now but we change that's 1000 so that's why there is now a difference between both videos that we have so that's awesome them just click down here let me just remove our first column here by clicking the delete button let's save that let's come back let's refresh the page and voila we have our video with a set height and the width going all the way to the edges of a browser so thank you for watching the video if you have any questions of course feel free to put them in the question or write in the comment section join me in the next class where we will add our text box and some text thank you for watching ok so the next thing we're gonna do is to add some sort of headline that says welcome to the word press conference 2016 or something like that and we're gonna add that just below our video so I'm just come down to my edit page what I'm gonna do it now is to add another role and we're gonna go with one column this time around insert and I'm gonna add a widget and I'm going to add the side origin headline widget just click that so we've got a headline now I'm gonna click edit so the text is going to be lets say in capital letters welcome to the word press conference 2016 conference as an e alright so welcome to the word press conference 2016 now we can choose the kind of tags we want to attach to our headline let's just stick with the h1 tag for the theme I actually want to use a particular thing called a bun to open to let's go it went to 700 now in case you are wondering why we have put in 700 500 300 and the same also for other themes as well these numbers simply refers to the weight of that particular style or the other or that particular variation of the theme so the higher value you have the thicker or the bolder the theme is so obviously not Italian with 900 will be a lot bolder than title and web 700 for example so due to the fact that this is a header I'd like mine to be bold so I'm gonna go with the Ubuntu 700 color color let's just leave that as it is align it to the centre that's fine and that's okay let's let's do that that's done let's save the home page let's see how this looks like let's refresh okay welcome to the world press conference 2016 that's fine now we're gonna add some text just to briefly describe the event and because I'm so lazy when it comes to crafting up text for our websites I'm just gonna use this website here called love and Epsom and I'm just going to grab some of this text right here just grab this first paragraph copy that come back and with this goal being selected I'm gonna add another widget and we're going to add the site origin edit tool widget this time around let's add that let's click Edit I'm just gonna like click here and I'm going to hey sternum just use ctrl V to paste that and I'm going to align everything as well just copy everything and I'm to learn into the center and over here by the way we can do some additional tips we can add some padding we can add some background color Berger an image or we can change the color of our phones if you wanted to as well we'll walk more with these in a little classes for now but for now let's just click done let's save the homepage let's come back let's refresh and okay so welcome to the wordpress confess 2016 and we've got sort of a brief description of the event and this looks fine but what I want to do is to actually change these font family this by default that things should be joyed or something like that let's change this to the Ubuntu as well and what I'm gonna do is in fact I would like we want it to be the default font theme for our website so in order to do that I'm quickly gonna come down to my customize over here click customize and here we're gonna customize our site origin north theme we're gonna change the font settings alright so here here we forgot the theme settings let me click that and every who have got fonts all right say say its main funds used in your site I'm just gonna click on this and let's search for bunt you with a you boom – boom – oh okay awesome I'm just select that the variance should be regular that's the very end that's it's fine and the headings as well as just changes to point two as well or bone to they are you open to okay awesome bun – and for the head ends I'm just gonna go with 700 to make them bold details as well let's just go with the bun – again and let's just leave that a regular awesome so I'm just saving publish I'm close this and let's go back let's refresh and now we've got a bunch of text we've got our headline we have a little bit of a description about the main event and that's pretty much how to add text blocks to our one-page website so join me in the next class where we will add another section for our instructors thank you for watching in this video we're going to add a new section of a new role that will showcase let's say three instructors that will be talking or that will be presenting during this conference we're going to upload pictures of them and also a short bio to go along with their profile picture and we're also going to add like a like a short headline that says something like our instructors and then just beneath that head then we'll have the instructors showing up I just give you a heads up I have uploaded a few images to my media library and we'll be using some of these images for instructors and also for the gallery that we're going to be creating probably in the next video so I'm just closed this come back to my home page alright so let's go ahead and create our you know for our instructors and the first we're going to do is to add a headline widget so what I'm gonna do is I'm gonna add a new role to make that one column let me insert that and you can drag and drop those two out of a position that you want them to be and all you have to do is to click on this icon over here and then just click and then drag so we want that to appear just underneath our headline and intro text and another thing we can do is we can duplicate widgets so rather than me creating a whole new hojun headline which is I can just duplicate the one that we already have over here and I can do that by simply clicking to the duplicate button which i'm gonna click click now and then once I've duplicated that I'm just gonna drag this headline widget down to a new role and then all I have to do now is just to change the text that we have here to our instructors let's make that whole capital letters instructors h1 700 all right let's just click done let's save the home page let's see what it looks like it's refresh all right awesome so our instructors all right awesome so next we're gonna do is to add the profile pictures and a short bio of our three instructors so I'm gonna create a new role and in this case since we're gonna be adding three profiles for three instructors we're gonna make this of three columns so let me just make this three columns make sure they're all all have the same size click insert let's drag this row down here what I'm gonna do is I'm going to click on the very first column and I'm gonna add a new widget for the site origin image over here it's a simple image widget with massive power so I'm gonna click on that and then I'm gonna click on edit to add the profile picture of our first instructor I'm gonna go choose media and I'm going to choose this fellow here with the tie he looks he looks instructive enough click set media and but the benefit of a hindsight I did know that the image size would be medium medium is just the best size that fits this particular image and also fits the three column structure that I'm going with image alignment I'm just gonna leave that on default title text I can choose to add the name of our instructor over here but it actually doesn't look because I've already tried this before there's just a bit too much space between the profile image and the title text so we'll add the instructors name in another widget in a short while alternative text well we can choose to add some alternate text if we would like to destination URL in case the image is clicked it might take them to another page so just in case you'd like to link your images to maybe external websites or maybe another page somewhere else you can easily add the URL here and once that's clicked you can choose to have the image open in a new window so you can just tick this box over here now bound make sure the image doesn't extend beyond its container we don't want that so yes let's pound it and also let's make sure that's full width which means that the image will fit its container size and the container being the specific column in which this image has been put in so let's click done for that so we have a first image sometimes gonna duplicate this again just drag the image over here duplicate here again and then drag it over here so this is a very quick way of working with the page builder plugin simply duplicate widgets and columns that you've already walked in and then simply change the contents of each individual widget so let's change this image over here from this guy from this dude's you this lady over here she looks happy enough let's set the media over there click done and let's change the last one too I fell over here it looks it looks like a very interesting instructor I said media let's click done all right let's save the homepage let's see what we have let's refresh and as you can see we have our profile images for our instructors awesome so the next we're going to do is we're going to add some short text add the names of our instructors as well as a short buy for each one of them so let's come back down here what I'm gonna do is add a new widget and this time is gonna be the site origin edit all I'm gonna click that I'm just drag this on the death of our first column click Edit and here I'm going to type in let's go with the name of my instructor which will be Robb Stark and some text Rob has been teaching oops web has been teaching WordPress for the last 15 years and has built several hundreds of websites using the CMS okay that's uh that's okay I'm just gonna align all this to the center and we're gonna make up stock let's make this actually an h3 make it a bit bigger and bolder than the rest of the text so let's click done I'm just gonna duplicate this duplicate that again let's track this over here they track this to the very last there the last column and I'm just gonna change them just change the name for now I'll change other text later like I'm just change something for now let's go with my Gary Tyrell I think that's how it's spelled okay well okay let's go done and I'm gonna change the name here as well let's go with Tyrion Lannister and a big thumbs up to you if you know who these people are all these names I'm all those names I'm crafting if you know who these characters are thumbs up to you click done let's save a homepage and let's see what we have fresh and there you go we have our instructors the names and a short bio of each one of them alright awesome now one question that you may have is well why didn't I add the names of my instructors as the title of our site origin editor instead rather than having them inside the content area well add in the titles rather add in the names of instructors as the title of our editor gives us less flexibility because first of all we would not be able to align the name at the center of a text of us text column and then secondly we wouldn't be able to assign it as a header so that's just one thing that you know this is some of the issues that we face as web developers sometimes as what press developers you have to be very flexible and you know how you know you need to know how to navigate your way around certain issues so rather than using the names of instructors as the titles of our set origin editors we can simply add the name inside a content area then simply format the names as we wish you just give us gives awesome more flexibility so that's why I decided to have the names inside our text editor alright so that's pretty much it for this video we've added our instructors headline their profile pictures the names of instructors as well as it should bio join me in the next video where we'll add our gallery thank you for watching alright so next up on our plate would be to add a gallery of images and of course a very common feature which you would find on one-page websites involving conferences of advance or spotting competitions or stuff like that you typically find pictures of previous events pictures of the location of the guest speakers and so on and so forth so let's go ahead and create something very similar let's come back to the back end and I'm gonna add a new role make that one column for our headline I'll just drag this down here all right I'm just duplicate a headline over here drag it to a new role let me just change this text to gallery gallery let's make that capsule that says gallery let's click done and I'm gonna do is add a new widget and it's gonna going to be the site origins simple masonry which is the one we have over here I'm just gonna add that let's go ahead click Edit and now here I have the opportunity to add images so let me just go ahead instead add in the images once you click add you have the drop down button here but what you can use to choose your media so I'm just gonna go ahead and add a very first image let's just go with this one set the media and just like in Excel you can choose to change the column span or the row span of each individual column or in this case I'm just gonna leave it at one one as it is close that add a new image let's go with this one over here set the media let's add a new image again I'm just gonna choose this one over here so we're gonna pause the video for now and I'm gonna add six more images and pretty much the same fashion alright I'm back and as you can see F added nine images ain't so from here now we have three different layouts which we can modify one for the desktop tablet and mobile for the next up I'm gonna change the number of columns from 4 to 3 so we have it's gonna be more like a 3×3 row a column we're gonna have 3 columns and 3 rows well hide just in livin' 0 the gutter space between the images I'm just gonna leave it at 0 as well and for the tablet it's set at 2 columns which is fine I think and then for the mobile layout it's just one column which it's just fine as it is that's perfect so I'm just gonna click done and save the home page so fresh and there you go we have our gallery with our images awesome so that's how to add a gallery using the site page builder plugin so gem in the next class where we'll add some more contents to our home page thank you for watching