Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

How to implement this layout?

  • 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: black

    Settings 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: white

    Settings for container c:
    1. width: 40%

  • 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 selector container-a:before, set the background image size to cover, set content to "", inset(top,right,bottom,left) to 0, 0, 0, 50%, and set position to absolute.

    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 -->
  • Thank you very much, Ying, that helps me further!
    👍

  • You are welcome   🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.