-
Stefanie
Hi team,
I am looking for a way to implement this layout with GB.
The text should be contained in the total width of the site (1264px), but the image should protrude to the right or left, so that it extends to the edge of the screen.
I would be grateful for any help on how this can be realized.
Thank you! -
Hi there,
You can create the layout using a structure like this:
- container a -- container b --- container c ---- text content
https://app.screencast.com/Vrjm3i9TGSc9a
Take the 1st section (text on the left, image on the right) as an example:
Settings for container a:
1. min-height: 60vh (feel free to change the value)
2. display: flex
3. align-items: center
4. background image.
5. background image size: 50% 100%
6. background position: 100% 50%
7. background color: blackSettings for container b:
1. max-width: 1264px
2. padding-left: 40px, padding-right: 40px, padding-top:100px, padding-bottom:100px
3. margin-left:auto, margin-right:auto
4. typography color: whiteSettings for container c:
1. width: 40% -
Stefanie
Hi Ying,
Thank you for your suggestion.
Unfortunately, I have various problems with the implementation:
1. the image is distorted as soon as the browser window is reduced in size
2. the text is in the wrong place (probably due to “margin: auto”?)
3. the text color is not white, although it was defined as such in container b.One more question: is it also possible to make the layout flexible, so that it doesn’t always have to be 50/50, but sometimes 40/60, for example?
-
1. the image is distorted as soon as the browser window is reduced in size
In that case, you need to create a
before
sector for container-a, and apply the background image to the selectorcontainer-a:before
, set the background image size tocover
, set content to""
, inset(top,right,bottom,left) to 0, 0, 0, 50%, and set position toabsolute
.Select the main sector of container-a, set position to
relative
.2. the text is in the wrong place (probably due to “margin: auto”?)
You don’t have container-b in your layout, that’s why this happens.
3. the text color is not white, although it was defined as such in container b.
you’ve set an
h2
color in the customizer, it is more specific than the one you set for its parent container, if you want to override it, the color needs to be applied to the text/headline bock itself.One more question: is it also possible to make the layout flexible, so that it doesn’t always have to be 50/50, but sometimes 40/60, for example?
Yes, change the
:before
‘s inset to 0,0,0,40%.and reduce container C’s width.
Here’s the code of the layout I made, you can copy it and paste it to a new page, hope it’s inspiring 🙂
<!-- wp:generateblocks/element {"uniqueId":"b6bcf995","tagName":"div","styles":{"minHeight":"60vh","backgroundColor":"var(\u002d\u002dcontrast)","display":"flex","alignItems":"center","\u0026:before":{"backgroundImage":"url(https://new.local/wp-content/uploads/2023/12/ryoji-iwata-swu82B_JCFY-unsplash.jpg)","backgroundSize":"cover","backgroundRepeat":"no-repeat","backgroundPosition":"center","backgroundBlendMode":"normal","content":"\u0022\u0022","top":"0px","left":"50%","bottom":"0px","right":"0px","position":"absolute"}},"css":".gb-element-b6bcf995{align-items:center;background-color:var(\u002d\u002dcontrast);display:flex;min-height:60vh}.gb-element-b6bcf995:before{background-image:url(https://new.local/wp-content/uploads/2023/12/ryoji-iwata-swu82B_JCFY-unsplash.jpg);background-size:cover;background-repeat:no-repeat;background-position:center;background-blend-mode:normal;content:\u0022\u0022;top:0px;left:50%;bottom:0px;right:0px;position:absolute}"} --> <div class="gb-element-b6bcf995"><!-- wp:generateblocks/element {"uniqueId":"150cdc8e","tagName":"div","styles":{"maxWidth":"var(\u002d\u002dgb-container-width)","marginLeft":"auto","marginRight":"auto","color":"var(\u002d\u002dbase-3)","paddingTop":"40px","paddingLeft":"40px","paddingBottom":"40px","paddingRight":"40px"},"css":".gb-element-150cdc8e{color:var(\u002d\u002dbase-3);margin-left:auto;margin-right:auto;max-width:var(\u002d\u002dgb-container-width);padding:40px}"} --> <div class="gb-element-150cdc8e"><!-- wp:generateblocks/element {"uniqueId":"4caacaef","tagName":"div","styles":{"width":"40%"},"css":".gb-element-4caacaef{width:40%}"} --> <div class="gb-element-4caacaef"><!-- wp:generateblocks/text {"uniqueId":"0f7fb6cd","tagName":"h1"} --> <h1 class="gb-text">Title</h1> <!-- /wp:generateblocks/text --> <!-- wp:paragraph --> <p>sub title</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa</p> <!-- /wp:paragraph --></div> <!-- /wp:generateblocks/element --></div> <!-- /wp:generateblocks/element --></div> <!-- /wp:generateblocks/element -->
-
Stefanie
Thank you very much, Ying, that helps me further!
👍 -
You are welcome 🙂
- You must be logged in to reply to this topic.