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

https://www.youtube.com/watch?v=mMcgRLqh7NE

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.

 

CREATE COLUMN:

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.

CREATE IMAGES:

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.

ADJUST PADDING:

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.

COLOURS:

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.

MARGIN AND SECTION FOR SHAPE THE OVERLAPPING:

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.

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.

CREATE IMAGE BOX:

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.

CONCLUSION:

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.

This Post Has One Comment

Leave a Reply