How to tackle this design

Design help General
1

Hi guys,
**New to webflow”
How would you recommend to build this section?

Thank!

image
image893×510 37.3 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey @AviWhol
Your Read-Only Link isn’t working. Please fix that so I can take a look and try to help you build what you want.

3

Hi @AviWhol,

If that is a one page filling the whole viewport, I would recommend:

  • create a section of 100% width and 100vh height
  • add an image fill set to ‘contain’ using the specified image above
  • set the section to display ‘Flex’ aligned ‘centre’ on the vertical and horizontal
  • add a div in the centre of the section as a wrapper for your content . Set this to ‘Flex’ and vertical
  • add a single div as a wrapper for your tags at the bottom, a text block for your copy, and a div for your top section

Top div:

  • give this div display ‘Flex’ and centre align it and give it position ‘Relative’
  • add H1 heading for the number and style appropriately, and give it position: ‘Absolute’ and ‘left’
  • add another div block as a wrapper for the ‘My Role’ and give it position ‘Relative’ and z index of 1
  • add H2 heading inside this and style for ‘my role’ copy and give it a margin of 20px
  • add a div below this with a width of 50px and height of 8px and fill with desired red colour.

Bottom div:

  • give the div block a flex position and centre align the contents
  • add 1 div with a low opacity red fill and give it a class of ‘tag’ (or whatever you feel like) and give it padding of 5px and a left and right margin of 5px.
  • add an H3 heading inside this and style appropriately.
  • copy the first div you created and paste 3 more times
  • change the text in the other 3 blocks to suit your design.

All done!

3 Likes
4

Thanks for the explanation :grin:

But I didn’t want to use one full screen image but three separated images to create a parallex effect (I probably should have wrote it in the qustion…).

5

Hi Gilson,
I haven’t started working on it, I used an image from Figma…

1 Like
6

@AviWhol

I made one example for you. You can break it down and modify as you want.

The principle is simple:

  • Make a section that can hold the content and set it as position: relative.
  • Then you can put any image that you want with position: absolute and position it anywhere you want without affect the other items.
  • Finally you can animate it using the interactions.

See the live example:
https://hero-example-parallax.webflow.io/

And the read-only link:
https://preview.webflow.com/preview/hero-example-parallax?utm_source=hero-example-parallax&preview=b59ea226bfeee42e89b6e2b7480cdf81

7

Amazing gilson, thank you so much :grinning:

Couple of question:

  1. The images you inserted shouldn’t be in a div?
  2. If I want yo put a portion of the image outside the screen, I should use overflow: hidden on the section and drag the image outside a bit? like this:
    %E2%80%8F%E2%80%8F%D7%9C%D7%9B%D7%99%D7%93%D7%94
    %E2%80%8F%E2%80%8F%D7%9C%D7%9B%D7%99%D7%93%D7%941920×664 56.3 KB

Thanks gilson!

8

That’s not necessary, although it can be helpful for achieving some effects.

Sure, that’s the way. But keep in mind that if you set overflow: hidden on Webflow’s UI, it’ll hide both horizontally and vertically and nothing will show outside the section.

If you want to achieve the same effect just horizontally you’ll need to set the section property using CSS the custom code overflow-x: hidden.

9

Thanks again :relaxed:
Last qustion - how do I add a custom code to a section?

10

Insert an Embed element and type/paste the custom code. In this case you should paste your CSS code between <style></style> .

11

Great gilson, thank you!