Add Tabs with Rich Content Editor

  • Versão de lançamento: Australia
  • Atualizado 12 de mar. de 2026
  • 4 min. de leitura

    • 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.

    Antes de Iniciar

    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.

    Por Que e Quando Desempenhar Esta Tarefa

    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.
    Nota:
    When the Tabs functionality is not enabled, try reinstalling the Content Publishing application.

    Procedimento

    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.
      Rich Content Editor - Tabs
    3. To add more tabs, select the entire tab component and click Add item, located in Settings > Properties.
      Add more tabs by clicking the Add item button
    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.

      Rich Content Editor - Color selector

    9. Click into the color palette that appears.
      Rich Content Editor - Color palette
    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.

      Rich Content Editor - Color palette slide bar

    11. Use the bottom slide bar to lighten or darken your color.
      Rich Content Editor - Bottom slide bar
      Nota:
      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.

      Rich Content Editor - Advanced styling

      Tabela 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.
      Nota:
      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.

    O que Fazer Depois

    • (Optional) Translate your content.

      Request language translation for your content. For more information, see Multilingual support in the Content Library.

      Nota:
      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

    • Preview your content from the Publish tab.
      Nota:
      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.
    • 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.