How to Create a COOL PAGE SECTION by Overlapping Rows in Elementor | Elementor Tutorial

hey what's going on guys this is Jim fahadh I'm a web developer in this tutorial I'm gonna show you how you can create this kind of cool image boxes into your website using Elementor this is basically overlapping rose in Elementor so you can see there is a content box above and in the back there is an image and they are overlapping each other and overall the illusion the mid makes it really cool so we will create this overlapping rows instead of this kind of flat image boxes because you see this kind of flat image boxes looks kinda boring so we will create this today so let's go back to our elemental page builder so here it is we will recreate this and my main goal here to show you how to create overlapping rows in elemental because in real there is no such option in elemental like add new row or add new column row in Elementor so we will have to apply some trick but that's not nothing crazy just follow along so first I want to add a new section here so I'm clicking here on this plus icon to create a new section you know we need to click on this plus icon and I want this structure and first inside this section I want to have the inner section let's drag the inner section inside this section and drop it so this is basically the two columns inside this left column we will create days and on inside this right column we will create this but the problem is we cannot easily create two rows inside of a column like one column is for image and another column is for content box because in general Elementor has no such option like add new row so let's apply some trick so let's first go to the column instead of clicking this column let's go to the outer column here and right click and click on add new column now basically these two columns are nested within the outer column so let's now delete the right one right click on this and click delete so this column is now nested inside the outer column so we can now use it as a row like you see if we click or right click on this grab icon you cannot see any option like add new row or anything like that so let's duplicate it we will use it as a row so click on duplicate now on this top section we will use the image and inside this section we will create this content box so let's create the image first you may think now I drag and drop the image element from here this one but I will not use the image element because I have not much control over it so instead of image I want to use a background image on this column so I'm clicking here on this edit column icon let's go to style background type classic there's no upload an image let's upload this one click insert media we cannot see the background image yet because we only can see the background image when we have a minimum content over it so to follow the rules let's go to elements and take a spacer inside it now here's the background image but we cannot see it properly when it had just it so let's click on column icon from background image here position I want to make it sender Center alignment default is fine repeat let's make it no-repeat sighs I want to make it cover and how can we adjust the size of the image we can do it by adding some padding into this column so let's go on advanced I want to add some padding at the top and bottom and instead of pixel I want to give it in percentage let's unbind it I want to give it top 20 pixels of padding and bottom 20 pixel or maybe a little bit 23 at the bottom 23 at the top all right now let's create the content box like this inside this section so first I want to add a background color into this column so let's click on edit column icon now go twist I'll background background type classic and here you can pick the color I want to have this bluish color so it's 4 0 5 4 B 2 this one we cannot see the background color because we have no content yet so let's now have hitting first so let's click on this plus icon and drag a heading inside it I want to change the text and its color so let's copy the text from here in this text I want to have this text here so I'm just pasting it here let's now go to Styles text color I want to make it white and let's go to typography I want to make the font wet normal all right now underneath the heading I want to add this text here to do that lets go to elements and let's drag a text editor here and drop it under here I also want to change the text color so let's go to styles from text color I want to make it white also I want to replace this dummy text to this so I'm just copying it from here and I'm pasting inside it content I'm just pasting here and then I want to add a button here like this one so let's now go to elements and here is the button let's drag it and drop it here now I also want to change the button color like this one I want to use the same color on this button so I'm clicking here on this edit button icon let's now go to style and from here background color and pasting the color here all right now I want to add some padding inside this whole content area so we don't necessarily need to do that one by one like adding padding to hidding adding some padding into content tags or adding some padding into button individually I want to add them all together so to do that let's click on this column icon there's GRU advanced and let's now add 10% of padding all around it so let's click here on percentage icon and give it 10% top right bottom and left all right maybe a little less at the top and bottom let's unbind it and top I want to give 8 and the bottom I want to give 8 left and right 10 pixel is good now I also want to add some margin at the right and make it overlapping the image on the top so I will apply some negative margin to make it overlapping so let's add some negative margin first unbind it and I want to add minus 15 pixel at the top 15 pixel had the right instead of pixel let's make it in percentage so I'm clicking here on percentage icon so minus 15 at the top right 10 percent and to keep the counter balance I'm also adding some margin at the bottom so 10 percent margin at the bottom all right now to create a nice illusion I want to add some padding on this image section so let's grab this section icon let's go to advanced and bind the padding select the percentage icon and I want to add 10% left padding yep it looks really cool let's now create the right section all right column and to do that we don't need to do everything whatever we have done manually we just duplicate this whole thing and we'll make some little adjustment so let's click on this column icon right click here and click on duplicate and let's delete the empty one right click here delete this now I just to reverse the padding or overall elysion on the right side so let's click on this section icon here go to advanced instead of left let's keep it zero and right I want to add ten is done and I just want to replace this image with other image so let's click on column icon go to styles and from here image click this I want to have this image now insert media so our image section is reversed let's now reverse this one let's click on the column icon go to advanced and here instead of right let's add some margin on the left so let's make the right one zero and the left one let's make it ten now I also want to change the text really quick just copying ding from bottom let's just copy this and paste it inside here let's now copy the text copy and let's now paste it inside here all right it's done and even if you want to create a section a flat section like this how I can do that I'm also showing you that how easily you can make this a flat section instead of this kind of overlapping rows though this kind of overlapping rows looks really really cool but for some case if you don't want that I'm also showing you how I can create flat image box sections so let's just duplicate this one right click on the grab icon and click duplicate so here this one is duplicated I want to make it flat instead of overlapping so let's just go to the image section click on the grab icon you go to advanced and leave the left heading 10 to 0 let's do the same with this one advanced right padding 10 to make it 0 and let's now go to our content section click on the column icon go to advanced bind all the margins and megohm zero all together is done let's do the same with the right one click on the Edit column icon go to advanced bind all the margins and make them zero altogether so here's the flat image section and here is the overlapping rows section please let me know in the comment box which one you like most in between the flat one and the overlapping one I personally like the overlapping one because it looks really cool to me now let's also have a look how it looks on responsive mode so let's go to responsive mode here let's click on tablet here is the tablet view it looks really nice on tablet also the flat one looks good let's now have a look on mobile view let's go to mobile from responsive mode let's have a look it looks perfect overlapping one looks perfect the flat one also looks perfect on mobile devices alright that's it for now thanks for watching if you liked it please this give video a thumbs up and don't forget to subscribe and if you need any help for your WordPress website you can contact me through my website I will put that link in the description below thank you so much Jim fahadh signing out [Music]

Channel: Jim Fahad Digital

Views: 9,193

Keywords: overlapping rows, elementor overlapping rows, elementor multiple rows, grouping widgets in elementor, how to group widgets elementor, multiple rows per column, elementor advanced layout, elementor blocks, elementor advanced columns and rows, elementor tutorials, elementor tips, elementor tricks, elementor how to, elementor design tips, design tips, design tricks, image box, design trends, complex layout elementor, ferdy, ferdy korpershoek elementor, jim fahad digital

Id: mMcgRLqh7NE

Length: 12min 45sec (765 seconds)

Published: Tue Jan 07 2020