[Pro] Designing your header with a large image or a slider background with Hueman Pro

This documentation will go through the process of header design with a large static image or a slider ( also called carousel ) in the Hueman Pro theme.

It will also explain with use cases how to set a full height background for your single posts, using the featured image (not sure how to set a fetured image? Take a look at this documententation).

Slider demo



This documentation page will go through the following topics :
  • Accessing the Header Slider settings
  • Using the Header Slider settings
  • Example uses :
    1. Creating full height background on single posts based on the post featured image
    2. Creating a slider on home featuring your important content
    3. Creating a half screen image background header for all categories using a default image

Accessing the header slider builder settings

  1. On the front end of your website, navigate to the page (post/cagetory...) in which you want to add a slider
  2. Open the customizer by clicking on the customize button of your WP admin bar :
  3. Navigate to Header Design -> Header Image and silder
  4. Expand the dropdown list against Header Style and select the option Full height slider background : Select slider option

Using the header slider builder

  1. Adding slides :

    Add new slide

    1. you can either set your slide's main part (background, title, subtitle) right now or add as many slides you want and set up them later
    2. Click on Add it :Add it
  2. Reordering slides :
    1. Position the mouse over the slide item
    2. Whilst holding the left mouse button, drag it up/down
    3. Release the mouse button

    Reorder slide

  3. Setting each slide option
    1. Expand an item by clicking on the pencil button :Expand slide
    2. Navigate in the different tabs to set up per slide options: Background (first tab), Title, Subtitle, Call to Action (second tab) :Slide tabs
  4. Setting the slider general options :
    1. Click on the gear icon against Large Header Slider :Slider options
    2. To set up the whole Slider options, navigate through the panes that group them by clicking on the respective tab :Slider tabs

Example uses

In the present section the documentation will go through some use cases to show you how easy will be building and manage contextualized sliders with the Hueman Pro's Header Slider feature!


Use Case 1: Creating full height background on single posts based on the post featured image

In this example, you want to set up a full height background based on the post featured image for one of your posts: Hello World.
N.B. We're are assuming your post has a featured image set. Not sure how to set a fetured image for your posts? Take a look at this documententation.

We'll also see how to apply a full-height background to all of your posts.

Set up the current post full height background

Let's see how to set up a full height background for the Hello World post :

  1. On the front end of your website, navigate to the Hello World post and access the header slider settings

    By default, the Hueman Pro theme will retrieve the post info and set the first slide with the following (*) :

    • Background: the post featured image, if any, otherwise it will fall-back on a black background
    • Slide title: the post title, if any
  2. Click on the gear icon against Large Header Slider
  3. Under the GENERAL DESIGN tab set the slider's height to 100% :Single slider's height
  4. Close the Options for Large Header Slider panel :Close slider options
  5. Save and Publish

On the front end of your website you'll see the post you just customized displaying a full-height slider :

Single post slider


(*) Additionally, on front end and live preview, the default single post slide's caption will show the following post info :

  • Post categories, if any
  • Post comments number, if enabled
  • Post author
  • Post publication date


Set up the all posts full height background

Now that you know hot to set a full height background for a single post, let's see how to enable this option for all your posts.

In the customizer, when you are in the Options for all posts tab, all the customization you apply will be inherited by all the posts, unless they specify a different setting :

  1. We just set the slider of Hello World to be full-height (100%). 
  2. Click on Options for all posts to switch the scope :Options all posts scope
  3. Click on the gear icon against Large Header Slider
  4. Under the GENERAL DESIGN tab set the slider's height to 80% :All posts slider options
  5. Close the Options for Large Header Slider panel
  6. Save and Publish

On the front end of your website you'll see all your single posts displaying a slider tall 80% of the window's height.
Example of a post different than Hello World showing a slider tall 90% of the window's height:

Other post result


Use Case 2: Creating a slider on home featuring your important content

In this example, you want to set up a slider in your home page featuring your important content, such as post, page, category, but even WooCommmerce product and/or category

Let's see how to achieve it:

  1. On the front end of your website, navigate to your home page and access the header slider settings.
  2. Add a new slide or edit the default one
  3. Set a background image :

    Set background

  4. Switch tab to fill the slide's captionm, by clicking on SLIDE CAPTION
  5. Feature your slide :
    1. Set a Call to action text e.g. "Contact us" (as soon as you type, a dropdown list, labeled by Select a content to link, will appear)
    2. Click on the dropdown list against Select a content to link :Select content
    3. Search for the content to feature e.g. by typing in the search box e.g. to feature your Contact page, and select the content to feature in the list: Search content

    Repeat steps 2 to 4(5) for each slide you want to add

  6. (optional) Expand the font size
    1. Click on the gear icon against Large Header Slider
    2. Click on the SLIDER CONTENT tab :Slider content tab
    3. Look for the Titles font size control and set the font size, e.g. increasing the default font-size by 30% :Set slider font size
  7. Close the Options for Large Header Slider panel
  8. Save and publish

On your home page now you should see the slider you just created with a call to action linking to your Contact page.

Home featuring Contact


Use Case 3: Creating a half screen image background for all categories using a default image

In this example, you want to set up a half screen image background for all your categories displaying a default image.

Let's go to through the needed steps to accomplish it.

  1. On the front end of your website, navigate to one of your categories page and access the customizer :

    Cat customizer

  2. You're customizing only this category, the top right panel is active : Current category active
  3. Select the middle option scope tab : All categories : All categories
  4. Access the header slider settings
  5. Click on the gear icon against Large Header Slider
  6. Under the GENERAL DESIGN tab scroll the content until you find the Default background image input : Default image button
  7. Select a default image
  8. Under the GENERAL DESIGN set the slider's height to 50%  :Categories slider's height 50percent
  9. Close the Options for Large Header Slider panel
  10. Save and publish

Navigate through the categories of your website and you'll see the slider you just created displayed in all of them!

In the images below two different categories displaying the same default large header slider background image:

Uncategorized category slider half-window

Music category slider half-window