.png%3Falt%3Dmedia%26token%3D654bff95-d4d7-45af-a213-cc5c22bb7193)
.png%3Falt%3Dmedia%26token%3D654bff95-d4d7-45af-a213-cc5c22bb7193)
Base Kit
The Base Kit is included with all Kit Power Ups. You can use the Base Kit from any Kit PowerUp to ensure that you have a seamless experience
IMPORTANT: The "Base Kit" needs to be included in all pages that will be using Kit Super Power Sections. If you do not include the Base Kit section, then it will not look or behave the way it should. You should also include the Base Kit as the first section of the page.
We have included a list of font pairings that you can use. The list represents the fonts to be used on the Headings and Body. All Kit sections will uses these fonts for the headings and body portions of the sections that are on the same page.
To use custom fonts or Google fonts you essentially need to provide an "embed script" that will reference the font families to be used. If you have purchased a font from a front provider, then be sure you have a "web license" for that font and that your font provider can give you an embed script to be used on a website.
- Choose "Custom" as the Font Pairings Setting
- Paste your font embed script into the Embed Script setting
- Specify the font family name (comma separated) in each of the settings for heading, Subheading, Body and Button
How to use non Google Custom Fonts (covered in the video above):
1) Get your Webfont kit from a font provider (or convert your desktop fonts using FontSquirrel
2) Upload your Webfont files (WOFF/WOFF2, etc) to a "dummy course, download lesson so you can grab a url to those files)
3) Add the snippet to Base Kit section using the url to those font files
4) Use the font's inside of Sections Kit as well as how to use the font inside of Thinkific sections
In this case, we will use the Theme Settings to "load" the font scripts. Then will be use the above method for Custom Fonts, but only having to specify the font family name in the Base Kit settings.
Many times a brand consists of more the 2 colors being used. So we have provided an easy way for you to specify up to 5 colors. You do not need to use all of these if you do not want to, but in subsequent Kit sections where you are specifying a color for an item on the page (ex: heading color), you can choose "Color 1" and it will use the color that the base kit has specified for "Color 1". Then this way if you ever need to change your color scheme, you can change it in one place. Also this helps by not having to remember and enter your color codes each time. Another side benefit of this approach, is that it allows you to alter the color scheme being used on a specific page without effecting the entire site.
- Add Base Kit section to a page and open up the Solid Colors settings group
- Enter your brand colors for Color 1 to Color 5 - These will be used in Kit sections
- Within another Kit section that you have added to the page, you will be able to select one of the names colors to use: ex Color 1
- Base Kit also provides a way for you to specify a brand gradient color as well. This gradient color can be used as background colors, text colors or highlighting words using Smart Style
Base Kit includes settings to control the style of your buttons. These settings will control the style of the buttons that are include with a Kit PowerUp only.
- When the "Use Thinkific Primary Button Color" is checked, then the color of the Kit buttons will be the same as the ones you have setup inside your Thinkific theme settings
- When it is not checked then you can specify the colors to be used for primary and secondary colors.
- Additionally you can control the amount of border radius used for the Kit buttons. Moving the slider to the left will result in square corners. Moving the slider to the right, will result in rounded corners.
- Inside of Kit sections that use Buttons, you can then specify the type of button to be used.
Last modified 1yr ago