- This topic has 13 replies, 3 voices, and was last updated 2 years, 1 month ago by
David.
-
AuthorPosts
-
April 3, 2020 at 6:43 am #1224823
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!
April 3, 2020 at 9:17 am #1225226Leo
StaffCustomer SupportHi 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/April 3, 2020 at 6:53 pm #1225738ch1800
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.April 4, 2020 at 3:21 am #1226002David
StaffCustomer SupportHi 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/April 4, 2020 at 4:59 am #1226096ch1800
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.April 6, 2020 at 5:05 am #1228314ch1800
bump – maybe missed this one?
April 6, 2020 at 6:01 am #1228357David
StaffCustomer SupportTry 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/April 6, 2020 at 8:43 am #1228703ch1800
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!April 6, 2020 at 9:05 am #1228749David
StaffCustomer SupportIf 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/April 6, 2020 at 6:18 pm #1229212ch1800
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!
April 6, 2020 at 6:22 pm #1229214ch1800
You are right: I just tested with less text and indeed it works almost perfectly!
April 6, 2020 at 6:25 pm #1229218David
StaffCustomer SupportGlad 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 settingsDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 6, 2020 at 6:29 pm #1229221ch1800
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; }
April 7, 2020 at 2:38 am #1229540David
StaffCustomer Support๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.