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 block can be found in the "Text" section of the block library, or by searching for "Tabs" in the search bar:

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

To add a new tab, click the + Add New Tab button:

To delete a tab, click the 🗑️ icon next to the desired tab and click the "Delete" button in the popup to confirm the action. Once confirmed, the action can't be undone:

To edit the Text content included in a tab, click on the text element in the editor or on the "Edit Text✏️" button in the top-right corner of the text element to open the text editor popup:

To add Image or Video content to a specific tab in addition to text, click either the "Image" or "Video" button. For an image, select the desired image from your image library. For a video, you can enter either a URL or an Embed code.

In both cases, a new "Layout" setting for the particular tab will become available below, where you can choose to show the image/video above the text or vice versa:

Two different "Layout" options for Tabs are provided, depending on how you want your tabs displayed:

There are also Tab Font, Active Tab and Inactive Tab styles that can be applied. These settings apply to all tabs included in the tabs element.

Under the Tab Font section, you can choose the Font Name in the dropdown menu, the Font Size and additional styles such as Bold, Italicize and Underline.

Active Tab means the tab that a visitor has clicked on and is actively viewing. In this section, you can set the active tab Text Color and Border Color.

Inactive Tab means all other tabs that aren't the active tab. In this section, you can set the inactive tab Text Color and Border Color.