The Tabs Element [Zipify Pages]

Learn how to use and work with the Tabs element!

Jeff Maxfield avatar
Written by Jeff Maxfield
Updated over a week ago

Overview

Tabs are a great way to include more Product or other information within a limited space. For example, product details such as description, ingredients, shipping info and other important information can be organized into tabs, to save space and make your page more tidy.

One popular example for using tabs on a product page is to split up your product descriptions using tabs. You can create one tab for each part of the product description.

The Tabs section can be found in the "Text" category of the section library, or by searching for "Tabs" in the search bar:

A new Tabs element can also be added to any existing section on the page by clicking on the "add element" button above/below an existing element and selecting the "Tabs" element:

Adding Tabs + Content

Once the Tabs element has been added to your page, click directly on the element or on the "Tabs✏️" button to open up the tabs setting in the sidebar:

In the "Items" section of the sidebar you can:

  1. Add new tab items by clicking the "+ Add New Item" button

  2. Expand/Collapse the tab item where you can add the Title for the item

  3. Delete a tab item by clicking the πŸ—‘οΈ button

  4. Rearrange the tab items via drag and drop

To edit the Text content included in a tab, double-click on the text element in the editor and edit as needed:

To add Image or Video content (or any other desired element) to a specific tab in addition to text, click on the text element and then on the βž• button above or below the text element to open the "Add Element" popup. Select the "Image", "Video" or any other element to add it to the tab content:

Editing the Appearance of Tabs

In the "Layout" section of the sidebar you can:

  1. Choose a Layout option to use for the tabs element

  2. Choose the Font Name, Font Size and Font Style to use for the tab items

  3. Set the Active State colors for the Text and Borders of the tab items

  4. Set the Inactive State colors for the Text and Borders of the tab items

Did this answer your question?