2 Deceptively Challenging Layouts SOLVED using GenerateBlocks (and a little CSS)!

Although neither of these layouts look particularly challenging — they both have a few roadblocks in making it all work responsively.

If you've come across a challenging layout you can't seem to crack with GenerateBlocks, drop it in the comments and I'll see if I can help!

— - — - — - — - — - — - —

[ Video Created and Produced by Kyle Van Deusen ]

👏 COMMUNITY

(voted best WordPress community!):

🔴 EVENTS

🎁 PRODUCTS

📨 NEWSLETTER

🤖 MISC

[ROSTYK]

We need more layouts video like this. Thanks.

[bluetheredpanda]

Hey Kyle! Some minor improvements that I thought were worth mentioning in regards to the first layout:

1. The bottom margin in your paragraph is from the theme (most implement this poorly). A better solution would be to either:
- use CSS to remove the bottom margin from all p tags, except when followed by another paragraph or element where it makes sense:
```
p {
margin-bottom: 0;
}
p + p, p + h1, p + h2, p + h3, p + h4, p + h5, p + h6, p + blockquote, p + code, p + img {
margin-bottom: 1.5em; //whatever the default line-height is
}
```
- or cancel out the bottom margin for paragraphs which are the last child in their parent container:
```
p:last-child {
margin-bottom: 0;
}
```

2. For the z-index, there is no “magic number”. The before element went over the left image, despite its z-index being 0 and that of the image being 11, because of stacking contexts: the color offset is a :before pseudo-element, so it's stacked based on the context of its parent. Its parent (and the image’s parent) both had 10.
But the right column is after the left one in the code, so it stacks on top. So, even though the before had z-index:0, it was actually 0, inside the layer 10, on top of the other layer 10.
A better (and much simpler) way to do that, instead of giving z-indexes to all elements, is just to give the pseudo-element a **z-index: -1**.
This way, you don't have to add anything to the other elements, it just works based on the class.

Hope this is useful. This was a great video, keep them coming!
Cheers!

[PeterMelling]

The second layout is something I've been wanting to do in a while but couldn't figure out how it could be done. Thanks Kyle - keep them coming!

[brianrougeau]

Thank you, Kyle. Very helpful video. Enjoy your day!

[iamYasin]

Great Tutorial As Always ♥ Waiting for more

[Permaslug]

The second layout is extremely helpful and the solution was just hidden in plain sight haha. I had to do that all the time in Oxygen and will have to do it soon in GB :-) Thanks Kyle!

[MarcelHeiniger]

Great video, what do you use for the lore lip sum (.wi2) ?

[stevebaker]

Here's a tricky layout - just like your 2nd one but... flipped so the text is on the left side and the bleed image on the right. As the text is on the left it gets constrained by the regular inner container, but then you need to make the image in the right column break out all the way to the edge of the browser. It's possible of course but requires a different approach - took me a while to figure it out!

[rightpadding]

For #2, can it also be applied with Elementor's column?

[YolandaLippens]

I love your approach on this, Kyle! By the way, do you have Dutch ancestors? (Looking at your last name 🙂)

[milolam]

Love the videos, Kyle! I was wondering how we would go about doing the same thing for Challenge 1 but for a different layout such as containers under a page hero overlapping the hero at the bottom? Basically vertically doing this. Thanks!

[Gojiyaravi]

Kyle, where can I find the CSS needed for this layout? The link you have provided is not working.

[indobo]

Is this blocks friendly for beginners? How if we dont know about coding (css etc)? Blocks vs elementor pro which one better for beginners?

[lysxnn]

i was so happy to find this video but for some reason its not working for me. i have tried it with exactly your code but the negative margin is not doing anything. the background color just stays in the containter?!