Unlimitab
Table of Contents
- How to use (Start Here)
- General
- Navbar
- Content
- Individual Tab Settings
How to use
Get up in running with Unlimitab in Minutes!
Unlmitab is a fairly easy stack to set up on your page, even though there are a lot of customization options, actual setup is very simple.
Step 1
Drag the stack onto your page
Step 2
Add tabs using the ( + ) button at the bottom of the main Unlimitab Stack
You can change the tab text by double clicking on the "Tab text" input directly in RapidWeaver. You can also set custom colors for an individual tab by clicking on that tab, and going to the RapidWeaver settings panel.
By Default all tabs share the same colors & styles which are set by the main Unlimitab Stack.
Step 3
Add your content to each tab
Step 4
Customize your look.
Step 5
That's it!
Let's take a closer look at all of the settings in detail below.
General Settings
This is where you will find the main settings for the container surrounding all of the tabs. You'll find things like:
- Max-width
- Mobile Point
- Margin
- Padding
- Radius
- Background
- Shadow
Most of these settings are pretty straightforward and easy to setup. The only setting to pay close attention to is the mobile-point option. This mobile point will determine the the pixel-width at which all of the mobile settings will be applied.
Navbar
The navbar is the container that holds all of the tab pills, the navigation arrows, and the dropdown menu. You will find all of the settings for these areas of the stack here. We will go through each of the options below in detail so that you can understand what they mean.
Radius
This sets the corner roundness of the navigation-bar containing the tabs.
Navbar Background
Here you can set a background for the navigation-bar. There are 4 options to choose from:
- None
- Color Background
- 2 Color Gradient
- 3 Color Gradient
Font Type
Here you can set a separate font for the Navigation bar. There are 4 options to choose from:
Inherit
This will inherit from the nearest parent stack
Preset
Choose from a list of the top fonts which have been praised on the web.
Custom Font
This allows you to specify the name of a font which you have provided on your own. Keep in mind that you must have provided the font elsewhere on your stacks page.
Custom Google Font
Here you can provide the name of a font found on Google Web Fonts, and the font will automagiacally be loaded in for you. All you need to do is type in the name such as "Squada One".
Tabs
Here you will find specific settings for the tabs in the navigation bar.
Blur Inactive Tabs
This will use the latest web-technology to blur out the tabs that are inactive. Note that this may not work on older browsers such as IE 9 and below.
Tab Alignment
This will set the alignment of all the tabs inside of the navigation-bar. You can align the tabs to the:
- Left
- Right
- Center
Tab Spacing (Vertical & Horizontal)
Here you can set the space around the tab text.
Vertical refers to the amount of space above and below the tabs. Think of it as the top and bottom margins.
Horizontal refers to the amount of space in-between each tab.
Tab Border
Here you can choose whether or not tabs will have a small border above/below them. If you choose to set a tab border you can also choose:
- Tob/Bottom positioning
Choose whether the border should be placed above or below the tabs.
- Border Radius
The border is slightly rounded on the edges. You can set the roundness here.
- Border color inheritance
The border color inheritance refers to whether the border color should match the tab text or the tab icons.
Tab Text
Color (Active & Inactive)
Here you can set the color of the tab text. You can set both the color of the active tab and the inactive tab.
Text Size (Desktop & Mobile)
Here you can set the font-size of the tab text. You can specify different values for both desktop and mobile.
Tab Icons
Checkbox (Turn icons ON/OFF)
Check this box to turn tab icons on. This will make icons appear above/below/next-to each tab (your choice).
Color (Active & Inactive)
Here you can set the color of the tab icons. You can set both the color of the active tab icon and the inactive tab icons.
Size (Desktop & Mobile)
Here you can set the size of the tab icons for desktop & mobile.
Spacing (Desktop & Mobile)
Here you can set the amount of space between the tab text and the tab icons for desktop and mobile.
Icon Position (Top, Bottom, Left, Right)
Here you can choose the position of the tab icons in correlation to the text.
Navigation Arrows
On each side of the navigation-bar you will find navigation arrows that move through each tab when clicked. You will find the options for editing these arrows here.
Hide Arrows on Mobile
Unlimitab is touch-friendly meaning that the arrows on not necessary on mobile devices. Users are very fond of swiping through tabs on mobile nowadays, so we have provided an option to hide the arrows on mobile. Check this box if you want the arrows to be hidden on mobile devices.
Arrow Colors (Icon & Button)
Here you can set the color of the navigation arrow buttons. You can set the color of the arrow icons and the buttons surrounding the arrow icons.
Arrow Size (Icon & Button)
Here you can set the size of the navigation arrows. You can specify the size of the arrow icons and the size of the buttons themselves. Keep in mind that the buttons are perfectly quadrilateral meaning that the width/height are the same.
Navigation Dropdown
Unlimitab automatically creates a dropdown menu from your tabs. The navigation dropdown menu is locating in the top right corner of the navigation bar. You can customize the navigation bar here.
Max Width
This specifies the width of the navigation dropdown menu.
Radius
Here you can set the corner roundness of the navigation dropdown-menu.
Item Text
This sets the font=size of the dropdown-menu item text.
Item Padding (Vertical & Horizontal)
This sets the vertical and horizontal padding around the dropdown-menu items.
Item Color (Initial & Hover)
Here you can set the color of the dropdown-menu item text initially and on hover.
Item Background (Initial & Hover)
Here you can set the background color of the dropdown-menu items initially and on hover.
Content
Here you will find all of the options for the content section of the tabs.
Content swipeable
If you check this option. When the user swipes the content with their mouse/finder Unlimitab will move the the next tab in the stack. Think of it as a tab on a mobile-application.
Drag Threshold
If the content is set to swipeable, you can specify how far (in pixels) the user must drag their finger before the slider moves to the next tab. Think of it as the swipe strength required to swipe through tabs via the content section.
Keep in mind that this only applies to the content section. The tabs in the navbar are always swipeable.
Min-Height
Some content sections may be of completely different heights and it may look strange if the heights suddenly change. Here you can specify a minimum height for each content section.
Radius
This sets the corner roundness of the content section.
Padding
Here you can set the inner padding of the content sections.
Spacing (From nav & Between content sections)
Here you can set the amount of spacing around the content sections. You can set the spacing for:
- The space between the navigation-bar and the content sections.
- The space between each of the content sections (visible when swiping through tabs)
Font Type
Here you can set a separate font for the Content sections. There are 4 options to choose from:
Inherit
This will inherit from the nearest parent stack
Preset
Choose from a list of the top fonts which have been praised on the web.
Custom Font
This allows you to specify the name of a font which you have provided on your own. Keep in mind that you must have provided the font elsewhere on your stacks page.
Custom Google Font
Here you can provide the name of a font found on Google Web Fonts, and the font will automagiacally be loaded in for you. All you need to do is type in the name such as "Squada One".
Content Background
Here you can set a background for the content-sections. There are 4 options to choose from:
- None
- Color Background
- 2 Color Gradient
- 3 Color Gradient
Text Colors (Headers, Links, Text)
Here you can set the color of text that appears in side of the content sections. You can set the color for:
- Header tags
- Links
- Text
Border
Set the border around the content sections
Shadow
Set a box-shadow around each content section.
Individual Tab Colors
If you click on an individual tab, you will see that there are toggle-able options to set custom colors for that tab. Simply toggle the color option that you want to change, and set the color. Then when that tab is selected, the colors will change.
Lastly, when Icons are turned on, you must click on the individual tab to set the icon for that tab. You will find the option for setting the tab icon at the very top of the Unlimtab Tab Stack settings.
That is all
Thank you for taking the time to read this tutorial. Cheers!