Content gadget

Overview

Content gadgets are used to add content to website pages. Within a content gadget, you can combine a variety of content, including:

• text
• pictures
• tables
• links
• dividers
• custom HTML or JavaScript

You can also insert a content gadget into a page template so that all pages that use that template will automatically display the gadget. 

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

Pro Tip: For Casefile and Kaleidoscope themes, you can insert a headline gadget above a content gadget to act as a title or heading.

Add a content gadget to a website page

To add a content gadget to your website, follow these steps:

1. In the admin view, select Website from the sidebar menu.

2. In the Site pages view, click on the name of the page you want to edit, then click Edit.

3. With the page editor open, click Gadgets.

4. With the Gadget view open, select the Content gadget, drag it onto the page, and drop it in the spot where you want to locate it. 

5. Click on the gadget to begin editing it. See Editing the content below for details.

6. When you are finished editing, click Save in the top left corner of the screen.

Editing the content

Click on a content gadget to begin editing it. 

When you click on the gadget, the content editing toolbar will appear at the top of the screen.

 In addition, the left side panel will provide opportunities to change the appearance of the content gadget.

Content appearance settings

You can control the appearance settings for all content included within the gadget area by using the side panel in the Content gadget editor. Click on a content gadget to open the side panel and edit its appearance settings. 

The following Appearance settings are available for Content gadgets:

Background color
To change the background color of the content area, locate Background color in the content gadget's Appearance settings and click on the dropdown menu. 

To make the background transparent, click Set to transparent. This allows the appearance of the page to show through the content area.

Background image
To choose a background image for display behind the content, follow these steps:

1. In the content gadget's Appearance settings, locate Background image and click Select or Change. 

2. Select an image from your theme's library or from your account Files, then click Apply background. 

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:

• Tile – the image will be repeated horizontally and vertically to completely fill the available space.
• No repeat or scaling – the image will displayed as is, and will be not be repeated or scaled.
• Repeat horizontally – the image will be repeated horizontally to fill the width of the available space.
• Repeat vertically – the image will be repeated vertically to fill the height of the available space.
• Fill – the image will be stretched to completely fill the available space, and may therefore appear distorted.
• Cover – the image will be proportionally resized to cover the available space, and may therefore be cropped.
• Scale by height – the 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 width – the 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.

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. If you have specified a gadget title, the top padding will be applied between the title and the rest of the content.

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

Hide pictures in mobile view
(Terra and Firma themes) With this option enabled, pictures inserted within the content gadget are not displayed when the width of the browser window is 600 pixels or less. Background images will, however, continued to be displayed regardless of the browser window width.

Gadget title
If you specify a gadget title, the title will appear specially formatted within the gadget. Depending on the gadget style you choose, the title may appear in a heading box.

For Casefile and Kaleidoscope themes, use a Headline gadget instead of specifying a gadget title.

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. You can choose from theme-specific styles and styles that are common to all themes. Depending on whether the gadget style you choose is transparent, you may no longer see your background color and background image. For Terra and Firma themes, the Opacity 60% style results in a semi-transparent gadget background.

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.

Placing a border around a content gadget

To place a border around a content gadget, follow these steps:

1. Place your content gadget in a layout, if it doesn't already appear in one. Use a one-column layout if your content gadget occupies the full width of the content area.
2. Hover over the layout and click the Settings icon.
3. From the layout's settings, specify as the background color for column in which the content gadget appears to the color you want to use for the border.
4. Set the Padding values to the width you want for the border.
5. Go to the settings for the content gadget and set the background color to something other than transparent (like white, for example).
6. Save your changes.

Some themes come with content gadget styles that display borders, with or without a heading block. You can select one of these styles within the Gadget style dropdown within the Settings panel for the content gadget.