Create Overlapping Elements | Advanced Oxygen Building

in this video we're going to replicate this layout which is basically some elements overlapping one another hi my name is stratus and i'm constantly producing videos about wordpress please subscribe to my channel for more videos like this now basically this is not a very hard thing to do and i wouldn't recommend that to be in advanced layout building but since i was asked for something like that and maybe uh there are other papers that the big are confused about overlapping elements i was going to create something like that eventually so let's get started we have two columns here with an image and a form inside here and then we have some information here down here so we're going to get started with adding here a section and remember this series is not for you to go and copy everything from other websites uh it's just for you to understand how this is working and how you can create more advanced stuff in oxygen so we need the background color to be light blue something like that okay it's not the same of course but i'm not going to take the exact color so let's save that and add here a column with two columns inside so as you can see we have a column element with two divs inside which are the columns now in the left column we have to add an image so we have two ways to do that we can add here the image element and set that exact image to be inside here or you can add the div inside here and have that image to be a background of that div now of course i i'm adding a div inside the div if i want to create that as a background image because i want them to push the div to the left to the right sorry so it's not good to do that in the div of the column add another div and do that instead so here i'm going to browse and i have already downloaded the image just for not taking you too long of your time for this video and let's go to the next which is here and i'm going now to add a form because i don't have any plugins for the form so let's refresh this at first just have the same layout okay and then let's go to themes and plugins add new and let's add here a contact form let's go for contact form 7 which is the most basic one okay let's go for popular and it's the most popular plugin at this moment and i know that this will has will have already a contact form created for me so let's go to contact contact form and let's copy the short code here okay let's close that and now let's go let's close that also and let's go here and here we're going to add the div and inside this div i'm going to add a shortcode and here i'm going to put the form okay let's save that and see how it looks in the front end okay awful but we're going to change all of that so first we need to go to the second div this is the one and here i'm going to set a background color off white and also i'm going to give it a little bit of padding so uh i think this is not exactly uh 50 50 for the columns as i can see here so it's more of a 40-60 maybe or they may be yeah i think it's 60 and this is a 40. so let's go here and let's choose the columns and i'm going to choose that to be 40. 40 and this should be 60 automatically as you can see here this will take the remaining space so now that this is 40 i'm going to uh select this div and i'm going to set the width to be 100 of this column okay and then i'm going to give it a little bit of let's stack that in the middle now on the left on the left but let's uh put there let's remove that and let's put there a little bit of padding so let's go to sizing spacing and let's go for 300 pixels of padding something like that no a little less 200 maybe okay something like that maybe a little less 180 okay now we need to push the image to the right so i'm going to the image and i'm going for advanced sizing and spacing and here i'm going to put let's go for a negative margin sorry and since this is not moving you have to go one element up and do that here so if i go here inside that div i can put a negative margin but let's select that to be wrapped in a div first and now let's go to that div because i want don't want to change the the div of the column here in that div let's go for the sizing spacing and let's now change the margin and as you can see now it start changing okay now let's see first here okay and i think i need to push the little bit down also yeah and to push a little bit down so let's go for 100 and 120 and let's go for the margin and put around 20 something like that no let's go for 40. okay now here we have a contact us and let's copy that and let's go here and here i need to add heading element i'm going to put contact us i'm going to put that on top and as you can see i copied the text which is contact a contact us and it's all capital letters but here i don't have that so this is styled with css let's go to advanced let's go sorry let's click first the heading and let's go to advanced let's go typography and then we're going to select the upper case okay let's save that and let's see the form so this is what we have and here i have to go and style that in the middle so let's go and put that in the center okay now i think it's a little bit better let's say that and let's see how it looks in the front end okay now i need to put the z index here the set index is the number that would indicate me what element is on top so the bigger the number that element is on top of the others let's go to layout and as you can see i have selected div the whole div but you can also do that for the match but let's keep it in the div and let's put that set index one let's save that and go to the front end and refresh okay have a select the correct one no this is not the correct one so let's remove that then i have to select this div which contains the image this one and let's go advanced layout and here i'm going to select set index of one let's save that and refresh the page okay and now as i can see i am getting there and i need to put a little bit more margin to the top so here advanced sizing and spacing and let's go for 80. okay let's save that and this is done for the columns so the next thing is create something like that for the contact information so let's go and add underneath the the columns element we're going to add another column element so let's close that and here select the section and add columns and here we're going to add three columns because we have uh three columns as you can see let's go here and for the columns let's go and put the background color to be black okay now uh this should be a little bit to the right and so the best thing to do for me is to go and wrap that in a div now that it's in the div these columns uh were went straight to the left because the columns don't have any width and of course i wrap those inside a div and here i'm going for that div and i'm going to put 100 for the width so now i have this layout let's save that and now i want to put the columns not to start from the beginning of the image as you can see but i have to go and put that in his elbow maybe and this isn't also uh to the very uh left right side of the page so let's go here and this is now easier to do that in the div because the columns will take the remaining space evenly for the columns so let's go to the width and let's go maybe for 80 percent and let's put that columns in the middle and see how it looks okay let's stack those vertically middle and middle okay and yeah not not 100 percent not 80 let's go for 100 percent and i'm going to give it a little bit of padding so let's go to sizing spacing and that was my mistake because 80 will always be in the left i should go and add another div just for that but i'm not going to do that way and let's go and add the padding of 50 pixels maybe no 100 pixels 100 pixels okay it's close but not yet there 130 pixels something like that and here i'm going to put also for the padding uh like 50 pixels something like that and as you can see the columns have taken the remaining space and are evenly for the width so let's go inside here and we're going to add here the icon and the heading and of course i had to wrap those in a div so first column i'm going to add a div and in that div which will be the contact div okay and i'm going to add here an icon this one and next to that which will be the contact icon contact icon will have a heading heading and this will be the contact heading okay okay i put some space between there okay so instead of going and putting the white color here and here you can also do that inside the div and since we have a custom class here it will affect the other two copies that we're going to make so we can go on to advanced typography and put the color here in white so everything every element that's inside will have a primary color of white uh so let's go and style them horizontal middle and center and then we're going to triple click the text and paste here to call us okay this will be an h4 maybe and let's go for the icon size of 30 okay and as you can see that changed the color now this is basically a back because it should stay the same but let's see in the front and if it has stayed with the white color okay it's changed the color and it shouldn't do that and okay let's see here so we're going to put here the white color okay and let's go also and put advanced sizing and spacing and for the margin let's give it a 20 margin something like that i think yeah about 20 margin okay the icon is a phone phone something like that let's save and see how it looks okay the icon is okay i think the text is a little bit bigger of course the text is not right yet let's go to advanced let's go typography first we're going for line height one to remove the spaces then we're going to uppercase and then we're going for a font family not from family a font weight of 300 400 maybe 400 something like that let's save that and see how it looks now okay way too slim so let's go for 500 and refresh here okay i think didn't change anything let's go for 600 something like that okay and i think we're pretty close okay after that let's put that in the middle center and i'm going to hit center for all the other divs here the other columns okay and now we're going to add underneath that div inside the column here a text which will say this so here add text triple click it paste and then select the text color to be white okay and i think it needs a little bit of space yeah i think it needs a little bit of space from this div around 20 pixels okay so save that and now i can go and duplicate that and duplicate that also and this text do the same okay put that in here put that in here and move the space the text here and move the text here okay the second column has a location location and here is a map icon map okay this pin and this is business hours with the clock business hours with the clock okay and let's also take this location text here okay and where it does it break as you can see it breaks in new but i think this is not a break that it's doing from the text it's doing from the whole block it's breaking where it can break so let's go to the next one which is this one and let's copy that and let's put that in here okay so i'm going to leave it as this i'm not going to put any breaks myself and i think it's okay so now i need to just go and put some negative margin in that div so let's go to that div let's go to advanced sizing spacing and here for the margin let's go for 200 and minus come on minus 200 okay it's way too much so let's go for minus 100 minus 100 and i think it needs to be a little bit more push down okay so let's go for minus 80. something like that okay let's now put that on top of this image and since this image this div has a z index of one i need to go for this div and put here the z index to b2 so layout that index two now let's save that and see how it looks in the front end not here this is the one that we are making so as you can see uh this is the layout now i need to put also a little bit of padding inside here so let's go for the short code let's go to the div and here we're going for advanced we're going for sizing and spacing and here let's go for 20 margin here no i think it's 40 like 40 or something 40. let's save that and see how it looks okay it's closer of course it's not the same form because we don't have this layout and we're not going to create the same layout for the form it's not something difficult to do especially especially if you're using a form that you can create more advanced stuff and you don't need to do that with css if you just install the putting forms the free plugin.net forms you can do everything just as using your mouse and pointing and clicking and selecting stuff you don't have to write any code down so we're going to put also a little bit more padding here let's go for 50 let's save that and see how it looks and i think we're okay and now we're going to set those for the mobile version because i think it's a little bit tricky and i think it has a little bit of space on top so let's go and put the padding of 20 on top okay and maybe on bottom two go for another 20. okay let's save that and now for the mobile version you have to go and see where you have put the padding so you need and marking so you need to go and reset those settings so let's go for that div which is the whole div and here if i go to advanced since i have this icon means that i have select something and change something and if i go to the sizing sizing i will see that this div has a 40 percent width and i need to go for the breakpoint that this is here and i need to put here uh 100 of that uh first let's go and see how it looks here and as i can see this is looking okay except for this uh form the other are looking good so let's go to this div and this div has a little bit of padding inside so let's go for padding and let's select here 100 let's go for 120 something like that and we're going to leave it as 120 i think it's go okay and maybe going i pushed a little bit down uh this info button so we can see the submit button so let's go for that div and here advanced and here sizing and here we have negative 120 i think so let's go for 100 and negative 100 okay it's way too much again so let's go for 50 negative 50 maybe okay let's go for 30 to keep the same style but as you can see now i can see the submit button okay so let's go to the next one which will be uh the layout we where we have 992 pixels 92 pixels and we're going to fix all of those so let's see first in the old devices what we have as you can see we have many things to correct but first let's select that column that column doesn't have any changings and here in the div as you can see we have advanced here and we have we have changed the width so let's go here to less than 992 and for the width let's go for 100 okay of course we don't see anything that changes because we have inside the child elements other stuff and we're going to open that we're going to select that div and let's go again to the old devices and see what we have changed here so we have some marking and some marking to the top and to the right so let's go for less than 992. let's put here zero and zero so it will uh start from the beginning and here you can see that if you want to change that you can do that so of course this image is not very good for mobile phones because he's pointing to his right or to his left but for us it's right and the contact form is down here but we're not going to fix that other than that we don't have anything else to change in the image i think we're okay with that yes and let's select that div as you can see this has a 60 so if we go to less than 992 let's go and put here 50 not 50 sorry 100 okay let's go now to all device again let's select that div and here we're going to see that we have some background we're not going to change the background and here for the layout we have the z index i think not the settings what have you changed the center okay so for the sizing spacing we have this padding and of course the width so let's go to less than 992 and here we're going to put zero zero zero and zero and now you can start uh alternating changing what you want so we need some padding here we're going for 20 and we're going for the bottom 20 as well and we're okay with that let's save that changes and let's see if we have anything else for the short code here i think we didn't make any change for the code code no we didn't and for the div of course we made some settings for the layout for the sizing and spacing for the padding and for the market so let's go to unless 9992 and here we're going to put zero we're going to put zero and zero so we have those and full width and i don't like how they look so i need to put a little bit of mark inside the columns now i know because i put the color to the columns the background color the columns that when i leave here inside that div a little bit of space let's go and add sizing spacing and put a margin of 20 on the bottom it's going to uh take a space but it's going to look black so i'm going to change something in the all devices and here we're going for color here i'm going to copy that and i'm going for the columns and i'm going to put that in the columns so here we have that color we have that color in here and that color in here okay save that and see how it looks in the front end so i think nothing is changed yeah nothing is changing the front end but here as you can see now i can break to 992 and i will have that little bit of space which is better so i need also to check this div and put here also a 20 margin size spacing 20 pixels margin and i think this is not looking too good because as you can see the width is bigger than the width that you have in the form because this div has a little bit of probably padding inside here so what i'm going to do is change the width here in the columns so let's go for the width here to be eighty percent for that div and maybe now it cannot take any changing to the space because uh it doesn't have any parent setting for the width to go eighty percent of something so uh it doesn't know how is eighty percent so uh we can solve that but two way with two ways even adding and adding a div inside the column and have that to have a little bit of width or not or just adding the margin inside here whatever you want to do so for me i'm going i think i'm going to add yeah i'm going to add a margin so let's go and add margin so let's go for 50 pixels here and 50 pixels here and case stay and margin no because it pushes here i'm going to put inside the columns the margin so the padding sorry so columns let's go for sizing and spacing and here uh it's a good way to change the width here so let's add 80 here why didn't i think that in the first place i don't know okay now i can go inside the div and have that to be in the center okay so as you can see i made mistakes all the time and i have to go and search what i'm doing because you don't type the code into a paper and see how it looks you just type everything inside here and make the changes on the fly so now that we have the columns to be eighty percent you can see now how it looks and i think it's a little bit better maybe it could go for 70 or something maybe it's better okay let's save the changings and now we're going to see also the seven six eight how it looks and now i can go for the columns here and put those one hundred percent so let's cover sizing and let's go for the width to be 100 percent okay and leave it as this and now i have to go for this to div and remove the spaces sizing and spacing and let's go for margin zero margin zero okay so the form is not too bad and now we can save that changes the image should also have the same layout and so let's go to the div advanced sizing spacing and put the modding to be zero and here the padding to be zero also let's say that and we're okay with that also and let's go to the last one which is less than 480 and the image is okay but as you can see now the contact form it's not looking good now i don't think i can make too much changes in the form without editing in custom css let's go to advanced and see the sizing if it's going to work 80 pixels yeah it's not going to work as you can see it messes around with everything okay and let's see for that div what changings have we had all devices we have a width of 100 and sizing and spacing and here we have 80. so here we have 120 and here we have zero okay this is the correct one and here here the this pa the as you can see the shortcode takes too much width so let's go for 120 it's not going to change now i cannot fix that because this is it needs custom css and i cannot do anything with that i think let's go for 100 and see if it's going to work no let's go a little bit less now it's not changing it takes the space that it wants okay here so i cannot make any more changes in here and of course i wouldn't choose this kind of form the contact form 7 for me in my website so let's save that and see how it looks now in the front end and as you can see it's looking pretty good now i haven't checked this how it looks when you shrink so as you can see here it looks like this which i don't really like i don't think that this is a good style for uh maybe a tablet and this is certainly not good for a mobile phone and this is okay but i would not say that i would like the cover for the mobile phones okay so they're putting first the contact form so you can do that by going into the columns and here you can reverse the column order when you want so let's go for 9.92 and now when we go and drop less than 992 we will have the contact form first and then we will have this guy so that was the video uh hopefully you it didn't bor i didn't board you and uh thanks guys for watching please add in the comments below if you want to see another styling i have two or three ideas what to do next and subscribe to my channel for more videos like this thanks guys and i will see you in the next video bye

Channel: Stratos Tutorials

Views: 1,018

Keywords: Oxygen Tutorials, oxygen Tutorial, Advanced Oxygen Building, Oxygen Advanced building, oxygen advanced layout, oxygen css, oxygen html, oxygen pricing table, how to use oxygen, how to create elements with oxygen, overlapping elements, overlapping elements oxygen, z-index oxygen

Id: oWvTIrNzIdI

Length: 30min 32sec (1832 seconds)

Published: Sat Feb 27 2021