• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Adding a clickable image in the header

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding a clickable image in the header

This topic is: not resolved

Tagged: header link, outreach, widget next to slider

  • This topic has 10 replies, 3 voices, and was last updated 10 years, 3 months ago by pdguyonus.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 28, 2013 at 6:50 pm #23411
    kathiemt
    Participant

    I want to know if it's possible to put a clickable image in the header please?

    I've been building a site in the Outreach theme at http://vtio.org.au/.  They have got 5 sponsors, one is top level and the other four then next level. I was thinking of putting the four in the footer like has been done at http://fdsa.org/dev_site/ but that would mean I need to give the top level sponsor much higher profile and was thinking it would be good to put it in the header and linked.

    Alternate would be to put it next to the slider - I imagine that would mean resizing the slider. But again, I'd need to know what has to be done re putting a widget beside the slider to do that.

    Thanks in advance for your help and suggestions.


    Virtual Assistant & Nature Photographer
    Kathie Thomas: VADirectory – Click here for Australian images

    February 28, 2013 at 7:55 pm #23424
    NewSeasonDesign
    Member

    I use the Genesis Simple Hooks plugin and then add the image (with link) to the header hook. Then use CSS to position it.

    February 28, 2013 at 8:56 pm #23428
    kathiemt
    Participant

    Ok, thanks, will give that a try.


    Virtual Assistant & Nature Photographer
    Kathie Thomas: VADirectory – Click here for Australian images

    March 12, 2013 at 8:05 am #25641
    pdguyonus
    Member

    Can you please give an example of how this is done using Genesis Simple Hooks? I want to have visitors taken to an order page when they click on the header (there is a call to action to "Get Tickets Now")

    Thanks.

     

     

    March 12, 2013 at 9:36 am #25652
    NewSeasonDesign
    Member

    You can add the image to the header hook (the Get Tickets Now image that is) and make it clickable:<div id="clicknow"><a href="your URL here"><img src="your image URL"></a></div>Then you could use CSS to position that image where you want it to be in the header.If your Get Tickets Now image is part of your header image already, you could map the header using http://image-maps.com. They'll give you code to put into that header hook.

    March 12, 2013 at 9:36 am #25653
    NewSeasonDesign
    Member

    You can add the image to the header hook (the Get Tickets Now image that is) and make it clickable:

    <div id="clicknow"><a href="your URL here"><img src="your image URL"></a></div>

    Then you could use CSS to position that image where you want it to be in the header.

    If your Get Tickets Now image is part of your header image already, you could map the header using http://image-maps.com. They'll give you code to put into that header hook.

    March 12, 2013 at 1:44 pm #25694
    pdguyonus
    Member

    Thanks I used http://image-maps.com and got map because the Get Tickets Now is part of the header. Only problem is the header appears above the header. Here is the image map code.

     

    <div id="header" style="text-align:center; width:920px; margin-left:auto; margin-right:auto;">
    <img id="Image-Maps_1201303121501059" src="http://thinkandgrowrichsummit.com/wp-content/themes/lifestyle/images/header.png" usemap="#Image-Maps_1201303121501059" border="0" width="920" height="214" alt="" />
    <map id="_Image-Maps_1201303121501059" name="Image-Maps_1201303121501059">
    <area shape="rect" coords="1,0,915,209" href="http://thinkandgrowrichsummit.com/specials" alt="Think and Grow Rich Get your Tickets Now" title="Think and Grow Rich Get your Tickets Now"    />
    </map>
    </div>

    I have it disabled now because the site is live. I am not a css guru by any means. Any help would be appreciated.

    March 12, 2013 at 1:47 pm #25695
    NewSeasonDesign
    Member

    You probably have to click the box next to "Unhook genesis_do_header() function from this hook?" in the genesis_header hook. Sorry I forgot that step before. That should remove the old header and just put yours in there.

    March 12, 2013 at 1:48 pm #25697
    NewSeasonDesign
    Member

    Oops. That read my post as code. Let me try that again with some spaces. 🙂

    You probably have to click the box next to “Unhook genesis do header function from this hook?” in the genesis_header hook. Sorry I forgot that step before. That should remove the old header and just put yours in there.

    March 12, 2013 at 2:11 pm #25704
    pdguyonus
    Member

    That helped! But I still have an alignment problem or there seems to be two images there.  Here is my site.

    http://thinkandgrowrichsummit.com

    Thanks for your help.

     

     

     

    March 12, 2013 at 2:39 pm #25712
    pdguyonus
    Member

    I see the problem. There are two images and the image map image is narrower than the one in the header. Not sure how that happened. I left justified it and it looks a little better but the right edge looks a little strange. I will see if I can track down what is going on.

    That Genesis Hooks seem pretty handy, as does the image mapper. I was thinking an image map would be the solution but did not know how to implement it.

    Thanks so much for your help!

    Paul Guyon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble