> This is part 1 of 2 of the full documentation (pages 1–100 of 120). > The content is paginated: fetch every part to see all of it. > Next part: https://docs-kit.superpowerups.com/llms-full.txt/1 > Page index: https://docs-kit.superpowerups.com/llms.txt # 🚀 Getting Started With Kit ### Why You Should Use Kit Kit is unlike any other PowerUp we have created - although our goal is the same (increase your sales, create happy members, make you a super hero) - Kit's main emphasis is to give you more options to help you create an incredible looking and performing Thinkific Site. We will accomplish this by releasing hyper focused Kit Power Ups as individual components that you can install. As a course creator, your needs will change over time and your focus one day may be on getting leads, and the next month your attention will be to make sure your members are over the moon happy. So instead of trying to master all of your super powers at once, you can focus on a specific task and feel like a super hero. #### Key Kit Concepts * A **Kit PowerUp is essentially a Thinkific "App"** that adds new Site Builder sections to your list of available sections to use on any page * Inside of each Kit PowerUp, **we will include multiple super power sections** that go with the theme of the Kit. *For example, the Promo Prep Kit is all about showcasing deals and steals on your Thinkific site (especially for promotions like Black Friday, etc)* * **All Kit's are meant to work together** - instead of having to master "many different ways" - or be "stuck in one theme" - you will be able to have an endless supply of super power sections all "talking the same language" * We may sell individual Kits, but as always our **PowerUp Pass members will have free access to them all.** PowerUp Pass members will also get early access to new Kit PowerUps before we ever sell them individually. * **Once you install a Kit PowerUp - it is yours forever -** even if you are no longer a PowerUp member. In fact, you will still receive updates to the Kit as long as it stays installed into your site. ### Using Kit Sections With Site Builder Kit Super Power sections can be added to any page using Site Builder. Depending on which KIt's you have installed into your site, you will have different sections available to you. #### Step 1: Make sure you have a Kit PowerUp installed Check your app page inside of your Site Admin *ex: * and make sure you have at least one **"Kit: ... " PowerUp installed**. If it is not listed there, head back to the [member dashboard](https://www.superpowerups.com/enrollments) and install it. #### Step 2: Add Base Kit to your page Open up the page inside of Site Builder, that you would like to add a Kit section to and **first add the "Base Kit Section".** This provides your [customized styles and colors](/kit-usage-guides/smart-settings/smart-style#how-to-use-smart-style), but also includes the needed components to make the rest of the Kit sections look and perform properly [Be sure to read our guide on how Base kit works.](/kit-powerups/kit-common-sections/base-kit) {% hint style="warning" %} **IMPORTANT:** one Base Kit section must exist on each page that contains other Kit Super Power sections. You can [copy a Base kit section](#copying-base-kit-and-super-power-sections) from another page if you have one already created, however the settings inside of the Base Kit will only apply to that page. {% endhint %} #### Step 3: Add a Super Power Section from a Kit PowerUp to the page The Kit PowerUp comes with many different types of super powers sections. You can easily search for all sections by adding a section and **search for "Kit: ..."** (replace "..." with the Kit PowerUp name *ex: Kit: Promo*). You can search for a specific section to use by **searching for it's Kit Section Id *****Number ex: Kit: Pricing (01)*** #### Step 4: Update the Section Settings After you have added your Kit Super Power section to your page, be sure to update the default settings to control the behavior, text, media, links, etc and configure it to the way you want it to look. Generally these sections behave just like any other Thinkific Section, but some do have some special super powers like [Smart Style](/kit-usage-guides/smart-settings/smart-style), [Button Options](/kit-powerups/kit-common-sections/funnel-kit-opt-in), [Background Video](/kit-usage-guides/media/image-optimization) and more. Each section will contain its own settings. There will be consistency across all of the Kit collection by grouping the settings into common groups (ex; Headings, etc) ***Be sure to check the guide on the section you decided to use for any specific instructions.*** #### Step ***5***: Add more Kit Sections Keep adding other sections as you need to, if you want to add more Kit Super Power sections, then [head to the member area ](https://www.superpowerups.com/enrollments)and install new Kit Power Ups. ### Copying Base Kit & Super Power Sections As mentioned, the Base Kit section provides a way for you to establish some standard use of your branding colors and styles. It works differently than the standard Thinkific Theme settings. The Base Kit is used by all Kit Super Power sections and therefore it needs to be on each page that is using a Kit section. You can always share these settings across pages by[ copying your Base Kit Section](https://support.thinkific.com/hc/en-us/articles/360030361854) from one page to another. But, if you make any changes and want them applied to all pages, you have to re-copy the section across all pages. ### Using Kit Sections From Different Kit Power Ups The intention of Kit is to deliver Kit Power Ups that are hyper focused on giving you new super powers for a very specific type of section, page or goal. Over time there will be many Kit PowerUps created with each including its own set of super power sections. You can use any combination of Kit sections from any Kit Power Up as long as the Base Kit section is included on the page. *For example; maybe you want to use the Promo Prep Kit but want to include some social proof sections from the Social Proof Kit. No problem - just make sure you have each Kit PowerUp installed and then search for the Kit sections that you want to use.* # Kit Common Sections These are common sections across all Kit PowerUps When you install any Kit PowerUp, it will include these common sections that will be packaged up with each Kit PowerUp * [**Base Kit:**](/kit-powerups/kit-common-sections/base-kit) This is the main section that contains settings for your branding, styles and basic settings that other Kit sections need. You must include this as the first section of the page. [Read more about it here.](/kit-powerups/kit-common-sections/base-kit) * [**Funnel Kit Opt In**](/kit-powerups/kit-common-sections/funnel-kit-opt-in) - This section works with [Kit Buttons](/kit-powerups/kit-common-sections/base-kit#buttons) that are configured to use this super power. When the button is clicked it will load a popup box that will contain a lead capture form (either Thinkific's or an embedded one from your CRM provider. [Read more about it here.](/kit-powerups/kit-common-sections/funnel-kit-opt-in) # 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 {% hint style="warning" %} **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. {% endhint %} ### Font Settings ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FB0gi9uSLwiK7zQzhx6yv%2FScreen%20Shot%202021-10-21%20at%206.54.10%20PM.png?alt=media\&token=8baa445a-6e9a-4622-925d-4fa1c37fb322) #### Font Pairings 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. #### Using Custom Fonts 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 {% embed url="" %} **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 #### **Using Thinkific's Theme Fonts:** 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. {% embed url="" %} ### Named Colors 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. #### How to use named colors * [ ] 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 ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FZp0OOwMaSxWMvtRxKvPt%2FScreen%20Shot%202021-10-21%20at%207.05.33%20PM.png?alt=media\&token=26c9032d-9bbf-471d-8dc5-744e4afaa8f2) * [ ] 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 ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FkQcreWqVM8AWVMkYfXpI%2FScreen%20Shot%202021-10-21%20at%207.06.35%20PM.png?alt=media\&token=939185b3-fae2-45f3-a2f5-2fb8f8d86a8f) * [ ] 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 ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FibOsjyx4kY2T9zsRkan5%2FScreen%20Shot%202021-10-21%20at%207.09.37%20PM.png?alt=media\&token=ea53f212-7d7b-4d9d-9ed0-c706719d7059) ### Buttons 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. ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FYEYdFEYsMRUaFmw7orIC%2FScreen%20Shot%202021-10-21%20at%207.11.00%20PM.png?alt=media\&token=d95d33b4-a098-4957-a02b-2325f4910f9a) * [ ] 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. ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Fb1TQje0LhOj8FUbi6jHW%2FScreen%20Shot%202021-10-21%20at%207.15.02%20PM.png?alt=media\&token=1ec0bc27-8ca9-439f-96cb-08cafc9fb083) # Funnel Kit Opt In A universal lead capture super power that can be used with any Kit button. Works with Thinkific and 3rd party lead capture forms that provides embed code scripts. {% hint style="info" %} **EXPERIENCE IT:**[ **Head over to the demo page**](https://powerupkit.thinkific.com/pages/funnel-kit-opt-in-demo) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Promo Kit Sections to the page * [ ] Make sure you have the a **Kit PowerUp** installed into your site (ex: Promo Prep Kit) * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Funnel Kit"** and add it to your page * [ ] Add another Kit section that includes a button #### 2) Configure a Kit section with a button to use the Funnel Kit Opt In section * [ ] Open up the **Button settings** inside the section you just added and make sure the setting is configured for *Funnel Kit Opt-in* ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FouCoPpn3fm4wYNMmq1Y2%2FScreen%20Shot%202021-10-23%20at%203.11.07%20PM.png?alt=media\&token=df333534-d55b-451e-b242-8a9d4cc7cd05) #### 3) Configure the Funnel Kit Opt In settings * [ ] Open up the Funnel Kit Opt In section settings * [ ] Choose which type of Opt in to use. You can select Thinkific Lead Capture or use your own by providing the embed code from your CRM for the form you want to use. *if you are using your own CRM, then please consult their documentation for how to obtain the embed code. Once you have obtained it, paste it into the settings. If you are using Thinkific lead capture, then please configure the remaining settings.* ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FA3bG8FWF8PbQfrSRlEuC%2FScreen%20Shot%202021-10-23%20at%203.16.27%20PM.png?alt=media\&token=c831db5b-fe1d-4086-bca2-d9f911afb070) #### 3a) Using Thinkific Lead Capture Funnel Kit Opt In section works similarly to the [standard Thinkific Lead Capture section](https://support.thinkific.com/hc/en-us/articles/360057435074) , except that it uses a popup that gets triggered by any Kit button instead. Be sure to take a look at Thinkific's guides on how this feature works. * [ ] Configure the section settings that will be used for the popup including Headings, Button text and image * [ ] You will also need to configure the page that will be redirected to when the button is clicked **using the After Opt In settings** #### 3b) Using a 3rd Party Lead Capture In order to use a 3rd party lead capture form *(ex: Convertkit)* with Kit, you must set up the form inside your providers platform tools. Then, you must obtain an "embed" code for that form. What we are essentially doing here is embedding your form into the Funnel Kit Opt In popup. * [ ] Make sure your have your Funnel Kit Opt In button settings to use ***Custom (Embed)*** * [ ] Then paste your embed code into the ***Custom Embed field*** {% hint style="info" %} When using a 3rd party embed code for your form, be sure to select an HTML version and not a Javascript version. Since we are presenting it in our own popup, this will ensure that it should function properly (just like as if it was embedded on a HTML page. You also need to specify what happens after the form is submitted from within your CRM's settings. Typically, you would configure it so that the reader is sent to another page (ex: "Thank you....we emailed you some details...") {% endhint %} ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FVni1PQQyY8nIQE0oX8bE%2FScreen%20Shot%202021-10-23%20at%203.30.42%20PM.png?alt=media\&token=71c0a514-a409-4a49-8dd6-037a6e35ac86) #### 4) Preview and Test After you have completed setting up the page, be sure to test the page outside of SiteBuilder. # Promos Kit The Promos Kit will help you pull off the ultimate promotion. Great for Black Friday, Cyber Monday, Holiday Sales or any of special flash sale to increase your revenue {% embed url="" %} ### :boom:Why We :heart\_eyes: Love This Kit * Increase sales by offering promotions to your courses or bundles * High converting techniques like urgency, timers, timed displaying and more * Create a larger sale with bundle promotions * Set up in minutes with no tech experience * Canva templates included (optional) * Easy enough for any "non-marketer" to look like a marketing pro ### What Super Power Sections Are Included In This Kit 1. [**Sticky Popup With Exit Intent**](/kit-powerups/promos-kit/01-sticky-popup-with-exit-intent) - perfectly timed friendly popup that sticks to the corner of the page. Optionally add an exit intent to pop open in a larger view to really grab their attention. 2. [**Scratch & Win**](/kit-powerups/promos-kit/02-scratch-and-win) **-** This Promo Kit super power will gamify your promotion with an intelligent scratch off game. You choose the prizes and we will randomly select the winning one for your user 3. [**Large Sticky Popup**](/kit-powerups/promos-kit/03-large-sticky-popup) - This Promo Kit super power will grab the attention of your reader wit a larger sticky popup 4. [**Deals Slider**](/kit-powerups/promos-kit/04-deals-slider) - This Promo Kit super power is great when you have a few featured deals that you would like to promote as a page banner or somewhere else on the page. 5. [**Deals Slider (Small card)**](/kit-powerups/promos-kit/05-deals-slider-small-card) - This Promo Kit super power is a carousel that includes a sense of urgency with a built in countdown timer. Perfect for Black Friday and flash promotions. 6. [**Bundle Promo**](/kit-powerups/promos-kit/06-bundle-promo) - This Promo Kit super power is to help you make more money by selling a large set of courses at one. A great way to do that is to promote a bundle of courses. 7. [**Single CTA With Timer**](/kit-powerups/promos-kit/07-single-cta-with-timer) **-** This Promo Kit super power is small but mighty. With this oversize call simple call to action with some fancy subtle accent text, there is no missing this "buy" button. Optionally include a countdown timer and you are sure to snag that sale 8. [**Banner With Background Video**](/kit-powerups/promos-kit/08-banner-with-background-video) - This Promo Kit super power will really grab the attention of your prospect with a eye catch big banner with background video and optional countdown timer 9. [**Bar with Animated Coupon**](/kit-powerups/promos-kit/09-bar-with-animated-coupon) - This Promo Kit super power puts a sticky bar on the top or bottom of the page showing an animated 'coupon' code that is sure to get attention 10. [**Before The Sale Opt-In** ](/kit-powerups/promos-kit/10-before-the-sale-opt-in)- This Promo Kit super power is great for snagging deal seeking leads. Use this to build up excitement before the sale happens. ### # Adding a Promo Super Power to a Page {% embed url="" %} ### Step 1: Make sure you have Promo Kit installed Check your app page inside of your Site Admin *ex: * and make sure you have **"Kit: Promo Sections" installed**. If it is not listed there, head back to the member dashboard and install it. ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FGcD95lyAhwFAqPbuIYPt%2FApps-Rob-s-School.png?alt=media\&token=afa8a9ce-1d6e-40b9-bb56-5ecc94e8386b) ### Step 2: Add Base Kit to your page Open up the page you would like to add a Promo section to and first add the "Base Kit Section". You can also copy a Base kit section from another page if you have one already created. [Be sure to read our guide on how Base kit works.](/kit-powerups/kit-common-sections/base-kit) {% embed url="" %} ### Step 3: Add a Promo Kit to the page The Promo Kit comes with [many different types of super powers.](/kit-powerups/promos-kit) You can easily search for all sections by adding a section and **search for "Kit: Promo"** or you can search for a specific section to use by **searching for it's Kit Id *****ex: Kit: Promo (01)*** {% embed url="" %} ### Step 4: Update the Promo Section Settings After you have added your Promo Kit section to your page, be sure to update the default settings to control the behavior, text, media, links, etc and configure it to the way you want it to look. Each section will contain its own settings. There will be consistency across all of the Kit collection by grouping the settings into common groups (ex; Headings, etc) ***Be sure to check the guide on the promo section you decided to use for any specific instructions.*** {% embed url="" %} # 01 - Sticky Popup With Exit Intent This Promo Kit super power will get your readers attention with a sticky popup and also an optional Exit intent. that is built for conversion. ![](https://import.cdn.thinkific.com/551340/courses/1542903/1-211107-075051.jpg) {% hint style="info" %} **EXPERIENCE IT:** [**Head over to the demo page** ](https://powerupkit.thinkific.com/pages/promo-01-demo)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Promo Kit Sections to the page * [ ] Make sure you have the **Promos Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Promo (01)"** and add it to your page #### 2) Add your images and text for the sticky popup * [ ] Set up your **Small Popup Headings** for the text that will appear on the sticky popup. *You can also not include any headings by just removing all text.* ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FD6voFcFHvAjhqBmYarGx%2FScreen%20Shot%202021-10-23%20at%2010.54.10%20AM.png?alt=media\&token=a8b9f7a4-472a-4480-8816-39dbca9848da) * [ ] Next, configure your **Button settings** for the text and the page to be used for the button. *There is a button on the small sticky popup and the exit intent. This setting controls both buttons.* * [ ] Upload your **images to be used on the sticky popup**. There is one for the circle (we recommend a picture of yourself) and one for the main image. Here is a [free Canva template ](https://www.canva.com/design/DAEtpUtqcI4/shhzQ58qGL4ieUudxTc6xA/view?utm_content=DAEtpUtqcI4\&utm_campaign=designshare\&utm_medium=link\&utm_source=sharebutton\&mode=preview)you can use to easily create your own using your images and colors. *Note: removing an image will make the sticky popup be a "text only" message and is perfectly fine to do, but images always grab more attention.* ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FwyhEQa7jsv8yMLWbDuq2%2FScreen%20Shot%202021-10-23%20at%2010.56.38%20AM.png?alt=media\&token=748488a4-df37-4974-a138-c57acc89f8cc) #### 3) Set the visibility settings for the sticky popup * [ ] Optionally change the **Popup Visibility settings** to set the behavior you want for how soon and how often you want the popup to appear. *We recommend some delay in the popup appearing so that your reader does not immediately want to close it.* [***Check our guide on Popup Visibility settings for more details***](/kit-usage-guides/popups-timers-and-exit-intents/popup-visibility-settings) ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2F05WZgH0T53NbDXfuDwpM%2FScreen%20Shot%202021-10-23%20at%2010.59.25%20AM.png?alt=media\&token=6ab83ab7-2e30-4b84-ab4a-a87958a31f09) #### 4) Set up the Exit Intent settings and content * [ ] Open the **Exit Intent settings and change the settings** to control its behavior. Be sure to read the [**Exit Intent guide**](/kit-usage-guides/popups-timers-and-exit-intents/exit-intents) to understand why and how you should use this super power. ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FkuM2mivQc7tNvJF6sjHv%2FScreen%20Shot%202021-10-23%20at%2011.08.06%20AM.png?alt=media\&token=413945a4-29fc-4e98-aecd-05373f8c8124) * [ ] Change the **Exit intent headings and image settings.** These can be the same as your had used on the small sticky popup, but it is recommended to make it different so that you have a "second chance" at grabbing the reader's attention. * [ ] Lastly, you can change the style being used for the headings and background color of the popups. {% hint style="success" %} **🔥PRO TIP:** Drop this super power onto your checkout page and promote a coupon to be used during checkout. The exit intent feature of this Promo PowerUp will really kill off your cart abandonments. *Note: The "Streamlined Checkout" is not supported due to not being able to control that via Site Builder.* {% endhint %} # 02 - Scratch & Win This Promo Kit super power will gamify your promotion with an intelligent scratch off game. You choose the prizes and we will randomly select the winning one for your user ![](https://import.cdn.thinkific.com/551340/courses/1542903/2-211107-075051.jpg) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/promos-kit-02-demo) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Promo Kit Sections to the page * [ ] Make sure you have the **Promos Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Promo (02)"** and add it to your page #### 2) Get your scratch off images ready * [ ] **Create your images** to be used for the scratch off game using this [**free Canva template**](https://www.canva.com/design/DAEtUdItBFE/hkWZOvsk-DR71KV-EGCJ7w/view?utm_content=DAEtUdItBFE\&utm_campaign=designshare\&utm_medium=link\&utm_source=sharebutton\&mode=preview)**.** You can use whatever image you want, but they need to be the size of 550px by 550px. You will need the following images * [ ] A cover image - This image should have some text to tell them what to do * [ ] Prize image(s) - One or more prize images. We will randomly select one that will be shown when the cover image is scratched off. This image should have the details on redemption (like a coupon code to use). {% hint style="info" %} The "prizes" are up to you. You can even include a "Sorry, you did not win" image. Generally we recommend that the image contain a coupon code to redeem as there will not be a link associated with the image after being scratched. {% endhint %} #### 3) Upload your scratch off images * [ ] Add your cover image as the first block * [ ] Add your remaining prize images as additional blocks settings {% embed url="" %} #### 4) Set your visibility settings (Optional) {% embed url="" %} * [ ] Open the ***Visibility*** settings group * [ ] Set the ***Delay to appear*** slider to the number of seconds that you want to wait until the popup is shown. *It is recommended to have a small delay so that your reader is not caught off guard when the page loads. It is more likely they will pay attention to the popup instead of showing it right away.* * [ ] Set the ***Promo ID*** if you want to track apply these identify this popup across different pages. For example, if you want to only allow this popup to be shown once, but are using it on many pages, be sure they all have the same Promo ID * [ ] Set the ***Max number of tries*** slider to be the number of tries you would like the reader to have. Once they "start scratching" then that counts as "one try". #### 5) Add some instructions (Optional) If you feel like you need to describe this promotion a bit more than what can be displayed in your image, then add a few lines of text in the **Headings** ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FG8FK70UBGNVNBGYsKoBk%2FScreen%20Shot%202021-11-04%20at%207.57.37%20AM.png?alt=media\&token=3417712e-fa8f-48f5-bd71-9a536d661732) #### **6**) Change the coin image (Optional) {% embed url="" %} * [ ] If you really want to change the image of the coin, then you simply need to upload any PNG (with transparent background). We also added [a link to the Canva template](https://www.canva.com/design/DAEtjJv9aUg/Zhor20xvqqREctbMK1nXjw/view?utm_content=DAEtjJv9aUg\&utm_campaign=designshare\&utm_medium=link\&utm_source=sharebutton\&mode=preview) that we used to create this coin. {% hint style="success" %} **🔥PRO TIP:** Get creative in your promotions. People become numb to seeing the same old "tricks" they have seen before. You can also use the "urgency" principle by having the Scratch & Win super power activated for a limited time (and only give them one change to claim a prize). {% endhint %} # 03 - Large Sticky Popup This Promo Kit super power will grab the attention of your reader with a large sticky popup that they cannot miss ![](https://import.cdn.thinkific.com/551340/courses/1542903/3-211107-075051.jpg) {% hint style="info" %} **EXPERIENCE IT:** [**Head over to the demo page**](https://powerupkit.thinkific.com/pages/promos-kit-03-demo) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Promo Kit Sections to the page * [ ] Make sure you have the **Promos Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Promo (03)"** and add it to your page #### 2) Add your images and text for the sticky popup * [ ] Add your image to the *Image settings.* This image will be automatically cropped. ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FCiKnJLvE4zatT0DAPJV5%2FScreen%20Shot%202021-10-25%20at%209.54.28%20AM.png?alt=media\&token=307bcecd-ba9d-48cb-86ef-847d225f4437) * [ ] Next, configure your **Button settings** for the text and the page to be used for the button. #### 3) Set the visibility settings for the sticky popup * [ ] Optionally change the **Popup Visibility settings** to set the behavior you want for how soon and how often you want the popup to appear. *We recommend some delay in the popup appearing so that your reader does not immediately want to close it.* [**Check our guide on Popup Visibility settings for more details**](/kit-usage-guides/popups-timers-and-exit-intents/popup-visibility-settings) ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Fm5ZkmOTPczVTe3RmWnuk%2FScreen%20Shot%202021-10-25%20at%209.55.56%20AM.png?alt=media\&token=6b6044af-5bdc-4052-8267-2751408f0251) {% hint style="success" %} **🔥PRO TIP:** Drop this super power onto your student dashboard page to encourage your members to upgrade to a higher level offering or member based subscription {% endhint %} # 04 - Deals Slider This Promo Kit super power is great when you have a few featured deals that you would like to promote as a page banner or somewhere else on the page. ![](https://import.cdn.thinkific.com/551340/courses/1542903/4-211107-075051.jpg) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/promos-kit-04-demo) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Promo Kit Sections to the page * [ ] Make sure you have the **Promos Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Promo (04)"** and add it to your page #### 2) Add the main static image * [ ] Open the **image settings group** and add your image. This image will cover the space on the left hand side and is permanent. Be sure to check the specified size mentioned in the settings and checkout our [guide on making sure your images are optimized](/kit-usage-guides/media/image-optimization). #### 3) Update the styles to use * [ ] Update the styles and colors that will be used for the **text, background and button setting groups**. Be sure to [check the guide](/kit-powerups/kit-common-sections/base-kit) on how to use named colors, custom fonts and more. #### 4) Configure your slider behavior * [ ] Adjust your **slider options** to control if the slider will advance automatically or how long the delay is between the transitions between items #### 5) Add a block setting for each of your slider items * [ ] **Add a block for each item** you wish to show on the Deals Slider. Each Item on the slider includes settings for the text being used. Each text field supports [Smart Style](/kit-usage-guides/smart-settings/smart-style) to allow you easily highlight, underline and change the boldness of specific portions of text. * [ ] **Set the type of button** to be used for each slide. You can decide to link to a specific page like a checkout or landing page. Or you could use the included [Funnel Kit Optin ](/kit-powerups/kit-common-sections/funnel-kit-opt-in)if you would like to open a popup asking for their contact information. There is also a special "Page Pricing Section" option for the button if you want to jump down to a Kit Pricing section block (which required a Kit Pricing section to be included). *Generally it is recommended that the button be linked to the checkout page for your special price.* # 05 - Deals Slider (Small Card) This Promo Kit super power is a carousel that includes a sense of urgency with a built in countdown timer. Perfect for Black Friday and flash promotions. ![](https://import.cdn.thinkific.com/551340/courses/1542903/5-211107-075051.jpg) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/promos-kit-05-demo) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Promo Kit Sections to the page * [ ] Make sure you have the **Promos Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Promo (05)"** and add it to your page #### 2) Configure your countdown * [ ] Open the **Countdown Timer settings group** and configure if you want to use the countdown timer. And if so, set the date and time that will be used. Be sure to check the [countdown timer guide](/kit-usage-guides/popups-timers-and-exit-intents/using-a-countdown-timer) for more information on setting the correct time. #### 4) Update your style settings * [ ] Update the styles and colors that will be used for the **text, background and button setting groups**. Be sure to [check the guide](/kit-powerups/kit-common-sections/base-kit) on how to use named colors, custom fonts and more. #### 5) Adjust your slider options * [ ] Adjust your **slider options** to control if the slider will advance automatically or how long the delay is between the transitions between items #### 6) Add a block setting for each item * [ ] **Add a block for each item** you wish to show on the Deals Slider. * [ ] Each Item on the slider includes **settings for the text being used**. Each text field supports [Smart Style](/kit-usage-guides/smart-settings/smart-style) to allow you easily highlight, underline and change the boldness of specific portions of text. * [ ] Add an image for each item. This image will be partially shown and auto cropped based on the size of the browser. So be sure to select an image that does not contain text or items that you don't mind not being shown. Be sure to check the specified size mentioned in the settings and checkout our [guide on making sure your images are optimized](/kit-usage-guides/media/image-optimization) * [ ] **Set the type of button** to be used for each slide. You can decide to link to a specific page like a checkout or landing page. Or you could use the included [Funnel Kit Optin ](/kit-powerups/kit-common-sections/funnel-kit-opt-in)if you would like to open a popup asking for their contact information. There is also a special "Page Pricing Section" option for the button if you want to jump down to a Kit Pricing section block (which required a Kit Pricing section to be included). *Generally it is recommended that the button be linked to the checkout page for your special price.* {% hint style="warning" %} Do not use this slider if you will only be displaying one item. It is meant for a minimum of 3. If you do not have three items to display then choose another section type. {% endhint %} # 06 - Bundle Promo This Promo Kit super power is to help you make more money by selling a large set of courses at once. A great way to do that is to promote a bundle of courses. ![](https://import.cdn.thinkific.com/551340/courses/1542903/6-211107-075051.jpg) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/promos-kit-06-demo) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Promo Kit Sections to the page * [ ] Make sure you have the **Promos Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Promo (06)"** and add it to your page #### 2) Update the countdown timer settings * [ ] Open the **Countdown Timer settings group** and configure if you want to use the countdown timer. And if so, set the date and time that will be used. Be sure to check the [countdown timer guide](/kit-usage-guides/popups-timers-and-exit-intents/using-a-countdown-timer) for more information on setting the correct time. #### 3) Adjust your style settings * [ ] Update the styles and colors that will be used for the **text, background and button setting groups**. Be sure to [check the guide](/kit-powerups/kit-common-sections/base-kit) on how to use named colors, custom fonts and more. #### 5) Set your main bundle image * [ ] Open up the **Image settings** group and upload your image. We have included a built in link to a [free Canva template ](https://www.canva.com/design/DAEs5IoBu-g/lzcReuW1uhmO0RVH81LZ4w/view?utm_content=DAEs5IoBu-g\&utm_campaign=designshare\&utm_medium=link\&utm_source=sharebutton\&mode=preview)that you can use to easily create the exact sample image, but with your pictures and worksheets. *You do not have to use the mockup we have provided and can choose to use any image you wish. But it is a great idea to have a "visual" representation of "everything" the reader will be getting if they decide to purchase.* #### 6) Create a list of items that are included with this bundle promotion * [ ] In the **list setting** under the *Headings setting group*, you will list out all of the courses included in this bundle. Be sure to also call out the value of each course so your prospect "does the math". * [ ] Also be sure to enter the **Total Value** for the bundle as well as the "normal" price that will contain a slash followed by the actual price of the sale. {% hint style="success" %} **🔥PRO TIP:** Although we could have filled this section in programmatically when choosing the bundle, we feel you can better express and highlight the "true value" of this bundle in your own terms. Plus, you may be including "bonuses' in your bundle that is not necessarily inside the actual "bundle" as a course. The prices are all manually entered on this page, as it gives you the freedom to put some text around it and use SmartStyle to display it as you wish. {% endhint %} # 07 - Single CTA With Timer This Promo Kit super power is small but mighty. With this oversize call simple call to action with some fancy subtle accent text, there is no missing this "buy" button. Optionally include a countdown ![](https://import.cdn.thinkific.com/551340/courses/1542903/7-211107-075051.jpg) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/promos-kit-07-demo) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Promo Kit Sections to the page * [ ] Make sure you have the **Promos Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Promo (07)"** and add it to your page #### 2) Update the countdown timer settings * [ ] Open the **Countdown Timer settings group** and configure if you want to use the countdown timer. And if so, set the date and time that will be used. Be sure to check the [countdown timer guide](/kit-usage-guides/popups-timers-and-exit-intents/using-a-countdown-timer) for more information on setting the correct time. #### 3) Choose the styles you would like to use * [ ] Update the styles and colors that will be used for the **text, background and button setting groups**. Be sure to [check the guide](/kit-powerups/kit-common-sections/base-kit) on how to use named colors, custom fonts and more. {% hint style="success" %} **🔥PRO TIP:** This section uses a built in script accent font that is used for the text next to the main content area. You may need to insert line breaks to stack up your words. be short and sweet, it is not meant to be an area for a novel. We want it to subtlety point to the main CTA (the button) {% endhint %} # 08 -Banner With Background Video This Promo Kit super power will really grab the attention of your prospect with a eye catching big banner with background video and optional countdown timer ![](https://import.cdn.thinkific.com/551340/courses/1542903/8-211107-075051.jpg) {% hint style="info" %} **EXPERIENCE IT:**[ Head over to the demo page](https://powerupkit.thinkific.com/pages/promos-kit-08-demo) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Promo Kit Sections to the page * [ ] Make sure you have the **Promos Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Promo (08)"** and add it to your page #### 2) Update the countdown timer settings * [ ] Open the **Countdown Timer settings group** and configure if you want to use the countdown timer. And if so, set the date and time that will be used. Be sure to check the [countdown timer guide](/kit-usage-guides/popups-timers-and-exit-intents/using-a-countdown-timer) for more information on setting the correct time. #### 3) Update the styles you would like to use * [ ] Update the styles and colors that will be used for the **text, background and button setting groups**. Be sure to check the guide on how to use named colors, custom fonts and more. ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FGv8v86nRspzHERa0xhBV%2FSite%20Builder%20_%20T%20\(16\).png?alt=media\&token=882ca5ab-a696-421b-a9c5-9e8bcefe8e1e) {% hint style="warning" %} The headings are meant to big BIG AND BOLD. But depending on your language and the length of text, you may want to adjust the size of the headings on both desktop and mobile sized displays. {% endhint %} #### 4) Add your background video * [ ] Be sure to check our [Background Video Guide](/kit-usage-guides/media/using-background-videos) on how to use Background videos. * [ ] Provide the url to your MP4 Web Optimized video file * [ ] Upload your video thumbnail image {% hint style="success" %} 🔥**PRO TIP**: Background videos are great to grab the reader's attention when they first see the page, but should not "over power" your headline. Be sure to read the video guide on recommended sizes and also how to leverage Thinkific's platform to get a URL for your video file. {% endhint %} # 09 - Bar with Animated Coupon This Promo Kit super power puts a sticky bar on the top or bottom of the page showing an animated 'coupon' code that is sure to get attention ![](https://import.cdn.thinkific.com/551340/courses/1542903/9-211107-075051.jpg) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/promos-kit-09-demo) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Promo Kit Sections to the page * [ ] Make sure you have the **Promos Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Promo (09)"** and add it to your page #### 2) Update the visibility settings * [ ] Open the ***Visibility*** settings group * [ ] Set the ***Delay to appear*** slider to the number of seconds that you want to wait until the popup is shown. *It is recommended to have a small delay so that your reader is not caught off guard when the page loads. It is more likely they will pay attention to the popup instead of showing it right away.* * [ ] Set the ***Promo ID*** if you want to track apply these identify this popup across different pages. For example, if you want to only allow this popup to be shown once, but are using it on many pages, be sure they all have the same Promo ID * [ ] Set the ***Limit times shown*** slider to be the number of times you would like to show the promo bar. #### 3) Update the text and styles you would like to use * [ ] Update the styles and colors that will be used for the **text, background and coupon**. Be sure to check the guide on how to use named colors, custom fonts and more. #### 4) Choose the location and coupon animation * [ ] Open up the Bar Location settings group and choose if you would like the bar to be shown on the top or on the bottom. * [ ] Set the animation style you wish to use for the coupon text {% hint style="success" %} 🔥**PRO TIP**: Keep the message short and sweet so it stays on one line and is easier to read. Choose colors that will make the bar "pop" on the page. {% endhint %} # 10 - Before The Sale Opt-In This Promo Kit super power is great for snagging deal seeking leads. Use this to build up excitement before the sale happens. ![](https://import.cdn.thinkific.com/551340/courses/1542903/10-211107-075051.jpg) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/promos-kit-10-demo) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Promo Kit Sections to the page * [ ] Make sure you have the **Promos Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Promo (10)"** and add it to your page #### 2) Update the headings * [ ] Open up the Headings section group and type in your text that you would like to use for the heading and summary. Be sure to [check the Smart Style guide](/kit-usage-guides/smart-settings/smart-style) on how to use named colors, custom fonts and more. #### 3) Set the location of the section * [ ] You can use this section as a "sticky bar" - where it will stay in the same position either at the *top* of the page or the *bottom* of the page. If you would like to use this section as a normal "inline" section, then choose *Normal Section* ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2F6b3NeT9jOjRao2TlbNse%2FScreen%20Shot%202021-11-05%20at%2010.06.49%20AM.png?alt=media\&token=55d89270-d255-4178-a43d-465432721060) #### #### 4) Set the opt in options * [ ] You can use the built in Thinkific Lead capture feature or if you have your own email platform (ex: ConvertKit), then you can choose to embed your own form. ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FcDOVtbHYMfQZ52onXU5Y%2FScreen%20Shot%202021-11-05%20at%2010.10.50%20AM.png?alt=media\&token=cb94817e-8aa6-4356-9fcc-3af62b70d4e1) * [ ] When choosing Thinkific as the option type, be sure to update the *Thinkific Optin Settings* for the button, placeholder text, checkbox text (if being used). Also be sure to set the text that will be displayed after the form is submitted. ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FmIRPuqrmP0gS3Xqxqm0d%2FSite-Builder-Thinkific%20-%202021-11-05T101848.503.png?alt=media\&token=91f1e3ed-f114-47e8-b61c-c74c8b7d6da9) ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FxyIO9K760yoRB4amNBI0%2FScreen%20Shot%202021-11-05%20at%2010.25.51%20AM.png?alt=media\&token=cea7a7aa-c8b3-445d-9003-8e569a043c93) #### Using a Custom Optin Form * [ ] Be sure to choose Custom (Embed) for the Opt In Type. * [ ] Create your embed form inside your email marketing platform (ex: Convertkit). Be sure to select a simple style and options that will "blend in" with this section's style. It is suggested that you use a simple email field form. You will also need to configure what happens after the form is submitted. Then copy and paste your embed code from y #### #### 5) Configure your countdown * [ ] Open the **Countdown Timer settings group** and configure if you want to use the countdown timer. And if so, set the date and time that will be used. Be sure to check the [countdown timer guide](/kit-usage-guides/popups-timers-and-exit-intents/using-a-countdown-timer) for more information on setting the correct time. #### 6) Update the visibility settings * [ ] Open the ***Visibility*** settings group * [ ] Set the ***Delay to appear*** slider to the number of seconds that you want to wait until the popup is shown. *It is recommended to have a small delay so that your reader is not caught off guard when the page loads. It is more likely they will pay attention to the popup instead of showing it right away.* * [ ] Set the ***Promo ID*** if you want to track identify and track this popup across different pages. For example, if you want to only allow this popup to be shown once, but are using it on many pages, be sure they all have the same Promo ID * [ ] Set the ***Limit times shown*** slider to be the number of times you would like to show the promo bar. #### 7) Update the text and styles you would like to use * [ ] Update the styles and colors that will be used for the **text, background and coupon**. Be sure to check the guide on how to use named colors, custom fonts and more. {% hint style="success" %} 🔥**PRO TIP**: Keep the message short and sweet so it stays on one line and is easier to read. Choose colors that will make the bat "pop" on the page. {% endhint %} # 11 - Sticky Bar with Countdown & Accent Text This Promo Kit super power puts a sticky bar on the top or bottom of the page showing a countdown timer and some nice accent text to draw even more attention to it. ![](https://import.cdn.thinkific.com/551340/courses/1542903/11-211107-075051.jpg) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/promos-kit-11-demo) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Promo Kit Sections to the page * [ ] Make sure you have the **Promos Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Promo (11)"** and add it to your page #### 2) Update the headings * [ ] Update the styles and colors that will be used for the **text, background and accent**. Be sure to check the [Smart Style guide](/kit-usage-guides/smart-settings/smart-style) on how to use named colors, custom fonts and more. #### 3) Set the location of the section * [ ] You can use this section as a "sticky bar" - where it will stay in the same position either at the *top* of the page or the *bottom* of the page. If you would like to use this section as a normal "inline" section, then choose *Normal Section* ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2F6b3NeT9jOjRao2TlbNse%2FScreen%20Shot%202021-11-05%20at%2010.06.49%20AM.png?alt=media\&token=55d89270-d255-4178-a43d-465432721060) #### 4) Configure your countdown * [ ] Open the **Countdown Timer settings group** and configure if you want to use the countdown timer. And if so, set the date and time that will be used. Be sure to check the [countdown timer guide](/kit-usage-guides/popups-timers-and-exit-intents/using-a-countdown-timer) for more information on setting the correct time. #### 5) Update the visibility settings * [ ] Open the ***Visibility*** settings group * [ ] Set the ***Delay to appear*** slider to the number of seconds that you want to wait until the popup is shown. *It is recommended to have a small delay so that your reader is not caught off guard when the page loads. It is more likely they will pay attention to the popup instead of showing it right away.* * [ ] Set the ***Promo ID*** if you want to track identify and track this popup across different pages. For example, if you want to only allow this popup to be shown once, but are using it on many pages, be sure they all have the same Promo ID * [ ] Set the ***Limit times shown*** slider to be the number of times you would like to show the promo bar. {% hint style="success" %} 🔥**PRO TIP**: Keep the message short and sweet so it stays on one line and is easier to read. Choose colors that will make the bar "pop" on the page. {% endhint %} # Sections Kit This kit contains over 80 new sections that you can use on your site pages. ### Step 1: Make sure you have Sections Kit installed Check your app page inside of your Site Admin *ex: * and make sure you have **"Sections Kit 💥 PowerUp" installed**. If it is not listed there, head back to the member dashboard and install it. ### Step 2: Add Base Kit to your page Open up the page you would like to add a Section Kit section to and first add the "Base Kit Section". You can also copy a Base kit section from another page if you have one already created. [Be sure to read our guide on how Base kit works.](/kit-powerups/kit-common-sections/base-kit) {% embed url="" %} ### Step 3: Add a Sections Kit section to the page The Sections Kit comes with [many different types of super powers.](#what-super-power-sections-are-included-in-this-kit) You can easily search for all sections by adding a section and **search for "Kit: "** or you can search for a specific section to use by **searching for it's Kit Id *****ex: Kit: Banner (01)*** ### Step 4: Update the Sections Kit Section Settings After you have added your Sections Kit section to your page, be sure to update the default settings to control the behavior, text, media, links, etc and configure it to the way you want it to look. Each section will contain its own settings. There will be consistency across all of the Kit collection by grouping the settings into common groups (ex; Headings, etc) ***Be sure to check the guide on the promo section you decided to use for any specific instructions.*** ### What Super Power Sections Are Included In This Kit 1. [Banner sections ](/kit-powerups/sections-kit/banner-sections)(13) - Choose from a variety of styles for your page banners 2. [Content sections ](/kit-powerups/sections-kit/content-sections)(5) - Use these content sections on any number of pages 3. [Icons sections ](/kit-powerups/sections-kit/icons-sections)(13) - these icons sections will help quickly communicate key selling points 4. [Lists sections ](/kit-powerups/sections-kit/lists-sections)(13) - use these list sections to help quickly summarize outcomes 5. [Modules sections](/kit-powerups/sections-kit/modules-sections) (15) - use these module sections to communicate more deeply what is include with your course 6. [Pricing sections](/kit-powerups/sections-kit/pricing-sections) (09) - choose from a variety of pricing sections to communicate purchase options 7. [Social Proof Sections](/kit-powerups/sections-kit/social-proof-sections) (13) - add these social proof sections to help increase your course sales # Banner Sections Grab the attention of your site visitor with these eye catching banners {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/banners)and see this super power in action {% endhint %} ## Using the Banner Sections * [ ] **Make sure you have Sections Kit installed.** Check your app page inside of your Site Admin ex: and make sure you have "Sections Kit 💥 PowerUp" installed. If it is not listed there, head back to the member dashboard and install it. * [ ] Open up the page you would like to add a Section Kit section to and **first add the "Base Kit Section"**. You can also copy a Base kit section from another page if you have one already created. Be sure to read our guide on how Base kit works. * [ ] You can easily search for all banner sections by adding a section and search for ***"*****Kit: Banner*****"*** or you can search for a specific section to use by searching for it's Kit Id ex: ***Kit: Banner (01)*** ## Banner Sections ![](https://docs-kit.superpowerups.com/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FYOTXhb0rwalCxxHbmMOB%2FScreen%20Shot%202022-01-15%20at%2012.52.32%20PM.png?alt=media\&token=336dc610-28a2-4e7b-9e02-45a4e93028a2) ### [01 - Side Video](/kit-powerups/sections-kit/banner-sections/01-side-video) This section contains a background image and an optional video on the side {% embed url="" %} ### [02 - Thin with Parallax Image ](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/banner-sections/02-thin-with-parallax-image) This banner contains centered text and a background parallax image {% embed url="" %} ### [03 - Colorful Image & Text ](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/banner-sections/03-colorful-image-and-text) This banner is a solid color for the background and an image. on the side {% embed url="" %} ### [04 - Background Video ](/kit-powerups/sections-kit/banner-sections/04-background-video) This banner has a background video and centered headings {% embed url="" %} ### [05 - Popup Video ](/kit-powerups/sections-kit/banner-sections/05-popup-video) This banner has a button for a popup video {% embed url="" %} ### [06 - Popup Video Full Height ](/kit-powerups/sections-kit/banner-sections/06-popup-video-full-height) This banner has a button for a popup video and takes up a larger portion of the screen height {% embed url="" %} ### [07 - Image on Left Side](/kit-powerups/sections-kit/banner-sections/07-image-on-left-side) This banner has room for an image on the side of the headings {% embed url="" %} ### [08 - Button on side](/kit-powerups/sections-kit/banner-sections/08-button-on-side) This banner is a simply thin heading only banner with the call to action on the side {% embed url="" %} ### [09 - Full Height Background Image ](/kit-powerups/sections-kit/banner-sections/09-full-height-background-image) This banner will fill the height of the screen with a background image {% embed url="" %} ### [10 - Image on Right Side ](/kit-powerups/sections-kit/banner-sections/10-image-on-right-side) \This banner has an image on the right and also a color highlight for the subheading {% embed url="" %} ### [11 - Call out on Image (side) ](/kit-powerups/sections-kit/banner-sections/11-call-out-on-image-side) This banner has a call out section positioned on the left and on top of a background image {% embed url="" %} ### [12 - Call out on Image (center) ](/kit-powerups/sections-kit/banner-sections/12-call-out-on-image-center) This banner has a call out section positioned in the center and on top of a background image {% embed url="" %} ### [13 - Rotating words and icons ](/kit-powerups/sections-kit/banner-sections/13-rotating-words-and-icons) This banner contains rotating words in the heading as well as 3 icons below the banner # 01 - Side Video This section contains a background image and an optional video on the side ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FYOTXhb0rwalCxxHbmMOB%2FScreen%20Shot%202022-01-15%20at%2012.52.32%20PM.png?alt=media\&token=336dc610-28a2-4e7b-9e02-45a4e93028a2) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/banners)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (01)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Heading and Summary sections #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Video settings group * [ ] Choose the Video type to be used * [ ] *Thinkific of YouTube* - selecting this option will use the video selected using the standard video "picker". The 'Autoplay video' option is only used for this option * [ ] *Custom -* selecting this option will use the Custom Video Embed code provided. *Be sure to paste in code from your video platform and ensure that it is responsive* #### 6) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 8) Update the Section settings group * [ ] Optionally modify the section style options for this section # 02 - Thin with Parallax Image This banner contains centered text and a background parallax image ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FxET36PxeVInT09EIRiDR%2FScreen%20Shot%202022-01-15%20at%2012.53.10%20PM.png?alt=media\&token=8925cfac-dc0b-45e5-9db3-c1284a10b4a4) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/banners)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (02)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Heading and Summary sections #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 03 - Colorful Image & Text This banner is a solid color for the background and an image. on the side ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2F40ugU6i3rdiBD7hmxU4B%2FScreen%20Shot%202022-01-15%20at%2012.56.06%20PM.png?alt=media\&token=5e226a81-adb7-46a5-adf4-dd9aae398122) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/banners)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (03)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Heading and Summary sections #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 04 - Background Video This banner has a background video and centered headings ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FGhT56CVX8WTg94VtvFzN%2FScreen%20Shot%202022-01-15%20at%2012.56.36%20PM.png?alt=media\&token=57d5a341-6202-44e7-95d6-832cfa54aa97) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/banners)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (04)"** and add it to your page #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (01)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Heading and Summary sections #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Video settings group * [ ] Be sure to check our [Background Video Guide](/kit-usage-guides/media/using-background-videos) on how to use Background videos. * [ ] Provide the url to your MP4 Web Optimized video file * [ ] Upload your video thumbnail image {% hint style="success" %} 🔥**PRO TIP**: Background videos are great to grab the reader's attention when they first see the page, but should not "over power" your headline. Be sure to read the video guide on recommended sizes and also how to leverage Thinkific's platform to get a URL for your video file. {% endhint %} #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 05 - Popup Video This banner has a button for a popup video ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FjG6JybxMNwLfpaA4T937%2FScreen%20Shot%202022-01-15%20at%2012.56.58%20PM.png?alt=media\&token=638809dd-c096-489d-8604-350bae892c64) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/banners)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (05)"** and add it to your page #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (01)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Heading and Summary sections #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Video settings group * [ ] Choose the Video type to be used * [ ] *Thinkific of YouTube* - selecting this option will use the video selected using the standard video "picker". The 'Autoplay video' option is only used for this option * [ ] Choose the button color for the video play icon #### 6) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 8) Update the Section settings group * [ ] Optionally modify the section style options for this section # 06 - Popup Video Full Height This banner has a button for a popup video and takes up a larger portion of the screen height ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FVtyO96T8wrCFwVGInkiO%2FScreen%20Shot%202022-01-15%20at%2012.57.23%20PM.png?alt=media\&token=bb477645-b1af-47b3-9d9b-9d8a447987ea) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/banners)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (06)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Heading and Summary sections #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Video settings group * [ ] Choose the Video type to be used * [ ] *Thinkific of YouTube* - selecting this option will use the video selected using the standard video "picker". The 'Autoplay video' option is only used for this option * [ ] Choose the button color for the video play icon * [ ] Choose the Heading text that will be shown next to the icon button #### 6) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 8) Update the Section settings group * [ ] Optionally modify the section style options for this section # 07 - Image on Left Side This banner has room for an image on the side of the headings ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FRn2gldcGygeiPTMhees7%2FScreen%20Shot%202022-01-15%20at%2012.57.46%20PM.png?alt=media\&token=1f6ee5ab-2c80-4c31-8f83-fb8ed023f5d0) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/banners)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (07)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Heading and Summary sections #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 08 - Button on side This banner is a simply thin heading only banner with the call to action on the side ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FtpiN54Wl63lnxY0QywYf%2FScreen%20Shot%202022-01-15%20at%2012.58.09%20PM.png?alt=media\&token=3ebe3b21-aa71-4cf2-ac9a-9b7cdbd5fed0) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/banners)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (08)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Heading and Summary sections #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 09 - Full Height Background Image This banner will fill the height of the screen with a background image ![hint](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Flxn0kDmwgQmh1lt3f4Yy%2FScreen%20Shot%202022-01-15%20at%2012.58.28%20PM.png?alt=media\&token=8718852b-adb7-4d3b-8ad9-4eaddaac97ac) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/banners)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (09)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Heading and Summary sections #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 10 - Image on Right Side This banner has an image on the right and also a color highlight for the subheading ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Fw0tNoynU3C7z4Yv0lyeM%2FScreen%20Shot%202022-01-15%20at%2012.58.54%20PM.png?alt=media\&token=43fcb6db-4372-4f7d-a6c2-59a47a1b3c09) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/banners)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (10)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Heading and Summary sections #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 11 - Call out on Image (side) This banner has a call out section positioned on the left and on top of a background image ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FEmhxHA3eSorcTTewQMaT%2FScreen%20Shot%202022-01-15%20at%2012.59.19%20PM.png?alt=media\&token=24a007c1-679f-4f64-9bd6-b0ba5fd4a64f) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/banners)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (11)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Heading and Summary sections #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 12 - Call out on Image (center) This banner has a call out section positioned in the center and on top of a background image ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FGKtumkpkDUAxiWwZa1ks%2FScreen%20Shot%202022-01-15%20at%2012.59.43%20PM.png?alt=media\&token=4f618651-5a9f-4003-9679-1425d445ada4) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/banners)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (12)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Heading and Summary sections #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 13 - Rotating words and icons This banner contains rotating words in the heading as well as 3 icons below the banner ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FSBwiefjsLiAPvmIar8Tc%2FScreen%20Shot%202022-01-15%20at%201.00.10%20PM.png?alt=media\&token=616a2faa-d894-418f-8e46-7bcefe2b9be1) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/banners)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Banner (13)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Heading and Summary sections * [ ] For the rotating text, add a short few words on each line of the List settings #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Icons settings group * [ ] For each Icon 1, Icon 2, Icon 3 settings group, set the colors to be used, update the heading and upload your icon image (50x50 PNG transparent background) #### 6) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 8) Update the Section settings group * [ ] Optionally modify the section style options for this section # Content Sections ## Using the Content Sections * [ ] **Make sure you have Sections Kit installed.** Check your app page inside of your Site Admin ex: and make sure you have "Sections Kit 💥 PowerUp" installed. If it is not listed there, head back to the member dashboard and install it. * [ ] Open up the page you would like to add a Section Kit section to and **first add the "Base Kit Section"**. You can also copy a Base kit section from another page if you have one already created. Be sure to read our guide on how Base kit works. * [ ] You can easily search for all banner sections by adding a section and search for ***"*****Kit: Content*****"*** or you can search for a specific section to use by searching for it's Kit Id ex: ***Kit: Content (01)*** ## Content Sections {% embed url="" %} ### [01 - Image and Text ](/kit-powerups/sections-kit/content-sections/01-image-and-text) This content section is for simple text and image {% embed url="" %} ### [02 - 2 Images & Text ](/kit-powerups/sections-kit/content-sections/02-2-images-and-text) This content section contains two images and text {% embed url="" %} ### [03 - Image, Text & Quote ](/kit-powerups/sections-kit/content-sections/03-image-text-and-quote) This content section has three columns for a quote on one side, text on the other side and an image in the middle {% embed url="" %} ### [04 - Heading and Side Text ](/kit-powerups/sections-kit/content-sections/04-heading-and-side-text) This content section contains two columns for a heading and text {% embed url="" %} ### [05 - Text & Image (Alternating) ](/kit-powerups/sections-kit/content-sections/05-text-and-image-alternating) This content section alternates the text and images # 01 - Image and Text This content section is for simple text and image ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FZ8yxKP2V0f6X2hvcO2Kh%2FScreen%20Shot%202022-01-15%20at%201.02.17%20PM.png?alt=media\&token=1ff70c74-3b18-47c2-928c-45d62caa5be1) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/content) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Content (01)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading, Heading and Summary sections #### 3) Update the Image settings group * [ ] Upload your image to be used for this section #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. # 02 - 2 Images & Text This content section contains two images and text ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FLn9P76cqudK4D5FeNzWd%2FScreen%20Shot%202022-01-15%20at%201.02.39%20PM.png?alt=media\&token=8bdeaba3-87a6-4543-9c52-c63ee0acc5d9) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/content) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Content (02)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading, Heading and Summary sections #### 3) Update the Image settings group * [ ] Upload your image to be used for this section #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. # 03 - Image, Text & Quote This content section has three columns for a quote on one side, text on the other side and an image in the middle ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FpGFaxzSw4lMeiIw2fUd8%2FScreen%20Shot%202022-01-15%20at%201.03.04%20PM.png?alt=media\&token=6f41440f-468b-48bf-908f-ab1b6c82e7e7) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/content) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Content (03)"** and add it to your page #### 2) Update the Headings & Quote settings groups * [ ] Add your text for the Heading and Summary settings * [ ] Add your text for the Quote Heading and Subheading settings #### 3) Update the Image settings group * [ ] Upload your image to be used for this section #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. # 04 - Heading and Side Text This content section contains two columns for a heading and text ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FloAd0bIyEAEWY02gq9uH%2FScreen%20Shot%202022-01-15%20at%201.03.24%20PM.png?alt=media\&token=90c54e50-0ded-4828-a70d-0d6bb37a4e90) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/content) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Content (04)"** and add it to your page #### 2) Update the Headings settings groups * [ ] Add your text for the Heading and Summary settings #### 3) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 4) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. # 05 - Text & Image (Alternating) This content section alternates the text and images ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FgP32C6CxF4HKpSZtGMQT%2FScreen%20Shot%202022-01-15%20at%201.03.51%20PM.png?alt=media\&token=0fcf7a83-aad9-4b70-9b07-95c2ef3dcfe4) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/content) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Content (05)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Heading and Summary sections for both sections #### 3) Update the Image settings group * [ ] Upload your image to be used for this section #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. # Icons Sections ## Using the Icons Sections * [ ] **Make sure you have Sections Kit installed.** Check your app page inside of your Site Admin ex: and make sure you have "Sections Kit 💥 PowerUp" installed. If it is not listed there, head back to the member dashboard and install it. * [ ] Open up the page you would like to add a Section Kit section to and **first add the "Base Kit Section"**. You can also copy a Base kit section from another page if you have one already created. Be sure to read our guide on how Base kit works. * [ ] You can easily search for all banner sections by adding a section and search for ***"*****Kit: Icons*****"*** or you can search for a specific section to use by searching for it's Kit Id ex: ***Kit: Icons (01)*** ## Icons Sections {% embed url="" %} ### [01 - 3 Columns (icon on left) ](/kit-powerups/sections-kit/icons-sections/01-3-columns-icon-on-left) This icon section has 3 columns with the icon on the side of the text {% embed url="" %} ### [02 - 2 Column Cards](/kit-powerups/sections-kit/icons-sections/02-2-column-cards) This icon section has two columns and each icon block will look like a card {% embed url="" %} ### [03 - 4 Columns](/kit-powerups/sections-kit/icons-sections/03-4-columns) This icon section will place the icon blocks in 4 columns with the icon above the text {% embed url="" %} ### [04 - 3 Column Cards ](/kit-powerups/sections-kit/icons-sections/04-3-column-cards) This icon section will place the icon blocks in 3 columns with the icon on the side of the text {% embed url="" %} ### [05 - 5 Columns ](/kit-powerups/sections-kit/icons-sections/05-5-columns) This icon section will place the icon blocks in 5 columns {% embed url="" %} ### [06 - 3 Columns Motion Cards ](/kit-powerups/sections-kit/icons-sections/06-3-columns-motion-cards) This icon section will place the icon blocks in 3 columns and include a animation on hover {% embed url="" %} ### [07 - 3 Columns (icon on top) ](/kit-powerups/sections-kit/icons-sections/07-3-columns-icon-on-top) This icon section will place the icon blocks in 3 columns and the icon will be on top of the text {% embed url="" %} ### [08 - Circle Background ](/kit-powerups/sections-kit/icons-sections/08-circle-background) This icon section will place the icpn blocks in 3 columns with the icon placed in a circle background {% embed url="" %} ### [09 - 3 Columns Border Card ](/kit-powerups/sections-kit/icons-sections/09-3-columns-border-card) This icon section will place the icon blocks in 3 columns and include a color border on the top of each block {% embed url="" %} ### [10 - Tall Cards ](/kit-powerups/sections-kit/icons-sections/10-tall-cards) This icon section will place the icon blocks in 4 columns and include extra padding to make the icon blocks tall {% embed url="" %} ### [11 - 3 Columns Cards ](/kit-powerups/sections-kit/icons-sections/11-3-columns-cards) This icon section will place the icon blocks in 3 columns with the icon positioned on the left and above the text {% embed url="" %} ### [12 - 6 Columns ](/kit-powerups/sections-kit/icons-sections/12-6-columns) This icon section will place the icon blocks in 6 sections with the icon on top of a heading {% embed url="" %} ### [13 - 3 Columns Color Hover ](/kit-powerups/sections-kit/icons-sections/13-3-columns-color-hover) This icon section will place the icon blocks in 3 columns and have a hover animation # 01 - 3 Columns (icon on left) This icon section has 3 columns with the icon on the side of the text ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FBJUd1eSJwbp9d5hWS3dC%2FScreen%20Shot%202022-01-15%20at%202.06.36%20PM.png?alt=media\&token=b7471e58-5359-4b66-88e4-6d0119091e8b) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/icons) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Icons (01)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 8) Add icon block settings for each icon * [ ] Paste in your icon code ([check the icon guide)](/kit-usage-guides/smart-settings/icons) * [ ] Update the Heading and Summary settings {% hint style="info" %} Try to keep the length of characters used for both heading and summary settings the same across all of your icon groups settings so they line up {% endhint %} # 02 - 2 Column Cards This icon section has two columns and each icon block will look like a card ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FYj5rvWWZ10lnNTXf6xn6%2FScreen%20Shot%202022-01-15%20at%202.06.55%20PM.png?alt=media\&token=045ce30a-56fb-49d3-b3dc-5d09b0725499) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/icons) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Icons (02)"** and add it to your page #### #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 8) Add icon block settings for each icon * [ ] Paste in your icon code ([check the icon guide)](/kit-usage-guides/smart-settings/icons) * [ ] Update the Heading and Summary settings {% hint style="info" %} Try to keep the length of characters used for both heading and summary settings the same across all of your icon groups settings so they line up {% endhint %} # 03 - 4 Columns This icon section will place the icon blocks in 4 columns with the icon above the text ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Fm4wTehv4eVixUhPA9kXr%2FScreen%20Shot%202022-01-15%20at%202.07.05%20PM.png?alt=media\&token=a91295d7-3f31-4685-8504-00297168e9f4) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/icons) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Icons (03)"** and add it to your page #### #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 8) Add icon block settings for each icon * [ ] Paste in your icon code ([check the icon guide)](/kit-usage-guides/smart-settings/icons) * [ ] Update the Heading and Summary settings {% hint style="info" %} Try to keep the length of characters used for both heading and summary settings the same across all of your icon groups settings so they line up {% endhint %} # 04 - 3 Column Cards This icon section will place the icon blocks in 3 columns with the icon on the side of the text ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2F6z7lzE9juIKQipyuGPOD%2FScreen%20Shot%202022-01-15%20at%202.07.13%20PM.png?alt=media\&token=37f4117a-8e71-435b-80eb-fa292eaf998a) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/icons) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Icons (04)"** and add it to your page #### #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 8) Add icon block settings for each icon * [ ] Paste in your icon code ([check the icon guide)](/kit-usage-guides/smart-settings/icons) * [ ] Update the Heading and Summary settings {% hint style="info" %} Try to keep the length of characters used for both heading and summary settings the same across all of your icon groups settings so they line up {% endhint %} # 05 - 5 Columns This icon section will place the icon blocks in 5 columns ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FKQUwEjZpUwMpSgGpWCbm%2FScreen%20Shot%202022-01-15%20at%202.07.21%20PM.png?alt=media\&token=6c3ed919-fa9f-4efc-ad31-fb682cb9abea) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/icons) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Icons (05)"** and add it to your page #### #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 8) Add icon block settings for each icon * [ ] Paste in your icon code ([check the icon guide)](/kit-usage-guides/smart-settings/icons) * [ ] Update the Heading and Summary settings {% hint style="info" %} Try to keep the length of characters used for both heading and summary settings the same across all of your icon groups settings so they line up {% endhint %} # 06 - 3 Columns Motion Cards This icon section will place the icon blocks in 3 columns and include a animation on hover ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FxoaYplEmuHX0X795Jsi3%2FScreen%20Shot%202022-01-15%20at%202.07.32%20PM.png?alt=media\&token=94aa83e7-2c1f-4763-87c8-caba3abe8ae1) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/icons) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Icons (06)"** and add it to your page #### #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 8) Add icon block settings for each icon * [ ] Paste in your icon code ([check the icon guide)](/kit-usage-guides/smart-settings/icons) * [ ] Update the Heading and Summary settings {% hint style="info" %} Try to keep the length of characters used for both heading and summary settings the same across all of your icon groups settings so they line up {% endhint %} # 07 - 3 Columns (icon on top) This icon section will place the icon blocks in 3 columns and the icon will be on top of the text ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FtyibVVVxTYsF0yKcln9j%2FScreen%20Shot%202022-01-15%20at%202.28.15%20PM.png?alt=media\&token=5944f928-daa2-4735-afe7-c37ac07119e4) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/icons) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Icons (07)"** and add it to your page #### #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 8) Add icon block settings for each icon * [ ] Paste in your icon code ([check the icon guide)](/kit-usage-guides/smart-settings/icons) * [ ] Update the Heading and Summary settings {% hint style="info" %} Try to keep the length of characters used for both heading and summary settings the same across all of your icon groups settings so they line up {% endhint %} # 08 - Circle Background This icon section will place the icpn blocks in 3 columns with the icon placed in a circle background ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Fycq2clfYw28ibEL9RSVc%2FScreen%20Shot%202022-01-15%20at%202.07.56%20PM.png?alt=media\&token=dbc25cc7-8ac4-40d0-84d1-fe4cade0d8e0) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/icons) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Icons (08)"** and add it to your page #### #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 8) Add icon block settings for each icon * [ ] Paste in your icon code ([check the icon guide)](/kit-usage-guides/smart-settings/icons) * [ ] Update the Heading and Summary settings {% hint style="info" %} Try to keep the length of characters used for both heading and summary settings the same across all of your icon groups settings so they line up {% endhint %} # 09 - 3 Columns Border Card This icon section will place the icon blocks in 3 columns and include a color border on the top of each block ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FKIJeC82B4zYavwZLyDG2%2FScreen%20Shot%202022-01-15%20at%202.28.26%20PM.png?alt=media\&token=e196243d-8017-448a-8ce9-7e4a35d94c98) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/icons) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Icons (09)"** and add it to your page #### #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 8) Add icon block settings for each icon * [ ] Paste in your icon code ([check the icon guide)](/kit-usage-guides/smart-settings/icons) * [ ] Update the Heading and Summary settings {% hint style="info" %} Try to keep the length of characters used for both heading and summary settings the same across all of your icon groups settings so they line up {% endhint %} # 10 - Tall Cards This icon section will place the icon blocks in 4 columns and include extra padding to make the icon blocks tall ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FYN5FmopE8mCx6KPvltMS%2FScreen%20Shot%202022-01-15%20at%202.08.08%20PM.png?alt=media\&token=82954889-ec0a-4fba-8186-eb269b8faeac) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/icons) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Icons (10)"** and add it to your page #### #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 8) Add icon block settings for each icon * [ ] Paste in your icon code ([check the icon guide)](/kit-usage-guides/smart-settings/icons) * [ ] Update the Heading and Summary settings {% hint style="info" %} Try to keep the length of characters used for both heading and summary settings the same across all of your icon groups settings so they line up {% endhint %} # 11 - 3 Columns Cards This icon section will place the icon blocks in 3 columns with the icon positioned on the left and above the text ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Fhzge9iK35ugpe15VNh0z%2FScreen%20Shot%202022-01-15%20at%202.08.18%20PM.png?alt=media\&token=cc13fab9-f8c0-4ec5-9ebf-dbfc294520df) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/icons) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Icons (11)"** and add it to your page #### #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 8) Add icon block settings for each icon * [ ] Paste in your icon code ([check the icon guide)](/kit-usage-guides/smart-settings/icons) * [ ] Update the Heading and Summary settings {% hint style="info" %} Try to keep the length of characters used for both heading and summary settings the same across all of your icon groups settings so they line up {% endhint %} # 12 - 6 Columns This icon section will place the icon blocks in 6 sections with the icon on top of a heading ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FJ26dumegZLQRhbjoXdp6%2FScreen%20Shot%202022-01-15%20at%202.08.26%20PM.png?alt=media\&token=fb32d54a-00d8-4ca6-ad01-8b94dfdcc398) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/icons) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Icons (12)"** and add it to your page #### #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 8) Add icon block settings for each icon * [ ] Paste in your icon code ([check the icon guide)](/kit-usage-guides/smart-settings/icons) * [ ] Update the Heading and Summary settings {% hint style="info" %} Try to keep the length of characters used for both heading and summary settings the same across all of your icon groups settings so they line up {% endhint %} # 13 - 3 Columns Color Hover This icon section will place the icon blocks in 3 columns and have a hover animation ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FmJQKDjiapZ6h573BPZsz%2FScreen%20Shot%202022-01-15%20at%202.08.34%20PM.png?alt=media\&token=7c1de438-05f3-40ed-9658-476e29b5e76f) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/icons) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Icons (13)"** and add it to your page #### #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 8) Add icon block settings for each icon * [ ] Paste in your icon code ([check the icon guide)](/kit-usage-guides/smart-settings/icons) * [ ] Update the Heading and Summary settings {% hint style="info" %} Try to keep the length of characters used for both heading and summary settings the same across all of your icon groups settings so they line up {% endhint %} # Lists Sections ## Using the Lists Sections * [ ] **Make sure you have Sections Kit installed.** Check your app page inside of your Site Admin ex: and make sure you have "Sections Kit 💥 PowerUp" installed. If it is not listed there, head back to the member dashboard and install it. * [ ] Open up the page you would like to add a Section Kit section to and **first add the "Base Kit Section"**. You can also copy a Base kit section from another page if you have one already created. Be sure to read our guide on how Base kit works. * [ ] You can easily search for all banner sections by adding a section and search for ***"*****Kit: Lists*****"*** or you can search for a specific section to use by searching for it's Kit Id ex: ***Kit: Lists (01)*** ## Lists Sections {% embed url="" %} ### [01 - Centered List ](/kit-powerups/sections-kit/lists-sections/01-centered-list) This list section will be centered {% embed url="" %} ### [02 - List With Side Image ](/kit-powerups/sections-kit/lists-sections/02-list-with-side-image) This list section will place the text and list on the left side of an image {% embed url="" %} ### [03 - Centered Box With Background Image ](/kit-powerups/sections-kit/lists-sections/03-centered-box-with-background-image) This list section will place the list and headings in a box that will be centered on top of an background image {% embed url="" %} ### [04 - Lists On Side ](/kit-powerups/sections-kit/lists-sections/04-lists-on-side) This list section will place the list on the right side of the heading text {% embed url="" %} ### [05 - Full height with Image ](/kit-powerups/sections-kit/lists-sections/05-full-height-with-image) This list section will fill the screen height and place the list on the side of an image {% embed url="" %} ### [06 - Image in center ](/kit-powerups/sections-kit/lists-sections/06-image-in-center) This list section will place an image in the middle of the heading and list {% embed url="" %} ### [07 - Comparison List With Background Image ](/kit-powerups/sections-kit/lists-sections/07-comparison-list-with-background-image) This list section will contain two lists side by side over a background image {% embed url="" %} ### [08 - 3 Columns Text Only ](/kit-powerups/sections-kit/lists-sections/08-3-columns-text-only) This list section will place split the headings and list across 3 columns {% embed url="" %} ### [09 - 3 Column Cards ](/kit-powerups/sections-kit/lists-sections/09-3-column-cards) This list section will place the list into 3 column cards {% embed url="" %} ### [10 - Line Separated ](/kit-powerups/sections-kit/lists-sections/10-line-separated) This list section will place the list in 3 columns that are separated by a thin line {% embed url="" %} ### [11 - Lists Under Content ](/kit-powerups/sections-kit/lists-sections/11-lists-under-content) This list section will place the list in 3 columns under the main content area {% embed url="" %} ### [12 - Two Columns ](/kit-powerups/sections-kit/lists-sections/12-two-columns) This list section will place the list in two columns that will be centered on the page {% embed url="" %} ### [13 - Image & Block Quote ](/kit-powerups/sections-kit/lists-sections/13-image-and-block-quote) This list section will place the list on the side of an image and above a block quote # 01 - Centered List This list section will be centered ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2F5dehfT3b82fiI0XQA8Hf%2FScreen%20Shot%202022-01-15%20at%202.29.50%20PM.png?alt=media\&token=4e9a3bd4-6566-4873-8b8c-2f6440a42e5a) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/lists) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Lists (01)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Section settings group * [ ] Optionally modify the section style options for this section # 02 - List With Side Image This list section will place the text and list on the left side of an image ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FAMeEfGVWsmHrErJmxJ6L%2FScreen%20Shot%202022-01-15%20at%202.29.58%20PM.png?alt=media\&token=2691aea1-980d-43a9-928e-61ca3778b0f9) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/lists) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Lists (02)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 03 - Centered Box With Background Image This list section will place the list and headings in a box that will be centered on top of an background image ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FqtWbYZiACUgqJw91CVUO%2FScreen%20Shot%202022-01-15%20at%202.30.06%20PM.png?alt=media\&token=437de89a-2d70-4c41-b73f-9e12b602898e) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/lists) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Lists (03)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 04 - Lists On Side This list section will place the list on the right side of the heading text ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2F4t3iHNEKL1SBcrHM2vlN%2FScreen%20Shot%202022-01-15%20at%202.30.14%20PM.png?alt=media\&token=0abed608-8683-4207-ba70-bd939132ac98) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/lists) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Lists (04)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Section settings group * [ ] Optionally modify the section style options for this section # 05 - Full height with Image This list section will fill the screen height and place the list on the side of an image ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FtOdhWKTdfnagrlSwUYuC%2FScreen%20Shot%202022-01-15%20at%202.30.24%20PM.png?alt=media\&token=3210cdc9-1744-4a26-aca4-99382a432e34) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/lists) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Lists (05)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 07 - Comparison List With Background Image This list section will contain two lists side by side over a background image ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FlY0gu3AJZ8X4k3yEb6ji%2FScreen%20Shot%202022-01-15%20at%202.30.47%20PM.png?alt=media\&token=fe4b0f5b-789b-4504-9dd1-d9f867e9315f) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/lists) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Lists (07)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 08 - 3 Columns Text Only This list section will place split the headings and list across 3 columns ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Fhv0XGV5GAPAOBBUqg4o7%2FScreen%20Shot%202022-01-15%20at%202.30.55%20PM.png?alt=media\&token=c9232abb-42a2-49f0-99eb-2fa76b8ac99a) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/lists) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Lists (08)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Section settings group * [ ] Optionally modify the section style options for this section # 09 - 3 Column Cards This list section will place the list into 3 column cards ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FxRXgi2DfLs4xUdWFFOVw%2FScreen%20Shot%202022-01-15%20at%203.16.52%20PM.png?alt=media\&token=450c52a5-95cc-4d6d-8716-a42dba363a43) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/lists) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Lists (09)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 10 - Line Separated This list section will place the list in 3 columns that are separated by a thin line ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FauV0qa4j1TjT6Z7A5MZQ%2FScreen%20Shot%202022-01-15%20at%203.17.04%20PM.png?alt=media\&token=f164fd6e-ddc8-4ff9-8442-580809a67415) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/lists) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Lists (10)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Section settings group * [ ] Optionally modify the section style options for this section # 11 - Lists Under Content This list section will place the list in 3 columns under the main content area ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2F0HV3U8fbAovwAD5vEZod%2FScreen%20Shot%202022-01-15%20at%203.17.12%20PM.png?alt=media\&token=13f04f28-eb11-4be3-b1a2-e10ff6c16e24) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/lists) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Lists (11)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 12 - Two Columns This list section will place the list in two columns that will be centered on the page ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Fy24hHSf8KuTJOPyWUIB9%2FScreen%20Shot%202022-01-15%20at%203.17.19%20PM.png?alt=media\&token=8d8318e4-7c84-44a0-84db-9f0f3207d1ed) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/lists) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Lists (12)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Section settings group * [ ] Optionally modify the section style options for this section # 13 - Image & Block Quote This list section will place the list on the side of an image and above a block quote ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FlUprT0PuLPr9ctqBPPx3%2FScreen%20Shot%202022-01-15%20at%203.17.27%20PM.png?alt=media\&token=1efdd77d-3a96-448d-9cc1-eb28956d8362) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/lists) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Lists (13)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # 06 - Image in center This list section will place an image in the middle of the heading and list ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Fid3pk66ut34isnAXrvfj%2FScreen%20Shot%202022-01-15%20at%202.30.32%20PM.png?alt=media\&token=5a662772-4c22-43d2-a84d-147c8a88ae54) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/lists) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Lists (06)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Image settings group * [ ] Upload your image to be used for this section #### 5) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 7) Update the Section settings group * [ ] Optionally modify the section style options for this section # Modules Sections ## Using the Modules Sections * [ ] **Make sure you have Sections Kit installed.** Check your app page inside of your Site Admin ex: and make sure you have "Sections Kit 💥 PowerUp" installed. If it is not listed there, head back to the member dashboard and install it. * [ ] Open up the page you would like to add a Section Kit section to and **first add the "Base Kit Section"**. You can also copy a Base kit section from another page if you have one already created. Be sure to read our guide on how Base kit works. * [ ] You can easily search for all banner sections by adding a section and search for ***"*****Kit: Modules*****"*** or you can search for a specific section to use by searching for it's Kit Id ex: ***Kit: Modules (01)*** ## Modules Sections {% embed url="" %} ### [01 - Tabbed Content](/kit-powerups/sections-kit/modules-sections/01-tabbed-content) This module section shows the modules in a tabbed area {% embed url="" %} ### [02 - Big Image & Slider ](/kit-powerups/sections-kit/modules-sections/02-big-image-and-slider) This module section has a static image on the left and a slider to show all of the modules {% embed url="" %} ### [03 - 4 Column Hover Cards ](/kit-powerups/sections-kit/modules-sections/03-4-column-hover-cards) This module section places the modules in 4 columns and has a hover effect {% embed url="" %} ### [04 - 3 Column Overlay Cards ](/kit-powerups/sections-kit/modules-sections/04-3-column-overlay-cards) This module section places the modules in 3 columns and overlays the text on top of a background image {% embed url="" %} ### [05 - 4 Column Hide & Seek Cards ](/kit-powerups/sections-kit/modules-sections/05-4-column-hide-and-seek-cards) This module section places the modules in 4 columns and upon hover will reveal an image {% embed url="" %} ### [06 - 4 Column Cards With Circle Image ](/kit-powerups/sections-kit/modules-sections/06-4-column-cards-with-circle-image) This module section places the modules in 4 columns with a circle image and hover animation {% embed url="" %} ### [07 - 3 Column Tall Hover Cards ](/kit-powerups/sections-kit/modules-sections/07-3-column-tall-hover-cards) This module section places the modules in 3 columns with tall background image. Upon hover the module heading and subheading will be revealed {% embed url="" %} ### [08 - Slider Hover Cards ](/kit-powerups/sections-kit/modules-sections/08-slider-hover-cards) This module section will place the modules in a slider track {% embed url="" %} ### [09 - 4 Column Tall Zoom Cards ](/kit-powerups/sections-kit/modules-sections/09-4-column-tall-zoom-cards) This module section will place the modules in a 4 columns with the card being a tall card with background image. Upon hover, the image will zoom in. {% embed url="" %} ### [10 - 3 Column Cards Summary Hover ](/kit-powerups/sections-kit/modules-sections/10-3-column-cards-summary-hover) This module section will show the modules in 3 columns and show a summary on hover {% embed url="" %} ### [11 - 4 Column Tall Animated Cards ](/kit-powerups/sections-kit/modules-sections/11-4-column-tall-animated-cards) This module section will place the modules in 4 columns with tall cards. On hover, the text will slide up {% embed url="" %} ### [12 - 3 Column Cards ](/kit-powerups/sections-kit/modules-sections/12-3-column-cards) This module section will place the modules in 3 columns and reveal information on hover {% embed url="" %} ### [13 - Large Slider](/kit-powerups/sections-kit/modules-sections/13-large-slider) This module section will place the modules in a slider track with a large background image {% embed url="" %} ### [14 - 3 Column Hover Cards ](/kit-powerups/sections-kit/modules-sections/14-3-column-hover-cards) This module section will place the modules in 3 columns and show the subheading on hover {% embed url="" %} ### [15 - Module Outline ](/kit-powerups/sections-kit/modules-sections/15-module-outline) This module section shows the modules in a timeline view and has detailed expandable summaries # 01 - Tabbed Content This module section shows the modules in a tabbed area ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2F1VtF3IMoM2E6nqWCW4TJ%2FScreen%20Shot%202022-01-16%20at%209.44.18%20AM.png?alt=media\&token=ae452a85-942e-4e62-8f4d-7076391f731c) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (01)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 4) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 6) Add a Module Block setting for each module * [ ] Update all text settings for Headings, Summary and List settings * [ ] Upload the image to represent the module # 02 - Big Image & Slider This module section has a static image on the left and a slider to show all of the modules ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FueKNayHX2Nj1wFQSLvTE%2FScreen%20Shot%202022-01-16%20at%209.44.32%20AM.png?alt=media\&token=b6c12d3c-8c40-4a01-b307-f295e0955a26) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (02)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Image settings group * [ ] Upload your image to be used for this section #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 7) Update the Slider settings group * [ ] Update the Auto Advance and Delay settings #### 8) Add a Module Block setting for each module * [ ] Update all text settings for Subheading, Heading, Summary and List settings * [ ] Upload the image to represent the module # 03 - 4 Column Hover Cards This module section places the modules in 4 columns and has a hover effect ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2F6wzF8875EmNvJHUTDs4W%2FScreen%20Shot%202022-01-16%20at%209.44.43%20AM.png?alt=media\&token=bcbe9701-cb57-4a38-aad5-f39f5c8ffc1f) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (03)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 4) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 6) Add a Module Block setting for each module * [ ] Update all text settings for Headings, Summary and List settings * [ ] Upload the image to represent the module # 04 - 3 Column Overlay Cards This module section places the modules in 3 columns and overlays the text on top of a background image ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FBWV89F7k7plIzn0jVR7n%2FScreen%20Shot%202022-01-16%20at%209.44.52%20AM.png?alt=media\&token=82fc52f3-c6fc-423c-86e6-206a21aa8c77) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (04)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 4) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 6) Add a Module Block setting for each module * [ ] Update all text settings for Headings, Summary and List settings * [ ] Upload the image to represent the module # 05 - 4 Column Hide & Seek Cards This module section places the modules in 4 columns and upon hover will reveal an image ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FAKJPtddLPjmGtWQrkw0j%2FScreen%20Shot%202022-01-16%20at%209.45.02%20AM.png?alt=media\&token=9af7606f-7ac2-4a1e-9401-641c18f7ef4e) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (05)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 4) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 6) Add a Module Block setting for each module * [ ] Update all text settings for Headings, Summary and List settings * [ ] Upload the image to represent the module # 06 - 4 Column Cards With Circle Image This module section places the modules in 4 columns with a circle image and hover animation ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FKLdJaDxMH6VvAeQxqQKr%2FScreen%20Shot%202022-01-16%20at%209.45.13%20AM.png?alt=media\&token=8b087548-9a0d-47f8-8585-f43e5eab8612) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (06)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 4) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 6) Add a Module Block setting for each module * [ ] Update all text settings for Headings, Summary and List settings * [ ] Upload the image to represent the module # 07 - 3 Column Tall Hover Cards This module section places the modules in 3 columns with tall background image. Upon hover the module heading and subheading will be revealed ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FLOITXuAsG0TOvrw21lFt%2FScreen%20Shot%202022-01-16%20at%209.45.26%20AM.png?alt=media\&token=3f154087-0432-45ad-bc6d-301dd30abcb8) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (07)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 4) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 6) Add a Module Block setting for each module * [ ] Update all text settings for Headings, Summary and List settings * [ ] Upload the image to represent the module # 08 - Slider Hover Cards This module section will place the modules in a slider track ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FM7Q7WVwvFhCwpxTE8pdP%2FScreen%20Shot%202022-01-16%20at%209.45.40%20AM.png?alt=media\&token=c1838d7b-b828-473b-8c97-961a71059a2b) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (08)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Image settings group * [ ] Upload your image to be used for this section #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 7) Update the Slider settings group * [ ] Update the Auto Advance and Delay settings #### 8) Add a Module Block setting for each module * [ ] Update all text settings for Subheading, Heading, Summary and List settings * [ ] Upload the image to represent the module # 09 - 4 Column Tall Zoom Cards This module section will place the modules in a 4 columns with the card being a tall card with background image. Upon hover, the image will zoom in. ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FnGBZalwl2ZPFJK3xbYT5%2FScreen%20Shot%202022-01-16%20at%209.45.50%20AM.png?alt=media\&token=565dcaed-a36b-45d9-8c0f-c5fd9d9c073f) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (09)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 4) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 6) Add a Module Block setting for each module * [ ] Update all text settings for Headings, Summary and List settings * [ ] Upload the image to represent the module # 10 - 3 Column Cards Summary Hover This module section will show the modules in 3 columns and show a summary on hover ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FFh9MDOslS3wq0VBTOQ8w%2FScreen%20Shot%202022-01-16%20at%209.45.59%20AM.png?alt=media\&token=ca35edd9-55ad-463c-b192-becd0af798a2) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (10)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 4) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 6) Add a Module Block setting for each module * [ ] Update all text settings for Headings, Summary and List settings * [ ] Upload the image to represent the module # 11 - 4 Column Tall Animated Cards This module section will place the modules in 4 columns with tall cards. On hover, the text will slide up ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2F8NVTFWAU1Aq3c7h90eiu%2FScreen%20Shot%202022-01-16%20at%209.46.08%20AM.png?alt=media\&token=8b1224b7-458b-4c09-93d3-f7665424bd8b) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (11)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 4) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 6) Add a Module Block setting for each module * [ ] Update all text settings for Headings, Summary and List settings * [ ] Upload the image to represent the module # 12 - 3 Column Cards This module section will place the modules in 3 columns and reveal information on hover ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2F1QQhxdl68SCERTesUqSG%2FScreen%20Shot%202022-01-16%20at%209.46.20%20AM.png?alt=media\&token=945aac08-5e02-4335-a4a9-d134a6ccbb82) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (12)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 4) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 6) Add a Module Block setting for each module * [ ] Update all text settings for Headings, Summary and List settings * [ ] Upload the image to represent the module # 13 - Large Slider This module section will place the modules in a slider track with a large background image ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Fhw0Qdp7SyEvTNgqa5kLC%2FScreen%20Shot%202022-01-16%20at%209.46.33%20AM.png?alt=media\&token=120a1d27-29b5-4f92-a07f-654376229ca0) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (13)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Image settings group * [ ] Upload your image to be used for this section #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 7) Update the Slider settings group * [ ] Update the Auto Advance and Delay settings #### 8) Add a Module Block setting for each module * [ ] Update all text settings for Subheading, Heading, Summary and List settings * [ ] Upload the image to represent the module # 14 - 3 Column Hover Cards This module section will place the modules in 3 columns and show the subheading on hover ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FZ8c5O8IbROgGi0xPSuDn%2FScreen%20Shot%202022-01-16%20at%209.46.44%20AM.png?alt=media\&token=4728412d-8a94-452b-8ac5-cbbb5a393db3) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (14)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 4) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 6) Add a Module Block setting for each module * [ ] Update all text settings for Headings, Summary and List settings * [ ] Upload the image to represent the module # 15 - Module Outline This module section shows the modules in a timeline view and has detailed expandable summaries {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/modules) and see this super power in action {% endhint %} ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FBeXjd9BwhMcDKlZnWl9U%2FScreen%20Shot%202022-01-16%20at%209.46.56%20AM.png?alt=media\&token=f2528507-ed9e-4a68-b2ce-23f885a0cb11) ### How to use this super power {% hint style="warning" %} This super power works a bit differently than others. It requires a minimum of two page sections. The "main" section is **Kit: Modules (15)** there should only be one of these. Additional sections for each module group would be added through individual section: **KIT: Modules (15 detail)** {% endhint %} #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Modules (15)"** and add it to your page. There should only be one of these sections on a page. #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings #### 3) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 4) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 6) Add a page section **"Kit: Modules (15 Detail)"** for each module * [ ] Update all text settings for Headings, Summary for the module summary section * [ ] Add a Module block setting for each module * [ ] Update all settings for Heading, Summary and Label. * [ ] Upload the image to be used for the module * [ ] Add additional page sections **"Kit: Modules (15 Detail)"** and repeat the process # Pricing Sections Kit's pricing sections contains page sections for a variety of pricing scenarios. The pricing section is the main call to action for your course sales and have been designed with conversion and flexibility in mind. ### What Super Power Pricing Sections Are Included * [**01 - Single CTA With Accent Text**](/kit-powerups/sections-kit/pricing-sections/01-single-cta-with-accent-text) - This pricing section includes a big bold single call to action with some accent text that points to the sign up button * [**02 - Two Pricing Plans**](/kit-powerups/sections-kit/pricing-sections/02-two-pricing-plans) - This pricing section is great to use when you have two simple choices for purchase (ex: Pay in Full or Payment Plan) * [**03 - Value Stack**](/kit-powerups/sections-kit/pricing-sections/03-value-stack-single-cta) - Single CTA This pricing section is perfect to summarize the value of a "bundle". You could also use it for a single course and highlight the values of the bonuses included. * [**04 - Summary Stack Single CTA With GIF**](/kit-powerups/sections-kit/pricing-sections/04-summary-stack-single-cta-with-gif) - This pricing section is perfect to summarize the value and includes a GIF mockup option * [**05 - Slide In Comparison**](/kit-powerups/sections-kit/pricing-sections/05-slide-in-comparison-two-plans) - Two Plans This section is great when you want to add more detail between two plans. It also includes a "slide in effect" when the section is shown to the reader. * [**06 -Simple Two Plan CTA With Background Image**](/kit-powerups/sections-kit/pricing-sections/06-simple-two-plan-cta-with-background-image) - This pricing section is great to use multiple times on a page where you may have two simple purchase options. * [**07 - Single vs Membership Compare With Bonus Sections**](/kit-powerups/sections-kit/pricing-sections/07-single-vs-membership-compare-with-bonus-sections) - This perfect to be used on courses pages where you may also have a membership option * [**08-Single CTA With GIF Mockup**](/kit-powerups/sections-kit/pricing-sections/08-single-cta-with-gif-mockup) - This pricing section is a blend of a simple single CTA along with a mockup image and section heading * [**09 - Multi Column Comparison**](/kit-powerups/sections-kit/pricing-sections/09-multi-column-comparison) - This section is perfect when you have three pricing options to compare. Each pricing column includes any easy to read and compare checklist # Adding a Pricing Super Power to a Page ### Step 1: Make sure you have Sections Kit installed Check your app page inside of your Site Admin *ex: * and make sure you have **"Sections Kit 💥 PowerUp" installed**. If it is not listed there, head back to the member dashboard and install it. ### Step 2: Add Base Kit to your page Open up the page you would like to add a Promo section to and first add the "Base Kit Section". You can also copy a Base kit section from another page if you have one already created. [Be sure to read our guide on how Base kit works.](/kit-powerups/kit-common-sections/base-kit) {% embed url="" %} ### Step 3: Add a Pricing section to the page You can easily search for all sections by adding a section and **search for "Kit: Pricing"** or you can search for a specific section to use by **searching for it's Kit Id *****ex: Kit: Pricing (01)*** {% embed url="" %} ### Step 4: Update the Pricing Section Settings After you have added your pricing section to your page, be sure to update the default settings to control the behavior, text, media, links, etc and configure it to the way you want it to look. Each section will contain its own settings. There will be consistency across all of the Kit collection by grouping the settings into common groups (ex; Headings, etc) ***Be sure to check the guide on the section you decided to use for any specific instructions.*** {% embed url="" %} # 01 - Single CTA With Accent Text This pricing section includes a big bold single call to action with some accent text that points to the sign up button {% embed url="" %} {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/pricing) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Pricing Sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Pricing (01)"** and add it to your page #### 2) Update the headings settings * [ ] Open the **headings settings group** and add the text you would like to use. There is is text for the heading over the price, the price and the accent text next to the box. #### 3) Update the button settings * [ ] Open the **Button settings group** and configure the style, text and link that the button will use. #### 4) Choose the styles you would like to use * [ ] Update the styles and colors that will be used for the **text, background and button setting groups**. Be sure to [check the guide](/kit-powerups/kit-common-sections/base-kit) on how to use named colors, custom fonts and more. {% hint style="success" %} **🔥PRO TIP:** This section uses a built in script accent font that is used for the text next to the main content area. You may need to insert line breaks to stack up your words. be short and sweet, it is not meant to be an area for a novel. We want it to subtlety point to the main CTA (the button) {% endhint %} # 02 - Two Pricing Plans This pricing section is great to use when you have two simple choices for purchase (ex; Pay in Full or Payment Plan) {% embed url="" %} {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/pricing) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Pricing Sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Pricing (02)"** and add it to your page #### 2) Update the headings settings * [ ] Open the **headings settings group (left and right)** and add the text you would like to use. There is a group of settings for the left side and one for the right side. * [ ] Add the text and page that the button will use for each group #### 3) Update the button settings * [ ] Open the **Button settings group** and configure the style, text and link that the button will use. #### 4) Choose the styles you would like to use * [ ] Update the styles and colors that will be used for the **text, background and button setting groups**. Be sure to [check the guide](/kit-powerups/kit-common-sections/base-kit) on how to use named colors, custom fonts and more. {% hint style="success" %} **🔥PRO TIP:** If you have a longer form sales page, you may want to repeat this section multiple times at key points so that the purchase options are easily available {% endhint %} # 03 - Value Stack - Single CTA This pricing section is perfect to summarize the value of a "bundle". You could also use it for a single course and highlight the values of the bonuses included. {% embed url="" %} {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/pricing) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Pricing Sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Pricing (03)"** and add it to your page #### 2) Update the headings settings * [ ] Open the **headings settings group** and add the text you would like to use. * [ ] Add an item included in the bundle on a line inside the **List settings**. These will automatically alternate between the left and right columns. * [ ] Update the **icon** that is used if you wish to change it. Be sure to reference the [icon guide ](/kit-usage-guides/smart-settings/icons)for instructions on how to choose from over 7000 icons. * [ ] Be sure to update the Price text for both the actual price and the stroke price. *You must enter these manually.* #### 3) Update the button settings * [ ] Open the **Button settings group** and configure the style, text and link that the button will use. #### 4) Update the image * [ ] We have included a [free Canva mockup](https://www.canva.com/design/DAEs5IoBu-g/lzcReuW1uhmO0RVH81LZ4w/view?utm_content=DAEs5IoBu-g\&utm_campaign=designshare\&utm_medium=link\&utm_source=sharebutton\&mode=preview) for the image that is used for this section. You can use this template or provide an image of you own. Be sure to read our [Using Canva Templates guide](/kit-usage-guides/media/canva-templates) #### 5) Choose the styles you would like to use * [ ] Update the styles and colors that will be used for the **text, background and button setting groups**. Be sure to [check the guide](/kit-powerups/kit-common-sections/base-kit) on how to use named colors, custom fonts and more. {% hint style="success" %} **🔥PRO TIP:** The main benefit of this section is for your reader to be reminded of the value that they are getting. The image mockup we used communicates this by including screenshots or mockups of everything that is included. In the list of items, it is recommended that each item has a "value" listed. {% endhint %} # 04 - Summary Stack Single CTA With GIF This pricing section is perfect to summarize the value and includes a GIF mockup option {% embed url="" %} {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/pricing) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Pricing Sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Pricing (04)"** and add it to your page #### 2) Update the headings settings * [ ] Open the **headings settings group** and add the text you would like to use. * [ ] Add an item included in the bundle on a line inside the **List settings**. These will automatically alternate between the left and right columns. * [ ] Update the **icon** that is used if you wish to change it. Be sure to reference the [icon guide ](/kit-usage-guides/smart-settings/icons)for instructions on how to choose from over 7000 icons. * [ ] Be sure to update the Price text for both the actual price and the stroke price. *You must enter these manually.* #### 3) Update the button settings * [ ] Open the **Button settings group** and configure the style, text and link that the button will use. #### 4) Update the image * [ ] We have included a[ free Canva mockup](https://www.canva.com/design/DAEs6i1T5KU/g7ZmiT-AcQvKEkkxA9mOKw/view?utm_content=DAEs6i1T5KU\&utm_campaign=designshare\&utm_medium=link\&utm_source=sharebutton\&mode=preview) for the image that is used for this section. You can use this template or provide an image of you own. Be sure to read our [Using Canva Templates guide](/kit-usage-guides/media/canva-templates) * [ ] One of the mockups also allows you to use a GIF over one of the mockups to create some movement and capture your readers attention. Be sure to check out [media guide on using GIF's](/kit-usage-guides/media) #### 5) Choose the styles you would like to use * [ ] Update the styles and colors that will be used for the **text, background and button setting groups**. Be sure to [check the guide](/kit-powerups/kit-common-sections/base-kit) on how to use named colors, custom fonts and more. {% hint style="success" %} **🔥PRO TIP:** This section is like Pricing -03 where our goal is to remind the reader of the value that they are getting. The image mockup includes a quick and easy way to add a GIF on top of the mockup. You can create a GIF using our [Canva Media guide](/kit-usage-guides/media/canva-templates) {% endhint %} # 05 - Slide In Comparison - Two Plans This section is great when you want to add more detail between two plans. It also includes a "slide in effect" when the section is shown to the reader. {% embed url="" %} {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/pricing) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Pricing Sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Pricing (05)"** and add it to your page #### 2) Update the headings settings * [ ] Open the **headings settings group (left and right)** and add the text you would like to use. There is a group of settings for the left side and one for the right side. * [ ] Each pricing section has a **list** setting where you can enter the list of items to include by placing on one each line*.* * [ ] Add the text and page that the button will use for each group #### 3) Update the button settings * [ ] Open the **Button settings group** and configure the style, text and link that the button will use. #### 4) Choose the styles you would like to use * [ ] Update the styles and colors that will be used for the **text, background and button setting groups**. Be sure to [check the guide](/kit-powerups/kit-common-sections/base-kit) on how to use named colors, custom fonts and more. {% hint style="success" %} **🔥PRO TIP:** Consider "anchor pricing" strategies to push your readers to your "preferred plan". The idea behind this is to make it a "no brainer". You may also want to include other benefits beyond just a "price difference'. This could include additional access to content or community. Early release content or discount on additional products. {% endhint %} # 06 -Simple Two Plan CTA With Background Image This pricing section is great to use multiple times on a page where you may have two simple purchase options. {% embed url="" %} {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/pricing) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Pricing Sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Pricing (06)"** and add it to your page #### 2) Update the button settings * [ ] For each of the two buttons, update the text and the page being used for the button #### 3) Update the image settings * [ ] Open the **Image settings group** and upload the image to be used for the background. This image will fill the entire space and be cropped automatically. #### 4) Choose the styles you would like to use * [ ] Update the styles and colors that will be used for the **text, background and button setting groups**. Be sure to [check the guide](/kit-powerups/kit-common-sections/base-kit) on how to use named colors, custom fonts and more. {% hint style="success" %} **🔥PRO TIP:** If you have a longer form sales page, you may want to repeat this section multiple times at key points so that the purchase options are easily available {% endhint %} # 07 - Single vs Membership Compare With Bonus Sections This perfect to be used on courses pages where you may also have a membership option {% embed url="" %} {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/pricing) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Pricing Sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Pricing (07)"** and add it to your page #### 2) Update the headings settings * [ ] Open the **Section Heading group** and add the text you would like to use. * [ ] There are optional sections for a "large box" and "3 smaller boxes" where you can point out key aspects of the options *(for example trials, money back guarantees, etc)* #### 3) Update the pricing columns * [ ] For each pricing column (left and right) you can provide text and an image for each option. #### 4) Choose the styles you would like to use * [ ] Update the styles and colors that will be used for the **text, background and button setting groups**. Be sure to [check the guide](/kit-powerups/kit-common-sections/base-kit) on how to use named colors, custom fonts and more. {% hint style="success" %} **🔥PRO TIP:** Consider "anchor pricing" strategies to push your readers to your "preferred plan". The idea behind this is to make it a "no brainer". You may also want to include other benefits beyond just a "price difference'. This could include additional access to content or community. Early release content or discount on additional products. {% endhint %} # 08-Single CTA With GIF Mockup This pricing section is a blend of a simple single CTA along with a mockup image and section heading {% embed url="" %} {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/pricing) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Pricing Sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Pricing (08)"** and add it to your page #### 2) Update the headings settings * [ ] Open the **headings settings group** and add the text you would like to use. There is is text for the heading over the price, the price and the accent text next to the box. #### 3) Update the button settings * [ ] Open the **Button settings group** and configure the style, text and link that the button will use. #### 4) Update the image * [ ] We have included a [free Canva mockup](https://www.canva.com/design/DAEs6i1T5KU/g7ZmiT-AcQvKEkkxA9mOKw/view?utm_content=DAEs6i1T5KU\&utm_campaign=designshare\&utm_medium=link\&utm_source=sharebutton\&mode=preview) for the image that is used for this section. You can use this template or provide an image of you own. Be sure to read our [Using Canva Templates guide](/kit-usage-guides/media/canva-templates) * [ ] One of the mockups also allows you to use a GIF over one of the mockups to create some movement and capture your readers attention. Be sure to check out [media guide on using GIF's](/kit-usage-guides/media) #### 4) Choose the styles you would like to use * [ ] Update the styles and colors that will be used for the **text, background and button setting groups**. Be sure to [check the guide](/kit-powerups/kit-common-sections/base-kit) on how to use named colors, custom fonts and more. {% hint style="success" %} **🔥PRO TIP:** This section great to use as an "introducing..." section or at the bottom of your sales page. It quickly communicates value to your reader with the eye catching mockup image and also as a simple large single call to action with accent text pointing to it. {% endhint %} # 09 - Multi Column Comparison This section is perfect when you have three pricing options to compare. Each pricing column includes any easy to read and compare checklist {% embed url="" %} {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page](https://powerupkit.thinkific.com/pages/pricing) and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Pricing Sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the **Base kit Section** that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Pricing (09)"** and add it to your page #### 2) Add a block setting for each pricing column the headings settings * [ ] This section supports up to 3 pricing blocks. Add a block setting for each column. * [ ] Each pricing section has a **list** setting where you can enter the list of items to include by placing on one each line*.* * [ ] Add the text and page that the button will use for each group #### 3) Update the button settings * [ ] Open the **Button settings group** and configure the style, text and link that the button will use. #### 4) Choose the styles you would like to use * [ ] Update the styles and colors that will be used for the **text, background and button setting groups**. Be sure to [check the guide](/kit-powerups/kit-common-sections/base-kit) on how to use named colors, custom fonts and more. {% hint style="success" %} **🔥PRO TIP:** Consider "anchor pricing" strategies to push your readers to your "preferred plan". The idea behind this is to make it a "no brainer". You may also want to include other benefits beyond just a "price difference'. This could include additional access to content or community. Early release content or discount on additional products. {% endhint %} # Social Proof Sections ## Using the Social Proof Sections * [ ] **Make sure you have Sections Kit installed.** Check your app page inside of your Site Admin ex: and make sure you have "Sections Kit 💥 PowerUp" installed. If it is not listed there, head back to the member dashboard and install it. * [ ] Open up the page you would like to add a Section Kit section to and **first add the "Base Kit Section"**. You can also copy a Base kit section from another page if you have one already created. Be sure to read our guide on how Base kit works. * [ ] You can easily search for all banner sections by adding a section and search for ***"*****Kit: Social Proof*****"*** or you can search for a specific section to use by searching for it's Kit Id ex: ***Kit: Social Proof (01)*** ## Social Proof Sections {% embed url="" %} ### [01 - 3 Columns & Small Image On Bottom ](/kit-powerups/sections-kit/social-proof-sections/01-3-columns-and-small-image-on-bottom) This social proof section places the content into 3 columns with a small image on the bottom {% embed url="" %} ### [02 - 3 Columns & Image On Top ](/kit-powerups/sections-kit/social-proof-sections/02-3-columns-and-image-on-top) This social proof section places the content into 3 columns with a large image on the top {% embed url="" %} ### [03 - 3 Columns & Small Image On Top](/kit-powerups/sections-kit/social-proof-sections/03-3-columns-and-small-image-on-top) This social proof section places the content into 3 columns with a small image on the top {% embed url="" %} ### [04 - 3 Columns Images (Screenshots) ](/kit-powerups/sections-kit/social-proof-sections/04-3-columns-images-screenshots) This social proof section places the content into 3 columns for screenshot images {% embed url="" %} ### [05 - Slider & Big Image ](/kit-powerups/sections-kit/social-proof-sections/05-slider-and-big-image) This social proof section puts the content into a slider with a big circle image on top {% embed url="" %} ### [06 - Slider With Quote On Side ](/kit-powerups/sections-kit/social-proof-sections/06-slider-with-quote-on-side) This social proof section places the content on a slider to the right of the heading {% embed url="" %} ### [07 - Slider Cards With Image On Top](/kit-powerups/sections-kit/social-proof-sections/07-slider-cards-with-image-on-top) This social proof section places the content in a slider with one slide showing on top of the other cards {% embed url="" %} ### [08 - Slider With Image on Side ](/kit-powerups/sections-kit/social-proof-sections/08-slider-with-image-on-side) This social proof section places the content in a centered slider with the image on the side {% embed url="" %} ### [09 - Slider With Small Image On Top](/kit-powerups/sections-kit/social-proof-sections/09-slider-with-small-image-on-top) This social proof section places the content in a slider with a small image on the top {% embed url="" %} ### [10 - Slider With Large Quote ](/kit-powerups/sections-kit/social-proof-sections/10-slider-with-large-quote) This social proof section places the content on a slider with just text {% embed url="" %} ### [11 - Slider With Small Image On Bottom ](/kit-powerups/sections-kit/social-proof-sections/11-slider-with-small-image-on-bottom) This social proof section places the content on a slider with the image on the bottom {% embed url="" %} ### [12 - 3 Columns Just Text ](/kit-powerups/sections-kit/social-proof-sections/12-3-columns-just-text) This social proof section places the content in 3 columns and just uses text only {% embed url="" %} ### [13 - Video testimonials](/kit-powerups/sections-kit/social-proof-sections/13-video-testimonials) This social proof section places the content in 3 columns and is for showcasing your video testimonials # 01 - 3 Columns & Small Image On Bottom This social proof section places the content into 3 columns with a small image on the bottom ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FDwIohWkYBtFP6xWmAzVO%2FScreen%20Shot%202022-01-16%20at%209.55.07%20AM.png?alt=media\&token=baa665fc-e39b-4814-8a1c-15abc167aefd) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/social-proof)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Social Proof (01)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 7) Add Testimonial block settings * [ ] Add a Testimonial block setting for each testimonial * [ ] Update all Quote, Name, Subheading settings with your text * [ ] Upload an image # 02 - 3 Columns & Image On Top This social proof section places the content into 3 columns with a large image on the top ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FZBxgpQZJzYVjuPwbmZPP%2FScreen%20Shot%202022-01-16%20at%209.55.36%20AM.png?alt=media\&token=f140d3e2-bd32-4a8f-807c-910274180e8e) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/social-proof)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Social Proof (02)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 7) Add Testimonial block settings * [ ] Add a Testimonial block setting for each testimonial * [ ] Update all Quote, Name, Subheading settings with your text * [ ] Upload an image # 03 - 3 Columns & Small Image On Top This social proof section places the content into 3 columns with a small image on the top ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Fzh5XeHPYeH1Y0gD3ykLa%2FScreen%20Shot%202022-01-16%20at%209.55.57%20AM.png?alt=media\&token=55f198f6-7f00-4524-b212-ebdde805b46c) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/social-proof)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Social Proof (03)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 7) Add Testimonial block settings * [ ] Add a Testimonial block setting for each testimonial * [ ] Update all Quote, Name, Subheading settings with your text * [ ] Upload an image # 04 - 3 Columns Images (Screenshots) This social proof section places the content into 3 columns for screenshot images ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FV9CppuPqWXfgXcsJAQwZ%2FScreen%20Shot%202022-01-16%20at%209.56.22%20AM.png?alt=media\&token=6c87f300-e7a5-48e8-a990-c98294ab6c71) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/social-proof)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Social Proof (04)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 7) Add Testimonial block settings * [ ] Add a Testimonial block setting for each testimonial * [ ] Upload an image # 05 - Slider & Big Image This social proof section puts the content into a slider with a big circle image on top ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FziRkvPNB0gvE2mTo2ZBY%2FScreen%20Shot%202022-01-16%20at%209.56.58%20AM.png?alt=media\&token=6f10ded8-0708-4651-a323-664dc4cab36e) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/social-proof)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Social Proof (05)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 7) Add Testimonial block settings * [ ] Add a Testimonial block setting for each testimonial * [ ] Update all Quote, Name, Subheading settings with your text * [ ] Upload an image # 06 - Slider With Quote On Side This social proof section places the content on a slider to the right of the heading ![](https://2099227007-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FJDfFqUH2cysXl925kojS%2FScreen%20Shot%202022-01-16%20at%209.57.18%20AM.png?alt=media\&token=b118ebf7-cc5f-4c3b-a0ef-6b1bcff1a460) {% hint style="info" %} **EXPERIENCE IT:** [Head over to the demo page ](https://powerupkit.thinkific.com/pages/social-proof)and see this super power in action {% endhint %} ### How to use this super power #### 1) Add the Sections Kit sections to the page * [ ] Make sure you have the **Sections Kit** installed into your site * [ ] On a site page, add (or copy) the [**Base kit Section**](/kit-powerups/kit-common-sections/base-kit) that is included with all of our Kit PowerUps. The Base Kit section contains the style choices that will be used on this page for all other Kit sections. * [ ] Add a section and search for **"Kit: Social Proof (06)"** and add it to your page #### 2) Update the Headings settings group * [ ] Add your text for the Subheading and Heading settings * [ ] Update the List setting with your list text. Each line of the text will be a new list item * [ ] Update the Icon setting with an [icon code](/kit-usage-guides/smart-settings/icons) #### 3) Update the Button settings group * [ ] Choose the text for your button (leave blank for hiding the button) * [ ] Choose your button color scheme (colors and style come from the [Base Kit settings](/kit-powerups/kit-common-sections/base-kit#buttons)) * [ ] Choose your button type * [ ] *Page Pricing section* - this will move the page to the [Kit Pricing section](/kit-powerups/sections-kit/pricing-sections) (must exist on the page) * [ ] *Funnel Kit Opt In* - this will trigger a popup based on the [Funnel Kit Opt In section](/kit-powerups/kit-common-sections/funnel-kit-opt-in) that exists on the page (additional section required) * [ ] *Custom Page* - this will use the Custom Page settings right below this option for the button #### 4) Update the Text styles settings group * [ ] Select the color scheme to be used for the text in this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 5) Update the Background Color settings group * [ ] Select the color scheme to be used for background color to be used by this section. The colors and style are set using the [Base Kit](/kit-powerups/kit-common-sections/base-kit) that has been placed on this page. #### 6) Update the Section settings group * [ ] Optionally modify the section style options for this section #### 7) Add Testimonial block settings * [ ] Add a Testimonial block setting for each testimonial * [ ] Update all Quote, Name, Subheading settings with your text * [ ] Upload an image --- [Next Page](https://docs-kit.superpowerups.com/llms-full.txt/1)