How To Make Your Own Gutenberg Blocks Using Oxygen

hey everybody welcome back to another oxygen video my name is Jonathan and what I'm gonna do today is show you how to convert existing content on your page into a Guttenberg block or use oxygen to create a Guttenberg block of your own from the ground up before we get started I just wanted to let you know that I also have a youtube channel called premise log where you'll find lots of oxygen and WordPress related content so to start off with this video what we're gonna do is just go ahead and move into the oxygen editor so you can see I have this content already designed on the page here it's basically just a heading with a column element that contains three divs some text and a button so what I'm gonna do is open my structure pane and I'm going to click the top-level item that I actually want to convert to the block so in this case I want this entire section that contains all of this content to become my Guttenberg block so just make sure you have that section selected click the little hamburger looking icon and click the button that says copy to block now you'll just want to name this something descriptive so that you know what it is in the oxygen back-end and it makes it easy to kind of distinguish it because as time goes on you could get a lot of these in there and you want to make sure that it's named descriptively so what I'm gonna do is call this large heading 3 column just like that and then you can see there's the blue notification up there on the top left that says you can access this in the oxygen block library let's go ahead and convert this block down here which is a meet the team section as well so I'm gonna do the exact same thing I'm going to click copy to block and I'm just going to name this one meet the team now what I'm gonna do is actually go ahead and click on save and then return to the WordPress admin so with oxygen and the Guttenberg add-on installed if you mouse over oxygen you'll see this new option here that says block library both of the elements that we just created into blocks are present here there's the meet the team and the large heading 3 column now you could go ahead and edit these blocks if you want and all you have to do is just click on edit and then choose the button that says edit with oxygen if you want to make changes to that but the point of this is to actually add it to a page using Guttenberg so let's go to our pages section here and then let's actually create a new page so that we distinguish it from the homepage that we were just working with I'm gonna call this page about us and then let's publish this and then what we can do here is actually add in our Guttenberg block so just mouse over this section right here and click this little arrow scroll down a little bit and you'll see a new section that says the oxygen blocks so what I'll do is just go ahead and put in the meet the team section and there you can see there's the block we just converted from oxygen to a Guttenberg block scroll down here and I'm going to do the same thing again just gonna kind of do this in reverse order so we can distinguish it the large-- heading 3 column and there it is so what we can do now is actually start editing this content here in Guttenberg and things like control B for bold will work to bold all the text and that's where things so you can make all of your changes in Guttenberg now so if I go ahead and update this page again I'm gonna take a look at this on the front end so there's our about Us page with the blocks we just added using Guttenberg so that's really great but what if you want to create your own Guttenberg block from scratch well you can do that by going to the oxygen block library and then clicking the button at the top that says add new so again you want to make sure to name this something descriptive so why don't we go ahead and create a hero image block so that we can add it to the top of our about Us page so let's just call this hero image and then let's click on publish and then we'll choose edit with oxygen so what I'm going to start with is a section so click on add and section and then under the advanced and the size and spacing button what you can do is click on this height option here so if you click the actual pixels it gives you a number of other options on how to configure the height so in this case I'm going to click VH for viewport height and I'm going to set this to something like 75 VH so that when it's actually on the page it takes up most of the screen but not all of it from here let's actually go to advanced again and then click the background button and let's find an image to set as our background image we can just use this nice picture of the beach here we'll click on select image and then you can configure the positioning of the background image if you want so again if you click on this pixel button next to the left and top this is how you can achieve a background position like center center that you're familiar with so if you click on this and change it to percentage if you go 50 percent from the left and 50 percent from the top then that's going to position the photo in the center vertically and the center horizontally to achieve a layout of center Center so now what I'm going to do is add a heading on top and this is just going to be a heading let's change this to a white font color and let's crank the size up to like 55 pixels let's just change this heading to welcome we're glad to have you something like that and then what we can do is actually click on this section and change the element layout to stack horizontally so that then our heading can be centered in the middle horizontally and vertically now it's a little bit hard to read that font against the background so there's a couple of things we can do the first thing I'm going to do is make sure my section is selected go back to the background tab and under image overlay I'm gonna add a somewhat of a black kind of opaque background so that it makes the font stand out a little bit better but what we can do is actually add a text shadow to that font as well so if you click on the heading here go to advanced effects and text shadow then I'm just gonna set the text shadow to black and change the opacity to something more like 30% and then the horizontal offset I normally set this at zero pixels vertical offset at one pixel and the blur at three so that's a little bit better maybe let's actually change the opacity up to more like make it maybe like 75% so that does make the text stand out quite a bit better so let's click on save and then let's go add this to our about page so go back to the WordPress admin panel go to your about page again and then what I want to do here is actually add in our Guttenberg block that we just created for our hero image so let's scroll down again to oxygen blocks and then we're gonna add in hero image let's update the page and then we're going to refresh this page and take a look on the find so there is the hero image that we just created as a Guttenberg block using oxygen so as you can see it's really straightforward to create your own Guttenberg blocks and also convert existing content in oxygen to a Guttenberg block this is a really great way to allow clients or other users that aren't as technical to change content without having to actually touch oxygen I hope this video has been helpful for you guys thank you so much for watching and I'll look forward to seeing you in a future video

Channel: Oxygen

Views: 10,783

Keywords: wordpress, oxygen, page builder, web design, wordpress design, site builder, oxygen builder, gutenberg, gutenberg blocks

Id: xgd1OfOn33Q

Length: 6min 52sec (412 seconds)

Published: Sun Jan 12 2020