1.Overview

Kidstar is a free HubSpot theme specially designed for kids’ preschool education, kindergarten, child and baby care, schooling, creche, kids’ accessories & toys, children’s activities, and elementary and primary school or small children’s education crowdfunding-related websites.     With the Kidstar HubSpot theme you get:
  • Designed for Conversion
  • Complete Design Control
  • Perfect For Small Screens
  • Pre-built Pages and Blogs
  • 100% committed to HubSpot CMS Hub standards
  • Clean and beautiful design
The Kidstar theme is easy to work with. However, if you need any assistance with the setup and installation, connect with us for a free 30 minutes session.

1.1.What’s Included?

Kidstar HubSpot theme offers,

  1. Modules – 22
  2. Sections – 6
  3. Templates – 8
  4. Blog – 2
  5. System Pages – 7

If you want us to add any module or curate a template for you, talk to our experts, share your requirements and we’ll get it done as soon as possible.

1.2.Edit Theme Settings

To access the theme settings, you first need to create a page > edit page option > theme > edit theme settings


From the edit theme setting you will find the following:

1.2.1.Global Color And Font Setting

Global Colors setting lets you configure primary color, body backgrounds, and heading colors.

Similarly, the Global Fonts setting lets you change the Heading font and Body font of the theme.

1.2.2.Typography

This setting lets you tweak the headings from H1 to H6 along with the body and links.

The H1 to body submenu of the typography has options to select desktop font, adjust line height in pixels, alter letter spacing, and text transformation. For mobile devices, you can change the font size, line height, and letter spacing of the theme. You can change the normal and hover color of the links too.

1.2.3.Buttons



You’ll find the following settings here:

  • Button: Includes option to edit button text, spacing, corner radius, and enabling animation.
  • Dark: Includes the option to change normal hover and active button font, text color, background color, and border style for the filled and outlined button.
  • Light: Change the light-filled button text background border color for normal, active, and hover cases.

1.2.4.Forms

The following sections of the form have these mentioned settings for forms:

  • Titles: Edit text (font, line height, letter spacing, text transformation), background color, spacing, and corner radius. The border-radius only alters the top left and top right of the title.
  • Labels: You can edit the text and spacing of the form labels.
  • Help text: Change the font of the help text on forms.
  • Fields: Change the font of the GDPR Text and Rich Text, alter border-radius, change border color on focus, border style, spacing, background color, text, and placeholder color of the input fields.   
  • Form: Alter form background color, mobile and desktop spacing, border style, and corner radius of the form.
  • Error Messages: Change font, alter spacing, and border color of the error messages.

1.2.5.Tables

The tables option has a further 4 sub-options.

  • Table Header: Change table header text color and background color
  • Table Body: Change table body text color and background color.
  • Table Footer: Change table footer text color and background color. 
  • Table Cells: Change spacing, padding, and border of table cells.   

1.2.6.Website Header

 

The website header has a further 5 sub-options:

  • Header Top: Enable or disable the header top.
  • Header Bottom: Enable or disable header bottom
  • Box shadow: Enable or disable box shadow and change the box shadow color.
  • Background: Change the header background color
  • Menu: Desktop (change fonts, line height, text transformation) and mobile (font size and line height) text settings, change drop-down color, hover text & background color, and active text font color.  

1.2.8.Spacing

You can adjust the maximum content width, along with the horizontal spacing and vertical spacings for both desktop and mobile devices.

1.2.9.System Page Setting

You can use the system page settings to make changes to system pages. There are 4 settings here,

  • Error Page Setting (404): Enable/disable the error image, and change the error banner image from here.
  • Error Page Setting (500): Enable/disable the error image, and change the error banner image from here.
  • Backup Unsubscribe: Enable/disable the banner image, and change the backup unsubscribe banner image from here.
  • Password Prompt: Enable/disable the password prompt image, and change the password prompt banner from here.

1.2.10.Blog Settings


 

You can configure the blog post settings here. There are 2 settings in this section:

  • Sidebar: Enable or disable the sidebar on the blog from here.
  • Blog Post: You can show/hide the author name, image, timestamp, tags, and related posts from here.

2.Theme Modules

