Tabs & Tours

Tabs are used when your content should be highly structured and organised. Using tabs can lead to strong UX and can be efficient in some ways but it high;y depends on the content you are having in those ones.

People do not read the website, they scan it and in scanning process UX of tab is beneficial because user can easily reach to the content he wants to !

Pro tip
Tabs are visually pleasing, in-fact someone with OCD will also be having a great organised experience of your web page.

Configuration for Tabs & Tours

Tabs are easy to put in action. They displays the content which is relatively similar in concept, so all you need to find is relative content. Plan some good titles for tabs and content accordingly and you are ready to roll.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Tabs & Tours into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Tabs & Tours after “/” sign, eg.“/Tabs & Tours”, in the content area. Gutenberg also provides drag & drop after opening the list of widgets panel.

After placing the widget you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content

Tabs

A repeater to add the multiple tabs content.

Title

Tab title.

Content Type

We have provided two option for content source for tabs. You can have custom written content or else you can use reusable blocks provided by Gutenberg as a content.

Content

Write you own custom content which is displayed for tab here.

Block Template

Choose a reusable block template to put as a content from here.

Back end Visibility

Want a preview of selected block template in back-end or not.

Show Inner Icon

Show the inner icon for tab.

Show Outer Icon

Show the outer icon for tab.

Unique ID

An input to provide a unique ID to the particular tab for external call.

Layout

Layout

Select horizontal or vertical layout option from here.

Navigation Position

Select the navigation position according to the selected layout from here.

Nav Alignment

Set the navigation tabs into left, right or centre direction from here.

Swiper Effect

Swiper is a html draggable effect, enabling this would allow user to drag the extra tab title into main view port by dragging the tabs strip.

Extra Options

Default Active Tab

Set the default active tab number from here.

Tabs/ Tours Type

select the trigger of switching the tabs from here.

Connection Carousal ID

Add Unique ID for your carousel to connect it with our another widget Anything Carousel Remote.

2. Style

The Style tab is used for customising the appearance of all the Tabs Tours widget components. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Tab Title Bar

Title Color

A color picker to assign suitable color to the tab title.

Typography

Assign size, weight, spacing and much more to fonts.

Nav Full Width

Make width to it’s maximum for tab titles.

Title On/ Off

Display tab titles or not.

Nav Equal Width

Want to set all tab title’s width same or not.

Width Size

Set width here.

Tab Title Bar Background

Margin

Put-in some outer space to an element.

Padding

Put-in some inner space to an element.

Between Space

Set space between two tab titles from here.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Main Icon

Size

Set icon size from here.

Color

A color picker to assign suitable color to the icon.

Active Color

A color picker to assign suitable color to the icon of active tab.

Spacing

Manage spacing between title & icon here.

Full Width Icon

Make icon width to it’s maximum.

Inner & Outer Icon

Size

Set icon size from here.

Color

A color picker to assign suitable color to the icon.

Active Color

A color picker to assign suitable color to the icon of active tab.

Spacing

Manage spacing between title & icon here.

Hide on Mobile

Hide icons on mobile display width.

Navigation Area Background

Margin

Put-in some outer space to an element.

Padding

Put-in some inner space to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Content

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the content.

Content Background

Margin

Put-in some outer space to an element.

Padding

Put-in some inner space to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Responsive Options

Tab Navigation Responsive

Set the behaviour of tabs in tablet and mobile screens from here.

Navigation Between Space (One by One)

Set spacing between tabs when one by one layout is selected.

Border (Force Accordion)

Draw a border around the element and give width and color to it.

Border Radius (Force Accordion)

Set the radius curve of the element’s corner.

Background (Force Accordion)

Apply suitable background like color/ gradient to an element.

Box Shadow (Force Accordion)

Give Box/Text/Drop shadow effect and color to an element.

Extra Options

Underline

Draw an underline below the title text.

Underline Color

A color picker to assign suitable color to the underline.

Top Margin

Set spacing from top for underline.

Width

Set custom width for underline.

Height

Set custom height for underline.

Navigation Opacity

Set transparency for tab titles.

Navigation Scale/ Zoom

Set zoom for tab titles.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Note : ⭐ Symbol as a suffix displays a Pro feature field.
Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?