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

This documentation goes through the process of designing a header with a large static image or a slider ( = a carousel ) in the Hueman Pro theme.

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

Slider demo



This documentation page will go through the following topics :
  • Accessing the Pro Header Slider settings
  • Using the Pro Header Slider settings
  • Use cases :
    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
  • Known issue

Accessing the header slider builder settings

  1. On the front end of your website, navigate to the page (post/category...) in which you want to add a sliderOpen the customizer by clicking on the customize button of your WP admin bar :
  2. Navigate to Header Design -> Full Width Header Background/Slider
  3. Choose Yes : Display a full width header background 


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

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

List of available design options for a slider :

General design :

  • Slider height
  • Overlay style : dark or light
  • Default background image or color

Slider content :

  • caption's vertical position
  • set a fixed static caption on top of all slides
  • max length of titles
  • font size
  • checkbox to display the categories and other post metas information

Effects and performances :

  • autoplay the slider
  • parallax scrolling
  • free scroll
  • lazy loading of the images

Use cases

In the present section the documentation will go through some use cases.


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 an automatic full height background using the featured image of your post

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

1 - In your website, navigate to any single post page, and click on the admin bar customize link.

2 - Then navigate to the Pro slider options panel and select Yes to Display a full width header background in context : All posts

3 - Click on the gear icon against Large Header Slider

4 - Under the GENERAL DESIGN tab set the slider's height for example 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.
The screenshot below is a post 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 :
  4. Switch tab to fill the slide's caption, 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. Navigate to the pro header slider section of the customizer and select yes to: Display a slider for All categories
  3. Access the header slider settings
  4. Click on the gear icon
  5. Under the GENERAL DESIGN tab scroll the content until you find the Default background image input : Default image button
  6. Select a default image
  7. Under the GENERAL DESIGN set the slider's height to 50%  :Categories slider's height 50percent
  8. 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

Known issue on home page

It may happen that the home page slider background breaks when home page is set to display the latest posts. The solution in this case is simply to switch home to "Display a static page", save and refresh, and then set it back to "Display latest posts".

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.