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.
You can grab all the CSS here: generatetweaks.ogal.dev/2-dec...
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
Join our free community: theadminbar.com/group/
(voted best WordPress community!):
🔴 EVENTS
See past and upcoming live interviews & workshops: theadminbar.com/events/
🎁 PRODUCTS
Sell more care plans with The Website Owner's Manual: theadminbar.com/products/wom/
Write proposals in less than 15 minutes with this template: theadminbar.com/products/easy...
Fill your prospect pipeline in this 3-week challenge: theadminbar.com/products/pros...
5 Airtable templates I use to run my agency: theadminbar.com/products/agen...
📨 NEWSLETTER
Stay up-to-date with the best from in and around The Admin Bar: theadminbar.com/friday-chaser/
🤖 MISC
Visit our website: theadminbar.com
Product endorsements: theadminbar.com/products/#end...
Kyle on Twitter: / kylevandeusen

[@ROSTYK1000]

We need more layouts video like this. Thanks.

[@kylevandeusen]

I love doing them! If you come across some challenges, please send them my way!

[@TheAdminBar]

More to come!

[@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!

[@agentbey]

Nice challenge and review.

[@TheAdminBar]

Thanks! Glad you enjoyed!

[@brianrougeau9120]

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

[@TheAdminBar]

Thanks, Brian! Glad you enjoyed!

[@iamYasin22]

Great Tutorial As Always ♥ Waiting for more

[@TheAdminBar]

Glad you enjoyed!

[@PeterMelling1]

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!

[@TheAdminBar]

Ah so glad to hear that! If you struggle with any other layouts, please let me know! It's hard for me to know what people need or what they already understand!

[@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!

[@TheAdminBar]

Thanks, Jonathan! I'm glad it helped!

[@stevebaker2896]

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!

[@fokhrulabedin]

Thank you

[@TheAdminBar]

You're welcome!

[@hitechmod]

👍Thank you.

[@TheAdminBar]

No problem!

[@MarcelHeiniger]

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

[@TheAdminBar]

I'm using ipsum I created 🤣 It's at websiteipsum.com. To call it up using the key command, I use TextExpander. I have wi1 for one paragraph, w2 for two paragraphs, etc. Helps speed things up!

[@milolam2447]

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!

[@TheAdminBar]

Thanks! Negative margin should do the trick, no?

[@marionpaolo319]

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

[@TheAdminBar]

I would imagine so, but I didn't test any of this in Elementor. It's all pretty basic CSS, so I'm sure it works in any builder - it might just be a case of finding the right selector.

[@marionpaolo319]

@@TheAdminBar I just tested it and it works thank you very much for this. I've been meaning to know the solution for a very long time!
But in some weird reason when the layout is inverted (Photo right, texts left), the texts needs to be wrapped on an 'inner widget' first, else it does not work.

[@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?!

[@TheAdminBar]

Hummm so hard to know without seeing it for myself. Do you have a link?

[@YolandaLippens]

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

[@indobo3678]

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

[@TheAdminBar]

Elementor has more features built in, which probably makes it more beginner friendly. However, I would strongly suggest diving into those CSS skills as soon as possible. It makes EVERYTHING easier.