How To Create A Custom Blog Post Template With Sidebar Using Oxygen Builder

hey what is up everybody for ritzy event Marciano here coming to you with another oxygen builder video tutorial you can follow me on Instagram and Twitter at BAM Marciano so in the last video tutorial I showed you how to create a custom blog index archives template in oxygen builder and so today we're gonna be building a custom blog post template using oxygen builder I have my old wireframe sketch template here which I created earlier just a rough sketch really and so we're gonna be building this in oxygen I hope you're enjoying the tutorials using oxygen builder if you have any questions or if there is a particular tutorial that you want me to create feel free to let me know you can leave me a comment on one of my videos or you can email me at fabric comm marciano dot-com ok guys so that is it let's dive straight to the screen and begin building our custom blogpost template hey guys welcome to the tutorial and so let's get started straight away with this as you can see here I have a demo WordPress website installation and I have oxygen builder installed this is the latest version 3.0 aught and so let's begin so the first thing I need to do here is go to templates under oxygen and add a new template add new template and we're going to call this blog post template in there under inherent design from other templates we're going to select main and then under singular we're gonna select posts okay and then we're going to hit publish and then we're going to click on edit with oxygen okay so now that we have our editor loaded let's begin building this board post templates the first thing I'm gonna do guys is go to structure and open up my structure panel because I like to see what I'm working on and then over here I'm going to click on add and let's begin with a section and then let's add a div and then let's add a column layout I'm gonna go for a 60-40 I'm gonna go to section here very quickly and open up this div I'm gonna give this div a width of 1120 like so let's open up the columns as well and on the right-hand column which is gonna be our sidebar this this area here I'm gonna change that to a width of 33% like so okay so let's go to the Left column which is going to have our content our blog content and we're going to go to add WordPress dynamic data and we're gonna start with the author credentials and then I'm going to go to add where is it title and then we're going to add a date followed by a featured image and then the content like so let's keep this fairly simple for the time being so yeah we have all the elements that we need for the main part of our content column and we'll come to this side bar in just a second so let's begin styling this now so I'm just having a quick look at my sketch my Y frame sketch that I created earlier that I showed you and so they start with the author name and let's make this go to advanced typography and let's change a few things here and it's how italic the font family I'm going to leave it is but I want to change the font size to maybe 14 pixels or maybe 15 pixels like so and then maybe change the color to a light grey like so for the headline I'm going to go and select Poppins because I love that font and font size have been increase that to maybe 50 pixels font weight I'm gonna go for 800 and I'm going to go to advanced here very quickly typography I'm going to adjust this line height to one point four or maybe two like so and then we get to the date here let's add a little bit of space between that and the featured image so we'll drag this down a little bit to maybe a margin of 20 pixels at the bottom here and so let's reduce that font size to the same as that one which I think was 14 pixels yep and then let's make that italics go to advanced typography italic like so we can come back to these later and make further adjustments but for now I'm just going to leave that as it is because I'm gonna add some extra stuff here such as social sharing and a author have't our image here if this featured image I'm gonna just go to advanced here and go to borders and add a border radius of about 5 pixels just to round them off like so and let's just save that very quickly as you can see it's already taking shape here but what I'd like to do now is add some extra things because it's looking a little bit bare so let's begin with this part here which is the meta area for our post so I'm going to go back to div and I'm gonna add another div so let's go all the way back here the basics add another div bring that up to here were below the heading and above the featured image like so and then I'm gonna drag this date inside of that div and I'm also going to add inside of this div a let's add a shortcode let's search for it short code like so and then I'm going to paste in here the short code to social warfare which is a social sharing plug-in which I have installed in this demo website so I'm just going to paste that like so as you can see it's appeared there nicely and now what I want to do is I want this to appear by the side of the publish date so I'm going to go back to this Dave here and I'm going to stack child elements horizontally like so then obviously these need to be aligned so let's vertical item alignment we're going to select middle which is kind of work so let's just go to this very quickly and check the spacing here oh yeah it's because we added a twenty pixel margin to separate the featured image so let's remove that very quickly like so and I'm gonna add a ten pixel margin on the right hand side here just to add a little bit of space between the social buttons and the date what I will also do come to think of it I'm gonna add another item here I'm gonna drop a text element and then I'm gonna have that text or by the side of the date here I'm just gonna click on this to edit it very quickly published on and let's just add a little bit of space here so we go to advanced size and spacing let's go for try five pixels yeah and then we're going to go to primary sorry advanced typography gonna reduce that to 15 pixels as well let's go for italic let's inherit yeah 15 pixels but let's make that bold as well so a good font weight let's try 600 okay now it's pretty cool published on July 27th yada yada yada yeah that looks pretty cool for now one last thing I want to do here is add a author Gravatar just maybe this side or here I'm not too sure we're at the moment but I'll do that next so let's go back to this div go back to ad and WordPress dynamic data and author avatar okay so yeah I don't have an image but I'll sort that out in just a second I'm just going to reduce that to maybe 100 pixels there it is 100 pixels let's try 70 I'm still a bit too big 40 pixels and 50 pixels yeah I can live with that let's go to advanced and add some spacing here a margin of 10 pixels and also I'm going to add a border of about 5 pixels maybe less than that for pixels and what I could actually do also is maybe reduce the width of the avatar itself so it kind of blends in with these social buttons not too sure if that's actually looking good let's try and reduce that size yeah that looks pretty cool but they noticed that there is a gap here so I'm gonna go to advanced size spacing let's try them - one pixel on the margin yeah that looks pretty lined up like so again I don't have any image there but I will go back into my settings and add an image so we can see what this looks like later on okay that looks pretty cool what I want to do is go back to the author name very quickly and add a little bit of space here maybe 10 pixels maybe a little bit more let's go 20 pixels I like to use a lot of space in my designs so yeah looks pretty good I'm looking at that - heading now maybe I should use something different so what can we do let's go back and select a different font maybe yeah I suppose that looks a little bit better maybe a reduced to 200 pixels no 300 yeah I wanted to go to advanced very quickly typography I'm gonna just capitalize the first letter like so one other thing I want to do very quickly as well is if I go to this text element and duplicate it I'm going to drag this one above here like so and I want to write in here written by and that we have the author name but we need this to be side by side so we need to add another div drag this Dave up here yeah like so and then place those items inside and then grab this Dave and then stack child elements horizontally like so let's make sure that we close the gap here and add a little bit of margin no actually yeah five pixels not much should do it I'm just gonna go back to this one and let's see what we can do here reduce that to five pixels or maybe six pixels save it and I think that is it I'm going to check the front end and hopefully it should be cool yeah that looks a lot better written by author name perhaps we need a little bit more space let's go to this live here and drag this down a little bit ten pixels save again like I said we could spend you know quite a bit of time making changes and editing in this part in that pipe but I don't want to be doing this otherwise I'll never finish it yeah it's looking good I think I'll leave it as that for the time being let me just refresh this one last time yeah that looks pretty cool okay so for the most part this area here is pretty much done now what I wanted to do here now is add some styling to the content here so this looks pretty boring what I want to do is add make this part turn this part into an intro section so I'm going to go to my style sheets here in oxygen I already have one created it's called demo and I'm going to add and intro and we're going to change a few things here so let's go to font size let's have a font size of 20 pixels so as you can see immediately that increases the font for the first paragraph and we're also gonna go font-style:italic like so this is kind of a trademark thing that I do it's not my thing but it's something that I've kind of adopted in doing and it's a great idea to kind of use an intro section for your board content in a way to get that your readers interested in reading your content and also the highlights and specific parts of your content okay so I'm happy with this maybe I'm going to change the color let's try a nine a nine eight nine yeah that's a little bit too light let's try a darker one so we'll go 6-0 6-0 6-0 yeah that looks pretty cool okay I'm happy with that what I also want to do is add a divider here and I'll show you what I mean by that if I go to one of my posts here scroll down as you can see I've got this little this nice little divider here so to say that a whole lot of time what I'm gonna do is just quickly inspect this one here and then go to this one I'm gonna copy literally the whole of this code that I'm using on my website go to my demo site here and I'm gonna paste this here and just change a few things so let's go red okay like so just to change the color dynamic a little bit although I use it read quite a bit you might have noticed so that's looking pretty cool what I might want to do here for the body text I might want to change the color to like gray rights so change the font size to 16 pixels or there abouts try 17 pixels and also it's got it advanced and add a line hi 2.2 and yeah I think we'll leave that as it is for now we can continue styling some of these other elements such as the bullet points and number list but what I want to do next is add some styling to this block quote and this is very easy to do so go back to my style sheet here demo let's go block quote we're gonna add a background color light gray like so as you can see that's applied here if I just collapse this editor so you can see it better you've got a nice light gray background but we want this four bits so we're gonna go margin I'm not padding:0 like so then we're gonna go padding I want what do I want 20 pixels at the top and bottom and let's say 50 pixels on each side like so and then I'm going to add a border hood border radius of 5 pixels oops we've made another mistake here border radius we're done oh yeah ok 5 pixels just added some rounded corners here and okay so we'll leave that as it is for now we could continue making some other changes for example we can add some style to this text here so let's just do that quickly let's go to font size let's go 20 pixels pixels like so let's try a different font maybe font family let's try Georgia like so and also font style I'm using very basic CSS here guys so you know you can do this yourself let's save that very quickly and let's go on the front end see what we've done and yeah as you can see that's looking pretty cool these buttons seem to shift this image to the right because obviously they expand there is a way to disable this from happening but I'm not worried about that right now but the rest of it is looking pretty cool but it's starting to look like a blog post now I'm going to just very quickly go back to the part here I'm gonna change this color I want to make this a little bit lighter so maybe let's try that and also no yeah we'll leave that as it is yeah okay just add a little bit more space here I think maybe five pixels safe okay guys so for the time me I'm just going to leave this content column alone we'll come back to it a bit later on for now I'm going to focus on this sidebar area here so let's begin customizing this part what I need to do is just go back to admin here let's go to plugins add new and I'm looking for the content of where sidebars plug in and see if I can find it here content aware sidebars unlimited widget areas I'm good to install this plug-in and what this will do is enable us to display custom sidebars and widgets literally in any post or page and it works quite well with oxygen and we'll just wait for that to install it's taking a little while and it's installed let's activate it and we'll need to set a new sidebar so let's go to add new skip we want to create a new sidebar so let's call that main sidebar action to replace yes target sidebar if don't need to worry about any of this merged position we'll leave that as it is for now and let's create now if we go to appearance and widgets we can add a few things to this sidebar [Music] so that is fine let's go back to oxygen and templates and blog post template there is a more in-depth video on how to use the content aware sidebars plug-in I will include a link to that video so you can check it out for yourself okay so now we can go to our sidebar here let's open the pill structure panel so our sidebar here which is empty at the moment so we need to go and add a widget which is the sidebars and the main sidebar that we created using the content aware sidebars let's drop that straight into here as you can see it's included the two widgets that we created earlier one of our special offer and one for our top posts the latest blog post here and now what we can do is actually customize this using some simple CSS so let's just grab this ID here if I can select it yeah there it is let's go to our style sheets demo so let's add the hashtag followed by the ID and ul L I so let's get rid of bullet points so list-style:none okay I want to get rid of this gap here so let's refresh this page very quickly and use our inspection tool to have a look what we have going on here so we need 2 UL okay so just very quickly I'm gonna add ul and Li okay so I was able to get rid of the bullet points altogether by removing the Neela style and margins and padding's for the entire unordered listing and lists here and that seems to have solved the problem so I'm quite happy with this we can with this I'm going to go to appearance widgets I'm gonna add another widget here so I might add something like an image for example let's add this image to the sidebar and might drag that to the top like so and then let's add a placeholder image is one I created earlier and save this could be a conversion feature and then we can add a link to this image here maybe to a landing page or wherever but for now we'll just leave that as it is let's go and refresh and yeah that looks pretty cool of course we could always get rid of this title here and try and keep things a little bit cleaner refresh yeah that looks better now we have the problem of everything looking quite tightly packed together so what I wanted to do is add some spacing between each of these widgets and just having a quick look to see where we are here here we go down here I'm gonna add dot widget title margin top 40 pixels that's a little bit better save that collapse this and yeah that's much better there's a lot more space between here maybe that's a little bit too much let's try 30 pixels yeah save that okay so what we can also do is customize these headings as well let's change that to font family you can go open sans for example font weight you could go watch Lina's drive 300 none of the ideas come to mind here we could add a nice background to these titles so let's go maybe like so and then padding girl left 10 pixels and let's go margin bottom 10 pixels just giving an example of how you can customize these elements let's also have a border radius to keep things consistent here five pixels maybe yeah like so okay I'm gonna save that and I'm gonna leave that as it is for now obviously if I wanted to add more elements here I would just do it the conventional way go to appearance widgets and add in drop any widgets I wanted here and then obviously customized them using my own custom CSS or just leave it as it is right let's go back to this section here guys we're going to add a simple list of comments and a comment section as well so we'll do that next with our a custom blog post template layout here just looking at this sidebar here I'm going to resize this if I go back to structure section dev columns it's this one no it's this one I'm gonna reduce that to maybe 29% see what that does yeah just to give this a little bit more space here and also make this a little bit narrower save that and let's continue okay guys so let's get straight on with this and so the first thing I'll need to do to create our comment section below here let's open up our structure panel and open up the section div columns let's find the content column which is this one here open that one up and so we want our comments list to appear here as well as our comment form so I'm gonna go over to add WordPress and then here we have comments list so let's add that one first and as you can see it's appeared here we don't have any comments but we'll create a few in just a second I'm also going to go back to div here and add a comment form ah so here we go comment form like so right oh so let's save this very quickly and let's go back to the front end here and refresh and hopefully our comment form will be there here we are now let's create a few fake comments so you can see we have some fake comments now but the layout and styling is very very basic but we'll customize that in just a second so let's go back to our editor here and let's refresh very quickly let's scroll back down yeah here we are let's open up our structure panel again and find the div for the comment which is here comment form and comment list so the first thing we're gonna do is customize the comment list a little bit maybe the Gravatar resize that and have some nice : edges resize the comment content the the text area maybe the links as well and maybe add a nice soft grey background with some round edges just to define some of these comments okay so I'll do that next just very quickly one of the simplest way to customize this is if we select the comment list and under load preset template we have the default loaded but we can select one of these two others here gray highlight will change some of these elements or we have a white box so if we select that again that changed current style similar to what I was suggesting earlier having a gray background here etc but what we'll do for the sake of this tutorial if I just go back to commas list and find a preset and use the default because I want to customize this using my own CSS etc okay so we'll go to templates templates CSS and begin writing some CSS to style this so what I want to do first of all if I just go template PHP let's start with the comments title I'm just gonna grab this class copy it collapse editor let's go back here then play CSS let's resize this because it's a little bit too big so let's go font size 26 Alachua let's try 18 pixels so apply code and as you can see it kind of disappeared there for a second but it's it's seems to reappeared we've resized that but if that's a little bit too small let's try 22 pixels yeah still a little bit too small let's try 24 yeah that's a that looks fine just gonna remove this very quickly can't remember how big it was before copy yeah that was quite big so this paste that back in font size yeah we're happy with this let's go to font family poppings or what did we used for these I think this was something else entirely cannot remember source sans pro that's what it was so let's go back here source sans bro apply code like so and we also want to change the font oh let's put this under here keep it relatively nice and organized font weight let's go 400 apply code it's quite annoying that you have to keep pressing Apple I code it would be quite nice if there was a feature in oxygen where it would just automatically update sort of you know like in real time but never mind it doesn't matter right so yeah that's looking a bit better we've changed this heading let's go back to PHP here and pick something else comments less class do what I want to do is change the author avatar make it a little bit rounder so maybe if we use our inspection tool here we can find out what this is moxie comments I think this is the ones just grab this go back to our CSS file here custom template CSS let's place that right there and let's go border-radius five pixels apply code and it's clapface as you can see it's added a nice kind of rounded corner we've got also resize this I think if we try and do use something like what do we do let's try width 40 pixels height as well 40 pixels yeah that's kind of made it a little bit smaller which I'm happy with let's maybe reduce that to 3 pixels for the border radius yeah that looks pretty cool okay we'll leave that as it is let's go back to our inspection tool here and look at the background so we've got comment body it's the class I think let's go doc comment background let's use a light grey apply yeah as you can see it's added a nice subtle light grey background but too we also want some margin no not margin padding let's go 20 pixels on top and 50 pixels on the sides yeah that looks pretty cool and I think we'll leave that as it is oh let's add a border radius of 5 pixels again guys I'm just using very simple basic no-brainer CSS here stuff that you'll be able to do yourself just to style some of these elements here it looks pretty cool and so we also want to what do we want to do I'm going to find the what is this oxy test 2 class F n FN must add some styling to the officer name so let's go font-family we'll leave that as it is font style for the sake of it let's make it italic that didn't work because we spelled Italian roll it like very good that looks pretty cool and we'll leave that as it is from now these links here we can obviously change again using some simple CSS that's fine the classes for these they are comment meta data pretty straightforward stuff so let's go not comment meta de car color grey that's all let's try 6/0 6/0 6/0 apply code oops we've got the here we go let's also remove the text decoration we don't want the underline apply removes the underline and we also want a nice hover effect on change so what we'll do actually will change the we'll change the color of this make it a little bit lighter so let's go back to our inspection tour here select this has it come up here here we go so I'm just gonna have a quick look here we go let's try gray something like this yeah that looks pretty cool so let's copy this hex code here go back to oxygen and we'll paste that here because we like that apply code yeah that looks pretty cool and finally let's change the body text here the comment so again let's go back news our inspection tool very useful this tool here in Google Chrome so let's have a look we've got paragraph but it is a comment content let's go here doc the comment content font family I'm gonna use something different let's go for open sans apply like so and let's go font size 16 pixels apply yeah let's change thief actually make it 17 pixels yeah that looks nice I'm gonna leave that as it is for now the next part that I'm going to customize is this reply here let's have a quick look actually let's save this very quickly let's let's hit refresh on the front-end and yeah it's looking nice okay so let's use our inspection tool again and identify this comment reply link yeah comment reply link so go back to our CSS file here not comment oops reply link what can we do here so first of all let's change the color of the link to white and then let's remove the text decoration and let's also add a background color what can we use let's go back here we'll stay with the red so we'll just copy this one here copy paste it like so and also let's add a padding of hmm 10 pixels at the top and maybe 20 pixels besides apply see what that does yeah that looks pretty good a little bit too big though let's go for five and ten yeah much better and obviously let's add a border radius we love our border radius four pixels yeah that looks super cool umm what else can we do let's change the hover effect here a little bit so we're gonna do not comment reply link hover let's add just change the color too let's keep it as white not too sure if that will work yeah so it's no longer turning dark when you hover on that it stays white next we want to change the background color let's keep this fairly basics of 6/0 6/0 6/0 apply to make it too dark gray on the hover yeah that looks good now let's add a transition transition all 1.2 seconds apply code yeah that looks pretty cool and let's reduce actually not put two seconds apply yeah that's a bit better okay let's save that and refresh the front page see what we have done so far on our comment list styling and yeah that looks pretty cool again keeping this very very basic guys not getting too technical with it so yeah I'm happy with that so I guess the next part for me to do here is to style this comic fall so let's do that next a writer guys so let's click on this comment form and begin customizing this and we do have some options to customize various things unlike the comment list where we didn't just go back and show you but here if we click on the comment form you can see here in the structure panel we have some form field options customization options for border text even the buttons submit so we'll take advantage of this now and let's change the border color to maybe a light gray like so as you can see that's changed there and also the text color will go a kind of dark gray because I think the text let's let's check that yeah it's changing colors there is gonna seem so nice light gray will do for that one as well keep it nice and subtle okay so that's cool border radius for the field I guess would be 5 pixels and now the buttons submit let's go for read I can't remember the code for it let's go back and inspect ff3 bf3 copy this paste it in here won't forget the hash yeah okay like so and text color will leave it as white all right that looks good let's say this the only thing is I don't like the color of these so we'll change that and also let's reduce the font size of this leave a reply heading here so to do this let's go back to the front end and refresh this wear it quickly use our inspection tool to look at this comment form comment reply title nice copy that let us go to right there's no CSS field for this what we'll do is let's go back out of this let's use our style sheet and here we can just add a little comment so we know what this piece of code is for styling of comment form this is a little bit untidy guys but you know for the sake of this tutorial it really doesn't matter but when I'm working on on client projects obviously I do pay a little more attention to detail in terms of writing clean code and organizing my code as well right so let's paste this here and expand this again what can we do here let's change the color to 6/0 6/0 6/0 not too sure why I did that but the color was fine wasn't it nevermind a font size font family sorry open sans yeah and then font weight 400 yeah that's nice and yeah we'll leave that as it is oh yeah we want to reduce the font size as well on size 20 pixels nope way too small 24 pixels okay that's fine let's save that and let's get read of the exchange the color of this as well did I have I had this earlier didn't I logged in as yeah I think that is the class for this vlog impasses go here color to gray as well like so and let's remove the text decoration need some space here text-decoration:none this is happening in real time which is cool when you're working with the stylesheet in oxygen however if you using elements and you're customizing any CSS templates it doesn't the changes doesn't happen in real time but for the main stylesheet it does so which is great ok let's save that if I haven't already done so and yeah I'm gonna leave the rest as it is the only other thing I wanted to do now is resize this button because I think it's a little bit too wide let's just test a little piece of code here so let's go width let's go 50% see what that does yeah it was good 40% yeah we'll try that so let's grab this ID here I don't think it's got a input name type class submit well nevermind we'll just use this with 40% like so save collapse editor and I'm gonna leave it as that I think that's looking pretty cool I'm happy with this for the most part I could carry on and resize this button make it smaller but you know what I think it looks perfectly fine as it is and there it is guys let's refresh this page one last time here and let's look at what we've created a very simple clean nice-looking blogpost template using oxygen builder we have our heading author published on social buttons or Gravatar here a nice column section for our content comments and comment form and a simple sidebar with some elements here obviously I could continue working on this I could spend another hour or so customizing this maybe changing some of these elements and the colors of these links maybe add some dividers or tarnishing to a list style one more thing very quickly if you want to check out my blog at magnet for blogging dot net now go over to my blog and check out what my blog posts I completely redesigned my blog my website with oxygen builder just take a look at my blog post template and pick some ideas from it you'll see that I spent quite a bit of time customizing this for myself and you know sort of every aspect from the heading to the metadata to a nice first paragraph intro section the little divider that we used in a demo here but you know these links as well or all customized here we have a nice numbered list customized again using oxygen builder and nice bullet points here but yeah just take a look pick some ideas and inspiration I have a block code here with a little icon there and at the bottom of the my post I have this nice call-to-action box again which I built using oxygen to do this guy's I use the modal feature in oxygen I will create a separate tutorial to show you how you can do this for your own website your own blog in the future but yeah in a nutshell that is it we're done I think it looks fine and I hope you like it guys and I hope you enjoyed this little tutorial Cheers so there you have it guys I hope you enjoyed this video tutorial if you did please give it a thumbs up again if you have any questions please feel free to leave them in the comment section below I'll try and answer them the best I can if you want to learn more about oxygen I will have a link in the description and if you want to check out some of my other tutorial videos please feel free to do so if you're not already subscribed you know what you've got to do hit that subscribe button and also the notification about to get updates when I release new videos if you want to learn more about what I do head over to my website ad for Britt's here when Marciano dot-com I also have a patreon account I will have the link below if you want to head over there and become a patreon and support me and my work I really appreciate you guys and that's it until the next video guys take it easy and beast Cheers

Channel: Fabrizio Van Marciano

Views: 10,448

Keywords: wordpress tutorials, web design tutorials, create a blog template, blog post template, oxygen builder tutorial, how to, page builder tutorial, website builder tutorial, wordpress tips, wordpress hacks, custom website, custom blog design, custom blog post

Id: wBtYHEmn5a4

Length: 43min 41sec (2621 seconds)

Published: Fri Sep 06 2019