The new 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!
With these three new pieces, this update 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.
Each page and post now includes two new fields on the Edit dashboard: Subheading and Description.
The content entered in these fields will populate in the Page Heading widget, including support for adding media and shortcodes for videos, buttons, and company info.
How to Use 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!
Heading, SubHeading, and Description
Each different section has font and text alignment options. Configure each for both desktop and mobile.
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.
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.