In Beautiful Pro – Make site header background image linkable

Community Forums Forums Design Tips and Tricks In Beautiful Pro – Make site header background image linkable

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  andym119 1 year ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #90601


    The Beautiful Pro theme demo displays an image below the header area of the site using the WordPress custom background feature.

    How can I make that background image linkable?

    I would like visitors to be able to click the background image and be taken to the main site.

    The blog is here at The Quillcards Blog


    I don’t think there is an easy solution to do this, I have been told before it is not possible. However I have managed to work out a way of doing it but I have created my own child theme on the genesis framework so I am not 100% sure the best way to make php and css edits in genesis own child themes such as beautiful pro, you’ll have to ask in the forum.

    I managed to link the header by creating a new widget area then uploading an image and linking it by an excellent image widget plugin. The extra benefit of doing this is the image becomes an img tag in the html and so it will respond to the screen size/mobile like your current images do in your post.

    First download the image plugin, it is called ‘Image Widget’ it’s a popular and highly rated plugin. You can test how it works by moving the widget in one of your sidebar widget areas, selecting an image then typing the link. the image is now linked and the image also responds in ratio as the screen gets smaller. Basically you want to do this, but instead, you want to move the widget to a new widget area so the image will appear in the same place as your current header.

    You’ll need to ask how to create a new functions.php for your theme as I’m not sure how.

    To Register a new widget area type in your custom functions.php:

    genesis_register_sidebar( array(
    	'id' => 'header_banner_widget',
    	'name' => __( 'Header Banner', 'custom' ),
    	'description' => __( 'This is the widget area for the Header Banner', 'custom' ),
    	) );

    To position the widget area type in your custom functions.php:

    add_action( 'genesis_after_header', 'custom_header_banner' );
    function custom_header_banner() {
    	genesis_widget_area( 'header_banner_widget', array(
    	'before' => '<div class="header-banner widget-area">',
    	) );

    (you can change the hook genesis_after_header if I have the wrong hook for your theme, look up )

    You can now move that image widget to the new widget area you created called Header Banner, upload an image, select size, and link it .
    You may also need to remove the old header banner height by typing in a custom css file or css editer:

    .site-header-banner {
           display: none;

    Seems a lot of work just to link the header but this setup works perfect for my child theme and the responsiveness is improved.

    • This reply was modified 1 year ago by  andym119.
    • This reply was modified 1 year ago by  andym119.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.