TABLE OF CONTENTS
Page Speed Impact
Setup Instructions
Module Options
Page Speed Impact
Medium - The advanced tabs module itself requires some additional scripts and styling. Depending on the content used this may have a moderate to significant impact on your page speed.
Exceptions - Additional impact if images, videos and other content are added to the advanced tabs module.
Take a look at our performance guide to get your website running its best!
Setup Instructions
How to Set Up the POWER Advanced Tabs Module
Content → PWR Sec Adv. Tabs
The POWER advanced tabs module is designed to allow you a greater level of flexibility in designing your more stunning, and impactful pages. This allows you to create eye-catching tabs with custom designs and nested content within these tabs to display multiple pieces of information in the same place on your page, without overwhelming your visitors with walls of content.
Module Options
These settings are available for the POWER sec adv. Tabs module.
Building the Advanced Tabs Module
Intro To Title
This will set the text to display just before your main title.
Title
This will set the main title of your module.
Title - Header Type
This will set the HTML markup of your header (h1, h2, h3 etc) and by default it will style your header based on your theme settings. You can set the header here with a different styling through your module's style settings if you wish.
Tabs → Tab Title
The title to display on your tab
Tabs → Description
A brief description of the information you will place within your tab which will show on the main tab button.
Tabs → Has icon
Check this to add an icon to your tab.
Tabs → Icon Variant.
Choice between FontAwesome Free, FontAwesome Pro or a custom image.
Tabs → FontAwesome Icon (Pro)
If you're using fontawesome pro you can place your pro icon's class in here.
Tabs → Icon/Image Size
Set the size of your icon/image. Icons and images should be uploaded with a square aspect ratio as the sizing will size based on a square aspect ratio.
Layout → Tab Variant
Choice between Full height, Large (fixed size), regular (fixed size), Small (fixed size), Extra small (fixed size) or a dynamic height based on the content within your hero module.
Layout → Numbered Tabs
Add numbers to your tabs to clearly display the order of your content.
Layout → Tab Content Alignment
Option to align the content within your tabs left, right or center.
Layout → Icon Position
Option to align your icons within your tabs left, right or center.
Layout → Tab Width
Option between full-width or auto.
- Full Width: The tab container will take the full width of the container it is placed within.
- Auto: The tab container will take the width of the content that is placed within it.
Layout → Tab Variant → Tab Item Width Mode
Option to fit content or have all tabs at equal width.
- Fit Content: The tab items will be sized according to the content.
- Equal Width: The tab items will be sized equally.
Layout → Tab Variant → Tab Item Width (Max)
Set a maximum width for each of your tabs.
Layout → Inner Padding
Select an inner padding for each side of your tabs. This will add spacing between the edge of the tab and your content. If you wish to set the same padding for all sides check "set tab inner padding of all sides"
Layout → Intro Width
Set the width for the intro to title, title and description. Default will use your content width and narrow will be a smaller width to your content.
Layout → Centered
Center your content horizontally within the module.
Layout → Boxed Section
This will set your module to have a boxed section layout, offering some additional options in the positioning of your module. For more information on boxed sections see our boxed sections article.
Layout → Padding/Margin Top & Bottom
Add additional margins to the top and bottom of your modules. Margins Left & Right will be depending on your boxed sections and previously set layout options.
Styling your hero module
Style → Icon Style
Set your icons to be displayed as a circled display or a square display.
Style → Color Scheme
Choose between your light and dark color scheme defined in your theme settings.
Style → Intro Title Style
Choose between default (inherited from your theme settings), a specific color, or create your own gradient.
Style → Intro Title Style - Background
Set a background color or gradient for the background of your intro to title text.
Style → Title Style
Choose between default (inherited from your theme settings), a specific color, or create your own gradient.
Style → Title Size
Set the style from your theme settings that your title will inherit. This will not affect the HTML markup of your title so will not affect any SEO on your title. This will just cause the title to inherit the styles for this title set out within your theme settings.
Style → Overwrite Border Radius
Set a curved display for the corners of your tabs. The higher a px number in here the more rounded the corners of your tabs will be.
Style → Scroll Shadow
If the content of your tabs is larger than the tab size, set a style to display to the visitor that they can scroll to display further content. This is generally more useful on smaller screen sizes, such as mobile.
Style → Section Shadow
Add a shadow box to your hero module to create a 3d effect.
Style → Background
Overwrite the default background with a custom colour, image or video for your hero module.
Style → Shape Divider
Set a specific shape to be used between the divide of this module and your next one.
Animation
Control the animations of your module, for more information see the website animation article.
Anchor Link ID/Custom Class
Set a specific anchor link for this module or a custom class to target this module within your child.css stylessheet.