Download this help site
(PDF 80MB)


Content gadget

Content gadgets are the gadgets you use to add your own custom content. Within a content gadget, you can combine a variety of content, including:

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

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

You can link text and pictures to a page on your site or another site, and provide links to documents stored in your account or on another site.

You can layer and overlap content so that text can appear on top of a picture, for example. For this reason, content gadgets are perfect for creating page headers. You can also choose a background color or image for each content gadget.

You can insert a content gadget into a page onto your site, or 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.

Editing the content

To edit the content of a content gadget while editing a site page or page template, position your pointer over the gadget then click anywhere within the gadget.

 Read more/less

Once you have opened the gadget for editing, you can use the options appearing on the content editor toolbar to add or modify text, picture, tables, links, HTML or JavaScript, as well as other content.

Content gadget settings

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

 Read more/less

For instructions on displaying gadget settings, see Gadgets.

The following settings are available for content gadgets:



Background color

The background color of the content area. 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 choose whether and how you want to repeat the image – horizontally, vertically, tiled – and control the horizontal position of the image within the gadget.


To stretch a background image to fill the content gadget, enter the following CSS code in the Inline style field within the Advanced settings section:

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.


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.


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.


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.

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.


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
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7