How to Use the Page Header Widget - UXi® Websites – Marketing 360®

The Page Header widget makes it possible to display the title of a page or post separately from the content in the layout. This update also adds new Subheader and description fields and allows the featured set for any page or post to be utilized as the background image for the new Page Header widget.

This widget allows pages to display more unique content and images without having to create separate layouts. When the Page Header widget is configured on any layout, each other page/post using the same layout will share the front-end settings.

Using the Page Header Widget

To separate the page title from its content, simply add content to the page / post Subheading and Description as needed. Next, add the Page Header widget to the layout. Adding this widget will automatically remove the page title from being visible in the Page Content widget.

Remember, adding this widget to any page layout will affect all other pages sharing the same layout!

Widget Settings

Heading, Subheading, and Description

Each different section has font and text alignment options. Configure each for both desktop and mobile.

Featured Image

The Page Header widget can also use a page's featured image as the row background.

Use Featured Image: Use this setting to activate the featured image as the row background for desktop devices.
Enable On Mobile: Use this setting to activate the featured image as the row background for mobile devices. With this setting, UXi® will choose a smaller version of the same image to use as the row background for smaller devices.
Responsive Background Image: Use this setting to stretch the background image to the browser's edge, essentially making it fill the entire row.
Background Repeat / Position / Attachment: Use these settings to configure how the background image will display.
Position determines where the image will display in the row.
Repeat allows the image to be tiled, or repeated horizontally / vertically.
Attachment is used to make the background image scroll with the content or stay 'fixed' in place. Please not that many mobile devices cannot use fixed position.
Use Background Gradient: Use this setting to overlay a gradient over the background image. Using this setting wisely will help the Page Header text to be legible while used with a variety of images.

The Page Header widget can also be added to post archives like the built-in testimonials archive, Posts Page or any category archive, but the set-up is bit different for these types of archives because they do not have Featured Images and do not use the standard UXi® SEO features like a page or post.

Using the Page Header on the Posts Page

When the Page Header widget is added to the Posts Page that's set on UXi® General Settings, a background image must be added using the front-end editor styles. The widget will display only the page's title. If any other content needs to be added with the page title, add it to the layout itself.

Using the Page Header for Category Archives

The Page Header widget can be used on any category archive link like /category/news/ etc.

When used on a category archive, a background image must be added using the front-end editor styles. The Page Header widget will display the category's description field.

Using the Page Header for Testimonials

The Page Header widget can be used on the built-in /testimonials/ link that displays the full list of testimonials.

When used on the testimonials archive, a background image must be added using the front-end editor styles. The Page Header widget will display the page title of "Testimonials".