Home Section without Hero Image

[Denis Kuhlmey]

Hi Bill,

i want to use the Home Page Section with a Home Box but without to use a Hero Image.
Now when i configure this, the Home Box Postion is Hover the Menu Bar.
Can i configure the vertical Postion of a Home Box Section?

regards
Denis

[Bill Robbins]

Denis,

Can you set it up without a hero and send over a link for me to take a look?

Bill

[Denis Kuhlmey]

Hi Bill,

the site is not public at the moment. I have attached you two Screenshots.

regards
Denis

Attachments:

1. 

   with_hero_normal.png
   

2. 

   without_hero.png
   

[Bill Robbins]

Hi Denis,

You may be able to do it this way:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .home #hero-section.normal-height,
   .home #hero-section.small-height,
   .home #hero-section.full-height {
   	height: 200px;
   	visibility: hidden;
   }
   

   Set the height in the snippet above to move the content down on the page to your desired position.

3. Update your settings.

See how that works for you. I haven’t tested that out since I can’t interact with the code on the page, but looking at the image that’s how I would approach it first.

Hope that helps out,
Bill

[Denis Kuhlmey]

Hi Bill,
but this takes effect to all sites with a configured hero section??
I want to use Home Sections without a hero sections on single sites.
I need the CSS of the Home Box to move them down.

I can give you a login to my site?

regards Denis

[Bill Robbins]

Denis,

The .home in the snippet above limits the change to just the home page. Other pages won’t be affected.

Bill

[Denis Kuhlmey]

Hi Bill,
i have add the snippet, but nothing change.
regards Denis

[Bill Robbins]

Hi Denis,

What’s the URL to the page you’re trying to change. If you will always include that with a support request it’ll help me, help you best.

Bill

[Denis Kuhlmey]

This reply has been marked as private.

[Bill Robbins]

Thanks so much Denis. Let’s do it this way instead of that earlier snippet:

body.page-template-page-widget-template #hero-section.small-height {
	height: 100px;
	min-height: 0;
}

See if that doesn’t do the trick for you. Let me know if it gives you any trouble.

Have a great day,
Bill

[Denis Kuhlmey]

Hi Bill,

that looks fantastic. But i can never use the combination HomePage and Hero small. Because every small hero Section on a Homepage is now 100px height? right?

regards
Denis

[Bill Robbins]

Good question. You can do that if you swap out this in the CSS snippet above:

body.page-template-page-widget-template

for one that has the page ID which would look something like this:

body.page-id-38

where 38 is the ID of that page. You can find the ID by editing a page and looking in the navigation bar of your browser. You can also view a page’s source code and the ID will be listed in the body tag as a class.

If you go with the page id it’ll only apply on that page and not affect other ones.

Hope that helps out,
Bill

[Denis Kuhlmey]

Perfect. Thank you very much.

[Bill Robbins]

Anytime

[Author]

Posts