This article discusses how to use Single Column, Two Column, Three Column, and Four Column Widgets. The label of each widget indicates how many columns are provided in a chosen widget. For example, a single Two Column Widget provides two columns that each contain a single WYSIWYG editors in which to place your images, text, HTML, and select assets from your Asset Library.
Use Case Information
Use a Column Widget when you need a WYSIWYG where you can add text, images, or HTML to create an experience (like a custom button) in that widget. Select a multi-column widget when you want to use multiple columns in a single widget.
Note
If you would like to use an iframe or embed content, such as embedding a video, please use the HTML embed page type.
You can also stack widgets on top of each other on layouts where you need multiple rows of columns. For example, if you wanted to add six total images to a layout, you could add a Three Column Widget with three images on one row in a layout, then add a Three Column Widget below the first widget with three images.
Below is an example where we've used two Three Column Widgets to contain custom HTML buttons that link to specific URLs.
Learner View of Three Column Widgets Stacked to Make a Custom Experience
Admin View of Three Column Widget Setup Using HTML Code to Create a Button
How to Add a Column Widget to Layouts
To incorporate a Column Widget onto a standard layout or a custom page:
- From your homepage, select Site > Site Builder > Layouts.
- Choose from the provided default page layouts.
- Select Actions and then Edit from the dropdown.
Note
If you want to add a Column Widget to a custom page, click Actions and then Design from the dropdown.
- From the left sidebar menu of available widgets, select Single Column, Two Column, Three Column, or Four Column Widget.
- Choose your configuration options:
- Title: Your title for this widget
- Use New Title Display: Justifies text to the left side of the screen
- Subtitle: Text that appears under the title
- Single Column: WYSIWYG that allows you to add HTML, format text by making it bold, turning it into a bulleted list, etc. You can also use this WYSIWYG to add images, tables, links, Snippets, and select items from the Asset Library.
- CTA Button Text: The text that appears in the Call-to-Action button in this widget
- CTA Button Url: The URL that learners are directed to when they click the CTA button
- Open URL in New Tab: Check this box if you want the CTA Button URL to open in a new browser tab when a learner clicks on it.
-
CSS Classes: Add CSS to customize this widget.
- Click Save.
Your newly-designed widget will be located at the bottom of your page layout.
Other Editing Options
- After saving, edit the settings for the widget by clicking the Pencil Icon at the top left of the widget.
- To reposition the widget on the page, simply click the Carrots on the left side of the widget.
- To delete the widget off the page completely, click the Trash Can Icon on the right side of the widget.
- To preview how the widget appears for your learners, click View Preview Mode at the top right of the page. Click Back to Editor Mode to continue editing the page layout.
Tip
After making updates to your page design, we always recommend viewing the final product from a learner's perspective to get the full effect.
Where to Find the Column Widgets
The following is a list of default Thought Industries page layouts where you could incorporate the Column Widgets:
- Homepage
- Video
- Transcript
- Article
- Support
- Registration
- Redemption
- Product Sidebar
- A la carte collection
- Learning Path Detail Sidebar
- Learning Path
- Course Collection
- Dashboard
- Course Detail Sidebar
- Catalog
- Subscription
- Custom Pages