Page Header
The page header offers three different background types. Each different type will reveal certain options which are related to that type.
- Background Image: Allows you to upload an image that will be shown in the Background of your page header. Since it will be displayed full width, make sure yo supply a decent size image in order to ensure a good viewing experience on desktops. e.g. 1600px wide by 350px tall (or whatever you have for your defined header height)
- Background Alignment: Controls the positioning of how your background image will align within the page header
Your supplied video will be automatically played on load so make sure to use this option responsibly for enhancing your design, rather than annoying your user. e.g. A video loop with no sound. In order to ensure cross browser compatibility you’ll need to supply both WebM and MP4 versions of your video. OGV is optional.
- Video WebM Upload The WEBM video filetype field
- Video MP4 Upload The MP4 video filetype field
- Video OGV Upload The OGV video filetype field
- Preview Image This will be used on mobile devices in place of the video background since mobile devices do not allow the autoplaying of videos.
Particle Images This upload field will open a modal that allows you to add images to your particle display via the WordPress media gallery interface. Please see the tutorial below for more information on configuring your particle header
Note: Having a background color/image set tells the theme that you’re intending on using the page header and it will display regardless if you’ve deleted the supplied title. Sometimes users wish to no longer use a page header but forget to delete the Background color they’ve set and can’t figure out what’s causing the page header area to remain.
General options
- Scroll Effect: Here you can select an effect that will be used when scrolling down if desired. The Box Roll effect can be seen here and the parallax header can be seen here.
- Page Header Height: This controls how tall your header will display on desktop displays. Enter the desired value in px but don’t include the “px”. e.g. “350”
- Fullscreen Height: Checking the box for this will cause your page header to display fullscreen of the window the user is browsing on.
- Page Header Title: The title which will displayed within the header
- Page Header Subtitle: An optional title which will be displayed smaller under the main title
- Text Effect: An optional animation effect that will be used on page load to animate your page header title/subtitle into view
- Header Content Alignment: Controls the horizontal and vertical alignment of your page header title/subittle
- Page Header Background Color: Allows you to set on optional background color for the page header
- Page Header Font Color: Allows you to define your own color for the page header title/subtitle – the default is white
The following two options only appear when you have the Use Transparent Header When Applicable option turned on in the Salient options panel > Header Navigation > Transparency tab. To learn more about how the transparent navigation effect works please see this section in the documentation about it.
- Disable Transparency From Navigation: Will deactivate the transparent effect from your header navigation when it would otherwise be enabled due to having a setup that would trigger it – i.e. Using a page header with a supplied BG color/image or using a Nectar Slider at the top of your page in the Salient Visual Composer.
- Force Transparency On Navigation: Will trigger the transparent effect regardless. This is useful for when you’re not using an applicable setup, but still want the header to be transparent when at the top of the page. e.g. You’re using a full width background Salient Visual Composer row at the top.
Page Full Screen Rows
The page full screen row option will turn all of your rows in the Salient Visual Composer page builder into fullscreen sections which will be scrolled between remaining always 100% in view. There’s many configuration options pertaining to the animations and general styling which will be listed below. Salient also provides multiple demos showing off this feature which can be seen here:
Video Tutorial
If you’re the visual learning type or just want to see mr. Nectar configure some sections to get a better feel for the page full screen rows, please check the video tutorial below!
Configuration options
- Animation Between Rows This will configure the actual animation seen when scrolling/transitioning between your rows.
- Animation Speed The dropdown here will control how fast the animation occurs
- Add Row Anchors To URL This option will add anchors to the end of your page URL when switching between sections. The anchors will be populated by the name you supply for each Row in the ID field (see below screenshot). I recommended using this option since it will increase the ease of navigation for everyone – your users will be able to link to specific sections in your page as well as have the browser back/forward button history. You will also be able to link to specific sections on your page from other areas of your site.
- Row BG Image Animation This option will effect all background images you have set in your page builder rows. The animation for be triggered upon reaching each section.
- Dot Navigation This will control the styling of the navigation used to change between your sections. There is also the option to hide the dot navigation if you don’t want it e.g. you’re only using one row
- Row Overflow Dictates what happens when content in your row takes up more space than available on the screen. You can choose either to hide the extra content or to give the user a scrollbar. Since mostly every section will end up overflowing on mobile devices, the provide scrollbar choice for this option is used on devices under 1000px screen width.
- Page Footer lets you configure what to use as a footer for your page, if anything at all