Home

Download this help site
(PDF 80MB)

Download

Headline gadget

Icon

This gadget is only available when using a Kaleidoscope website theme.

Headline gadgets are specialized content gadgets used to display titles and headings for other gadgets or page sections.


You can insert a headline gadget above a content gadget or other gadget to act as its title or heading. 

If you want your headline gadget to appear as a seamless part of the gadget below it, you can add both gadgets to the same layout cell and set the cell background to a particular color.

For instructions on inserting, moving, and deleting gadgets, see Gadgets.

Formatting the text

The headline gadget includes gadget styles to automatically format the text for light or dark backgrounds. Whatever style you choose, you can format the text yourself using the content editor toolbar

 Read more/less

You can format the text using localized formatting or paragraph styles, or use ArtText to create stylized text with special effects such as drop shadows.

Headline gadget settings

Using a headline gadget's settings, you can control its appearance, including its height, margins, padding, background, and overall style.

 Read more/less

For instructions on displaying gadget settings, see Gadgets.

The following settings are available for headline gadgets:

Setting

Description

Background color

The background color of the gadget. To change the currently selected color, click it then click another color from the palette or enter the hex code for the color. To make the background transparent, so that the page background shows through, click the Set to transparent button.



If you choose a gadget style (below) that is not transparent, you may no longer see your background color. You can also set the background color for the layout or placeholder in which the gadget appears.

Background image

An image to be displayed as the background for the gadget. To choose a background image, click the Select button, or the Change button if a background image has already been applied. From the dialog that appears, you can choose from images in your theme's library, or images from your account. After you have selected the background image, click Apply background to apply it.

After you have applied a background image, you can control the horizontal and vertical alignment, and choose how your image appears within the available space. You can choose from the following Behavior options:

OptionDescription 
TileThe image will be repeated horizontally and vertically to completely fill the available space. 
No repeat or scalingThe image will displayed as is, and will be not be repeated or scaled. 
Repeat horizontallyThe image will be repeated horizontally to fill the width of the available space. 
Repeat verticallyThe image will be repeated vertically to fill the height of the available space. 
FillThe image will be stretched to completely fill the available space, and may therefore appear distorted.  
CoverThe image will be proportionally resized to cover the available space, and may therefore be cropped. 
Scale by heightThe image will be proportionally resized to fit the height of the available space. Depending on the dimensions of the space, the image may be cropped, or may not fill the entire width of the space. 
Scale by widthThe image will be proportionally resized to fit the width of the available space. Depending on the dimensions of the space, the image may be cropped, or may not fill the entire height of the space.  

To remove the existing background image, click the Remove link.

If you apply both a background color and a background image, the background image will appear on top of the background color. If you choose a gadget style (below) that is not transparent, you may no longer see your background image. You can also set the background image for the layout or placeholder in which the gadget appears.

Height

The height of the gadget. You can allow the height to be automatically set based on the content of the gadget or set it yourself to a fixed number of pixels. If you have added a background image, you can click Adjust height to background image to automatically adjust the height of the gadget to the height of the image.

MarginsThe amount of space – in pixels – that appears outside the gadget. You can set top, bottom, left, and right margins separately.

Padding

The amount of space – in pixels – that appears between the content of the gadget and the outer limits of the gadget. You can set top, bottom, left, and right padding separately. If you have set a fixed height for the gadget, the bottom padding will be ignored.

Gadget style

The gadget style determines the physical appearance of the gadget. The style you choose will determine the color and format of the gadget title, the gadget content, and the gadget border. Styles are available to automatically format the text for light or dark backgrounds. Depending on whether the gadget style you choose is transparent, you may no longer see your background color and background image.

Advanced

Within the Advanced section, you can enter CSS code or classes to further control the appearance and behavior of the gadget. For more information, see Advanced gadget settings.

On this page: 

See also:

  • No labels