Introduction to creating Oxygen Builder Templates, nested Inner Content & useful pro tips!

hello kraka here and welcome to another exciting tutorial um today we're going to be taking a look at um an introductory aspect of oxygen templating so creating templates in oxygen so um if you're new to oxygen this might be very help helpful to you and uh i've had a couple of people ask you know about how to create templates in oxygen so even though we have a lot of videos on it i thought i should take um a take on it and give some tips on you know how to properly set up some of these templates um this is just an introductory video so i'm going to go over to oxygen templates so we're going to be creating a couple of templates that are very vital when you want to build a website depending on the website you want to build we are going to cover the main template and we're going to cover the 404 page template that is usually the one that a lot of people forget to create and you want to cover the search result template especially if you're building a blog website you want to have that and generally any any website you know you need to have that and we're going to create um the blog post a single blog post and the blog archive and also the um we're also going to create the blog index okay let's start some i'm going to hit add a template the first thing we're going to do is um we're going to create the main template so i'm just going to go to main all right and by you know design you know the oxygen template is designed to inherit another template so since we don't have any other template our main template is the primary template and uh and so it's going to be the main the primary you know template other templates are going to inherit the main template so um let me just name it properly okay and then the only setting that is very necessary in this one is just to go and check catch all so this is all you need to do in this place for the main template now typically the main template is what contains your header and your filter so if you have a header and a footer and then it contains the inner content in between the header and the footer the inner content serves to display the contents of you know any page or any template that inherits the main template um you'll understand as we go along so i'm gonna hit publish and then i'm going to add another template so this one is going to be the 404 template and then go to other just hit four or four and normally for other template that's supposed to inherit the main template but as you can see there is no option to inherit the main template and that is because to inherit the main template you will need to the main template needs to have an inner content okay so um because we have not set the inner content um you know for our main template we cannot inherit it so i'm just going to publish this and then i'm going to go to edit the inner content i'm sorry the main template and include an inner content so i'm just going to take this card here and then open the main template and while that is opening let me go ahead and add another template and this one is going to be the search results template and i'm just going to call it search results publish and then add another template which is going to be the block index now let's let's go out so let's let's go here first um what i want to do is just to pick um maybe a header and footer from a design set and then drop an inner content in this um in this so let me set it to preview my sample page which is my home page okay so as you can see nothing is showing here okay so i'm going to add a header from the design library the design set um let me just take the brewery and section and element headers i'm just going to add this header okay um so already i have a menu so that's on some pages that's why this is showing up okay um and then i'm going to add an inner content element there now you see as i added the inner content the contents of my page showed up now if you look at the structure panel you see the header and the inner content actually let me take away this i don't like that um i just let's check another design set and it's something more techy um prone put your sound stake here i don't know what that means header okay i just want something very simple okay headers um maybe that okay let's do this all right okay so yeah we have the header and then i'm going to add the footer still from our design sets footer um okay that all right so now we have um we have the header and the footer okay so i'm gonna save this and then i'm gonna preview on the front end now so you can see we have a header and a footer but the problem is we have this footer you know hanging up here because um you know the content is not you know large enough it's not tall enough to push it down and this could be a problem if you have a very you know few content in your page so we're going to look at how to fix that and typically what i used to do was to set is to select the inner content and then go to size and spacing and then set the minimum height to maybe about 80 of the viewport height for the inner content so that the inner content will constantly have a minimum height of 80 viewport height now that seems to solve the problem but it introduces another problem and what that is is that it introduces this unwanted scroll bar and we see that our content is barely enough to for us to have you know to have scroll bar and then so uh so this approach might be like a sort of a hack but it is not the appropriate fix for this so we're gonna take a look at how we can fix you know issues like this so i'm gonna go back and then take out that and uh what i'm gonna do first of all i'm gonna check if my you know footer has a class so i'm just going to give it a class of footer okay because we're going to target targeted with css now i'm going to go to manage style sheet i'm going to add a new style sheet okay and then i'm going to call just name it global style sheet and uh yep and and now in that style sheet what i want to do is to target the body okay so if i go body okay and then i and i go um minimum height 100 vh and then save that now we wouldn't notice any change in this um inside the oxygen builder so if i refresh that now um nothing happens so i'm going to target the footer in the css now um let me select this photo now this footer is um if we go okay so no need to target it in this case we could actually just set imagine top auto because the footer uses a div so it doesn't use a section so we could just say that margin top auto and then let's take a look at it okay that doesn't do anything okay so now let's go back to our style sheet and then do some more css okay so now i'm gonna add the body to display flex okay yeah so let's check it out all right so it displays flex and we want to change the flex directions or columns so um flex direction column i didn't add that okay so let's just check that out all right so you see that that solves the problem but you see we still have this scroll bar okay and that is because we are still using vh so that is the problem with vh it is it just gives you know you push even if we you give it 80 it's just we're still going to have the same problem okay so as long as you're using viewport height um we're still gonna have this scroll bar so um so what i'm going to do is to change from vh to a hundred percent okay and then um with a hundred percent let's take a look at that and you see it seems that the problem is returned now that's because um we have not set the the body the parents of the body which is the html element so we're gonna say the html element height to 100 percent also okay so um so we have the html you know element 100 then we have the body the minimum height it's important to use minimum height not height okay to avoid some you know issues with your display and i'm going to refresh that and then that works perfectly now this scrolling here is as a result of the fact that we have this admin bar so if i copy this and you know go to an incognito tab and put it the way we don't have the scroll bars you can see that sorry we don't have that that mean bar you can see that there is no scroll but everything here is perfect okay so um all right so that is um that's um basically all you need to do to set up your main template you have your header you have your foot and you have the inner content and now once that is done we can always go back and then if i let's say let me go back to templates and then check the ones we've already created so we have the 404 and the search results so i'm going to click here and you can see that now we can inherit the main template so i'm going to inherit it and click save and then i'll go to the next one which is the 404 template and then also inherit the main template now what you need to understand about um some template is this now templates like 404 page is a kind of template that since it inherits the main template it's a kind of template that you will need to you know design the content of that template meaning that you know for it to make sense you even if you create a template for the 404 you will not automatically have a 404 page so you will need to design content you need to edit that template and then you know um design the contents of the 404 page okay because if we go here and just say slash 4 for let's say that is a page that is not available even if we have um okay let me it's coming back here let me use the incognito now even if we have a 404 page now there's no page call forward for here now if you see it's going to be empty there is no message so you actually have to go into that 404 page and you know design it so let's say um i want to edit the 4 for template okay i'm just going to add some just something and say page not found i'm not going to waste time to you know so now so you you see the 44 template inherits okay the you know the header and the footer from the main template and then that inner content that we added is what you're seeing here okay now that inner content you know allows you to add elements so i'm just going to add a section and then i'm just going to add a header and say it i'm going to say page not found okay and just gonna align stuff to the center okay now let me save that now if we go back to the incognito i like the private private page now you're gonna see that we have that page not found here okay so even if i just write gibberish you know and then press enter see he's showing us page not found so you could add other stuff you know just be creative with your fall for page okay so that is um that is for the four four i'm going to close that and and then for the search page you also need to create a template for how that search i mean design the layout of the search results of course um using you know certain um parameters now we're not going to go into detailing you know we're not going to go into detail of how to design all those templates we just this is an introductory you know video on templates so um so we have these two templates inheriting the main template another template we're gonna create is the we're gonna create the block index okay template now the blog index what that means is is the first page if you're doing a blog website okay now this is usually needed if you are doing a blog website is if you if you your website is not primarily a blog website you really i don't think you really need this because this is like the home page now if you go to settings reading um you'll find that um if you have this setting you say your homepage displays your latest pos that's that means when someone lands on your homepage well the person is going to start seeing a blog post okay um for instance these uh there's okay a website okay let me just open a website and uh now okay look at this website this is a blog site okay immediately you land on the home page all you see is the blog you see in the blog post different categories of the blog post and all that and all the tags so this is what you this is what a blog index does okay it you know enables you to create this block home page okay so um and that means you're gonna set this as your setting in the reading option when you're doing a blog site okay for now i'm using this my homepage is my static page okay so for the block index all you need to do is to select block post index okay and that's all and then inherit the main template that is if you want to inherit the header the footer okay of the main template i'm going to click publish and then um so actually you know create a template for your individual blog post which is the single single blog post page okay um if you want to create the template for it what you need to do is let me close out these ones what you need to do is to um let's add a new template and then i'm going to just call it single blog okay single blog post and uh for that one you're gonna go to single and then go to post okay that's all you need to do single post so it's gonna apply to single post okay and then i'm still gonna inherit the main template and uh then i'm gonna create an archive okay now an archive is say you wanna you check it you wanna see the different categories of uh your blog post you want all you want them to display a list of all your blog posts okay so this is um an archive page where it shows an archive of all the blog under a particular category if you have all maybe you want you included a category of all to show everything um this takes care of the the archive you know template takes care of these layouts okay so that archive template can apply to categories it cannot apply to tags okay so if you you know if on that post you see you have categories and tags so um so let's do that so i'm going to call it block archive and then i'm going to inherit the main template and then i'm going to go under archive and then i don't want to check all archive because i want it to apply to only the blog post archive if you check all archive it is going to include the woocommerce archive and all that so i'm going to first of all click i'm going to select this too i want it to apply to taxonomy switch is taxonomies is the categories and the tags and then the post type i'm gonna say post okay and then the taxonomy i'm gonna click category and choose all category and then i'm gonna go tags i'm gonna click all tags now notice that the category on the blog post is different from the woocommerce product category okay so while i wrote category you could see that um it brought up all products category that is not what we're looking for and while i you know type tag it also brought up all product type that is different that is only when you um only when you want to create you know an archive for the woocommerce product okay so that does it so that's the the archive i'm gonna save that now so we have um you know a set of templates which these uh typically if you are doing a website that has a blog so this is typically the kind of templates that you want to create there are many more other templates you can create these are kind of like the main template and now um what i want to do is we're going to look into i know creating template that you can nest like nested templates and of course um this could pass for nested template okay like the block archive now but the difference between what i'm these and what i'm about to show you is this let me for instance let me um let me open the file for template okay let me quickly open it and then what we're going to see is that um when we because the 404 template inherits the the main template we just dropped in a section into this inner content that is from the main template okay so we we're not actually creating another inner content element but you can create a template depending on what you want to do that can have an inner content inside and in our content all right to create you know nested layouts now let's let's just check that out now i have you know a set of pages here i have what is called auxy add-ons and then under aux atoms now i have hydrogen park oxy extras and oxy ultimate as child pages for the aussie island and then what i want to do is that when i view um the auxiliary add-on page and for instance let me view my sample page okay see how it is now you see my sample page doesn't look very good let's quickly see how we can sort that out so i'm just going to edit no okay so um i'm going to go to my sample page and click on a did and then i'm going to choose a template for which is my homepage my sample page is the homepage okay so it has the default um the default template so i'm going to update that and then i'm going to edit with oxygen now so now when we viewed that sample page okay what we found out was that you know the text the the contents stretched from one end of the of the page to the other well that's because when we created our inner content we didn't add any margins and patterns to the inner content which typically you shouldn't you really don't need to okay and except you are maybe building a blog website you just want to add your way you you're not expecting to have you know contents flush from one end you don't want to have sections flushing from one end to the other you really don't need to add any styling to that inner content you know in terms of padding but if you were building maybe just strictly a blog website and you want or any website that you want your content to always be the the page with then you would have just dropped in um a section before dropping the inner content inside that section in your main template okay but now this is our this is the main this is our sample page okay the home page so i'm just gonna add a section and then now since we have now since i'm adding this now if without adding a section okay i could view my inner my um you know my content because it's just um it's just display you know the inner content as it were okay because we have an inner content here okay so but if i add a section and then save it then if i refresh this you see i'm not gonna have anything okay because i have added something where you have that inner content so it is assuming that i want to build you know some custom i want to customize the way the contents look so now i will have to if i want to pull in that text just that content from the gutenberg blog i will just need to go and add go to wordpress okay and then go to dynamic data and just hit content and i'll probably need to add a maybe a title if i need to the title of that page okay if i need to okay and then click so you see that it pulls in that content dynamically dynamically that is if that is what i wanted to do if i wanted to you know get the content from the wordpress editor and then so if i refresh that you see uh page you know content you know aligns you know it's just about the page width because by default sections are set to be paged with okay sections are said to be page width so i'm just going to close that and uh i'm going to close this okay so um so i have this page okay now let me go ahead and open that my sample page again now i have a sample page here it has this i i don't need these menus to show here so um i'm gonna take those menus away okay maybe create a fake menu um i have these um this page okay oxyaddon and then i want a situation but when i open the aux add-on page okay now i've not set it to inherit to for to any template that's because it doesn't have a template yet i don't want it to inherit i don't want it to use the main template i want to create a separate template for it so let me go ahead and create a template for it but before then let me explain what i want to do i want to station way when i open that auxy add-ons page i wanted to have a separate template structure it's a separate structure a structure that is completely different from other pages even though it is a page even though it's not even though it's taking up um you know even though it's a page all by default all pages you know are inheriting the main template but i want it to have a separate template so i'm gonna i'm gonna just go to template um then i'm gonna add new okay now i i wanted to take um to inherit from the main template i'm gonna call this auxy add-ons okay and uh i'm not i'm not particular about way you know where it should apply not necessarily you know because i could just decide to use it anywhere and uh okay so i have that exit add-on okay then i'm gonna go to you know my pages and then i'll i'll select that aux add-on page okay and then i wanted to use that template that i just created okay so i'm gonna choose it to use this now notice that this template doesn't have an inner content yet that's why it's telling me to edit edit template okay so um i'm gonna go ahead and edit that you know let me close all these ones okay now i'm gonna go ahead and edit this in a content you know template and add an inner content to it okay so that um so that we we can have ability to edit the contents of our pages okay all right so this is um so you can see this is the auxiliary template now it has inherited the main template what we're going to do we're going to create another template inside it okay it's another structure okay so what i want to do is i i'm going to now we have this i'm going to add a section and then i'm going to add maybe say um i'm gonna add maybe a div okay i'm just gonna duplicate that div so we have two divs there and then i want to i just want this to you know start horizontally and then maybe this first div is going to be say maybe 30 okay and then the second diff is going to be maybe 70 okay and then for this div i want to put a menu you know that has these three so i that has these three you know this the i created a menu for those three pages okay that with children of the oxy addon so i'm going to add a many elements inside there okay and then i'm going to set that minute to start horizontally um okay and then i'm going to set the width sorry what am i doing i'm going to set the width to 100 okay all right and then i just want to go ahead and maybe edit the menu i want my active i wanted to have an active background color okay and uh maybe a little bit lighter and maybe other things could remain the same hover background color uh i could just do that and make it fainter okay all right so and then here i'm gonna drop now this this is where you know where we're going now right here since this is a template i i'm not gonna just put anything okay i'm gonna drop um say the title of the page so i'm just gonna drop first of all um i'm gonna go to dynamic content okay and just just drop the page title if that is if i want the page title to be showing okay on that template so it's permanent and then the next thing i'm gonna drop that is wait for it another inner content so i'm gonna drop it see it's dropping outside so i'm gonna drop it right inside there okay um now okay so now off so this is showing a sample page i don't want it to show a sample page let let it just show the auxiliary add-ons page okay all right so we have this auxy add-on and then in our content which doesn't you know there's no content yet okay but we have that in our content so i'm going to save that so we have our you know this sidebar the title and then in our content now i'm gonna go back okay to the pages then i want all these pages to inherit these three pages to also inherit that same template okay so um yeah so it's going to inherit the auxiliary add-on this is going to inherit the oxi add-on and this is going to inherit the auxiliary add-on so i'm going to update that okay update all of them okay and then for our um auxiliary parent page okay um i want to go in first of all and edit that okay so i'm going to edit this page with oxygen okay all right so you can see now now that we are on this template you can see what is happening here so you can see that the inner contents now is no longer the full screen so it is nested inside the the main you know the main templates in our content so we have a template inside so we have our inner content here so i can now click to add um elements so i could just say um maybe i want to add a div okay inside that if i want to add a heading maybe that heading will be h2 okay and then um i'm gonna add some text and then i'm gonna add a button okay and then i probably wanna get some content so i'm just gonna say um i'm gonna call this auxy extras and then i'm going to just um i'm going to just just you know paste this text multiple times just give me some content okay so um yeah just give some spacing and then get it now okay probably better capital all right so we have that um we have that you know that you know template and we've added a content here and i'm gonna link this to the oxy extras page okay that bottom okay all right now um or i think i should just write learn more instead of get it learn more okay all right so um so yeah i'm gonna just duplicate that that div okay two times and then change this to um i'm going to save that then i'm going to go ahead and edit this with oxygen the same i'm going to just open all of them at the same time um i'm not working with classes so and then of course what's the words that can happen this is just a demo so i know oxygen you're not supposed to work on multiple tabs okay and that's because you don't want to screw up the classes okay but then i really don't think i have classes that i need to be worried about okay so uh for these now we have the hydrogen package you can see that our template automatically drops in the name and we can see from our menu it's showing where we are you know where we are with the active sidebar stuff okay now um i'm just gonna add content to the hydrogen so i'm just gonna add um maybe uh a heading okay h2 and then i'm gonna add let's just pick content from the hydrogen hydrogen all right so i finished populating the you know the pages with content okay so i have my three pages here okay and um one last thing um first of all i'm gonna go into this um oxy add-ons template and just you know deal with this spacing and i'm also gonna go into the main template and also remove this because i don't want this to be here okay on the regular pages i don't want that menu to be there okay so i'm gonna open that template okay then for the exit add-ons here i'm going to open that template also so all right so for for my template which is um what is this of the addon template um for this section okay for this section this div um i want to add a padding okay or perhaps i should just add a spacing um maybe margin left of say 32 pixel just to separate this okay and then for this other div perhaps um i want to add a a right border just something that is just these are just cosmetic stuff a right border of let's say maybe three pixels and uh something like that okay so yeah you know just just um to just make it look better and then for the main template oh this is this is still there all right let's leave that for the main template okay let me go back so for the main template i just want to um just edit the main templates okay so in the main template i do not want to have these many so um i'm going to just take away that menu because i don't want that many to be there okay in the main template okay so what's this so we have a text link we have this div okay and let's assume that we had um we had other text link here you know so let me just add a text and then make that white you know and then i'm just gonna say oh this is a problem with firefox so i'm just gonna call this link um home okay i'll move that up okay and call that home and then i'm going to give it um imagine say of maybe 16 pixels to the left because i'm gonna duplicate it okay just call it about so i'm just creating you know effect menu item you know okay now i'm doing my this stuff when you mistakenly select everything in firefox it's just uh it's an issue it's just a bug in firefox with oxygen so i'm going to go back to to the amine okay so now if i view my website okay so i can see that you know i have this my home about okay and i don't have okay i don't have my page okay let me go back to that quickly go back to that template i don't have my oxy addons page so that should be one of my pages all right so um i'm just gonna duplicate on this and just call this um oh i've done that again so i'm just gonna call it auxy addon okay and then i'm gonna just make that a link wrapper and ah and just link it to the auxy addon okay and then for my button here uh the link wrapper okay i'm just gonna set the url to be slash to link back to the home page and uh no need for this one but a little bit there and then for this one let me just so just push this okay all right so i'm gonna save that okay so if i go back to if i go back to view the website okay so so i have all my um menu item now all my pages are supposed to have you know this type of layout where you don't have any cyber but when i go to the aux addon okay why is it going to the template okay my exit addon is a temp i linked it to the template is that what i did no i can't believe that let me go back oh dear i linked it to the template how did that happen okay sorry about that guys so let me just go back to the main template and it did that how is that possible could it be as a result of working with multiple tabs okay so the auxiliary add-on oh link was linked to templates oh no it's template here i'm supposed to link it to the page okay all right okay so let's just close that and then view our page okay so we have the homepage now if i go to the auxy addon page so we see we have a completely different template where um you know i can either use this okay or i can use this so if i click on oxy extras it shows me that i'm on the extras okay now this is so you can see that we have these auxiliary auxiliary ultimate you know pages so so we've been able to create a soft template inside our main template that applies specifically to you know a certain you know group of pages okay so we have this and then we can so i could even decide that you know i don't want to have this here okay i could i could make the auxiliary addon page you know in you know use the main template but still has this content but but you know none of this will appear all right so that once i click learn more and when we we enter the auxiliary extras we can see this sidebar you know appearing you know for our um you know for our templates now one thing we could do here is just to add maybe a text here and then we call it auxy add-on so if i go into that you know oxy add-on template you know just to make it look good i mean like i said this is just these are just cosmetic changes but you know i've been able to demonstrate that um the functionality that you need to know to create that um that so i can add a heading you know and then just call it um auxiliary okay okay so um okay so yeah and then maybe my text color could be something like that all right so if we go back to the site close that and we go to oxyaron so you can see you understand so even though you have this um this writing here you can always use this to you know view your other content all right so um that is about it for this um you know this tutorial so um in this tutorial you've learned how to you know create a different template and also uh you've also learned how to you know create um a nested a template with nested inner content so so um you have you know your your content you know having its own inner content just in a very specific area of the page you know where every other thing around it is a template and it's nested inside you know another template so um i hope you learned something from this tutorial and don't forget to subscribe if you haven't share this tutorial with others and also like see you some other time

Channel: Design with Cracka

Views: 3,097

Keywords: oxygen builder, templates, inner content, pro tips, wed design

Id: 4rnlsnlv4l4

Length: 41min 18sec (2478 seconds)

Published: Mon May 10 2021