Streaming live at 10am (PST)

Adding A Box to my home page

#1

Hello, I’d like to put a white outlined box around the content on my homepage on the hero image around the txt. Please see attachment. How can I do this?


https://preview.webflow.com/preview/blog-1-324f36?utm_source=blog-1-324f36&preview=eb5ad576e3e11f04021f19204b042860

#2

I made a few modifications to your project but don’t worry - I’ve got photos!

I apologize for the length of this reply, I just wanted to be thorough.

1. Modify the section in which you had the text box in: Section-Hero

  • Change the display from Block to Flex
  • Align Left and Justify Center

This will move the text down some, don’t worry - we’ll get to that.

shero-mods

2. Modify the div: Hero Text - Left

  • Change this display from Block to Flex
  • Direction Vertical, Align Center, Justify Center
  • Adjust the Margins/Padding
    Margin Left: 100px
    Padding: 50px (All Around)
  • Go to the Borders section and select Solid line and change the color to white.

herotext-left-mods

herotext-left-mods2

3. Lastly, modify the Form div inside of the Hero Text - Left div.

  • Align Text Center

And that is it.

form-mods

1 Like
#3

Great walkthrough on this!

1 Like
#4

thanks for the walkthrough. When I did this the box now takes over the entire image and not just off to the side. How can I fix this? The button is also not centered

#5

To center the button just click the form div and change the text alignment to center.

I’m not sure why your textbox is doing that, it must be a parent element causing that.

I’ll revisit your shared link once I get back to my computer.

#6

Okay, so here’s what we got:

1. Your Section - Hero needs some modifications

You need to:

  • Change the Direction from Horizontal to Vertical
  • Change the Align type from Center to Left
  • Change the Justify type from Left to Center.

Before

1

After

2

2. I forgot to mention one thing in my previous post for the Hero Text - Left div.

You need to change the width of this div from 85% to Auto

Before

3

After

4

#7

ahh… thanks so much

#8

No problem, if you have anymore questions please feel free to reach out.

:grin: