Replicating this box layout and increase image size


I’m rebuilding a page which contained two columns, something like this:

… and so far I have this:

Two things:

  1. How do I replicate that curved, coloured header at the top of each column so that it aligns correctly? As you can see it is straight-edged with a gap around it. I want to curve the top left and right corners, just like in the first example.

  2. How do I increase the size of the first image (the bottle) without it disappearing inside the container column? I’ve tried different Object Fills but can’t get it to increase in size as per the original.

I’ll leave my login details. Thank you!

Hey @demonboy,

Thanks for reaching out!

There is an IP restriction when accessing the WP admin of your website. Please disable it in the meantime while we check your website.

Thank you.

I’m guessing this is Bruteprotect. Please try again.

Hello @demonboy,

Do you want it like this?

if that is the case, in your Section 2 > Row 1 > Column 1 (or Column 2) element settings, disable the border and hide the overflow.

Best Regards.

That’s great, thanks for that, Ruenel. Spot on! How about that image of the bottle? How do I increase the size of it without it disappearing behind the containing layer boundaries?

Hello @demonboy,

Your image is only 150x50. You can disable the Retina (Eye icon) option to make it 300x300 pixels.

If you even want the image to look bigger, you can go to the Effects module settings and add a Scale transform effect.

Hope this helps.