Second Hero

[Zac Manor]

can i add a ‘second hero’ in the middle of a page. between widgets. for exacmple my page would read as you scroll…

header
hero1
connect box | connect box
hero 2
video
connect box
footer

[Bill Robbins]

Hey Zac,

You can do that in a way. With version 1.2 I added 10 separate widget areas to the home page. Each one can be styled differently so what you could do is assign the second “hero” image as the background of one of these sections. Then you can add content on top of it via a text widget or something similar. We may have to use a bit of CSS to make it tall enough if the content is rather small.

But that’s how I would envision going about that.

Bill

[Zac Manor]

ive looked around based on your instructions and i cant get it to work like i imagined. What i want out of a second hero in the middle of the page is for what is below it to scroll over it as if it is in the background.

i think i need more specific instructions.

is it in the widgets? the pages? the theme options?

[Bill Robbins]

Hey Zach,

The way this would work is a combination of widgets and the customizer (Appearance > Customize in your Dashboard).

You arrange the widgets in the widget section. You’ll need to have at least one widget area in use above the spot where you want a hero and one in use below it.

In the customizer you’ll need to pick a background color for the area above and the area below.

For the actual spot where you want to have the hero, assign the hero image as the background image of that section. Set it’s size to “contain” so that the image fills the area completely. Also set the attachment to “fixed” so that it doesn’t move as you scroll.

We will likely need to add some CSS to set a height for the second hero but we can tackle that once we have the basics set up.

Let me know how that goes for you.

Have a good night,
Bill

[Zac Manor]

take a look this is exactly what im looking for!

i do need help with a few CSS items.

1. now that i’ve moved the video widget off of the home-widgets place it doesnt read the CSS for 0 margins. its on the second home page. i’ve tried a few things but none of them work.

2. what is an optimal dimension for a full screen background image that wont repeat horizontally?

3. how do i change the hight of the hero area.

[Bill Robbins]

Good Morning Zac,

Let’s see if we can tackle these for you.

1. You can add this in to change the margins/padding of the new home page widget sections:

#home-widgets .widget,
.home-widgets,
.home-widgets .widget,
.home-widgets .home-box.widget {
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

.home-widgets .featured-video {
	width: 100%;
}

That should make the video full width and also take out the margins/padding there as well.

---

For the second hero, I would make the image 2000 pixels wide by 1200 pixels tall or something similar. I would also set the image to “cover” for the size so that it fills the space without repeating.

---

You can set the height of the hero area. Here’s one way to do that which will make it the full height of the screen:

#home-one {
	height: 100vh;
}

The vh here is for vertical height and works like a percentage does. You could also use pixels if you’d rather have it be a fixed height.

See if that doesn’t get you where you’re looking to go. If you need to add in another hero section, you would copy that last snippet and change the “one” to the number of the block you’re working with.

Take care,
Bill

[Zac Manor]

this is working…

can i write some non CSS in the advanced css section to keep track of what is what? its getting pretty harry!

[Bill Robbins]

Always a good idea as it gets crowded. A note in the CSS looks like this:

/* Your Note Here */

You can add them above and below styles to keep things organized and clear.

[Author]

Posts