10Web Help Center

Hi, how can we help?

Tabs Widget

Copy article URL

in this article

The Tabs widget lets you organize and divide content into tabs arranged either horizontally or vertically. This improves user navigation through different sections of your webpage. You can customize the tabs’ look, add text, and even images.

Additional use cases

  • Creating step-by-step guides or tutorials with each step in a separate tab for clarity.
  • Displaying different services offered by a company in an organized format.
  • Presenting various categories of blog posts or articles for easy navigation on content-heavy websites.

Adding Tabs widget

Add the Tabs widget to the canvas. For details, see Add Elements article.

Content tab

  • In the Content tab, under the Tabs section, locate Tabs Items. Here, you can add titles and content for each tab. Each tab represents a different content section.
  • The Tabs widget comes with two default items: Tab #1 and Tab #2. You can modify, delete, or add new tabs.
  • Click on a tab item to add content.
  • Enter the title and description for each tab item in the Title and Content field.
  • Use the Add Item button to add more tabs.
  • Select the display position of the tabs (horizontal or vertical) in the Position field.
  • Set the alignment of the tabs (Start, Center, End, or Stretch) in the Alignment field.

Style tab

Tabs

  • Border Width: Adjust the border thickness around the tabs.
  • Border Color: Choose a border color.
  • Background Color: Select a background color for the tabs.

Title

  • Color: Set the title color of the tabs.
  • Active Color: Set the color for the active tab's title.
  • Typography: Customize the typography options for the titles.Text Stroke: Click the 🖋️ icon to add a stroke effect to the title.
  • Text Shadow: Click the 🖋️ icon to add a shadow to the title.

Content

  • Color: Choose the text color for the content.
  • Typography: Set the typography options for the content.
  • Text Shadow: Click the 🖋️ icon to add a shadow to the content text.

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.

in this article