[Resolved] How to realize a Hero Slider

Home Forums Support How to realize a Hero Slider

  • This topic has 7 replies, 2 voices, and was last updated 8 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1171267
    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

    #1171383
    David
    Staff
    Customer Support

    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.

    #1171394
    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

    #1171629
    David
    Staff
    Customer Support

    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.

    #1172300
    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

    #1172446
    David
    Staff
    Customer Support

    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

    #1172467
    sporenborg

    Great! Thx and have a nice weekend!

    #1172469
    David
    Staff
    Customer Support

    You’re welcome – you too !

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.