Subtitle Question

Hello,

I would like to know if it’s possible to keep the title of the slides the same but the subtitle changes with each slide and picture.

For example: Header Slider shows picture 1 with Main Title and subtitle: “Title 1” Then when the slider changes to picture 2 the main title is still the same: “Main Title” but the subtitle is now: “Title 2”

Thanks

Hello,

You can simply set same titles for each slide, and you will have same titles.

In case that you want first title to be fixed, without animation it requires some custom work. One approach would be to use superslides script event https://github.com/nicinabox/superslides and to change classes and elements within #slideshow element which will require advanced knowledge of JavaScript, and some custom css is required also since title is styled over .text-slider css class which is animating slides.

Other approach is much simpler and I think that you should be able to achieve it with following JavaScript code:

$(document).ready(function(){
	var firstSlideTitle = jQuery('#slideshow').find('.slide-inner .maintitle').first().html();
	jQuery('#slideshow').find('.slide-inner').prepend('<h2 class="fixed-slider-title">' + firstSlideTitle + '</h2>');
});

You can apply that code through your child theme custom JS file or if don’t know how to do that then with some plugin which can add custom JS like maybe this one https://wordpress.org/plugins/header-and-footer-scripts/

Finally, you need to add custom css in order to style fixed title:

/*hide default slider titles*/
h2.maintitle {
    opacity: 0;
    visibility: hidden;
    display: none !important;
}

/*show fixed slider titles*/
h2.fixed-slider-title {
    position: relative;
    top: 30px;
    display: inline-block;
    font-size: 57px;
    line-height: 67px;
    font-weight: 700;
    letter-spacing: 1px;
    padding-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    color: #fff;
    z-index: 10;
}

h2.fixed-slider-title:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 40%;
    height: 1px;
    margin-left: -20%;
    background-color: #d65050;
}

@media only screen and (max-width: 767px) {
    h2.fixed-slider-title {
        font-size: 32px;
        line-height: 1.1;
    }
}

@media only screen and (max-width: 479px) {
    h2.fixed-slider-title {
        font-size: 18px;
    }
}

Again trough your child theme css file or from WP back end Appereance > Customize > Additional CSS field.

Check short video on how it is working on Sydney demo page https://www.screencast.com/t/c21td3Je

Best Regards!

Thank you for the quick response. The second portion works perfectly it does exactly what I wanted but the main title doesn’t show up it’s blank in the site. I used that header footer plug in and when I try to customize the theme the main title shows in white but when I view the site in real time it’s missing. Only the subtitles show and not the main title.

Hi again,

Please share a link to your page where you have slider and all code in place so I can check if something is wrong. Also give me the link of headers and footers plugin which you are using, is it suggested one or some other.

Thanks,

Hello,

Here is the link to my page. As for the plugin it is the same one suggested: https://wordpress.org/plugins/header-and-footer-scripts/

Thank you again

Great,

Thanks,

Here it is. Add JS code within the plugin like this https://www.screencast.com/t/RbtN5Ai46h :

<script>
jQuery(document).ready(function(){
	var firstSlideTitle = jQuery('#slideshow').find('.slide-inner .maintitle').first().html();
	jQuery('#slideshow').find('.slide-inner').prepend('<h2 class="fixed-slider-title">' + firstSlideTitle + '</h2>');
});
</script>

and it will work.

Regards,

Hello,

Thanks again that did work! I had the elementor header plugin activated, I deactivated and it worked instantly. This code is also easier, I appreciate your help with this. I just have one last question, if I wanted to change the color of the text could I do that in the dashboard also or would it be in the JS Code now?

Thank you again

You’re welcome,

Customizer is using specific selector path to default title so changing color of the title trough theme options isn’t possible with it, but you can change it with css which I have provided earlier. I’ll comment important lines and provide a screenshot https://www.screencast.com/t/VtjF7zwK :

/*hide default slider titles*/
h2.maintitle {
    opacity: 0;
    visibility: hidden;
    display: none !important;
}

/*show fixed slider titles - change it color font size and text shadow to your liking*/
h2.fixed-slider-title {
    position: relative;
    top: 30px;
    display: inline-block;
    font-size: 57px;
    line-height: 67px;
    font-weight: 700;
    letter-spacing: 1px;
    padding-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    color: #fff;
    z-index: 10;
}

/*title underline - change background color to your needs*/
h2.fixed-slider-title:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 40%;
    height: 1px;
    margin-left: -20%;
    background-color: #d65050;
}

@media only screen and (max-width: 767px) {
    h2.fixed-slider-title {
        font-size: 32px;
        line-height: 1.1;
    }
}

@media only screen and (max-width: 479px) {
    h2.fixed-slider-title {
        font-size: 18px;
    }
}

Best Regards!

Hello,

This is great, it works completely. Thank you for your time and expertise with this.

Thank you again