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 342 Comments

  1. Matha Fant

    Thanks so much the information. I love sucking dick btw hmu

  2. cheap flights

    Truly when someone doesn’t understand afterward
    its up to other people that they will assist, so here it takes place.

  3. cheap flights

    Hi it’s me, I am also visiting this website on a regular basis,
    this web site is genuinely fastidious and the visitors are really sharing pleasant thoughts.

  4. cheap flights

    I loved as much as you will receive carried out right here.
    The sketch is attractive, your authored subject matter stylish.
    nonetheless, you command get got an nervousness over that you wish be
    delivering the following. unwell unquestionably come further formerly again since exactly the same nearly very often inside case you shield this
    increase.

  5. tinyurl.com

    Hmm is anyone else having problems with the pictures on this blog loading?
    I’m trying to determine if its a problem on my end or if it’s the blog.
    Any suggestions would be greatly appreciated.

  6. cheap flights

    Howdy! I’m at work browsing your blog from my new iphone 3gs!
    Just wanted to say I love reading your blog and look forward to all your posts!

    Carry on the superb work!

  7. tinyurl.com

    When some one searches for his essential thing, so he/she desires to be available that
    in detail, so that thing is maintained over here.

  8. tinyurl.com

    Thank you for sharing your thoughts. I truly appreciate your efforts and I am waiting for your further write ups thanks once again.

  9. What’s up everyone, it’s my first visit at this
    web site, and piece of writing is genuinely fruitful
    in support of me, keep up posting such articles or reviews.

  10. ivermectin lotion [url=https://ivermectin6mg.com]generic ivermectin for humans [/url] ivermectin 1% hundred milliliter bottle price ivermectin in ear how much ml?

  11. Jeffreyrig

    best over the counter viagra viagra amazon
    viagra online usa

  12. WayneNeert

    buy viagra online canada viagra cost
    viagra from canada

  13. gamefly

    I’m really enjoying the design and layout of your
    site. It’s a very easy on the eyes which makes it much more pleasant for me to
    come here and visit more often. Did you hire out a designer
    to create your theme? Great work! games ps4 allenferguson games ps4

  14. ordering ventolin online [url=https://topsalbutamol.com]where to buy ventolin [/url] cost of ventolin inhaler at walgreens how to use albuterol nebulizer

  15. Way cool! Some extremely valid points! I appreciate you writing this write-up and also the rest of the
    site is also very good. games ps4 allenferguson games ps4

  16. dosage for amoxicillin [url=https://500amoxicillin.com/]cost of amoxicillin [/url] how long can you take amoxicillin how many days should i take amoxicillin 500mg

  17. lasix horses

    albumin lasix [url=https://furosemide100mg.com]can you buy furosemide online [/url] where to buy lasix furosemide is there a pharmacy where i can get lasix without prescription

  18. zithromax cat [url=https://hqazithromycin.com]where to get zithromax over the counter [/url] azithromycin pill dosage for chlamydia what class of antibiotic is azithromycin

  19. ps4 games

    Hi it’s me, I am also visiting this web page regularly, this web page is really good and the visitors are really sharing pleasant thoughts.

  20. tinyurl.com

    My developer is trying to persuade me to move to .net from PHP.
    I have always disliked the idea because of the expenses. But he’s tryiong none the
    less. I’ve been using WordPress on numerous websites for about
    a year and am anxious about switching to another platform.

    I have heard great things about blogengine.net.
    Is there a way I can transfer all my wordpress posts into it?
    Any kind of help would be greatly appreciated!

  21. web hosting

    If you are going for finest contents like I do, simply pay
    a quick visit this web page daily since it provides quality contents, thanks

  22. doxycycline other names [url=https://100doxycycline.com/]where can i buy doxycycline [/url] can doxycycline make you extremely tired what is the medicine doxycycline used for

  23. prednisolone withdrawal symptoms [url=https://10prednisolone.com/]120mg prednisolone [/url] buy prednisolone online no prescription how long does prednisolone take to work for ulcerative colitis

  24. clomid bbt chart

    clomid prescription online [url=https://clomiphene100.com/]generic over the counter clomid [/url] side effects of clomid 150mg who makes clomid for men

  25. web hosting

    Thank you for the good writeup. It in fact was a amusement account it.

    Look advanced to more added agreeable from you! However, how could we communicate?

  26. web hosting

    Thanks for some other informative site. Where else may
    just I am getting that type of info written in such a perfect means?
    I’ve a challenge that I am simply now operating on, and
    I have been at the look out for such info.

  27. dapoxetine hcl 90mg [url=https://dapoxetine30.com/]priligy mexico [/url] what pills available in usa have dapoxetine where to buy priligy usa

  28. tinyurl.com

    If you are going for finest contents like me, just visit this site every day because it presents quality contents, thanks

  29. buy diflucan cvs [url=https://fluconazole50.com/]buy diflucan without a prescription [/url] effect of diflucan on gut how does diflucan interact with amiodarone

  30. Kbdndexy

    [url=https://papersonlinebox.com/]write my paper co[/url] buy custom papers online buy school papers professional paper writing service

  31. synthroid tabs

    hair loss synthroid [url=https://levothyroxine50.com/]buying synthroid online [/url] increase synthroid dose side effects how to adjust synthroid dose

  32. Brfgdexy

    [url=https://ljcialishe.com/]cialis discount[/url] [url=https://cialisvja.com/]cialis daily review[/url] [url=https://viagraonlinejc.com/]viagra commercial model[/url] [url=https://viagratx.com/]viagra cheap[/url] [url=https://buycialisxz.com/]can you buy cialis over the counter[/url]

  33. GrvBrora

    [url=https://kloviagrli.com/]does the government pay for viagra[/url] [url=https://vigedon.com/]what does viagra do[/url] [url=https://llecialisjaw.com/]cialis back pain[/url] [url=https://jwcialislrt.com/]cialis dosage for bph[/url] [url=https://jecialisbn.com/]cialis for daily use[/url]

  34. Fbshtiest

    [url=https://thesisacloud.com/]thesis proposals[/url] help with writing thesis umi thesis thesis binding service

  35. proscar propecia

    propecia fertility [url=http://finasteridehq.com/]best generic propecia [/url] does propecia prevent hair loss after transplant what is propecia called in india

  36. gabapentin gel

    metformin 500 [url=https://metforminhq.com/]glucophage 100 mg tablet india [/url] does metformin cause joint pain how to lose weight with metformin

  37. neurontin 50 mg [url=http://gabapentin100.com/]neurontin 100 mg capsule [/url] is there withdrawal from neurontin what does gabapentin treat

  38. metformin 750 mg

    paxil for dogs [url=https://paroxetine10.com/]paxil 30 mg tab [/url] how to rake paxil for sex how long does paxil take to work for social anxiety

  39. metformin 101

    buy plaquenil uk [url=http://ushydroxychloroquine.com/]hydroxychloroquine sulfate 200mg [/url] how many hours does plaquenil work how much is plaquenil

  40. 0mniartist

    My brother recommended I might like this web site.
    He was once totally right. This put up truly made my
    day. You can not believe simply how a lot time I
    had spent for this information! Thanks! 0mniartist asmr

  41. It’s actually a great and useful piece of information. I’m happy that
    you just shared this useful info with us. Please stay us up
    to date like this. Thanks for sharing. 0mniartist asmr

  42. tinyurl.com

    Link exchange is nothing else except it is simply placing
    the other person’s weblog link on your page at appropriate place and other person will also do same for you.
    0mniartist asmr

  43. Do you have a spam problem on this site; I also am
    a blogger, and I was curious about your situation; we have created some nice procedures and we are looking to swap techniques with
    others, why not shoot me an e-mail if interested.

    0mniartist asmr

  44. Rafaeldiofs

    lasix uses: lasix – furosemide 100mg

  45. Rafaeldiofs

    drug paxil: buy paxil – paxil for depression

  46. Robertgob

    buy lasix online: cheap lasix – lasix generic name

  47. Georgenit

    propecia generic no prescription: buy finasteride – propecia for hair loss
    buy ventolin online australia

  48. Georgenit

    valtrex 500 mg tablet: generic valtrex – can you buy valtrex over the counter in canada
    ventolin hfa inhaler

  49. Georgenit

    tadalafil 20mg best price: generic tadalafil – cheap tadalafil
    ventolin inhaler no prescription

  50. gamefly that

    Hi there, You have done an incredible job. I will certainly digg it and personally suggest to my friends.
    I’m sure they will be benefited from this web site.

  51. asmr there

    Hi there! I simply would like to offer you a big thumbs up for your great information you have got right here on this post.

    I am coming back to your blog for more soon.

  52. an asmr

    Hey! Quick question that’s completely off topic. Do you know how to make your site mobile friendly?
    My blog looks weird when viewing from my iphone. I’m trying to find a theme or plugin that
    might be able to fix this issue. If you have any suggestions, please share.
    Thank you!

  53. WilliamSnabe

    canadian pharmacy ltd ed pills – п»їcanadian pharmacy online
    www pharmacyonline

  54. was asmr

    Have you ever considered about adding a little bit more than just your articles?
    I mean, what you say is important and everything.
    But just imagine if you added some great photos or
    videos to give your posts more, “pop”! Your content is excellent
    but with images and video clips, this website could definitely be
    one of the most beneficial in its field. Great blog!

  55. RichardBeaum

    buy cialis philippines ed drugs – buy cialis online best price
    cialis 20 mg cost

  56. gamefly why

    Highly energetic blog, I loved that bit. Will there be
    a part 2?

  57. asmr their

    It’s not my first time to visit this website,
    i am visiting this web site dailly and obtain pleasant data from here daily.

  58. RichardBeaum

    fastest delivery of generic cialis ed drugs – cialis 20mg usa
    can i buy cialis in toronto

  59. This is really interesting, You’re a very skilled blogger.
    I have joined your feed and stay up for looking for extra of your excellent post.
    Also, I’ve shared your website in my social networks

  60. RichardBeaum

    buy cialis insurancecialis online without prescription buy cialis tadalafil tablets – buy cialis online in canada
    cialis without prescriptions canada

  61. asmr where

    Everything is very open with a really clear description of the issues.
    It was definitely informative. Your website is extremely helpful.
    Thank you for sharing!

  62. RichardBeaum

    buy cialis drug ed drugs – buy cialis with paypal
    buy cialis online best price

  63. asmr or

    Greetings from Idaho! I’m bored at work so I decided to check out
    your blog on my iphone during lunch break. I enjoy the info you provide here and can’t wait to take a look when I get home.
    I’m surprised at how fast your blog loaded on my mobile ..
    I’m not even using WIFI, just 3G .. Anyways, superb site!

  64. MichaelVielm

    п»їhow much does cialis cost with insurance: find cheap cialis online taking cialis soft tabs
    much does cialis cost without insurance

  65. bitly.com

    scoliosis
    This is a topic that is close to my heart… Best wishes!
    Where are your contact details though? scoliosis

  66. bitly.com

    scoliosis
    I believe this is one of the most important info for me.
    And i am glad studying your article. However want to observation on few normal issues,
    The website style is great, the articles is actually excellent : D.
    Excellent job, cheers scoliosis

  67. scoliosis
    If you are going for finest contents like I do, only pay a visit this site every day since it offers feature contents, thanks scoliosis

  68. free dating sites
    excellent issues altogether, you simply won a new reader.
    What might you recommend about your post that you just made
    some days ago? Any sure? free dating sites

  69. asmr was

    I was extremely pleased to uncover this website. I need
    to to thank you for your time for this particularly wonderful read!!

    I definitely appreciated every part of it and I have
    you bookmarked to check out new information on your
    blog.

  70. dating sites in

    Way cool! Some extremely valid points! I appreciate you penning this article and the rest of the website
    is also really good.

  71. of dating sites

    Wow, this post is nice, my younger sister is analyzing these things, thus I am going to convey her.

  72. AlitoPrielo

    generic cialis online fast shipping where to get tadalafil tadalafil goodrx buy tadalis [url=https://tadagatadalafil.com/ ]tadalafil drug [/url]

  73. idrossiclorochina

    hydroxychloroquinine [url=https://hydroxychloroquinex.com/#]interactions for hydroxychloroquine[/url] dolquine

  74. on dating sites

    Greetings from California! I’m bored to tears at work so I decided to browse your blog on my iphone
    during lunch break. I really like the info you provide here and can’t wait to take a look when I get
    home. I’m surprised at how fast your blog loaded on my mobile
    .. I’m not even using WIFI, just 3G .. Anyhow, superb blog!

  75. Very nice post. I just stumbled upon your blog and wished to say that I’ve really
    enjoyed browsing your blog posts. In any case I will be subscribing to your rss feed and I hope you write again very soon!

  76. can hydroxychloroquine get you high [url=https://hydroxychloroquinex.com/#]trump hydroxychloroquine[/url] hydroxychloride 200 mg

  77. This is my first time go to see at here and
    i am really pleassant to read everthing at single place.

  78. dating sites was

    I constantly spent my half an hour to read this weblog’s content daily along
    with a mug of coffee.

  79. Fastidious response in return of this query with genuine arguments and
    describing all concerning that.

  80. Hello all, here every one is sharing such knowledge, thus it’s good to read this webpage,
    and I used to pay a quick visit this weblog daily.

  81. Robertenato

    valtrex 500mg coupon valtrex – valtrex 500 mg daily

  82. viagra brevetto

    cialis 20mg france [url=https://francecial.com/#]cialis prix pharmacie [/url] prix cialis 10mg en pharmacie combien coute le cialis 20mg

  83. amazone cialis

    viagra eureka [url=https://franceviag.com/#]viagra ordonnance [/url] viagra en ligne site fiable viagra comment le prendre

  84. storno brzinol

    F*ckin’ tremendous things here. I’m very glad to peer your post. Thanks so much and i am taking a look ahead to touch you. Will you please drop me a e-mail?

  85. Robertenato

    buy amoxicillin online mexico buy amoxicillin – purchase amoxicillin 500 mg

  86. vente de viagra

    cialis dosaggi [url=https://italycial.com/#]cialis 100 mg prezzo [/url] acquisto cialis senza ricetta in farmacia cialis chi lo produce

  87. acheter viagra

    viagra donne [url=https://italyviag.com/#]viagra 100 mg prezzo in farmacia [/url] data di scadenza del viagra viagra femminile dove comprarlo

  88. generico viagra

    cialis femenino [url=https://spaincial.com/#]viagra y cialis contrareembolso [/url] viagra o cialis cual es mejor que cialis es mejor

  89. farmaco cialis

    viagra original [url=https://spainviag.com/#]comprar viagra original barato [/url] comprar viagra en madrid hoy cual es el sustituto natural de la viagra

  90. JohnnySpepe

    amoxicillin capsule 500mg price cheap antibiotic – cheap amoxicillin 500mg

  91. JohnnySpepe

    strongest antibiotic for bacterial infection cheap antibiotic – buy zithromax

  92. Davidreike

    cheap erectile dysfunction pills online: generic ed drugs male erectile dysfunction

  93. definition viagra [url=https://1levitranow.com/#]générique viagra sans ordonnance [/url] acheter du viagra sur paris ou commander du viagra en france

  94. viagra ejaculation precoce [url=https://1stlevit.com/#]viagra sur internet [/url] acheter viagra en ligne sans ordonnance comment acheter viagra

Leave a Reply