What will be the best practice on this layout?

Design help General
1

Hey!
I’ve watched videos of all the possible ways to do the section on the left.
What will be a best practice to do it?
How can I make sure that the text can always stays in the middle of the image?

I don´t want to use it as whole image, because I would like to add some interaction on the text later

thanks a lot in advance!!!

2

I’d probably make the black elipse a div mask (using absolute)

If you share the read only link we can show you how to do that

1 Like
3

thank you so much!
https://preview.webflow.com/preview/cyber-patio?utm_medium=preview_link&utm_source=designer&utm_content=cyber-patio&preview=7a0e20052fc47577a3a1138baf48c490&mode=preview

4

text is easier:

new div in left div colabs called “mask”
put text colabs in mask

settings:
text colabs: Size > width auto, height 100%, fit: cover
mask: Size > width 400px, height 600px (may need adjusting), Overflow: hidden, Fit: fill
Position > relative
Border > radius > 25% (may need adjusting)

Try that and let me know

5

also, you need lots of padding in the text colabs

6

I’ve added the shared link! Would you mind to show it how to make the div mask?

7

it’s here… i made a couple of mistakes while doing it, but if you follow the written instructions too you should be ok.

(wait a minute for it to upload to gdrive!)

8

First of all, I would hire a designer :slightly_smiling_face:

9

it’s done on purpose following anti-design and brutalist trends

cheers :slightly_smiling_face:

1 Like
10

I´ve managed! Thanks a lot for the help :+1:

1 Like
11

no problem, but you need to get rid of all the “text in image” - screen readers can’t read the text. (wow… it’s ALL image in text… NOOOOOOOO)

and some of your contrast ratios (white and green) are not great

tienes hambre section would be better as cards, again, no image in text

if that’s what you want to do (and you don’t, it’s horribly exclusionary) there’s no reason to use Webflow… might as well use weebly or wix or some free thing from GoDaddy

12

yes definitely, I’m aware of the accessibility considerations that should be done. These are my first days trying Webflow, so I basically still research and try all the functionalities to make it the right way :slight_smile:

1 Like