Kidstar Preschool HubSpot theme has the following 22 modules:

2.1.Accordion

The accordion module enables you to add questions on your landing pages along with their answers. 

You can add multiple accordions, and choose the icon position from the left and right options.

You can also edit, clone, or delete each accordion. There are options to edit the title, and content and to replace or remove the accordion opening and closing icon.

 

Front the style tab you can change the styles of the accordion, title, and content and overwrite the accordion icon color.

 

You can change the

  • accordion background color, spacing, border radius, and box-shadow
  • title font and spacing, content font and spacing     
  • Overwrite icon color settings

2.3.Blog Listing

The blog listing module lists down the blogs on your website. As you can notice there are also some additional elements on the sidebar.

You can check the blog listing module on the blog listing page. For accessing the blog listing page:

Go the marketing > website > blog. From the left panel select blog listing pages and select the Kidstar blog listing page > Click edit and you will find the blog listing template.

 

Settings on the blog listing module include,

  • Editing category title.
  • Enable or disable blog meta information like feature image, tags, title, author, publish date, description, and button. You can also edit the button text from here itself.    
  • Enable/disable box shadow.  
  • Edit sidebar widgets like editing search bar title and button text, popular post title, category title, and subscribe title text.    
  • Edit Pagination title for left and right text. 

 

From the style tab of the blog listings module, you can change the card and widget style. Card settings include 

  • Changing card background color, background, content, and title color on hover
  • Edit the corner radius of the card, and feature image 
  • Overwrite styles of tags, title, author and date, description, and button. You can change the text font and color for all these.

    From the Widget settings, you can overwrite title style, category, and popular post.

     

2.4.Blog Related Post

You can add related posts to your blog page for readers to dig into other pieces. The blog-related post can be added to the bottom of your blog detail page.


You can change the section title and button text of the blog-related post module.

2.5.Customizable Button

You can add a custom button to your landing pages using the customizable button module. The button settings include changing the button type, text, and links to the button.

From its style tab, you can change the button alignment for desktop and mobile, overwrite style to change the normal button text, background, border, corner, & spacing, and the border, background & text color for both active button and hover button.

There are 3 types of customizable buttons that you can use. They are

1. Dark filled

</
2. Filled Light

3. Outlined Light

 

2.6.Custom Image

The image module helps you add images anywhere on the landing pages.

You can replace or remove the custom image, adjust image size and maximum size, and choose image loading.

From its style tab, you can choose desktop and mobile alignment, and adjust the image corner radius.

2.8.Course Listing

As a school-related HubSpot theme, displaying available courses on your landing pages is necessary. So, you can use the course listing module for letting your visitors know what type of education, events, and fun activities you are providing at your organization.

 

You can add multiple courses to your landing pages. Additionally, you can edit, clone, or delete each of them.


It has the option to remove or replace the image, add alt text, change image loading, edit the title and add a description.

You can also change the duration text, button text, and background color.

From its style tab, you can 

  • Adjust the image and content corner border radius. Border radius is applied on all the sides in desktop view but in mobile, the border-radius gets applied to the image top left and right while for the card to the bottom left and right.
  • Desktop, mobile, and tablet change card bottom spacing and change duration icon color.  
  • Overwrite color and button settings

     

2.9.Custom Form

You can add a custom form according to your website’s requirements. It could be for admissions or inquiries, etc. There are three layouts included:

a. Multiple Field Form 

b. Single Field form (button at the bottom)

c. Single Field Inline Form

You have the form layout choice between multiple field form, single field inline form, or single field form with a button at the bottom, edit the form content like add or remove fields,  thank you text, enable form automation, enable form box shadow, enable input field box-shadow, and edit input field box shadow. 

 

From its style tab, you can edit the

  • Color, border, and alignment of  form title   
  • Enable and change the form background color
  • Adjust form spacing, enable form max-width
  • Overwrite desktop and mobile form spacing
  • Overwrite the background color and enable or disable the global border on the input field.       
  • Overwrite form corner radius, and button 
  • Change the text color, background color, and border color of the normal and hover button.

2.12.Header Toggler

The header toggler allows you to add a toggler to the header so that the user can see more options. 

