Hero Banner

[jfg619]

Hi, is it possible to change the hero banner height and to show a custom text and image not tied to any blog post?

EDIT: Also I'd like to know how to add an image banner underneath the single post sidebar?

 

[Satyendraa]

Hello there,

Could you please do share your site address and do let me know where you want to show your text, We will check it.

Thank You

 

[jfg619]

Hi @Satyendraa
I just need to change the height of the hero banner in this template:
https://support.themehunk.com/wp-themes/elanza-food-and-lifestyle/?sidebar=no-sidebar

I also need to put a background image with text over it instead of showing the blog posts.

 

[karrtik]

Hello there,

To decrease slider height Go to the Appearance > Customize > Additional CSS and paste code given below.

.slider-wrapper {
    height: 65vh!important;
}
.slider-wrapper .flex-slider.slider-left.default {
    height: 60vh!important;
}
.slider-wrapper .flex-slider, .slider-wrapper .flex-slider .flex-viewport {
    height: 500px!important;
}
.slider-wrapper .flex-slider li .caption-content {
    top: 30%;
}

Unfortunately normal banner instead of post slider is not possible with the available options. But yes you can create a post with slider category (for example) and set it as a "Featured post category" under Customize > Hero Post Slider (https://www.screencast.com/t/JpEyqc1tX7Cv). And set number of post to "1".

It will display single image with text over it.

Thank You.

 

[jfg619]

HI @karrtik,

Thanks for the suggestion, unfortunately this solution doesn't work for me but I found where to edit the code and add my own content the way I wanted to.

One last question though, the blog post images on the home page have a black overlay, how can I remove this?

 

[karrtik]

Hello @jfg619,

For that please try this css code

.slider-wrapper .flex-slider .fs-caption-overlay {
    background: rgba(0, 0, 0, 0);
}

This will help you.

Thank You

 

[jfg619]

Thanks @karrtik

The code you gave me is for the main hero slider, I meant the smaller blog posts below the slider. Can you give me the code for that please?

 

[Satyendraa]

Hello there,

Could you please share your site address, So that i can take a closer look.

Best Regards

 

[jfg619]

@Satyendraa I sent you the address via private message

 

[Satyendraa]

Hello there,

Please accept my apologies for late reply.
For that please try this code in additional CSS

.content .three-grid-layout .post-img :before {
    background: rgba(0, 0, 0, 0);
}

This will help you.

Best Regards

 

[jfg619]

Thanks for all your help!