[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).
- Accessing the Pro Header Slider settings
- Using the Pro Header Slider settings
- Use cases :
- Creating full height background on single posts based on the post featured image
- Creating a slider on home featuring your important content
- Creating a half screen image background header for all categories using a default image
- Known issue
Accessing the header slider builder settings
- 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 :
- Navigate to Header Design -> Full Width Header Background/Slider
- Choose Yes : Display a full width header background
Using the header slider builder
Adding slides :
- 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
- Click on Add it :
- Reordering slides :
- Position the mouse over the slide item
- Whilst holding the left mouse button, drag it up/down
- Release the mouse button
- Setting each slide option
- Expand an item by clicking on the pencil button :
- Navigate in the different tabs to set up per slide options: Background (first tab), Title, Subtitle, Call to Action (second tab) :
Setting the slider general options
- Click on the gear icon against Large Header Slider :
- To set up the whole Slider options, navigate through the panes that group them by clicking on the respective tab :
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
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 :
- 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
- Click on the gear icon against Large Header Slider
- Under the GENERAL DESIGN tab set the slider's height to 100% :
- Close the Options for Large Header Slider panel :
- 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:
- On the front end of your website, navigate to your home page and access the header slider settings.
- Add a new slide or edit the default one
- Set a background image :
- Switch tab to fill the slide's caption, by clicking on SLIDE CAPTION
- Feature your slide :
- 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)
- Click on the dropdown list against Select a content to link :
- 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
- (optional) Expand the font size
- Click on the gear icon against Large Header Slider
- Click on the SLIDER CONTENT tab :
- Look for the Titles font size control and set the font size, e.g. increasing the default font-size by 30% :
- Close the Options for Large Header Slider panel
- 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.
- On the front end of your website, navigate to one of your categories page and access the customizer :
- Navigate to the pro header slider section of the customizer and select yes to: Display a slider for All categories
- Access the header slider settings
- Click on the gear icon
- Under the GENERAL DESIGN tab scroll the content until you find the Default background image input :
- Select a default image
- Under the GENERAL DESIGN set the slider's height to 50% :
- 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".