Streaming live at 10am (PST)

How to design this page I done with Muse? I can't figure it out?

I am about to redesign a Muse site. And I have trouble to design this page which I have done with adobe Muse, this page . It seems to be totally hopeless to design this in Webflow. Now I’ve been sitting for several hours and I can’t figure it out. Only if I get help with the first section (the green one) then I can move on to the other sections (red, blue and yellow) myself. But how on earth can you do this in Webflow and also so it looks nice in all the breakpoints ?? Can anyone help?
Here is my sharelink
I look forward to hearing from a Webflow nerd :smiling_face_with_three_hearts: :heart_eyes:

You just want the 1st green section done to see??

Yes everything what’s belong the green one, as you see in this Muse site
Then I would be able to do the others … :smiling_face_with_three_hearts::heart_eyes:

Hi, it’s not very complicated.

For each section, 1 section only, position relative.
Inside you will use the columns with paddings and alignments.
Border bottom.
And for the number and the arrow you set position absolute.

Hope it helps! :slight_smile:

WOW!! thanks a lot :smiling_face_with_three_hearts: I will try it out later today, and let you know, if I can do this :heart::heart:

Hi again! I can’t figure this out? I am sorry :unamused:
I have a video here for you :smiling_face_with_three_hearts:
I would be very happy if you could send me a video back? :heart_eyes: :heart: And regarding to the text, shouldn’t it be in a div? You’ve got the text in a column - but it fills a lot in width, so you have to move the text 350 to the left?
I look forward to hearing from you :smiling_face_with_three_hearts:

Hi

Here is how I would do it. I usually never use columns, its just easier with flexbox. :slight_smile:

To make this work, you should get a good understanding of Relative and Absolute position.

To do the same with the gray triangle you can use the same technique.

Best
Ruben

I missed to send my sharelink

Thanks a lot :smiling_face_with_three_hearts:
But the video is very unclear or obscure, I can hardly see what you are doing? I have to see it fullscreen and there it is really unclear. And can’t see it at all if it’s not fullscreen. I’m so sorry :unamused:
Do you have it in a better quaity? Do you use Loom? It is really good quality with Loom :smiling_face_with_three_hearts:

Its using youtube, so the quality should be better soon. :slight_smile:
I’m using Screencastify, because of the edit option it gives me.

Hi, first of all, sorry my english… :crazy_face:
Second, you can follow the screenshots I’ve sent earlier.
You can use div with flexbox or keep the columns, doesn’t make much difference.


(I’ve tested the other app because don’t need to install the loom .exe on my computer)

WOW , WOW :smiling_face_with_three_hearts: :heart_eyes: :heart:
Thanks a lot :heart:
I would like to download this movie, it is very good. I am not english too :smiling_face_with_three_hearts:
Again, thanks a lot. I learn a lot from this :smiling_face_with_three_hearts:

1 Like

Hi again Krubens! I downloaded the video. And now it is very clear. I can see everything now!
Thank you so much :smiling_face_with_three_hearts: :heart_eyes: :heart:

Hi again @flpdcz I don’t get the same result as you? :thinking:
Here is a movie where I am now with the project.
Why doesn’t I get same result? :thinking: :thinking:

Did you set position relative on the section div?

No, you said in the video I have to set it as absolut?

Yes, the image and the div of the number should be absolute but the section div needs to be relative so this elements will be related to that (and not to the body page).
Also, put the div of the number inside the section, like the exemple bellow:

@flpdcz The triangle is correct now after to put Section green as relative. But still my red rounding wan’t be on top of the section green? her is a newvideo
a new sharelink

That’s it. Put the div inside the section so its absolute position will be related to the section and not to the body page.

It works now!!! :heart_eyes::smiling_face_with_three_hearts:

1 Like