Custom Banner Title
User Guide Custom Banner Title
Overview
Use this tool to:
- Create and save custom banner title style options
- Customize sub-elements of the banner title header
Before You Continue
This tool must be enabled before it can be accessed. Follow the instructions to enable a single Advanced tool before proceeding.
Related Tools:
Interface
The following buttons are always available when using the Custom Link Grid tool:
- Toggle Preview
- Uncheck to hide the custom header preview
- Reset Style
- Reset the style of the selected header
The following panels will describe what can be accomplished in each section of this tool:
Wrapper
The following controls are available in the Wrapper section:
- Wrapper Colors
- Apply background, text, and border colors to header wrapper
- Wrapper Style
- Apply text and border styles to header wrapper
- Wrapper Border Width
- Set border width for header wrapper
Heading
Use the tools in the Heading section to:
- Header Colors
- Apply background, text, and border colors to heading in banner title header
- Header Style
- Apply text and border styles to heading in banner title header
- Header Border Width
- Set border width for heading in banner title header
- Align Text
- Set text alignment for heading text
Prefix
Use the tools in the Prefix section to:
- Prefix Colors
- Apply background, text, and border colors to prefix in banner title header
- Prefix Style
- Apply text and border styles to prefix in banner title header
- Prefix Border Width
- Set border width for prefix in banner title header
- Font Size
- Set font size for prefix text
- Prefix Horizontal Position
- Set horizontal position of prefix in banner title header
- Prefix Vertical Position
- Set vertical position of prefix in banner title header
- Align Text
- Set text alignment of prefix text
- Stack Prefix Text
- Toggle whether prefix sections appear next to each other or above each other
- Fill
- Toggle whether prefix section spans full width of banner title header
Custom Styles
Use the controls in the Custom Styles section to:
- Custom Style Title
- Name new custom banner title style
- Save Custom Style
- Save custom banner title style to user styles library
Once any Custom Banner Title user styles have been saved, the following additional controls will be available in the Styles List:
- Rearrange Custom Styles
- Drag and drop custom styles to rearrange
- Apply Custom Style to Preview
- Apply style to preview window
- Custom Style Title Input
- Rename saved user styles
- Update to Current
- Update custom style to current banner title style
- Delete Style
- Delete custom style
- Save Changes
- Save any changes made to currently selected user style
You can also access and edit custom styles later in the Style Editor and the Quick Style Manager.
CSS Classes
The CSS Classes input allows you to add or remove custom classes for a custom link grid style. You can also see the current classes that comprise a custom link grid style.
Instructions
Hide the Custom Banner Title Preview
To hide the preview window in the Custom Banner Title tool:
- Place your cursor in the link grid you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Uncheck the box next to Preview
Reset the Banner Title Style
To reset the style for a banner title:
- Place your cursor in the banner title you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Select Reset Style
Customize Styles for an Entire Banner Title
To customize colors for an entire banner title:
- Place your cursor in the banner title you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Expand the Wrapper panel
- In the Wrapper Colors section, select Background, Text, or Border
- Choose a swatch to apply the color
To customize styles for an entire banner title:
- Place your cursor in the header you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Expand the Wrapper panel
- In the Wrapper Style section, select a style to apply it
To set the border width around an entire banner title:
- Place your cursor in the header you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Expand the Wrapper panel
- In the Wrapper Border Width section, select a border width to apply it to the banner title
Customize Styles for a Heading in a Banner Title
To customize colors for a heading in a banner title:
- Place your cursor in the header you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Expand the Heading panel
- In the Heading Colors section, select Background, Text, or Border
- Choose a swatch to apply the color
To customize styles for a heading in a banner title:
- Place your cursor in the banner title you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Expand the Heading panel
- In the Header Style section, select a style to apply it
To set the border width around a heading in a header:
- Place your cursor in the banner title you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Expand the Heading panel
- In the Header Border Width section, select a border width to apply it to the heading
Customize Styles for the Prefix in a Banner Title
To customize colors for the prefix in a banner title:
- Place your cursor in the header you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Expand the Prefix panel
- In the Prefix Colors section, select Background, Text, or Border
- Select a swatch to apply the color
To customize styles for the prefix in a banner title:
- Place your cursor in the banner title you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Expand the Prefix panel
- In the Prefix Style section, select a style to apply it
To set the border width for the prefix in a banner title:
- Place your cursor in the banner title you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Expand the Prefix panel
- In the Prefix Border Width section, select a prefix border width to apply it to the banner title
To set the font size of the prefix in a banner title:
- Place your cursor in the header you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Expand the Prefix panel
- In the Font Size section, select small, default, or large to apply the position to the prefix
To set the prefix position in a banner title:
- Place your cursor in the header you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Expand the Prefix panel
- In the Prefix Horizontal Position section, select a horizontal position to apply it to the prefix
- In the Prefix Vertical Position section, select a vertical position to apply it to the prefix
To set the text alignment of the prefix in a banner title:
- Place your cursor in the header you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Expand the Prefix panel
- Choose a text alignment to apply it to the prefix
To toggle whether the prefix sections appear above or alongside each other:
- Place your cursor in the banner title you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Expand the Prefix panel
- Check the box next to Stack Prefix Text to stack the prefix sections vertically
To toggle whether the prefix spans the full width of the banner title:
- Place your cursor in the banner title you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Expand the Prefix panel
- Check the box next to Fill to set the prefix section width to the full width of the banner title
Save a New Custom Banner Title Style
To save a new custom banner title style to your user styles library:
- Place your cursor in the header you want to customize
- Open the Advanced panel
- Select Custom Banner Title
- Use the Wrapper, Heading, and Prefix panels to build your custom banner title style
- Expand the Custom Styles panel
- Enter a name for the style in the Custom Style Title input
- Select Save to User to save the style to your user styles library
Edit Existing Custom Banner Title Styles
To edit an existing custom banner title style:
- Place your cursor in a header that has the style you'd like to edit
- Open the Advanced panel
- Select Custom Banner Title
- Use the Wrapper, Heading, and Prefix panels to adjust the custom header style or make any style adjustments to the header directly in the editor
- Expand the Custom Styles panel
- Optional: Select Update to current to save the selected header's style to an existing custom header style
- Optional: Update the name of the existing style
- Select Save Changes to update the style in your user styles library
View, Edit, or Remove Custom Banner Title CSS Classes
To view, edit, or remove custom banner title CSS classes:
- Place your cursor in a header that has the style you'd like to edit
- Open the Advanced panel
- Select Custom Banner Title
- In the CSS Classes input field, view, change, or remove CSS classes
Preview a Saved Custom Banner Title Style
To preview a saved custom banner title style:
- Open the Advanced panel
- Select Custom Banner Title
- Make sure the Preview checkbox is checked
- Expand the Custom Styles panel
- Find the style you want to preview in the styles list underneath the Save to User button
- Select the Preview button for the desired custom banner title style
Resources
Examples
See the customized banner titles below for some inspiration!
Design Considerations/Best Practices
Please consider the following when choosing to create custom header styles:
- Custom banner title styles that you create are saved to you as a user. They will not be available to other users unless you share the styles through Customizations courses or pages.
Legacy Comparison
While the ability to customize colors, borders, and classes in Banner Titles (formerly Title Banner Blocks) was available in the legacy Design Tools sidebar, the Custom Banner Title tool is a new feature of Next Generation DesignPLUS. This tool adds the following capabilities:
- Customize heading text, prefix, and wrapper styles, sizes, and colors in one tool
- Save custom banner title styles independent of a theme
- Preview custom styles before applying them