Tabs
After Turning on Blocks from Grigora's Kit Dashboard.
We can use Tabs Block in Site Editor/Blog/Page from Toggle Block Inserter.
Insert Tabs from listed Blocks.
Once Tabs is inserted, select the Tabs.
After selecting Tabs , Go to block settings, in block settings we see Geenral, Styles and Advanced of settings and we'll be exploring them one by one.
General
Initially Opened Tab : From created tabs we can select which to be opened initially.
Minimum Height : Minimum height of tabs can be set here using text input and pixel as it unit.
Maximum Width : Maximum Width of tabs can be set here using text input and pixel as it unit.
Show Tab Subtitles : Tab subtitles are visible after toggling on button and it can be Changed.
Styles
Container Gaps
Tabs Gap : Gaps between tabs is specified here using range slider.
- Minimum Value 0px
- Maximum Value 100px
- Default Value 0px
Tab Content Gap : Gaps between tabs Content is specified here using range slider.
- Minimum Value 0px
- Maximum Value 100px
- Default Value 0px
Title
Typography
Size : The font size can be modified by sliding the slider back and forth.
- Minimum Value 0px
- Maximum Value 100px
- Default Value 50px
Line Height : Line Height can be modified by sliding the slider back and forth.
- Minimum Value 10px
- Maximum Value 300px
- Default Value 10px
Letter Spacing : Letter Spacing add the space between letters by Dragging Slider Back and Forth.
- Minimum Value 0px
- Maximum Value 150px
- Default Value 0px
Word Spacing : Word Spacing add the space between words by Dragging Slider Back and Forth.
- Minimum Value 0px
- Maximum Value 150px
- Default Value p0x
Transform : Transform font to Uppercase (All Letters Capital), Lowercase (All letters small) and Capitalize (First letter of word is capital).
Style : Text can be styled in a variety of ways here.
Decoration : Text decoration applies decorations like Overline (adds line above text), Line Through (adds line through text), Underline (adds line below text), and Underline OverLine (Adds line Above and Below text).
Weight : Weight adds text weights ranging from 100 to 900.
Padding : Padding can be applied to Title, by clicking on unlink padding can be applied to specific sides , only numbers can be entered and has pixel as unit.
Margin : Margin can be applied to Title, by clicking on unlink margin can be applied to specific sides, only numbers can be entered and has pixel as unit.
Normal, Hover and Active color can be Changed of Text, Background and Border using color picker and color palatte.
(You can change the Title Border Width and Style from Advanced > Title Border.)
Content
Padding : Padding can be applied to Content, by clicking on unlink padding can be applied to specific sides , only numbers can be entered and has pixel as unit.
Margin : Margin can be applied to Content, by clicking on unlink margin can be applied to specific sides, only numbers can be entered and has pixel as unit.
Background color and Border Color of can be changed using color picker and color palatte.
(You can change the Content Border Width and Style from Advanced > Content Border.)
Advanced
Title Border
Border Width : Border width of title can be set here combined as well as individual.
Border Style : For title border styles 3 options are there i.e. Solid, Dashed and Dotted.
Radius : Under Radius we can change title radius. By clicking on Unlink sides we can change radius of any particular side.
- Minimum value is 0px.
- Maximum value is 100px.
- Default value is 0px.
Normal, Hover and active color of title border can be changed here using color palette and color picker.
Content Border
Border Width : Border width of Content can be set here combined as well as individual.
Border Style : For Content border styles 3 options are there i.e. Solid, Dashed and Dotted.
Radius : Under Radius we can change Content radius. By clicking on Unlink sides we can change radius of any particular side.
- Minimum value is 0px.
- Maximum value is 100px.
- Default value is 0px.
Color of Content border can be changed here using color palette and color picker.
On Scroll Animations
Animation : Animations can be set here from listed animations with Delay(using text box) and Transition Time(Using range slider)
- Minimum Value 0 sec
- Maximum Value 5 sec
- Default Value 1 sec