Summary

  • Overview
  • Header Presets
  • Hide Header From Context Menu
  • Show Header Link
  • Adding Header and Footer to My Library
  • Export And Import Header
  • Multi-Row Headers
  • Sticky Header
  • Header Shadow
  • Best Practices For Header Blocks

Overview

The Header is a specific type of Block that is displayed on all website pages. The Header style remains the same on all pages. Usually, it includes the Menu, Logo, or Title. It is the Theme Element in WordPress and Joomla.

When the Header is selected, you can see the titles on the markers.

header-footer-titles.png

Header Presets

Nicepage provides a library of Header Presets to help you get started with the new Multi-Row Header layouts.

header-properties.png

Hide Header From Context Menu

You can hide the Header via the Context Menu or the Property Panel -> Page tab.

hide-header-context-menu.png

You can now click a link near the Page Options icon to enable the Header again when the Header is hidden.

show-header-link.png

Add Header to My Library

You can add a Header Block to My Library to use the same Header layout in different projects:

header-footer-my-library.png

Export And Import Header

You can export and import Header and Footer Blocks to your disk.

export-import-header-footer.png

Multi-Row Headers

Learn more about the Header Blocks.

This option keeps the Header Block on the top of the page even if you scroll.

sticky-header.png

Sticky Header Border and Shadow

On scrolling, you can add a Border and Shadow for the Sticky Header to improve the page look.

sticky-header-border-shadow.png

Please note that you will see the results of these options only in the preview or export.

sticky-header-shadow-scroolling.gif

Sticky Header Block Border and Shadow

You can also apply the Sticky Border and Shadow option for the Header Block if you use several Blocks in the Header.

sticky-header-row-border-shadow.png

Sticky Option for Each Header Block

You can use the Stick property for any Header Block. Please note that you can only see the sticking on exported sites or previews.

You can stick a required Block and unstick all others.

sticky-row.png

Header Shadow

You can enable the Shadow for the Header Block or apply the Shadow Effect for the Sticky Header on Scroll.

header-shadow.gif

Best Practices For Header Rows

Tall Headers

While resizing the Header, making it very tall, we have changed the Best Practice dialog, offering you to add a Header Row instead.

add-header-row-best-practice.gif

Full-Width Shapes Or Lines

While adding a Shape or Line element and making it screen-wide, the Best Practice dialog will appear, offering you to add a Header Row.

best-practice-shape-full-width.gif

## Summary - Overview - Header Presets - Hide Header From Context Menu - Show Header Link - Adding Header and Footer to My Library - Export And Import Header - Multi-Row Headers - Sticky Header - Header Shadow - Best Practices For Header Blocks ## Overview The Header is a specific type of Block that is displayed on all website pages. The Header style remains the same on all pages. Usually, it includes the Menu, Logo, or Title. It is the Theme Element in WordPress and Joomla. When the Header is selected, you can see the titles on the markers. !header-footer-titles.png! ## Header Presets Nicepage provides a library of Header Presets to help you get started with the new Multi-Row Header layouts. !header-properties.png! ## Hide Header From Context Menu You can hide the Header via the Context Menu or the Property Panel -> Page tab. !hide-header-context-menu.png! ## Show Header Link You can now click a link near the Page Options icon to enable the Header again when the Header is hidden. !show-header-link.png! ## Add Header to My Library You can add a Header Block to My Library to use the same Header layout in different projects: !header-footer-my-library.png! ## Export And Import Header You can export and import Header and Footer Blocks to your disk. !export-import-header-footer.png! ## Multi-Row Headers Learn more about the [Header Blocks](page:480309). ## Sticky Header This option keeps the Header Block on the top of the page even if you scroll. !sticky-header.png! ### Sticky Header Border and Shadow On scrolling, you can add a Border and Shadow for the Sticky Header to improve the page look. !sticky-header-border-shadow.png! Please note that you will see the results of these options only in the preview or export. !sticky-header-shadow-scroolling.gif! ### Sticky Header Block Border and Shadow You can also apply the Sticky Border and Shadow option for the Header Block if you use several Blocks in the Header. !sticky-header-row-border-shadow.png! ### Sticky Option for Each Header Block You can use the Stick property for any Header Block. Please note that you can only see the sticking on exported sites or previews. You can stick a required Block and unstick all others. !sticky-row.png! ## Header Shadow You can enable the Shadow for the Header Block or apply the Shadow Effect for the Sticky Header on Scroll. !header-shadow.gif! ## Best Practices For Header Rows ### Tall Headers While resizing the Header, making it very tall, we have changed the Best Practice dialog, offering you to add a Header Row instead. !add-header-row-best-practice.gif! ### Full-Width Shapes Or Lines While adding a Shape or Line element and making it screen-wide, the Best Practice dialog will appear, offering you to add a Header Row. !best-practice-shape-full-width.gif! ##