Text-Box Module

Building in the WCMS

Print
Related Pages

Creating a Text-Box Module

To create a single-use text box, use the Add Element option in Visual Composer.  To create a reusable text box (which can be inserted into Visual Composer or the WYSIWYG editor), use the “New Content” option in the WCMS content browser.

Note that, if you are grouping related pieces of content, the card element may work better in that it supports multiple sections.

Setting Text Box Options

When inserting the text box, check “Enable Card Style Options” (first option) to get the full set of color and border options.

Depending on the layout, a text box can have several measurement options, for example: image size, image padding, title size, and section size. The default values work in most cases. When the defaults do not produce the optimal card layout, experimentation is the best approach. Note that, for a vertical text box, you can set the image padding to none.

Linking Options

Using Clickable Card Subcomponents. You can enter link targets for several subcomponents: text box header, section title, section action button / link. You can also insert links into the description using the <a> tag. For “special links” to non-HTML files and external sites, the appropriate link icon and file details automatically display. See the card gallery for examples.

Making Entire Card Clickable. To make an entire card clickable, check “Make Entire Card Clickable” in the (General tab) and then enter the link target in the associated field. This disables the link target fields for header and title  and strips any links inserted into text. You can include an action button or action link text, but the button / link exhibits no on-hover behavior. If the link is to a non-HTML file or external site, a text-box footer is automatically displayed with the link decoration and file details, as applicable.

WCMS Quick Facts

To get the full set of color and formatting options for a text box, select “Enable card-style options” in Settings pop-up (first option).

To make all text box modules in a Visual Composer row the same height, open the Settings pop-up for the row and select “Make all modules the same height.”

To create a container with multiple sections all under the same header bar, use the card content element instead of the text box module.