2.3: Oxygen's User Design Library

hi this is Elijah with the oxygen team and in this video I'll be showing you the user design library feature the user design library feature allows you to designate any oxygen site as a design set and then install that design set on other oxygen sites to get started let's take a look at how to set up a third-party design set on your oxygen site first we need to jump into the WordPress admin panel and go to oxygen and settings and go to the library tab here you'll find three check boxes the first enables or disables default design sets like atomic conference and flight school the second and that's the one we're looking for enables third party design sets when it's checked so let's check that box and click update now we have an ad design set link click that and here's where you'll paste in the third-party design set site key which is generated when an oxygen install is turned into a design set so let's paste that in and click Add source site now you'll see that our new design set shows up in this list we can also remove it by clicking the remove link let's jump into the oxygen builder and take a look at how that shows up in the library click the Add button go to library design sets and you'll see your new design set in the list with the existing oxygen design sets third-party design sets work exactly like the default design sets that come with oxygen now let's take a look at setting up your own design set for this example I have a simple site set up with one template and one page and some content and we're going to turn this into a design set they can be used across multiple other oxygen sites to do that first let's jump to the WordPress admin panel and the first thing we need to do is name our design set so we'll go to settings general the design set name is the site title that you've given your site so we'll change this to my design set and go down and save changes next we need to go to oxygen settings to the library tab and we need to check make this WordPress install a design set and click update now we'll see some new information the first is our site key this is a key that must be used on other oxygen sites in order to install this design set next is the URL to the site screenshot this allows you to designate an image for use as the screenshot of the design set in the oxygen library you can also choose a screenshot from the media library or you can use our API to auto generate a screenshot finally there are some instructions on creating elements for your design set let's get started with the block library blocks are a new post type that become available when your oxygen site is designated as a design set and you can find it under oxygen block library in the WordPress admin panel so let's jump in there and let's create a new block click add new and let's name the block and scroll down below the normal oxygen meta box will now see oxygen design set options this meta box will appear four pages templates and blocks four blocks the options we have are to categorize the block which allows us to designate the category under which this block will appear in the library for this example we'll choose content and we have a screen shot area which shows us that the screenshots have never been generated and gives us a button to generate screenshots since there's nothing in this block yet we won't generate the screenshots until we're done so first let's publish this new block and then let's edit it with oxygen to add some content it's important to note that blocks are a single element so no matter how many sections you include in your block it will be inserted as a single design set element that means that when working with blocks it's best to treat each block as a single section so for this we'll click add add a section now we're going to throw in some columns with three columns and then let's just do a simple pricing box layout so we'll go to helpers and we'll add a pricing box and we'll duplicate that a couple of times and then drag these across to the other columns great let's style the middle one to add some emphasis by going to advanced effects and box-shadow and let's just add a simple shadow to it lower the opacity and then adjust the settings just a nice subtle effect perfect so now we have an element that we'd like to include in our design library and because we built it inside of a block it will be included automatically so let's save this and now we can jump back to the admin panel and we can generate screenshots when that completes you'll see that screenshots were successfully generated now click update and then let's jump back into the Builder and we'll take a look at how that block shows up in the library click Add go to library design sets and at the top we see my design set which is this site open it up go to sections and elements and under content which is where we classify this block to appear you'll see the pricing section that we just created again blocks should each be treated as one individual section because they're treated as a single element in the library additionally blocks are included by default in the library now we can also add elements to the library from our pages and templates so let's jump over to a page and take a look at how to do that here's the page we had already set up and we'd like to include some of these sections or all of them in the design library so let's edit the page and take a look at the design set options we have a few different checkboxes here in the oxygen design set options meta box include this page in the default setup means that this page will be created when you use the oxygen install wizard to install this design set the install wizard appears when you first install oxygen and it gives you the option to choose a design set or use a blank install it's also available under oxygen home in the WordPress admin panel the next option is include the sections in this page in the library if you check this box then any sections on this page will be included in the library if the sections aren't categorized they'll show up under the uncatted Erised section in the library for this example we're going to go ahead and check this box finally we have include this entire page in the library this will make this page appear under our design set under the pages submenu so that we can insert the entire page in one click and for this example we'll go ahead and do that as well and once that's selected we get to categorize our page for this we're going to choose home now let's update those options and let's edit with oxygen now that we're in the Builder we can begin to categorize the sections that are on this page again if we do not categorize them they will show up in the library under uncatted Erised to categorize them we need to use the structure pane so let's open that up and let's select our first section the first step before categorizing any section is to give it a descriptive name so let's click the hamburger menu and choose rename and we'll call this hero with BG image great now we'll know what it is by looking at the name in the library so let's click the hamburger menu and you'll see a new option down here since this is now a design set and that's categorized so let's click that and now we can choose a category for this section for this example we'll choose heroes and titles now you'll notice that the section turns a gold color when it's categorized this is to quickly indicate that it's been assigned a category now let's go through these other sections and rename and categorize them as well so section two would be a feature section so let's rename it and let's categorize it and Section three would be a gallery or images or showcase so we'll rename it and we'll call it showcase and we'll go to categorize and choose showcase finally section four is a contact section so we'll rename it contact and again if you're gonna have multiple contact sections included in the library it's important to use a very descriptive name otherwise they'll all show up as contact and it might get a little bit confusing so let's categorize this under contact and that's it these sections will now be included under the appropriate categories in the library let's take a look at that let's save this and reload the Builder now we'll go to add library design sets my design set sections and elements and you can see we have a couple other categories here under content is the block that we created before but we also have our new section features with icons we also have the contact element the hero element and the showcase element now we haven't generated screenshots for these so they show up with no screenshot so let's jump back to the admin panel and go ahead and generate some screenshots so we're going to scroll down to oxygen design set options and click generate screenshots great now our screenshots are generated let's update the page and finally let's take a look at how to include sections from a template as well as the design set options that are available for templates so let's go to oxygen templates and open up main now let's scroll down to the oxygen design set options meta box and take a look at the options we have first we have include this template in the default setup if this is checked this template will be created when the design set is installed from the oxygen installation wizard again that's the wizard that shows up when you first install oxygen that gives you the choice to install a design set site or start with a blank site the next checkbox is include the sections in this template in the library this works the same way as the checkbox on the pages meta box if this is checked every section on this template will be included in the library so let's check that finally we have include this entire template in the library this allows us to insert the complete template when editing a template so let's check that now we have the screenshot section which is a little different for templates we do have the option to set the screenshot from the media library or upload a file we also have the option to specify a URL for the screenshot additionally we have the generate screenshots button so now that we've set up these options let's update the template and let's edit it with oxygen so in this template we've only got two sections we've got the header and the footer so let's go to the structure panel and let's select the header and let's go ahead and rename it header with buttons now we can go into the hamburger menu and categorize the header under headers let's take a look at the footer and we will rename it to footer with columns and let's categorize that footers perfect let's save this and now let's go back to the admin panel and let's generate screenshots now that the screenshots are generated let's go ahead and install this design set on a new oxygen site so let's fire up a demo site here and while that's loading we'll jump back over to our design set site and we'll go to oxygen settings library and we're going to grab the site key now let's go back to our new oxygen site and go to oxygen settings library and let's enable third-party design sets click update and click add design set now we just need to insert the site key from our design set and click add source site perfect now my design set appears let's go into a page and let's use some of the assets we just created to set up a page on this new site edit with oxygen now let's click add library design sets and my design set shows up in the list so let's click it and you'll see we have a complete page which is our home page and we also can go into sections and elements and all of the elements we just created do show up so let's add a content section let's add footer and let's add a header we've installed our design set on a third party site and we've already begun using the elements we created that's just how easy it is to set up a design set and use it on another oxygen site using oxygens user design library feature again this is Elijah with the oxygen team and thank you for watching

Channel: Oxygen

Views: 11,020

Keywords:

Id: IWHSe_fFy1Q

Length: 16min 36sec (996 seconds)

Published: Fri May 03 2019