Call to action button over features image

Homepage Forums Pro Support Forum Chooko Pro Chooko Pro Support Call to action button over features image

Call to action button over features image

This topic contains 11 replies, has 2 voices, and was last updated by  Koen 7 months, 1 week ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #20693
    Call to action button over features image

    Koen
    Participant

    Dear Mathieu,

    As far as I know there is no functionality in Chooko that add’s a header and a button to a featured image (like you have now in materia). Can you advise me on a plugin to make this possible?

    Another question is with regard to the size of the featured image of a post. Can the preview of an image of a post in the sidebar be lager than it is now?
    And do you have some CSS to change the “mouse over” color of the Post Headings in the sidebar? A.g. to the paragraph color?
    Same goes for the nabber: we have a yellow navbar, but after hovering the titels become illegible (white).
    Hope to hear from you!
    best regards, koen

    PS I will buy you a beer now because the wheater is too hot.

    #20694
    Reply to: Call to action button over features image

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi Koen,

    As far as I know there is no functionality in Chooko that add’s a header and a button to a featured image (like you have now in materia). Can you advise me on a plugin to make this possible?

    Well Materia has this for the header image (which is set through WordPress core “header image” feature to be used across the whole site), but not for “featured images” which are specific to each page or post.

    Now what you seem to need is quite trickier. If I got this right, you would need to add different headers and buttons over the featured images for each page, is this correct?
    If so I’m afraid I cannot point to any plugin (not even sure there is one that would do that).
    There might be some alternate options to achieve this though.

    For example if you only need one button, you could add the header and button directly into the image with Photoshop, and make the entire image clickable with a little custom code.
    Maybe even add the image directly in the content so you can turn it into a link right from the content editor, so you wouldn’t even need custom code. (The title will be above the image though, but maybe this is an option to consider?)

    There might be other ways of course, more or less complicated and depending on exactly what result to need to get.

    Can the preview of an image of a post in the sidebar be lager than it is now?

    Sure, they are 50×50 by default but can be safely enlarged up to 150px. Add this to Custom CSS and replace every 5 occurrences of “50px” with the desired size:

    .blogposts-widget-thumb {
        width: 50px;
        height: 50px;
        background-size: 50px 50px;
    }
    .blogposts-widget-item {
        min-height: 50px;
    }

    And do you have some CSS to change the “mouse over” color of the Post Headings in the sidebar? A.g. to the paragraph color?
    Same goes for the nabber: we have a yellow navbar, but after hovering the titels become illegible (white).

    Sure, both of these are automatically generated based on the “secondary color”, but indeed it doesn’t seem to work very well with the yellow you are using!

    Here’s for the post headings links:

    a:hover, #sidebar li * a:hover {
        color: #ffec74 !important;
    }

    And for the menu (on hover):

    #navbar ul li:focus a, #navbar ul li:hover a {
        color: #fff;
    }

    As usual, add this to Custom CSS and change the color values as desired.

    And thank you very much! It is indeed quite hot over here too. I got a small A/C unit to try and keep the office somewhat breathable but it can only do so much when the sun is burning through the windows!

    #20705
    Reply to: Call to action button over features image

    Koen
    Participant

    Hi,
    Thanks for the CSS, this will help a lot.

    With regard to the button I mentioned in the beginning:
    a button for the HEADER would be enough. So I did not make myself clear enough, this button is not ment for the featured images, only for the header of the home page.

    I get your suggestions, but maybe there is a simple solution for a text + a button (linking to another page) for the Header image only?

    #20706
    Reply to: Call to action button over features image

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Well it is indeed a little less complicated than for featured images!

    If you are using the slider with only one slide it behaves much like a featured image but you already have a caption available (which is displayed in the bottom-right corner). You could move it to a different position and even change the size and color easily with CSS – let me know if you need help with this.

    You can also give a link to the slide, which will make the whole image clickable.

    From there the idea of adding a “fake” button directly to the image still stands for a quick and easy solution!

    Otherwise, adding an actual button over the header image or slider can also be done with a bit of custom code directly in the header image template.
    Let me know if that is what you need and I’ll try to help!

    #20707
    Reply to: Call to action button over features image

    Koen
    Participant

    Another little question with regard tho the navbar:
    I guess I did not make myself clear enough. The thing is the page title in the navbar turns white when a page is selected. And thus illegible on the yellow navbar.
    When hovered over the color is OK now.
    For the navbar, it’s enough if the background color changes, like it does now.
    The font color can remain the same like when it’s hovered or not hovered as far as I’m concerned.
    What code do I need to achieve this?

    #20708
    Reply to: Call to action button over features image

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Oh that’s my bad! I only gave you the code for the “hover” state, and forgot about the “current” page. Here’s an updated code:

    #navbar ul li:focus a, #navbar ul li:hover a,
    #navbar .current-menu-item a, #navbar .current-menu-item a:visited {
        color: #fff;
    }
    #20709
    Reply to: Call to action button over features image

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Even better:

    #navbar ul li:focus a, #navbar ul li:hover a,
    #navbar .current-menu-item a, #navbar .current-menu-item a:visited {
        color: #3b8686;
    }
    
    #navbar ul li:hover .sub-menu a, #navbar ul li:hover .sub-menu a:visited,
    #navbar ul li:focus .sub-menu a, #navbar ul li:focus .sub-menu a:visited {
        color: #fff;
    }

    Makes the main items green on hover and for the current page, and keeps the “sub-menus” white on green, and green on yellow when hovered.

    #20710
    Reply to: Call to action button over features image

    Koen
    Participant

    Thanks, that’s better. Although I choose for the visited color to remain green.

    As for the button in the header: it’s good to know what options are available.
    So this only works with ONE slider?

    #20711
    Reply to: Call to action button over features image

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    The “easy option” actually allows you to use as many slides as you wish, with caption and link (so each slide is entirely clickable, and you can if you wish add a “fake button” directly to each image). Moving captions to another position than the default bottom-right corner is also possible with multiple slides, but the position will be the same for all of them.

    Adding a “real” button with custom code however might not be ideal if using more than one slide.

    #20712
    Reply to: Call to action button over features image

    Koen
    Participant

    OK thanks, I’ll take this in consideration when talking with my yoga-friend. My experience with the female part of the world is that it takes a lot more time for them to realize what they actually want. So until then, I’ll just leave it like this.
    Actually, while adding more slides the website gains identity, so maybe there’s no need for extra bits and bobs.

    #20716
    Reply to: Call to action button over features image

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!
    This reply has been marked as private.
    #20717
    Reply to: Call to action button over features image

    Koen
    Participant

    haha! Thanks for sharing your opinion!
    I will read the Yoast opinion.

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Call to action button over features image’ is closed to new replies.


PayPal Verified
Secured by PayPal
Secure Credit Card payments powered by Stripe
SiteLock