Easy Layout & Spacing Control With Oxygen

hey this is Lewis from so fly in this video I'll show you how to layout elements on your pages using oxygen in oxygen you use sections columns and divs to create any layout imaginable so let's start by adding in a section most commonly in oxygen you'll add a section and then place elements within that section so inside this section I will go ahead and add in a heading and then below the heading I will add in a button and I'll just quickly change a text here so it looks a little bit better so now that I've added in my heading and my button let's control their alignment to control the alignment of items inside a section a column or a div use the alignment controls in the Left sidebar we have child element layout we can stack child elements vertically which is the default or we can stack child elements horizontally if we stack the elements vertically we have alignment controls to align them left center right or stretch and if we chose to stack child elements horizontally we have vertical alignment controls to stretch the items align them bottom Middle top and we have horizontal alignment controls to align them left center right space around which distributes space evenly around the edges of the elements or space between which distributes the available space between the elements so let's go with a vertical layout with horizontal item alignment of Center now two space elements out from each other simply click the element and then mouse over the edge of the element until you see a purple drag bar then simply click the drag bar and drag up and down to adjust spacing to add spacing to a section same thing click the section mouse over the edge click and drag and you can double-click to reset the spacing to the default so now that we've created a vertical layout let's imagine we want to create a horizontal layout within this vertical layout imagine we want to add in a text link and we want to place this link next to the button right about there so to create a horizontal layout within a vertical layout what we'll do is we'll add a div a div we'll divide up the layout and allow us to group the button and the link together and then control the alignment of those items without affecting the alignment of the rest of the section so let's go add a div and I will drag in the button into the div and then I will drag the link into the div and now let's control the alignment of items in the div so to do that we'll click the div and then in the layout controls we'll choose stacked child elements horizontally and for vertical item alignment will choose middle and now we'll want to add some space to the right of the button so we'll just click the bottom and drag until we've added space okay now we've created a horizontal layout inside of our section with a vertical layout so to recap we'll open the structure panel and show you what we have so far we have a section inside the section we have a heading we also have a div inside the div we have a button and a text link section is stacked vertically align center div is stacked horizontally vertical alignment of middle okay now let's learn how to use columns so I will go ahead and add another section and then inside this section I will add in a columns element this gives us the choice of six preset column layouts I will choose 50/50 and if you want to manually adjust the width of a column you can simply click on the column and then type in the width you want the width of the other columns will automatically be updated to add up to 100% so let's go with a 40 60 width and now let's go ahead and add in an image to the column so go add image and I will choose a nice image I already uploaded and then to the other column we will click it and then we will add in a heading and some text and I'll just quickly change a text here to say my column okay now to control the alignment of items in a column simply click the column and then use the same layout controls we can stack vertically or horizontally so I'll stack this one vertically horizontally um alignment of center vertical item alignment of middle and now we've created two poems to add another column to an existing columns element simply go to the columns element and then go add and add a div a column is just a div now we have three columns let's go ahead and reorder the columns I'll drag this column over to the left so click and drag to the left and let's go ahead and add in a heading and text to this column as well so I'll just duplicate drag over duplicate drag over change to say another column and then click the column align the item center vertical item alignment of middle now you can adjust the space on an individual column by simply clicking the column and then mouse over the edges as usual so to space the columns farther apart or closer you just drag on the left or right edge to add space I'll double click that to reset so now we've created a three column layout to delete a column from a column layout just click the column and then delete and now we're back to two columns and the columns element will always automatically update the width of the columns so they add up to 100% now let's go ahead and make this layout responsive so to do that let's click the section and first we'll set the responsive layout settings for the section so to preview the design a different way click the device icon in the top left and then choose a width from the drop-down ok it still looks good at 11 20 pixels let's see if it looks good at less than 992 still looks good let's try less than 768 not starting to look a little bit cramped so what do we want to do we want to stack the contents of this div vertically at less than 768 so to do that we'll just click the div and then choose less than 768 which we've already chosen stacked vertically and now let's remove the spacing from the right edge of the bottom that we added and add some spacing below the button okay let's go back to all devices and go back to the div we are stacking elements horizontally vertical item alignment of middle if we go down to lesson 768 we're now stacking the elements vertically okay now let's make the columns responsive so let's go down to the columns let's check less than 11 20 looks good less than 992 the columns begin to stack vertically let's click the columns and take a look at the column settings that's because by default columns stack vertically at less than 992 px but we can change that let's say we don't want him stacking vertically until down to 480 now they'll stack horizontally at 992 while still stack horizontally at 768 and less than 480 they'll then stack vertically let's go ahead and make them stack vertically at less than 768 that'll look better so we'll choose less than 768 under stacked columns vertically and now the column stacked vertically at less than 768 okay that is how to use sections divs and columns to create layouts using oxygen watch the responsive controls video for more details on creating responsive designs with oxygen okay again this is Lewis from sofly and thank you very much for watching

Channel: Oxygen

Views: 19,298

Keywords: wordpress, flexbox, divi, beaver builder, elementor, visual composer, webflow

Id: NnSfR-YFcQI

Length: 8min 47sec (527 seconds)

Published: Thu Jun 07 2018