This feature is available only for Premium members
NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information
Description and Code
The Tabs shortcode lets you set up boxes with different tabbed areas for your content. You can have either horizontal or vertical tabs. Here's an example of the shortcode in code view:
[tabs_component layout="horizontal" justified="yes" backgroundcolor="" inactivecolor="" class="" id=""]
[tab_component title="Tab 1"]Tab Content 1[/tab_component]
[tab_component title="Tab 2"]Tab Content 2[/tab_component]
[/tabs_component]
Parameters
- layout
- set the layout of the tabs
- Possible values - horizontal or vertical
- justified
- defines if the tabs are shown with a full width or not for horizontal layout
- Possible values - yes or no
- backgroundcolor
- defines the tabs active background color
- Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
- inactivecolor
- defines the tabs inactive background color
- Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
- class
- custom class for CSS of component
- Possible values - string - like custom-element-class
- id
- custom ID for CSS of component
- Possible values - string - like custom-element-id
Examples
Horizontal
Vivamus volutpat est eu venenatis placerat. In tempus maximus neque, ac egestas velit varius sed. Nam vestibulum facilisis ligula. Suspendisse ligula nisl, euismod ut venenatis sed, mattis nec nulla. Duis molestie maximus orci. Quisque in orci sem. Nulla id faucibus velit, ac ultrices leo. Ut lacinia interdum magna vel vulputate. Donec at tortor id neque ullamcorper pellentesque.
Pellentesque vel neque vel mauris accumsan venenatis. Cras neque quam, sodales egestas congue id, vulputate in nunc. In ac sollicitudin ligula. Pellentesque maximus placerat aliquet. Phasellus tempus, arcu id pulvinar finibus, eros ipsum molestie nunc, ut interdum nibh tortor eu sapien. Maecenas consectetur id purus et dignissim. Proin eget dapibus leo. Aliquam nec justo malesuada, tincidunt lorem ac, placerat elit.
In hac habitasse platea dictumst. Pellentesque ut luctus nunc. Maecenas ac enim dolor. Morbi nec turpis ac ipsum dictum viverra a eu eros. Etiam convallis cursus turpis. Nunc pretium lectus ut nibh laoreet feugiat. Cras nisl augue, semper non aliquam et, rutrum eget quam. Pellentesque ut elementum risus, ut volutpat odio. Ut elementum ipsum eget tristique pretium.
Horizontal - justified
Vivamus volutpat est eu venenatis placerat. In tempus maximus neque, ac egestas velit varius sed. Nam vestibulum facilisis ligula. Suspendisse ligula nisl, euismod ut venenatis sed, mattis nec nulla. Duis molestie maximus orci. Quisque in orci sem. Nulla id faucibus velit, ac ultrices leo. Ut lacinia interdum magna vel vulputate. Donec at tortor id neque ullamcorper pellentesque.
Pellentesque vel neque vel mauris accumsan venenatis. Cras neque quam, sodales egestas congue id, vulputate in nunc. In ac sollicitudin ligula. Pellentesque maximus placerat aliquet. Phasellus tempus, arcu id pulvinar finibus, eros ipsum molestie nunc, ut interdum nibh tortor eu sapien. Maecenas consectetur id purus et dignissim. Proin eget dapibus leo. Aliquam nec justo malesuada, tincidunt lorem ac, placerat elit.
In hac habitasse platea dictumst. Pellentesque ut luctus nunc. Maecenas ac enim dolor. Morbi nec turpis ac ipsum dictum viverra a eu eros. Etiam convallis cursus turpis. Nunc pretium lectus ut nibh laoreet feugiat. Cras nisl augue, semper non aliquam et, rutrum eget quam. Pellentesque ut elementum risus, ut volutpat odio. Ut elementum ipsum eget tristique pretium.
Vertical
Vivamus volutpat est eu venenatis placerat. In tempus maximus neque, ac egestas velit varius sed. Nam vestibulum facilisis ligula. Suspendisse ligula nisl, euismod ut venenatis sed, mattis nec nulla. Duis molestie maximus orci. Quisque in orci sem. Nulla id faucibus velit, ac ultrices leo. Ut lacinia interdum magna vel vulputate. Donec at tortor id neque ullamcorper pellentesque.
Pellentesque vel neque vel mauris accumsan venenatis. Cras neque quam, sodales egestas congue id, vulputate in nunc. In ac sollicitudin ligula. Pellentesque maximus placerat aliquet. Phasellus tempus, arcu id pulvinar finibus, eros ipsum molestie nunc, ut interdum nibh tortor eu sapien. Maecenas consectetur id purus et dignissim. Proin eget dapibus leo. Aliquam nec justo malesuada, tincidunt lorem ac, placerat elit.
In hac habitasse platea dictumst. Pellentesque ut luctus nunc. Maecenas ac enim dolor. Morbi nec turpis ac ipsum dictum viverra a eu eros. Etiam convallis cursus turpis. Nunc pretium lectus ut nibh laoreet feugiat. Cras nisl augue, semper non aliquam et, rutrum eget quam. Pellentesque ut elementum risus, ut volutpat odio. Ut elementum ipsum eget tristique pretium.
Custom colors
Vivamus volutpat est eu venenatis placerat. In tempus maximus neque, ac egestas velit varius sed. Nam vestibulum facilisis ligula. Suspendisse ligula nisl, euismod ut venenatis sed, mattis nec nulla. Duis molestie maximus orci. Quisque in orci sem. Nulla id faucibus velit, ac ultrices leo. Ut lacinia interdum magna vel vulputate. Donec at tortor id neque ullamcorper pellentesque.
Pellentesque vel neque vel mauris accumsan venenatis. Cras neque quam, sodales egestas congue id, vulputate in nunc. In ac sollicitudin ligula. Pellentesque maximus placerat aliquet. Phasellus tempus, arcu id pulvinar finibus, eros ipsum molestie nunc, ut interdum nibh tortor eu sapien. Maecenas consectetur id purus et dignissim. Proin eget dapibus leo. Aliquam nec justo malesuada, tincidunt lorem ac, placerat elit.
In hac habitasse platea dictumst. Pellentesque ut luctus nunc. Maecenas ac enim dolor. Morbi nec turpis ac ipsum dictum viverra a eu eros. Etiam convallis cursus turpis. Nunc pretium lectus ut nibh laoreet feugiat. Cras nisl augue, semper non aliquam et, rutrum eget quam. Pellentesque ut elementum risus, ut volutpat odio. Ut elementum ipsum eget tristique pretium.