Catalyst: adding sliding slogans at homepage header?

[ch1800]

Is there a way for adding sliding slogan texts on same fixed header image of Home Header Element like in the attached website, top of homepage?

A large header image with rotating texts, to put it simply.

Thanks folks!

[Leo]

Hi there,

You would need a slider plugin like Smart Slider 3.

Let me know if this helps 🙂

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

[ch1800]

Not a slider plugin. Only rotating titles, like the website attached.
I want to use the Home Header Element as is but with the ability to have multiple titles.

[David]

Hi there,

that site is using a Slider – just that the slides only contain some text. So any slider plugin that allows you to add HTML will do. For example:

https://en-gb.wordpress.org/plugins/slide-anything/

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

[ch1800]

I also got to the same conclusion a couple of hours ago and was testing the same plugin.
I updated the original post with the new link of the testing URL.

This plugin does the job nicely because it allows to have transparent sliders with empty transparent images, so that it can use text slides as overlays on the hero header.

The only thing I don’t understand is why the header image is cut/cropped on small screens – which is not the case when using Catalyst normally without slider – while the slider text reacts well
and is responsive.

Might be a thing related to the pro version but I’m not really sure.
Any idea?
If not, I’ll ask the author.

[ch1800]

bump – maybe missed this one?

[David]

Try reducing the Top and Bottom Padding for Mobile Only in the Header Element – this will reduce its height so the container will now display more of a landscape view.

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

[ch1800]

I had the defaults, that were empty values for mobiles and 10% 20px 10% 20px for desktop.
I have put those on mobile 0% 20px 0% 20px and it is much better but still not the full image.
I can live with this without problem and adapt the picture accordingly for different sites (currently working on 3 different with Catalyst) but if you see any possible improvement I’m all ears!

[David]

If the slider plugin provides it then reduce the size of the fonts, spacing etc on mobile to further reduce the Height.

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

[ch1800]

I think some part of this issue is related to their PRO version:

Hero Slider
Available in the PRO VERSION only!
With Slide Anything PRO you can create full width/height Hero Sliders which auto-resize depending on device/screen.

To view a Hero Slider DEMO click: HERO SLIDER DEMO

I already sent a message there but got no reply.
Will check further.

Many thanks for your help!

[ch1800]

You are right: I just tested with less text and indeed it works almost perfectly!

[David]

Glad to hear that.
As you’re using the H1 and H2 in the slider – those font-sizes can be adjusted for Mobile in the Customizer > Typography settings

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

[ch1800]

Yep, good idea, many thanks for heads up!

In addition, there was this in CSS that I commented out and it’s already much better:

.hero-headline {
    font-size: 34px;
    letter-spacing: 6px;
}

[David]

🙂

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

[Author]

Posts