GeneratePress CI - Your own design

Hi there,

thanks for the feedback on the site :)

The image itself is an SVG image.
Its added to the GP Site using a Generate Blocks Container Block, with the SVG added as the Container Shape:

https://docs.generateblocks.com/article/container-overview/#shapes

It requires the Pro version of GB to add your custom shapes like that.
But it could be achieved using an Image Block and some CSS for absolute positioning.

Thanks David!

I use GB Pro. I tryed it, but I didnt's see the possibility to adjust the SVG to the left or right instead of having it on full width.

I guess it's more a topic for the GB Community now. But where is the fault in my thoughts when I try it? Is there somewhere an instruction how to do it?

Best regards,
Katrin

Hi Katrin,

Any chance you can link us to the site in question so we can see what you currently have?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

Hey,

I didn't really had anything to show, since it didn't look at all how it should. But I rebuild it with an SVG I already have on the website. It's not what I would actually want, cause I will design the SVG when I know I can use it :D The SVG should be in the left or right corner just like in your design.

The link is in the private info.

Katrin

It will require a little CSS.
First select the Container Block that has the shape inside, and in Advanced > Additional CSS Class(es) add: shape-overlay

Then add this CSS:

.gb-container.shape-overlay > .gb-shapes .gb-shape {
    max-width: 25%; /* limit width of SVG */
    top: -75px; /* Pull shape over the above container */
}

And if you want the shape on the right, change the CSS to:

.gb-container.shape-overlay > .gb-shapes .gb-shape {
    max-width: 25%;
    top: -75px;
    left: auto;
}

Hey David,

that's perfect thanks!

Hope I'll be able to adjust the svg exactlty where I want it, when I designed it. But I think it will work :)

Best regards,
Katrin

Hello again :)

I just saw, that the SVG in my case will adjust when it comes to smaller screen size. Means it gets compressed and the ratio width to height won't stay. But for your svg on your website it does alway stay in the correct ratio. How can I fix that?

Use a fixed width eg. width: 100px; instead of width: 25%; in the CSS.

I did, but it doesn't keep the correct ratio.

Might be best we take a look when you have the final SVG in place, then we can advise on its settings and CSS required to keep the scaling you need :)