Visual Composer Module
Best Practices
Overview
The Visual Composer module is a reusable content type that allows you to package one or more content elements into a single module that can be inserted into Visual Composer or the WYSIWYG editor. It’s a flexible module that offers the following benefits:
- Make single-use elements reusable: You can insert single-use Visual Composer elements like sliders and carousels into Visual Composer modules, making them reusable.
- Ensure consistent styling of reusable content: By inserting text box modules and list modules into Visual Composer modules, you can ensure consistent headers, titles, and styling. (When the reusable versions of these elements are inserted directly into pages, the styling and certain text can be changed for each page. When they are contained within a Visual Composer module, the display is consistent across all uses.)
- Text-wrap Visual Composer elements: Because Visual Composer modules can be inserted into a WYSIWYG text editor, you can turn any Visual Composer element into text-wrapped “floating” content by putting it in a Visual Composer module. See examples at the bottom of this page.
- Preserve layout: When packaging multiple Visual Composer elements together, you can opt to preserve the layout of rows and columns. See examples at the bottom of this page.
- Go to ExamplesSee examples on this page that illustrate key options.
- Building in the WCMSLearn the two approaches to building Visual Composer modules.
- TP4 UX Best Practices [PPT - 14 MB]For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.
Creating a Visual Composer Module
There are two approaches to building Visual Composer modules:
- Selecting “New Content” option from the WCMS content browser. You must use this option to package multiple content elements together.
- Converting a single-use Visual Composer element. This option works for the following types of Visual Composer content:
- Text box (single-use)
- Alert module
- Button
- Dynamic list
- Gov Delivery (Email Module)
- Image
- Image Share Widget
- Leadership profile
- Raw HTML module
- Navigation Button
- Responsive Audio
- Responsive Image
- Social Media Feed
- YouTube videos
- Text block
For more information, see Building in the WCMS.
VC Module Containing Multi-Section Card,
Floating Left in Text Block
Guideline 1 and Guideline 2 are sections of a card (a single-use element that can be inserted only into Visual Composer). By inserting the card into a Visual Composer module, in addition to reusing the card, we can insert it into a text block and take advantage of the float alignment options. For this Visual Composer module, the selected alignment is “Float Left.” Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. View full Guideline 1.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. View full Guideline 2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
VC Module Containing Multiple Content Elements
(Video and Text Box Module)
The two elements below — a referenced YouTube video and a text box module — are inside a Visual Composer module so that they can easily be placed together on multiple pages. Each element is in its own column. When the option to “retain rows and columns when embedded in a page” is checked, the text box always displays to the right of the video.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.