Point - WYSIWYG editor with tabs

Introduction

WYSIWYG with tabs allows you to use the already familiar WYSIWYG editor, but have multiple chapter buttons which allows users to navigate between them without navigating away from the page.

Requirements

• Point product license

Benefits

Often, people do not read long pages. This component allows you to highlight chapters for immediate "at a glance" overview for your users. They may then interact with chapters which are relevant to them without having to navigate.

Quick and easy to work with as you build all your content into one single page (as opposed to inline pages).

How to set up

• You need a page template which has the "WYSIWYG with tabs" component.

• Create a page in page admin. Make sure this page uses a page template with this component on it.
• Go to the page and begin editing.
• In Edit mode you gain access to the "WYSIWYG with tabs" options by clicking the cog underneath it.

• Opening settings and saving once will allow you to start adding content to each tab. Use the plus symbol inside the "tabs" component as you would the normal editor. You may want to edit some settings before continuing. (See guide below)

Click on each tab to edit the content within.

Getting started - Editing text (WYSIWYG)

The settings for the "WYSIWYG with tabs" will be directly underneath the content. This may be tricky to find as the content will look very much like normal editor content. You will always find the settings for this component by looking for the cog.

General settings

Here you set the overall settings for all the tabs.

• Tab settings: Two different ways to visualize the tab buttons.
• Align tabs: Left, right or center, allows you to follow the general text position or design of your page.
• Full width: Spans the background color of the bar all the way to the edge of the window.
• Inverse: Dark or bright text and icon color to contrast the background.
• Icons: Use system icons to help highlight the buttons.
• Icon position: Position the icon left, over or on the right side of the text.

Individual tab settings

Here you control each individual tab.

• Add new tab: Click this to add another tab to the list. When saving, this tab will become available to add content to.
• Drag and drop: You may drag and drop the tabs in order by clicking and holding the dotted symbol to the left.
• Icon: Use one of the system icons to highlight your tab.
• Name: Text to appear on the tab.
• Actions - Clone: Clone the tab to quickly set up a new one.
• Actions - Delete: Delete the tab (read the below important note as deleting tabs may cause you to lose content)

Important to note:

Deleting a tab. This is not reversable and may cause you to lose content stored in the tab. Be absolutely sure you have copied an content you wish to keep before deleting a tab.

As mentioned above, once your tabs are set up, you use the following plus symbol to build as you would the normal editor.

Getting started - Editing text (WYSIWYG)