Add Tabs with Rich Content Editor

Add tabs to your rich content to help your users navigate efficiently by allowing them to select the various tabs to reveal the associated content within them.

Before you begin

Role required: sn_cd.content_manager

Fill in the New content form fields. See Create rich content

Create the page layout using modules or columns.

• Modules are predefined content layouts comprised of header, paragraph text, and images. See Add predefined content layouts with the Rich Content Editor
• Columns are containers that enable you to define a custom layout. See Add columns with the Rich Content Editor

About this task

You can add other components under a tab, like an Image, Video, Text, Text section, Link, Link block, or Button. When you drop the Tabs component into your canvas, an area below the tabs appears that allows you to drop other components into it.

Note:

When the Tabs functionality is not enabled, try reinstalling the Content Publishing application.

Procedure

1. Navigate to the canvas by selecting the Open editor button from the Design tab of the New content form.
2. From the Rich Content Editor canvas, you can use a drag-and-drop method to add tabs.
   
3. To add more tabs, select the entire tab component and click Add item, located in Settings > Properties.
   
4. Select a tab you added to your canvas.
5. To change the color of the tabs, first click into the color palette.
6. From the Settings tab, select Styling.
7. Enter the color code that represents the color you want to appear.
   All HTML colors are supported. For more information, see HTML color names.
8. Or, you can select the color picker (grey square) to the right of the Background Color field.

   

9. Click into the color palette that appears.
   
10. After selecting a color from the color palette, use the slide bar on the right side to fine tune your color.
    Slide the bar up and down.

    

11. Use the bottom slide bar to lighten or darken your color.
    

    Note:

    When previewing your changes and you select the tab, the colors or outline of the tab may show the default colors of the portal theme.
12. You can edit or change the text that appears on the tab by highlighting Tab Title and overwriting it.
13. You can edit the size of each tab and the font of the Tab title by selecting a tab and then selecting Advanced styling.
14. You can drop other components into the area below the Tabs you added to your canvas.

    

    Table 1. Advanced styling

    Field	Description
    Width	Edit the width of each tab by selecting it and using the Width drop-down. Your choices are: auto: Size is based on the content within the tab. If you enter additional text in the tab, the width automatically increases. px: Use pixels as your measurement. %: Use a percentage as your measurement.
    Height	Edit the height of each tab by selecting it and using the Height drop-down. Your choices are: auto: Size is based on the content within the tab. If you enter additional text in the tab, the width automatically increases. px: Use pixels as your measurement. %: Use a percentage as your measurement.
    Font name	Select the drop-down to choose a specific font.
    Font size	Enter a number to change the font size or use the up and down arrows to make the font smaller or larger.
    Font weight	Determines how bold or light your text on the button appears. Select the drop-down arrow to choose a different weight.
    Line height	Determines the distance between lines of text. Use the up and down arrows to make line height smaller or larger.
    Font color	Defines the color of the font. Select the color picker (grey square) to the right of the Font color field. Click into the color palette, and choose the color you want. Use the slide-bars on the right and bottom to fine tune your color. Note: When previewing your changes and you select the tab, the color of the text may show the default colors of the portal theme.

15. Edit the Title field under Properties.
    The text you enter appears as hover text for the tab and the screen reader announces it.
16. Select Save or Save and Finish.
    Selecting Save saves your content and you remain on the Rich Content Editor canvas. Selecting Save and Finish saves your record and returns you to the New content form.

What to do next

• Preview your content from the New content form.
  Note:

  Content Preview is designed to provide a general idea of how your content looks. Content may look different once published due to variations in device resolution, theme difference, or mobile app style configuration.
• (Optional) Translate your content.

  Select a different language to view your session or request a language translation for the content you are creating. For more information, see Language support for Content Experiences and Content Publishing.

  Use the Language settings drop-down menu to select a different language to view your session in or request a language translation for the content you are creating.
  • Switch language: This allows you to switch your system settings language to a different language. This is similar to changing your language at login. For more information, see Switch language for Content Publishing.
  • Translate content: When you activate the sn_cd.enable_localization_framework_integration system property, created content from the Content Library displays the Translate content selection from the Language settings drop-down. This allows you to request translation for the content to the language you selected. For more information, see Integration with Localization Framework.
    Note:

    Only translate content after you are done modifying the content. For best results, we do not recommend that you add or remove components or change the formatting after translation.

    To create rich content that is formatted differently in different languages, duplicate the content and modify the formatting as needed. Then, use Audiences to target the content to users by language. See Audiences

• Configure a publish plan to control where the content is delivered, the audience, and the period of time it is available: Create a publish plan for your content.