Can Anyone Help?

Design help Layout & Design
1

I could use some advice on how to convert this section into Webflow. I’m not sure how to stack and align the wording to the photo exactly. I’m unsure about if I should use multiple sections or a grid, I can’t understand the inline of it all. I really don’t know where to begin with this. I would really love some help with this.

Thanks

Screen Shot 2022-10-25 at 8.30.44 PM
Screen Shot 2022-10-25 at 8.30.44 PM1440×900 215 KB

Here is my site Read-Only: Webflow - Mama_Ts

2

should I just do the copy in figma and export it?

3

Hey @PreciousDeanna

No you don’t have to copy this, just use it as a reference. When you begin building in Webflow, remember responsiveness is horizontal; left and right, not up and down. Things get pushed horizontally, then items flow top to bottom, vertically. The top to bottom does happen but only after there’s no room left and right.

Therefore, you’re idea is to figure out what you want your left photo to do - flow above the text after getting squeezed, or flow below it?

And vise-versa. So your page can be broken up into 6 sections:

  1. Main title
  2. Section 1
  3. Section 2
  4. Section 3
  5. Section 4
  6. Footer

#1: Simple Div set to block - text centered
#2 - 5: One Section, set to flex with two individual Divs inside for each content
For the text, I would use 2 text elements inside the 2nd Div.

That’s it for this, it’s pretty straightforward.

4

Sounds like you’re new to web design, so here’s a tip- look for the patterns, and break them down. then build them back up, according to the patterns you see.

If you look at the page above you’ll probably see these patterns;

  • There are four featured “items” in the center content.
  • Each has a title, a plain-text paragraph, and an image.
  • They alternate layouts… image to left, image to right, image to left…
  • The title and paragraphs are left- aligned to each other, so they can be thought of as a group, regardless of the where the image is.
  • There are dotted lines between the rows, but not one at the very top, or very bottom

You’re looking for things you can group and build together, and then all of those parts fit together to form a whole.

  • I’d first create a DIV, and class it something like offer-section
  • Inside that I’d create 2 DIVs, offer-image, and offer-text
  • I’d apply some layout to the offer-image, like a fixed height and width, and probably drop my first image inside, assuming you’ve made your images e.g. round PNGs.
  • Then inside offer-text I’d drop my title and plain text. Class them offer-title and offer-info or something identifiable. Style those as you want.
  • Now you have enough layout to work on the left/right issue, and the dotted line.
  • I’d duplicate my whole offer-section DIV so now I have two. And then I’d switch those inner div on the second one so that the photo is to the right.
  • I’d now duplicate both of those again to create all 4, and put in my images, title, and text accordingly.

At this point, your image would probably be top-aligned with your text, and you won’t have a dotted line yet.

Let’s add the dotted line.

  • I’d probably do it as a top border, 2px, dotted white, on the offer-text DIV. Initially, that top item will have a line too, that’s ok for now.
  • Adjust your padding and margins as needed to improve your layout.

Now let’s fix the image position. What you can see is that the image is out-of-place from the normal flow, and overlapping the offer-text DIV just slightly. It’s also shifted upwards so that the center of the image aligns with the center of the text.

Here I think I’d use absolute-relative positioning. I’d set offer-section to position relative, and then I’d set the offer-image DIV to position absolute. Now you can position the image relative to its normal position in the offer.

Play with that positioning to see if you can create what you want. You may need to add a subclass of left or right to your offer-image DIV so that you can position those a bit differently. They’re both up about 15 px, but the left image is shifted right, while the right image is shifted left.

Now, to ditch the top line, give your topmost offer-text item a subclass of top, and remove the top border from that one.

5

Yes, I’m a newbie to this and this is my first real project, thank y’all so much for your help!