GP vacation template

[merlin52]

I use the GP vacation template.
I want to change the background img. to a slider.
HOW TO DO IT?

[David]

Hi there,

you would need to use a Slider Plugin – like Smart Slider 3.
You can then add the Slider to the Header Element that is set to display on the front page.

https://docs.generatepress.com/article/header-element-overview/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[merlin52]

Where can I add?
Elements: Home Merge

The page is:
<a href=”https://dinnyeshat.hu/&#8221;

[merlin52]

https://dinnyeshat.hu/

[David]

Yes, you would need to add the Slider Shortcode inside the Header Element titled: Home Merge.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[merlin52]

So far OK.
The only question is: how will the slider be on the bottom layer?
I’m trying “gutenberg” and I don’t have any experience yet.

[David]

Add the Shortcode into the Header Element, before the other content. Once its there i will take a look to see if can position it behind the content with some CSS.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[merlin52]

I installed a virgin vacation template on another of my hosts. I made a slider and put the short code in the “Home Merge” element. If you have the opportunity, you should juggle this.

<a href=”https://infolingua.hu/

[merlin52]

I installed a virgin vacation template on another of my hosts. I made a slider and put the short code in the “Home Merge” element. If you have the opportunity, you should juggle this.

https://infolingua.hu/

[Leo]

What is the issue now?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[merlin52]

David Wrote

Add the Shortcode into the Header Element, before the other content. Once its there i will take a look to see if can position it behind the content with some CSS.

I’m waiting

[merlin52]

https://infolingua.hu/

[Elvin]

Hi,

You can set your Header Element’s Inner container setting to Full Width so the slider uses the full page width.

As for the contents that are suppose to go on-top of the slider, you can wrap them in a div and set its property to absolute.

Example:

[your slider shortcode here]
<div class="page-hero-content-wrapper">
    <h1 class="page-hero-page-title">{{post.title}}</h1>
</div>

You can then set the CSS:

.page-hero-content-wrapper{
position: absolute;
top:0;
left:0;
margin-left: auto;
margin-right: auto;
}
.inside-page-hero{
position: relative;
}

A wise man once said:
"Have you cleared your cache?"

[merlin52]

The only question is: how will the slider be on the bottom layer?

[merlin52]

All right, thanks for the help!

[Author]

Posts