Background image in header for a page template

Hi,

The widgetized template allows to set background image in header for home page. I want to create a landing page that will be using the same header layout as home page does - the primary menu and a background image. But no widgets, just content we add through the Post Editor. How can we do that? Please advise, thanks.

Hello there,

To enable widgetized content for a page, you have to enable Widgetized template first.

32

Then go to Appearance > Widgets panel. In there you’ll see a new widgets area which the title exactly same as your page.

Regards,
Kharis

Hi Kharis,

Thanks for the screen shot, it was helpful. But I wanted to set up and use a custom background image in the header of the existing widgetized template or any custom template. Please have a look at the image attached. Can you advise how to do that?

Hello there,

At this time there’s only one route to configure the main header – can be done via customizer. For your other pages, we need to do another approach with jQuery code. Try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

        $.fn.extend({
            astridHeroContent: function(options) {
                var defaults = {
                    headerImage: '',
                    headerText: '',
                    headerTextSmall: '',
                    buttonText: '',
                    buttonLink: ''
                };

                var options = $.extend(defaults, options);

                if( $('body').hasClass('page-template-page_widgetized') && $('.header-image').length ) {

                  $('.large-header').attr('src', options.headerImage);
                  $('.small-header').attr('src', options.headerImage);

                  $('.header-info .header-text').html(options.headerText);
                  $('.header-info .header-subtext').html(options.headerTextSmall);

                  $('.header-info .header-button').text(options.buttonText);
                  $('.header-info .header-button').attr('href', options.buttonLink);

                }

            }
        }); // Function ends


        // Configuration on a page
        $('.page-id-335').astridHeroContent({
          'headerImage': 'http://yoursite.com/path/to/image.jpg',
          'headerText': 'Main header text',
          'headerTextSmall': 'Secondary header text',
          'buttonText': 'My Button',
          'buttonLink': '#btn-anchor'
        });


    })(jQuery);

Replace .page-id-335 with your unique page number class name of targeted page. You can get the ID number when you’re on respective page editing screen. In the web address bar you’ll something like wp-admin/post.php?post=335&action=edit. Or you can use Reveal IDs plugin.

  1. Update

Regards,
Kharis

Hi Kharis,

It worked for the home page only that uses the widgetized template. I set the page ID 427 .page-id-427 but it did not work. Also I tried to replace page-template-page_widgetized with page-template-my-landing-page - no work.

Hello there,

Please share a link to that page, so I can replicate it exactly on my test site. Probably there might be something I miss.

Regards,
Kharis