Responsive Tab Plugin For WordPress – Everest Tab
Everest Tab – Responsive WordPress Premium Plugin To Display Tab with Various Components
- Unzip everest-tab.zip
- Upload all the files to the /wp-content/plugins/everest-tab
- Activate the plugin through the ‘Plugins’ menu in WordPress.
- For customizing the plugin’s settings, click on Everest Tab menu in WordPress left admin menu.
- To display the Everest Tab in the frontend, please use automatically generated shortcode from Everest Tab Usage metabox or you can even use shortcode generator from each edit pages or post pages.
Once the plugin is installed and activated you will find a menu named “Everest Tab” in the left menu bar of the admin menu.Once you click on that menu , you will go to the plugin’s tab listed page and you will also see the add new button to create new tab data, once you click on that button you will go to the Everest Tab page where you can create new tab with many configuration settings. Basically, there are six settings to create and assign tab content with 22 pre available beautifully designed layouts which are individually described below. Before that lets discuss about Plugin main settings page as “Configuration Settings” page which is one of the sub menu page of our plugin “Everest Tab” menu.
B) Configuration Settings
There are basically 3 main plugin configuration settings which are described below more briefly.
C) Social Feeds Settings
Our plugin also provide feature to add different components on specific tab content section. One of them includes Social Feeds. This tab is required to fill the api key, token key ,access key for neccessary social media so that it will help you to display specific feeds on specific tab content as per setup. This tab includes api setup for social feeds such as facebook,twitter and google map integration api key.
a. Facebook Feeds API Settings
b. Twitter Feeds API Settings
c. Google Map Settings
D) Cache Settings
The plugin has inbuilt caching method to prevent the frequent API calls due to which site won’t get slow. So in this tab you can set up the cache period on how often the latest social feeds should be fetched from API. Fill the time in hours in which social feeds should be updated. Default is 24 hours. The minimum cache period you can setup is 1 hour.
E) Shortcode Settings
The plugin has inbuilt shortcodes. Basically you will find shortcode in this plugin. One shortcode will be automatically generated after you create new tab post type data from “Everest Tab” > Add New. Here create tab system which after save will provide you shortcode with specific tab id . This shortcode , you can use anywhere to display tab form as per your setup.
Another shortcode is related with this tab. In order to activate shortcode you need to enable “Enable Shortcode Generator” button at first on this tab page. After enabling this button, you will find “Everest Tab Shortcode” button on specific edit page,post or post type top of wp editor. Using this shortcode generator you can create any html content and transform it into beautifully designed tab layouts using our plugin simply by assigned available templates.
F) All Everest Tab
This is the landing page for plugin. Here you can see the listing of the created tab post type data of Post type: “everest_tab”. Here you can see Add New button at top of Everest Tab listing table.For creating a new Everest Tab, you will simply need to click on the Add New sub-menu of the Everest Tab menu or click on the Add New button in the Everest Tab’s listing table. You can add, edit or delete Everest Tab from here.Once you click the button, you will be redirected to the new tab builder page where you can add the unlimited numbers of tab with different components for each tab and also set common settings.
Create multiple tabs and assign each tab with different 6 available components and display it using its specific tab shortcode anywhere you prefer. There are mainly One “Main Settings” for overall tab configuration setup and “Tab Settings” to create multiple tabs and assign components for specific tab content.
G) Add New Tab Settings
From this builder page you can add new multiple tab and assign components for each tab as its content from main settings and tab settings toggle section. Below are the detail description for Everest Tab settings.
H) Main Settings
This settings is overall common main settings for specific tab. Here you can find 5 different tab options as “General Settings”,”Display Settings”,”Animation Settings” ,”Custom Styling” and “Background Image Settings”. which are described below in brief:
- 1. General Settings: This tab options includes orientation type choose options as horizontal or vertical tab,choose tab position for horizontal and vertical orienation, choose icon position as left , right or top of the tab title. Also, tab label display format as show only title,show icon and title both or show only icon options Even our plugin provides options to choose trigger event for tab as on click event or on hover and set total width column as per your requirement.
- Orientation Type: Choose orientation type as horizontal or vertical type.
- Tabs Position: Choose tab position according to orientation type. Horizontal orientation includes top left, top right, top center,top compact, bottom left, bottom right, bottom center and bottom compact.
Whereas, vertical orientation includes vertical top left and vertical top right position.
- Show Icon Position: Display tab icon position as left , right , top or bottom position of tab title.
- Tab Labels Display Format: Set label display format as Show Tab title only, Show icon and title both or Show icon only format type.
- Show Tab On: Set tab event trigger effect as On Click or On hover effect.
- Width Column: Set total width column as per your requirement as 1 (15% Width),2 (32% Width),3 (50% Width),4 (66% Width),5 (83% Width) or 6 (100% Width) defined width.
- Enable Deeplinking: Enable and use deep-linking to create bookmarkable tabs and SEO-Friendly content.
Main Settings > General Settings Tab Screenshot:
- 2. Display Settings: Altogether our plugin includes 22 beautifully designed template layouts for tab builder. Here you can choose different template layouts for specific tab.
Main Settings > Display Settings Tab Screenshot:
- 3. Animation Settings: Enable animation and choose animation type for tab content.
- Enable Animation: Enable this option in order to enable animation for tab content.
- Tabs Animation: Set tab animation for tab content.
Main Settings > Animation Settings Tab Screenshot:
- 4. Custom Styling Settings: Set custom configuration for overall tab settings. You can change the color configuration for assigned template. There are many customization options such as set tab background color, background hover color, font color, font hover color, tab active background color , tab content color.
Main Settings > Custom Styling Settings Tab Screenshot:
- 5. Background Image Settings: Enable background image and upload background image for specific tab inside content section.
Note: This options is only available for 2 pre available template layout
i.e for template 14 and template 15.
Main Settings > Background Image Settings Tab Screenshot:
I) Tab Settings
This is the tab settings to create multiple tab and assign components for each tab.Below are options available on this settings described:
- ADD NEW TAB: CLick this button in order to add new tab.
- Active: Enable any one radio button among multiple tab in order to choose one tab as active by default.
- Tab Label : Fill tab title here.
- Enable Description : Check to enable this button in order to display descripion for specific tab.
- Short Description: Fill Short Description here.
- Choose Icon Type : Choose icon as Available Fonts (Font Awesome/Dashicons/Genericons) or Upload your own custom icon here.
- Available Icon : Font Awesome/Dashicons/Genericons
- Upload Own Icon
- Choose Components : This options includes altogether 6 advanced components to fill on tab content which are mentioned below:
- 1. WYSIWYG Editor
- 2. Custom Link Tab
- 3. Recent Posts
- 4. Social Feeds
- 5. Contact Form and Google Map
- 6. External Shortcode
J) Tab Content Components
Available Tab Components are described below briefly:
1. WYSIWYG Editor:
Fill any html content here. This editor even support any external shortcodes of external plugin too.
2. Custom Link Tab:
Set custom link and link target for this tab.
3. Recent Posts:
Display recent post or products as tab content.
Recent Posts Options:
Recent Products Options:
4. Social Feeds:
Display social feeds such as facebook, twitter and RSS feeds with its different configuration options.
Facebook Feed Display Options:
Twitter Feeds Display Options:
RSS Feeds Display Options:
5. Contact Form and Google Map:
Show contact form 7 using “Contact Form 7 ” Plugin or add any other custom form shortcode and show google map of specific latitude and longitude. You can even display only contact form or only google map by disabling one of them.
Secondly if you want to display both then you can enable both options and fill the required data as well as you can change the position order i.e In Default Layout, contact form is shown on left section and google map on right section on tab content section. If you enable “Change Order” options then the position of components will changed automatically.
Google Map Display Options:
6. External Shortcode:
Fill any external shortcode.
K) Shortcode Usage
In Everest Tab Usage metabox you can get the shortcode for page and theme which you can copy & paste the shortcode directly into any WordPress post or page or theme.
Also, you can get shortcode on main tab lists for specific tab on its specific row. For more details go to “Shortcode Generator” Tab.
In our plugin there are two type of shortcode available. One tab shortcode is generated using custom post type where you can create multiple tab and add its content with many advanced componenets
i.e Go to “Everest Tab” > Add New of admin left menu page and create multiple tab adding new page and set specific components
and then save all data. On successfull saving all data you will find its shortcode on right metabox Shortcode Usage section.
Whereas, another shortcode, you can generate simply by choosing all required options on your post editor
page.You can generate shortcode by enabling above checkbox with options to “Enable Shortcode Generator” which on enabling you will find
“Everest Tab Shortcode” Button on all edit post, page and post type page respectively.
Available Custom Shortcode Parameters:
- template : This parameter help you to change the template set for tab shortcode.Our plugin contains altogether 18 pre defined and beautifully designed tab templates.e.g., [etabs slug=”posts-slug-here” template=”template4″]
- orientation : Our plugin provides orientation type as horizontal and vertical for tab.
You can pass tab orientation using shortcode by using orientation=’horizontal’ or orientation=’vertical’ and so on as parameter on shortcode.e.g., [etabs slug=”posts-slug-here” template=”template4″ orientation=”vertical”]
- column : You can even change the column width of tab. Our plugin provides 1-6 column which width percentage is defined as 6 (100% Width),5 (83% Width),
4 (66% Width),3 (50% Width),2 (32% Width) and 1 (15% Width) respectively.e.g.,[etabs slug=”posts-slug-here” template=”template4″ orientation=”vertical” column=”5″]
L) Shortcode Settings
In Everest Tab, our plugin also provides separate “Shortcode Generator” html structure.
Another Advanced Everest Tab Shortcode Parameters & Shortcode Structure:
Create your own html structure and automatically changed its structure into tab using shortcode generated from “Everest Tab Shortcode”
To get this button work and enable on your edit post, page, you simply have to enable above settings as “Enable Shortcode Generator” first of all. Then you can view on any edit page or post where on top of
wp editor section, you will find an extra button which is generated by our plugin named “Everest Tab Shortcode”. Click on the button and you will see popup form with various configuration options as follows:
- template : Set template for this tab. Altogether 18 pre defined templates available. Default template 1 will be set.
- orientation : Our plugin provides orientation type as horizontal and vertical for tab.
Set tab orientation as horizontal vertical.
- column : Even change the column width of tab. Our plugin provides 1-6 column which width percentage is defined as 6 (100% Width),5 (83% Width),
4 (66% Width),3 (50% Width),2 (32% Width) and 1 (15% Width) respectively.
- Position : Set Position of tab title according to orientation based.
- Icon Position : Set Icon Position of tab title. Options available are left , right and top of content.
- Trigger Event : Set Trigger Event as On hover or On Click tab title to display tab content.
- Number of Tabs : Set Total number of tab you want to generate. Below is one of example of tab shortcode with total number of tabs set as 3 with unique id and title which will be generated automatically and similarly, you can modify the title name and content as per your requirement.
- Tab Content Animation : Set tab animation for tab content.
Below is one of Generated Shortcode example after setting options and inserting into editor:
- Below shortcode specify orientation as vertical with template 6 layout and total width column as 5.
- Similarly, we have set vertical orientation tab title position as vertical top right, set icon position as top of the title with trigger event as on click.
You can even change it on hover simply by replacing on_hover instead of on_click.
- Next, [everest_tab_title_wrap tab_id=’etab-bUYHQayuJQ’] is main wrapper for tab title with unique id auto generated.
- [everest_tab id=’tab1bUYHQayuJQ’ title=’Title1′ active=’1′][/everest_tab] is shortcode generated for each tab title where on title attribute you can replace required tab title and active = 1 simply specify the active tab is first tab.
Note: active attribute will only set on one tab title shortcode.
- Similarly, for tab content, its main wrapper is generated as [everest_tab_content_wrap].
- [everest_tab_content] is main content wrapper with unique trigger id similar to [everest_tab id=’tab1bUYHQayuJQ’ title=’Title1′ active=’1′][/everest_tab] so that on click tab title with id “tab1bUYHQayuJQ” its specific tab content will be displayed.
- Then tab content shortcode will follow as [everest_tab_content trigger=’tab1bUYHQayuJQ’ tab_id=’etab-bUYHQayuJQ’ animation=’fadeInUp’] Content1 [/everest_tab_content] here on “Content1” you can replace with your content for all tab.
- At Last, [/everest_tab_content_wrap] will close main content wrapper
- [/everest_tabs_wrap] will close whole shortcode wrapper.
[everest_tabs_wrap orientation='vertical' template='template16' column='5' position='vertical-top-right' icon_position='top' trigger_event='on_click']
[everest_tab id='tab1bUYHQayuJQ' title='Title1' active='1'][/everest_tab]
[everest_tab id='tab2bUYHQayuJQ' title='Title2'][/everest_tab]
[everest_tab id='tab3bUYHQayuJQ' title='Title3'][/everest_tab]
[everest_tab_content trigger='tab1bUYHQayuJQ' tab_id='etab-bUYHQayuJQ' animation='fadeInUp'] Content1 [/everest_tab_content]
[everest_tab_content trigger='tab2bUYHQayuJQ' tab_id='etab-bUYHQayuJQ' animation='fadeInUp'] Content2 [/everest_tab_content]
[everest_tab_content trigger='tab3bUYHQayuJQ' tab_id='etab-bUYHQayuJQ' animation='fadeInUp'] Content3 [/everest_tab_content]
M) Widget Integration
Our plugin also provides widget integration and assign specific tab post type from dropdown lists and display tab on your widget section as per your requirement.
Also, our plugin is fully compatible with Visual Composer and also provides new elements as Everest Tab with Everest Tab Widget which will help you to select created tab post type and display on your post content automatically.