Home Page Header Slider Image Opacity

  • I would like to place a background color behind my “Home Image Slider” and then reduce the opacity of the photo so that the background color shows through. There is an option to check a box labeled Transparent, which is located above the background alignments and settings within Home Slider in Theme Options. I have tried checking that and selecting a background color as well but it seems to make no difference. Plus, there isn’t an option to edit the image opacity. Help would be greatly appreciated.

Viewing 10 replies - 1 through 10 (of 10 total)

  • Hello,

    I’m not sure that what you’re after is possible. It may make more sense to add the opacity and background color to the photos before you upload them to your site. Can you please link to your site so I can see the current configuration?

    Thanks,
    Kevin

    Thread Starter artyworld

    (@artyworld)

    Hi Kevin,

    Thank you for replying. I saw a tutorial where image opacity was manipulated (https://www.youtube.com/watch?v=wyNiAnNMo7Q from 3:10 – 3:26) and realized that this is the desired effect I wanted. It even seems like the Pinnacle Demo has done this with their home slider image.
    My site hasn’t been published online yet, I’m not sure how I would be able to link it.

    Emily

    Unless I’m looking in the wrong place, the Pinnacle Free Demo just uses an image that’s been modified before uploading. See here:
    https://themes.kadencethemes.com/pinnacle/wp-content/uploads/2016/06/demo_header.jpg

    I still think that your best route here is simply to edit the image before you upload it to get your desired effect.

    -Kevin

    Thread Starter artyworld

    (@artyworld)

    Kevin,

    Thank you for your help. One more thing, I was wondering what that checkbox labeled Transparent in the Home Slider theme options actually does. Could you explain that?

    hannah

    (@hannahritner)

    Hi @artyworld,
    You can see an example of a transparent header here: https://themes.kadencethemes.com/pinnacle/

    Hannah

    Thread Starter artyworld

    (@artyworld)

    Hi Hannah,

    I am aware of what a transparent header is. I have experimented with making it transparent vs. not transparent and see the difference. What I was asking about specifically was what the checkbox (I described where it is located) actually does. I have tried it checked, and I have unchecked it and it doesn’t change anything with the appearance of the Home Slider (that I can see).

    Also, a side note, I am in the process of building my site and have waited to “publish” it because it is not ready yet. Yesterday I noticed that it had been published and was visible to everyone online. I was very confused as I did not press the “Publish site” button. How did that happen?

    Thanks for your help

    hannah

    (@hannahritner)

    Oh, that is if you want the header background to be transparent, so it would blend in with your page content background color/image. Does that make sense?
    Your site would be live automatically unless you were using a construction mode plugin. Were you using this?

    Hannah

    Thread Starter artyworld

    (@artyworld)

    Hi Hannah,

    I’m not sure I’m explaining myself clearly enough. It seems like I am NOT able to get my home slider image (the large photograph at the top) to be adjusted in transparency/Opacity. I have the free version of Pinnacle by Kadence. Does the transparence adjustment only function in premium. If so is there a widget or plug-in to insert so I can get this effect. I saw a video from site origin using the Hero Image Widget which allowed him to adjust opacity of the full-width page photograph and allowed him to add a light grey color behind the image so it would blend with the other images on that page. I have that widget and it seems that it won’t work on the Home page feature image that I have been referring to here.

    I think understand what you’re after now, here is some CSS that will allow you to add the overlay effect:

    .header-color-overlay {
    background: blue;
}

    Just change the blue to whatever color you want. The theme developer will be able to clarify the theme options when he sees this thread. I seem to be misunderstanding them as well.

    let me know if the CSS works for you.

    -Kevin

    • This reply was modified 7 years, 1 month ago by Kevin.
    Theme Author Ben Ritner – Kadence WP

    (@britner)

    Hey,
    Let me see if I can help bring some clarity.

    The “transparent” check box setting in this image: https://s14.postimg.org/zeqfjnwxd/Screen_Shot_2018-02-05_at_10.53.48_AM.png

    That simply effects your home page header if and only if you are using “page title” as the selected home page “slider” option. And it only works if you don’t then override that by selecting an image to be the background. That whole area is basically one setting. An image would take priority over checking the box for “transparent”. Let’s say you wanted one image behind your header slider and content area. You could set the body background then everywhere else check transparent and the body background would be behind your page title.

    Does that help explain that setting?

    Ben

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Home Page Header Slider Image Opacity’ is closed to new replies.