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

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% :
4. Close the Options for Large Header Slider panel :
5. Save and Publish

On the front end of your website you'll see the post you just customized displaying a full-height 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%

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:

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 :
   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: 

   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 :
   3. Look for the Titles font size control and set the font size, e.g. increasing the default font-size by 30% :
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.

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 :

   

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 :
6. Select a default image
7. Under the GENERAL DESIGN set the slider's height to 50%  :
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:

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".