Text Banner Component
The Text Banner component is a component that creates a text banner that stretches across the width of the page, giving you an opportunity to create a targeted marketing message to get the attention of your customers.
On This Page
Basics
Component Name: The name of the component. The default value is Text Banner but it can be edited as needed.
Text Layout: This lets you decide if you want your text message to run Horizontal, from left to right, or Vertical, from top to bottom.
Banner Size: This sets the size of the banner, from top to bottom. The options are: Small, Medium and Large.
Note
The banner will adjust based on the amount of text you are including in the banner. Ostensibly, the Banner Size function allows you to increase the space around the text within the banner.
Properties: Text
Text Alignment: This aligns the text within the banner. The options are Left, Center and Right. If you have the layout set to Horizonal, this setting only applies to the Body Text. If the layout is set to Vertical, the Heading Text, Body Text and Button align to your choice.
Note
NOTE: For the rest of the configuration options for elements like Heading Text, Subheading Text, Body Text and Button Text, please visit the Component Text Settings document, here.
Properties: Background
Background Image: Here you can set an image to be the background of your text banner. Clicking Select Image opens the Add Image page. You can upload a new image, select an image that is already in your system or add an image that is already on your server by using the path to the image.
The Image Settings subsection allows you to set specific images for when your website is viewed on a mobile device or tablet. If you don’t set specific images, the main image you used will be resized to fit.
Alt/Title Text: The Alt/Title Text is text that displays when a website visitor hovers their mouse over the image in question and its use is considered a best practice, particularly when it comes to SEO.
If you do not want a background image, you can click the box at the bottom of the Background section to open the color picker to set a color as the background for the text banner.
Advanced: Spacing
The Spacing section of the Advanced tab allows you to alter the spacing, or padding, on the top and the bottom of the component. This establishes the space between this component and the page elements adjacent to it. It is set in pixels.
Content Theme: The Content Theme setting allows you to quickly change the text and button colors when they are used over light or dark backgrounds. Rather than needing to go into each text element and individually changing them due to the background, you can change the theme of all of the elements quickly in one spot.
The Content Theme settings are:
Light: This is the default color scheme. It's good for use over light/white backgrounds.
Dark (Always): This is good for use over dark backgrounds and images and applies a color scheme to the text and button elements that is more suitable for dark backgrounds. The (Always) indicator means it applies to all screen sizes; mobile, tablet and desktop.
Dark (Desktop Only): This is good for use over a dark image, or if you have a dark background for desktop devices, but are using the default light or white colors on mobile and tablet devices. Like the Dark (Always) selection, it applies a color scheme to the text and button elements that is more suitable for dark backgrounds.
Inverted: This selection should be used carefully, because it inverts the hues of all the colors of the elements inside a content area. For example, if an element is normally white, it will now be black. If it was red, it would be cyan, etc. This works well for monochromatic color schemes over dark backgrounds, but may not be great for colorful themes.