Tabs & Tours

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.

How to use the Tabs & Tours Block of The Plus Addons For Gutenberg

The Tabs and Tours block comes with a simple layout with customized styling options, you can create a pleasant-looking layout for your websites.

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 Blocks panel.

After placing the Block 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

You can set the 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.

Icon Type

Icon type is a selection of whether you want an icon or image or not.

Select Icon

You can select the icon for the inner icon option.

Select Image

You can select the image for the outer icon option.

Image Size

You can select the image size.

Show Outer Icon

Show the outer icon for tab.

Select Icon

You can select the icon for the outer icon option.

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 Carousel ID

Add a unique id for your carousel to connect it with our other block, anything carousel remote.

Credit : Gutenberg, WordPress
Credit : Gutenberg, WordPress

2. Style

The Style tab is used for customizing the appearance of all the Tabs Tours Block components. All these styling options include customizing 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 Equal Width

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

Title On/ Off

Display tab titles or not.

NAV Full Width

Make width to it’s maximum for tab titles.

Width Size

You can set the 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.

Icon Width

Set icon width from here.

Color

A color picker to assign suitable color to the icon.

Hover/Active Color

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

Background

Apply suitable background like color/ gradient 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.

Box Shadow

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

Spacing

Manage spacing between title & icon here.

Full Width Icon

Make icon width to it’s maximum.

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.

Text Color

A color picker to assign suitable text 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 the tab titles.

Navigation Opacity (Active)

Set transparency for the active tab titles.

Navigation Scale/ Zoom

Set scale zoom animation effect for the tab titles.

Navigation Scale/ Zoom (Active)

Set scale zoom animation effect for the active tab titles.

3. Advanced

Advanced Tab Options are common across all the Blocks. 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?
Please submit the reason for your vote so that we can improve the article.