Sliders with Text and shapes

Design help General
1

I am new to Webflow and I need help with this underlapping layout in a slider. I am sure its simple to do, I’m just not sure how. This was designed in Figma. I want to be able to underposition the white ellipse under each of this words so I thought a parent div block with flexbox, within a div block for the first sentence and then a heading for the rest of the sentence might do the trick. Also I want a subtle animation so the whole thing appears smoothly.

Inicio1
Inicio11920×1212 265 KB

Inicio2
Inicio21920×1212 155 KB

Inicio3
Inicio31920×1212 210 KB

Here is my site Read-Only: https://radial-ddbe4d.webflow.io/

2

Hi @pedromarroquin,

I made a demo site you can check out for the ellipse around the text. This just uses a span and then a border with a border radius of 50% - here’s the read only: https://preview.webflow.com/preview/ellipse-around-span?utm_medium=preview_link&utm_source=designer&utm_content=ellipse-around-span&preview=4d5602fa30c8bbf608e75941d7f28607&workflow=preview

Would you be able to send through your Read-only link to your so I can demonstrate this within your site?

Cheers

3

Hey @mww ,

Thanks for the demo! I think you cracked it. Never thought of just having a text block.
Yes, this is the read-only link,

4

Hi @pedromarroquin,

here’s a quick demo I recorded which will hopefully point you in the right direction: Radial - Loom Recording

Hope this helps!

1 Like
5

Hey @mww,
Thanks for the insight, definitely worked, didn’t knew about text spans before.

I have a follow up question that you might know how to solve…
I’m trying to make fluid responsive my site using the Timothy Rick’s Wizardry method, when I switch to tablet layout or smaller some things already re-size, but I can’t get the text to do the same, looks like something related to the line height or height of the spans and text blow…

Thanks in advance! :wave:

this is the read-only link