Tabs – a pretty common feature on many web sites, especially online stores. Owners of ecommerce stores typically use tab for item descriptions, where they post reviews, description, specifications, and more.
However, tabs have found application in many other types of sites, not just e-Commerce sites. Even the official website WordPress.org uses tabs on the pages describing the plugins.
However, tabs should not be confused with accordions that expand to disclose information.
In fact, web owners use tabs to separate information that otherwise would take a whole page or post. This means that the tabs significantly facilitate the absorption of information without forcing the user to click on the scroll wheel a million times.
In other words, the tabs increases the usability of your web site. So, if you want users to stay on your website longer, not to tire them with long pages. Consider use of tabs.
In today’s post we will show how to add tabs to posts and pages. By the end of this post you will have all the instructions needed to use the tabs on the WordPress website.
Use the page Builder
If you have already installed the page Builder, you’re in luck – most likely, the module tabs you have on hand. Most major designers offer pages tab as part of its core set of elements.
Here is a brief overview of two of our favorites:
Popular designer pages Elementor includes the tabs as part of the free version of the plugin. All you need to do is insert element tab to your page, then edit title, content, style and other options.
Are using a premium theme that includes WPBakery Page Builder? Then the tab is built-in and easy to use.
Module tabs WPBakery is a little different from the previous example, as tabs when they are added are initially empty. You need to insert additional page elements (text area, image, icons, and other) in tabs to add your content. But it gives a lot of freedom to create tabs as you want (in addition to built-in styling options).
Tabs Plugin WordPress
If you are not using page Builder, you don’t need to use it only for tabs. There are plenty of great alternatives. For example, a free WordPress plugin known asfrom the WP Shop Mart. Tabs is a quality WordPress plugin to create unlimited number of beautiful tabs.
Since it is available in the official repository of WordPress plugins, you can install the plugin directly from your WordPress admin panel.
There is a premium version if you want to get additional functions. You can upgrade to the premium version at any time.
Install the plugin Tabs
In your WordPress admin panel navigate to “Plugins”–> “Add new” and enter “tabs wpshopmart” in the search box for keywords. Once you find the right plugin, click “Install now”.
After this click “Activate”. Your WordPress plugin to customize the tabs ready to go. Now let’s create a few tabs and see what this plugin offers.
Setting adaptive tabs
Activating the plugin will add a new item in your admin menu of WordPress. To create a new tab, go to Adaptive tab –> Add new tab:
The plugin will direct you to adaptive Builder tab which contains all the functions needed to create beautiful tabs. Below are the various options offered by the plugin:
The screen is quite long, isn’t it? You can find most of the features on the right sidebar. Also note that some tabs have their settings. You can use WYSIWYG editors on tabs, so you will have many opportunities when working with tabs.
For example, let’s create multiple tabs and display them on the page or in a publication.
Add a title
Start with what you give your tabs a descriptive title, as shown above. So you can easily identify your tabs to your WordPress admin panel later if you need something to edit. For the purposes of this lesson, the tab is named “Test home”tab.
Select template design tab
As you can see in the screenshot above, your next step involves selecting a design template for the respective tabs. Free version of the plugin only offers a single design template (but you can always upgrade to the premium version for 19+ dollars).
Then add as many tabs as you want:
The numbered list below describes in detail what can be done in the section “Add tab“as shown in the figure above. The items in the list correspond to each region.
- Header tab – add a tab title in this field, for example “Description”, “specifications”, “Details” and more.
- Description tab – this field allows you to add the contents of your tabs. The best part is that you can use the WYSIWYG editor (shown in paragraph 3 below) to add tabs in rich content, including images, music and videos.
- The use of WYSIWYG – if you want to use the familiar W hat- Y ou- S ee- I s- W hat- Y ou- G ET – editor to create content tabs, do not hesitate to click on this button to run it.
- Badge tab – the plugin offers access to a lot of Font Awesome icons that will make your tabs and make them professional.
- To display next to the icon – if you want to display the tab title next to the icon, you’ll enjoy this feature. In addition, you can disable the icon without touching the tab title.
- Remove – click this button to remove a specific tab.
- Add new tab – click on this button to add more tabs.
- Delete all – tired of all tabs? Click Delete allto reset all the tabs.
- You can drag tabs to change their order or arrange them at will.
- Don’t forget to click “Save draft” one or two times when creating the tabs, so as not to lose changes in case you accidentally leave the developer tab.
And finally, if you need support, there is a big blue button “Get support” section just below “Add tabs” (and on most pages of the plugin), which leads to the official support forum of the plugin on WordPress.org.
Shortcodes plugin Tabs
After creating the tabs, you will find shortcode “Tabs” that you want to use to add and display tabs on any page or publish. For instance, the short code – [TABS_R id = 443]. To display the tabs on the page, you just need to copy that shortcode to a specific page.
You want to add your tabs in the widgets area of the site? Then you’ll love the widget support that comes with the plugin Tabs WordPress.
By clicking on the link Click Heretakes you to the widgets screen in WordPress where you can add your tabs everywhere, where in your theme the widgets.
While the Tabs plugin WordPress comes with a plethora of settings tabs (just look at that right sidebar – it’s full of styling options), You can add your own CSS styles as shown below.
You can set your custom settings as default settings for all new tabs by just clicking the button to Update the default settings.
The right side panel
The right side panel contains all the options for styling the tabs for your desires. Basic options include:
- The background color of the tab.
- The font color of the tab.
- A set of fonts and style.
- Options show title and icon for the tab.
- The alignment of the position of the tab icon: before or after the tab title
- The border tab.
- Animation with multiple tabs.
- And much more.
Add your tabs to the page or post WordPress
After you add content and style the tabs scroll up and click the “Publish”:
Tabs ready and you need to add them to the page or post of WordPress. Copy the shortcode tab that we saw earlier.
Launch the editor and insert the shortcode in your post / page. After that, click “Publish”.
After about 5 minutes the settings tab in the theme “Twenty seventeen” we have received the following result:
Please note that the colors and other options in this example was not set. The truth is just, and worthy looks?
Add tabs to your pages and posts in WordPress is to work for fourth graders. Are sure that you will not have any problems, especially if you use the Tabs plugin from the WP Shop Mart.