JKIT- Fun Fact

JKIT-  Fun Fact. A box that include icon and number content. This time we will give you a tutorial using JKIT, as follows

The guide is separated into the sections below. Click on it to navigate to the designated section.

1. Activate JKIT Fun Fact (#)
2. Adding JKIT Fun Fact Menu to Page (#)
3. Content Setting (#)
4. Style Setting (#)

Activate JKIT Fun Fact

Before starting, please make sure the JKit button is already activated on Jeg Elementor Kit Dashboard ➞Elements

Adding JKIT Fun Fact To The Page

Content Setting

There are several options included in the Jkit Fun Fact content setting that you can adjust according to your need

You can adjust the style of the button as you like, JKit Nav Menu style settings are separated into several groups. Click on it to navigate to the designated group

1. Setting (#)
2.  Icon (#)
3. Content (#)

Setting

1. Text Alignment
   to select the font position
2. Justify Content
   Choose to play vertical or horizontal menus
3. Align Items
   choose the placement of the fonts
4. Title HTML Tag
   replace hatml tag in title
5. Enable Hover Border Button
   added a bottom hover border

Icon

1. Icon Type
   choose between none, icon, image
2. Choose Icon
   choose the icon as needed
3. Icon/Image Position
   choose icon position

Content

1. Number Prefix
   choose a prefix font
2. Number
   choose a limit point number
3. Number Suffix
   choose a suffix font
4. Title
   choose words for the title
5. Enable Super
   add additional titles

Style Setting

You can adjust the style of the button as you like, JKit Nav Menu style settings are separated into several groups. Click on it to navigate to the designated group

1. Icon (#)
2. Content (#)
3. Super (#)
4. Background (#)
5. CSS Box(#)

Icon (#)

1. Normal
   • Normal Color
     choose icon color
   • Normal Background Color
     choose a background color
   • Border Type
     select the border type
   • Normal Border Radius
     tidy up all the corners
   • Icon Size
     set the size of the icon
   • Icon Rotate
     set rotation
   • Margin
     to give distance
   • Padding
     give free space
   • Box Shadow
     give a shadow effect
2. Hover
   • Hover Color
     choose icon color when hover active
   • Hover Background Color
     choose a background color when hover active
   • Border Type
     select the border type when hover active
   • Hover Border Radius
     tidy up all the corners when hover active
   • Hover Animation
     tidy up all the corners when hover active
   • Icon Size
     set the size of the icon when hover active
   • Icon Rotate
     set rotation when hover active
   • Margin
     to give distance when hover active
   • Padding
     give free space when hover active
   • Box Shadow
     give a shadow effect when hover active

Content (#)

1. Number Color
   choose a color for the number
2. Number Typhography
   choose the type of font for the number
3. Spacing
   gives the distance between the number and the title icon
4. Right Spacing
   gives the distance between the number and the number suffix
5. Spacing
   provides a spacing for the title
6. Title Color
   color the title
7. Title Typhography
   choose the type of font for the title
8. Padding
   give free space

Super (#)

1. Color
   choose a color for the super
2. Typhography
   choose the type of font for super
3. Top
   gives vertical space between super and number suffix
4. Horizontal Space
   gives horizontal space between super and number suffix
5. Vertical Position
   choose the vertical position

Background (#)

1. Background Type
   choose a background color
2. Padding
   give free space
3. Box Shadow
   give a shadow effect
4. Border Type
   select the border type
5. Border Radius
   tidy up all the corners of the border
6. Hover Animation
   select the type of animation
7. Normal
   • Background Type
     choose a background color
8. Hover
   • Background Type
     choose a background color when hover active
   • Hover Background Overlay Direction
     set the styling to the direction of the background when the fun fact element is hovered

CSS BOX

You can additional CSS on this box