2.13.Header Controls

Header controller settings include choosing the display mode, enabling search, changing placeholder text, enabling the button on the header, selecting button style, editing button text, and adding a link to the button.

 

From the style tab, you can change the search background color, open icon color, and close icon color.

 

2.14.Icon box

 

a. Compact Icon box layout

 

b. Card Icon box layout

 

 

You can select columns, enable box shadow, insert shades, change card icon settings, and compact settings.

From its style tab, you can change the icon box background color, and overwrite color settings by changing the title and description content color.

 

You can also adjust spacing and overwrite icon color too.

 

2.15.Logo

You add a logo of your school or education institute anywhere on the website page using the logo module.

You can enable a custom logo, replace or remove the custom logo, add alt text, and adjust the size and maximum size.

 

2.16.Map

The map module will add a virtual map to your website. This map can be directed towards your physical play school or any of its branches.


You can replace or remove the location pointer, insert Map API, pointer details, Map JSON, map zoom level, and edit center latitude, and longitude.

From its style tab, you can edit map corner and height, overwrite the style by changing title background and text color, card background and text color. 

2.17.Partners

You can use the partner module for showing your partner brands.

You can replace or remove the logo, add alt text, adjust the size, and image loading.

From the style tab, you can adjust the partner module mobile and desktop spacing and padding.

2.18.Social Follow

You can add your social media link to your website pages using the social follow module.


You can add multiple social icons on your website header or footer.


Additionally, you can remove or replace each social follow icon, edit the social link, etc.


From the style tab, you can overwrite the icon fill color, enable or disable background and change background color, adjust radius, and desktop and mobile alignment.

2.19.Spacer

The spacer module adds white space to the website and landing pages. With the spacer module, you can add vertical spaces between sections and modules as and when required.

From its style tab, you can adjust the height for desktop, tablet, and mobile. You can also alter the spacer background color.

 

2.20.Team

You can use the team module to show the hardworking teacher’s team on your website pages. It helps parents to know your team virtually.


You can add multiple team members to your website pages.


From the style tab, you have certain additional settings to edit the content box, member name, and member profile.


Content box: Change content-box background color in the normal state, overwrite background color on hover, adjust content box corner radius, and change box shadow.  

Member Name: Change member name color style on hover and normal state. 

Member Profile: Alter member profile color on hover and normal state.

2.21.Title Content

The title content module helps you to add title text on any page. You can add a title above any module if you want to add a heading to it.


You can also enable the mini title, edit the mini title text and content, and enable the primary and secondary buttons.


From its style tab, you can change the container and content style. It has options to change the container background color, enable maximum width and adjust container spacing.


From the content tab, you can alter

  • Content alignment for desktop and mobile 
  • Overwrite mini title styles, by changing desktop font & color and mobile font size and line height.
  • Overwrite title style, by changing desktop font & color and mobile font size and line height.
  • Overwrite description style, by changing desktop font & color and mobile font size and line height.


2.22.Video Popup

The video popup module is for adding a video to your landing page or website page. You can add your preschool activity videos.

You can replace or remove the video poster, edit alt text, adjust the video poster size, change image loading, replace or remove the play icon, and edit the video link.

From the style tab, you can change the video alignment, enable overlay, change overlay color, overwrite icon color, change icon background color and icon color, and adjust the video corner border radius.

 

3.Theme Sections

Kidstar Preschool has the following 6 sections: 

3.1.Two Columns with Content and Form

3.2.Two Columns with Video and Content

3.3.Two Columns with Content and Image

3.4.Admission Form

3.5.Two Columns With Image and Content

3.6.Call to Action

4.Theme Templates

Kidstar has 8 theme templates.

  1. Homepage
  2. Activities
  3. About Us
  4. Our Teachers
  5. Blog Listing
  6. Blog Detail
  7. Contact us
  8. Admission

5.System Pages

Kidstar theme offers you 7 different system pages that are as follows:

  1. Error 404
  2. Error 500
  3. Password Prompt
  4. Subscription Preferences
  5. Subscription Confirmation
  6. Backup Unsubscribe
  7. Search Result
Suggest Edit