Quick question: what's the best way to do this in webflow?

Design help General
1

Hello!
I’m making this layout:

image
image1456×1462 262 KB

Could someone tell me what’s the best way of doing this?
I have the black section, a white section and the picture overlaps both sections.

Thank you!

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

2

Hey @kwievu how are you doing?

There’s no best way. The easiest, in my opinion, is just use Grid Layout. Grid is the easiest way to overlap content like that without filling your content with unnecessary markup.

The grid way:

  1. Create a<section>
  2. Give it display: grid. In this example I used 4 columns and 6 rows
  3. Inside the section, put:
    1. One empty div
    2. Your content (headings, paragraphs, images, etc)
  4. Give your empty div a background-color: black
  5. Lay out grid child as manual

You’ll get something like this example:
https://preview.webflow.com/preview/gilsons-trendy-project-18e0a4?utm_medium=preview_link&utm_source=designer&utm_content=gilsons-trendy-project-18e0a4&preview=0c6b126d8e30f1fc3da46d13aa9d0038&mode=preview

3

Hello Gilson!
Thank you i’m good how are you?

Thanks for the great explanation and the link!! I’m going to try it and let you know how it worked out :slight_smile:

Cheers.

4

Playing with the grid, but it’s coming all together!
Thanks for the help Gilson!

5

Hi Gilson,
So i’ve completed the project with grid on de desktop, but I noticed that some older browsers do not support grid, so my website looks all wrong. Is there a way to fix it?

Thank you!