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.

GeneratePress GenerateBlocks

Shapes for left/right?

  • swissky
    June 10, 2024 at 4:52 am

    Hey, is there a way to use the shapes for left and right? I have a header where i need some. Or how would you get this header design?

    Best

  • David
    June 10, 2024 at 5:22 am

    Hi there,

    to force a shape to be on the left/right of a container would require some CSS. And could get messy.

    What happens to the layout on Mobile? i can then propose an option.

  • swissky
    June 10, 2024 at 6:07 am

    Hey, i added a mobile link. There is no shape inside then

  • Ying
    June 10, 2024 at 8:49 am

    I would suggest trying this:

    1. Create a structure as below:

    - container 1 (background-image set to the photo)
 -- container 2 (max-width:1200px, margin-left & margin-right: auto), display:flex, justify-content:flex-end)
   --- container 3 (background-image set to the shape, background-position: left center)
     ---- text

    2. On mobile, set container 3’s background-position to right center via advanced background panel.

  • swissky
    July 9, 2024 at 11:38 pm

    okey i did it a little different 😉 but now there is another question: how can i manage that the image dont get smaller

  • David
    July 10, 2024 at 4:59 am

    Place the image block inside its own Container Block.
    And set that Container Blocks > Layout -> Flex Child settings to:

    Grow: 0
    Shrink: 0
    Basis: 80px … adjust this to match the size of the image blocks width

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