[Resolved] Some dubts with build a home with hooks part II

[rafel jesus]

Hi There
I would like to make a landing similar to this
website like this

Can I have a header with a carousel of photos with Hooks?
Thanks

[David]

Hi there,

you would require a Slider Plugin like Smart Slider 3 or Meta Slider.
Once the Slider is set up you can add the Shortcode the plugin provides to a Header Element:

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

[rafel jesus]

Hi David.
Where I put the Shortcode?
Thanks

[Leo]

It would go in the content box:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-1-add-the-content

[rafel jesus]

Hi there.
I know that, but I don’t know how to put shortcodes with HTML, an excuse that I don’t know code in HTML, CSS or PHP.
Thanks for your help.

[David]

The slider plugin should provide you with a shortcode. They look something like this:

[slider-shortcode]

You simply need to copy and paste the code the plugin provides into your Header Elements content.

[rafel jesus]

Hi David
I have that [carousel_slide id=’218′]
And now appear that next main web

thanks for your help

[David]

Is that what you needed ?

[rafel jesus]

I need that
https://www.hoteldelprado.cat/en/

[Leo]

Can you clear and disable your caching plugin first?

Please always do this when we are trying to help:
https://www.screencast.com/t/VrCHZlNvTk

[rafel jesus]

Hi there.
I do it, I’m sorry
thanks for your help

[David]

There is an issue wit the Slider plugin you’re using the elements within have no set height so they are not displaying. I would suggest changing the Slider Plugin to something like SmartSlider or Meta Slider as we know this works correctly within a Header Element.

[rafel jesus]

Hi David
What plugin is more light for Gutenberg?
Thanks for your help.

[David]

No slider plugins are particularly lightweight. The issue with using the Gutenslider is that its CSS is not dynamic so it won’t work in a header element or hook.

A lot of users work with SmartSlider or MetaSlider.

If you wanted to use GutenSlider you would have to add it to the Page Content, and simply remove the content from the Header Element.

[rafel jesus]

Hi David.
With metaslider is working perfectly.
But now there’s a space on the top without the slider, how can I do that?
I share two images with the settings.


And you can see in the Header Elemet the h1 text but this text doesn’t appear.
How can I do that?
Thanks for your help and patient.

[Author]

Posts