[Resolved] How to realize a Hero Slider

[sporenborg]

Hi guys,

i want to include a heroslider on the start page instead of a page hero. Unfortunately, I didn’t find anything suitable for this either here in the forum or on youtube – or I was too stupid to find it. That would be a possibility, which I don’t want to exclude. Do you have any tips for me, with which (3rd party) tools I should realize this? If possible it should fit seamlessly into your code.

Currently I’m trying to realize most of the website with Elementor pro. Can I possibly integrate this slider widget into GP?

Thank you very much an have a nice day
sporenborg

[David]

Hi there,

are you wanting to add the slider to hero so it can be merged with the Site Header / Navigation ?
And will this slider be only on the one page?

Let us know as this provides a few options.

[sporenborg]

Hi David,

thanks for your replay. Yes, we would like to add the slider to hero so it can be merged with the Site Header and Navigation. Full size image/s below (z-index: -1) the site logo and text (z-index: 1). Of course it would be great if the text could be adapted to each slider individually. Any idea?

We need this solution only for the frontpage. Other sites don’t need a slider to hero.

Best
sporenborg

[David]

So if you’re using Elementor to build your front page the you could simply add their Slider Widget in the Elementor Editor.

Then create a new Header Element.
You won’t need to add any content or change any settings, just enable Merge with Content on the Site Header tab.
Set the Display Rules to Front Page

This will merge the GP nav with the Elementor Slider.

[sporenborg]

Hello David, this is almost as easy as I expected it to be from you guys. Thank you very much. However, I have another two questions:

1) The slider is about 96 px from the top and I can’t reduce the distance to zero px.

2) It is not possible for me to set the color of the header-wrap completely transparent. Also the site navigation (main-nav).

3) Where can I global change the .inside-header {
padding: 40px;
} or is the only one solution to overwrite it in the CSS?

Best
sporenborg

[David]

1. As you’re using Elementor for the entire front page, set the GP Page Builder Container to Full Width:

https://docs.generatepress.com/article/page-builder-container/

This will remove all theme padding and that extra space.
You can then add the padding you require within Elementor.

2. In the Header Element > Site Header tab you can:
a. set the Header Background to transparent.
b. enable Navigation colors where you can also set them to be transparent.

3. in Customizer > Layout > Header

[sporenborg]

Great! Thx and have a nice weekend!

[David]

You’re welcome – you too !

[Author]

Posts