Organize your pages with Tabs
Tabs are an effective way to organize content on your page, keeping it neat and easy to navigate. All content within Reactive’s tabs is fully readable by search engines, ensuring your site remains SEO-friendly.
How to Get Started with the Tabs Element
To use the Tabs Element, simply drag it onto your page. Once added, you’ll see new dropzones within the element where you can place other content elements.
To create new tabs, click the Add button under the Main dropdown menu on the right side of your page. To remove a tab, click the bin icon next to its name. To reorder tabs, simply click and drag them to the desired position.
Tab Layout
You can select the layout style of your tabs:
-
Fluid – tabs automatically adjust to fit the width of the container, which is useful for responsive designs or varying content lengths.
-
Static – tabs maintain a fixed width, ideal for designs where consistent tab size is important.
Tabs Panel Colors
Reactive allows you to customize the visual style of your tabs for both default and hover states:
Default Colors:
-
Text color
-
Background color
-
Border color
Hover Colors:
-
Text color
-
Background color
-
Border color
Tips for Using Tabs Effectively:
-
Use contrasting text and background colors to make active tabs stand out.
-
Reserve hover colors for subtle visual feedback that enhances usability.
-
Consider Fluid layout for mobile-friendly pages and Static layout for precise desktop designs.
Related Articles
Create expanding and collapsing sections with Accordions
The Accordion element allows you to organize your page content with expandable and collapsible sections, making it ideal for pages like FAQs or other structured content. How to Use the Accordion Element To use the Accordion Element, simply drag it ...
Theme Settings
This article will guide you through the most important section of your Reactive website, customizing your storefront to match your brand identity and aesthetic. By the end of this article you will be able to: Customize your Header. Customize your ...
How can I create a Product Meal?
Reactive Ordering gives you all the tools and features to create Product Meals for any type of product you wish to sell to your customers. To create a product meal navigate to Products > Meals from the left sidebar menu of your admin panel and click ...
How can I edit a product category?
Find it quickly: Products > Menus Select your catalog by clicking the pencil icon. Then edit any product category by clicking the pencil icon next to it. Each category can contain individual products or meal packages. Categories help customers browse ...
How can I create a Single Product?
Reactive Ordering gives you all the tools and features to create variable products for any type of product you wish to sell to your customers. To create a product, navigate to Products > Single Products from the left sidebar menu of your admin panel ...