Getting Started

Let’s get started with the basics. Once you successfully purchase TwentyOne HubSpot theme from the HubSpot marketplace, you will arrive to a confirmation screen, and after a few minutes (it can take up to 5 minutes for the theme installation to be completed), you should be able to find your new theme on the Design Tools.

You can confirm this by going to Marketing > Files and Templates > Design Tools. Once here, you should see something like this:

If you see the theme as you are seeing it above (note the name may vary), congratulations, the theme has successfully installed.

Reinstall Theme

In rare cases, due to a common bug on the HubSpot marketplace, your theme may not arrive successfully to your account.

If this happens to you, no worries, you just need to go to Asset Marketplace > Purchased, and then select TwentyOne HubSpot theme, click Actions, and then Uninstall.

It will take a few minutes, and after that, you need to click Actions again, and then Reinstall.

This will fix any issues that could have occurred. While this is a very unusual issue, in case it happens to you, the solution is simple and easy.

Create a Child Theme

Once your new HubSpot theme is ready, it’s moment to clone it.

While this is not a required step, it is highly suggested to clone the TwentyOne HubSpot theme before start using it.

Purchased themes from the HubSpot Marketplace are not editable (read-only), so you can benefit from future updates and improvements. If you plan on making code changes, now is the time to create a child theme and use that instead of the purchased one for your website. Otherwise, you can use the purchased theme directly.

Global Colors

If you click Global Colors in the customization screen, you will be able to see another screen just like this:

You will see the colors divided into 6 different areas.we highly recommend you to update all of the colors that match your brand style guide, so even the smallest color detail matches your company brand.

Once you finish updating the colors, just click Apply changes.

Global Fonts

If you click Global fonts in the customization screen, you will be able to see another screen just like this:

The Global Fonts contain the two parts the primary and secondary font

The primary font includes in heading

The secondary font includes in paragraph and body

Once you finish updating the fonts, just click Apply changes.

Spacing

If you click on Spacing in the customization screen, you will be able to see options:

Vertical Spacing: Set the default vertical spacing of section in px

Maximum Content Width: Set the default maximum content width of section

Once you finish updating the spacing, just click Apply changes.

Text

Let’s change the typography now. Just as with the Colors, you just need to click Edit on the Typography option, and you will arrive this screen:

Once you arrive here, you will notice the typography is customized in detail by Heading type, Body Text and Link

This is to give you as much control as possible of the typography sizes, so your website is as consistent and scalable as possible.

You will notice that you can easily choose between 100s of Font families, and this is because TwentyOne HubSpot theme is integrated natively with Google Fonts, so you can use any Google font without any extra work. Just choose your preferred font, click Apply changes, and you are on the other side.

Font: Set the default font style, size, color, font weight and text decoration of text

Transform: Optional, Choose the options from Capitalize, Uppercase, Lowercase and None for text transform

Buttons

Click Edit on the Buttons tab, and you will arrive this screen:

Set the default button styles, You will notice that the buttons have a lot of customization options, such as background color, font color, border style, padding and more, so you can customize them as much as you want to fit your brand style guide.

Form

Click Edit on the Form tab, and you will arrive this screen:

Set the default form styles from the above given options.

• Title:
• Color: Set the default color of form title
• Labels:
• Color: Set the default color of form label
• Help Text:
• Color: Set the default color of form help text
• Help Text:
• Color: Set the default color of form help text
• Fields:
• Placeholder:
• Color: Set the default color of fields placeholder
• Text:
• Color: Set the default color of fields text
• Background:
• Color: Set the default background color of fields
• Border:
• Border: Set the default border styles, border width and border color of fields
• Corner:
• Radius: Set the default corner radius of fields

Tables

Click Edit on the Tables tab, and you will arrive this screen:

Set the default table styles from the above given options.

• Header:
• Text:
• Color: Set the default color of text
• Background:
• Color: Set the default background color of header
• Body:
• Text:
• Color: Set the default color of text
• Background:
• Color: Set the default background color of body
• Footer:
• Text:
• Color: Set the default color of text
• Background:
• Color: Set the default background color of footer
• Cells:
• Spacing:
• Padding: Set the default padding of cells
• Border:
• Border: Set the default border styles, border width and border color of cells

Header

Click Edit on the Header tab, and you will arrive this screen:

Set the default header styles from the above given options.

• Notification Bar:
• Background:
• Color: Set the default background color of notification bar
• Text:
• Color: Set the default font color of notification bar
• Top Bar:
• Background:
• Color: Set the default background color of top bar
• Text:
• Color: Set the default font color of top bar
• Link:
• Color: Set the default color of link of top bar
• Hover and Active Color: Set the default color of hover and active link of top bar
• Main Header:
• Menu:
• Text:
• Color: Set the default font color of top bar menu
• Dropdowns:
• Text:
• Color: Set the default font color of dropdown menu
• Background:
• Color: Set the default background color of dropdown menu
• Border:
• Border: Set the default border style, color and width of dropdown menu.
• Corner Radius: Apply the corner radius of all the direction for the elements.
• Menu Item
• Active Background:
• Color: Set the default background color of active dropdown menu item
• Active Color:
• Color: Set the default font color of active dropdown menu item
• Background:
• Color: Set the default background color of main header

Footer

Click Edit on the Footer tab, and you will arrive this screen:

Set the default footer styles from the above given options.

• Text:
• Title Color: Set the default color of title in footer
• Color: Set the default color of body in footer
• Link Hover Color: Set the default color of link hover in footer
• Background:
• Color: Set the default background color of footer
• Bottom Bar:
• Text:
• Color: Set the default color of bottom bar footer
• Link Hover Color: Set the default color of link hover of bottom bar footer
• Background:
• Color: Set the default background color of bottom bar footer
• Border:
• Border: Set the default border style, color and width of bottom bar footer, Note, we recommend you to use only top side border as we have used in the theme

Back To Top

The Last one of theme settings, Click Edit on the Back To Top tab, and you will arrive this screen:

Set the back to top styles from the above given options.

• Show Back To Top: Enable to use the back to top button in your website
• Without Hover:
• Icon Color: Set the icon color of back to top
• Background Color: Set the background color of back to top
• Border: Set the border style, border color and border width of back to top
• Corner Radius: Set the corner radius of back to top
• Spacing: Set the custom padding and margin of back to top
• Hover:
• Icon Color: Set the hover icon color of back to top
• Background Color: Set the hover background color of back to top
• Border: Set the hover border style, border color and border width of back to top

Blog

• Blog Post
• Content
• Container Width: Here you can change your blog post container width.
• Paragraph: Here you can change your blog post font size, line-height and letter spacing in different device-width like Desktop, Tablet and Mobile.
• Progress Bar: Here you can Enable/Disable your progress bar and customize it according to color and height.
• Pagination: Here you can Enable/Disable your blog details page pagination.
• Social Sharing: Here you can Show your social sharing where you want in blog detail page.

Logo

Let’s start with the easiest one, the logo.

In the Global header section, you will be able to just click on Header-Module Main Header and then you will see below the options to replace the logo or add the links...

We recommend you to upload the logo as SVG format (Scalable Vector Graphics) as it will be super light and look perfectly sharp on every device. However, if you don’t have a vector version of your logo, a PNG or JPG will work great too.

Menu Links

Once you finish with the logo, let’s continue with the Menu Links.

All the menu links are managed on the Navigation section within the Website settings on HubSpot, so it’s very likely you are already familiar on how to edit them.

In case not, don’t worry, you just need to go to Settings > Website > Navigation. The screen will look something like this:

In this section you just need to select your header (you can also create a new one), add your menu links, and select it in the TwentyOne Theme header, as you can see below:

Logo

Once you are in the Footer editor, you just need to click the Footer logo, and you will be able to edit it and upload your company logo.

Just like on the header, we recommend you to upload the logo as SVG format (Scalable Vector Graphics) as it will be super light and look perfectly sharp on every device. However, if you don’t have a vector version of your logo, a PNG or JPG will work great too.

Footer Links

Regarding the Footer Links, you will notice these are same as the ones in the Header.

Select or Create a Menu which is applicable for your brand.

Select Blog & Blog Post Template

To select the Blog or Blog Post template, you just need to go to Settings > Website > Blog > Templates, and you will find 2 different drop down selectors.

One will choose the Template for blog posts, and the other one will choose the Template for listing pages (aka, the blog) and click Save.

Create a Blog Post

To create a Blog Post for your Blog, you just need to go to Marketing > Website > Blog and after that select your Blog from left side.

List of All System Pages

The templates available in TwentyOne Hubspot Theme are.

• Error 404 Page
• Error 505 Page
• Search Results
• Email Backup Unsubscribe
• Email Subscription Preferences
• Email Subscriptions Confirmation
• Membership Login
• Membership Registration
• Password Prompt
• Reset Password
• Reset Password Request

Applying a Templates

For setting a System Templates, you just need to go to Settings > Tools > Website > Pages > System Pages.

Then you have to select the templates of errors and other system pages.

For reference the figure is shown below.

Modules General Information

In the page editor you will see that all modules have two parts — Content and Styles:

Content:

The Content Part contains the content repeating fields, layout options and advanced.

Some modules does not have repeating fields.

Most of our theme modules have the common options of layout:-

The Scheme White Color option, if you check this checkbox the color of the module will become white, This options is used for dark edition section.

Slider column selector or Grid column selector is the dropdown for selecting a number of elements or items in a slider or row.

Heading Level dropdown is used for selecting the title heading tag from h1 to h6.

Button Style dropdown is used for selecting the style of various buttons, as we have covered all the button styles in the Button-Module section of this document.

Show Icon in Button checkbox, if you check this checkbox the fa right icon will display on button.

Advanced:-

We have also included two fields where you can specify an unique ID or a custom class that will apply to this module wrapper. This may be useful to developers that want to apply custom styles to a specific module, or if you want to add an anchor that will scroll to your module:

Style:

The Style Part contains the various types of style options such as background layout, spacing, border, box-shadow and font size, color, etc.

In TwentyOne theme the style have the options as per module content.

Accordion Module

The accordion module can e.g. be used for frequently asked questions (FAQ).

Content Section:

• Question: the “questions” of the accordion element
• Detail: the “answer” of the accordion element

In style the open and close icon dropdown have the option values Plus-Minus, Arrow and Caret. Select the values as per your requirement.

Style Section:

• Width: Enable the custom module width if you required, after that you will display the container width number field to add the custom container width of the module.
• Alignment: Choose the content alignment options from left, center and right
• Border:
• Border: Apply the Border style, color and width and also the sides of border
• Active Border Color: Apply the active border color
• Corner Radius: Apply the corner radius of all the direction
• Spacing: Apply the spacing for each elements
• Accordion Question:
• Background Color: Set the background color in the question
• Spacing: Set the margin and padding for the question
• Font: Set the various font style, size, color, weight and decoration for the question
• Active:
• Background Color: Set the active background color in the question
• Color: Set the active color for the question
• Accordion Answer:
• Spacing: Set the margin and padding for the answer
• Background Color: Set the background color in the answer
• Font: Set the various font style, size, color, weight and decoration for the answer
• Icon: Set the Icon width of the open and close icon

Examples

Blog Feature Banner Slider

The Blog Feature Banner Slider module can be used for header in Blog Listing Page.

Content Section:

• Blog: Select the Blog
• Tag: Select the category or topic of the blog
• Display Number of Posts: Select the number of blog posts to display
• Button
• Button Text: The text or label of button.
• Button Style: Choose from various styles of button.
• Show Icon: Switch between to add icon in button or not.

Style Section:

• Spacing: Add the custom padding and margin
• Category: Add the border and corner radius for category
• Title: Here you can easily customize title font style, color, size and font spacing.
• Description: Here you can easily customize description font style, color, size and font spacing.

Blog Latest Post Module

The Blog Latest Post Module can be used for listing your blog post in a slider view.

Content Section:

• Blog Id: Select the Blog
• Post Count: Select the number of blog posts to display
• Button Text: The text or label of button

Layout:

• Layout Style: Choose from multiple options Grid, List and Slider (examples see below)
• Slider Column Selector: Choose from multiple options from One Column to Four Column (Note:- This options will only display if the Slider is selected in Layout Style. )
• Grid Column Selector: Choose from multiple options from One Column to Four Column (Note:- This options will only display if the Grid is selected in Layout Style. )
• Heading Level: Choose from h1 to h6 for the title.

• Button Style: Choose various styles of button.

• Show Icon in Button: Add the icons in button.

Sidebar:

• Used in Sidebar: Enable the checkbox to use the module in the sidebar (for ex:- If you want to use this module in sidebar of the blog, example see below)

Note: This options is available only in List layout style.

Style Section:

• Box Style
• Equal Height: If you want to make all card equal then enable this option.
• Background Color: Set the background color of box.
• Spacing: Set the custom padding and margin of box.
• Border: Set the border style, border color and border width of box.
• Corner Radius: Set the corner radius of box.
• Box Shadow
• Box Shadow require: Enable for using the box shadow in element, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow
• Box Hover Style
• Background Color: Set the background color of box.
• Border Color: Set the border color of box.
• Box Shadow
• Box Shadow require: Enable for using the box shadow in element, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow
• Feature Image
• Corner Radius: Set the corner radius of feature image.
• Box Content
• Spacing: Set the custom padding and margin of content.
• Title
• Font: Set the various font style, size, color, weight and decoration for title
• Spacing: Set the custom padding and margin of title.
• Description
• Font: Set the various font style, size, color, weight and decoration for description.
• Spacing: Set the custom padding and margin of description.

Slider

Grid

List

List (Used in Sidebar)

Blog Post Filter

The Blog Post Filter Module can be used for filtering a category or topics of the Blog.

This module is only used in the blog

Content Section:

• Blog: Select the Blog

Layout:

• Used in Sidebar: Enable the checkbox to use the module in the sidebar (for ex:- If you want to use this module in sidebar of the blog,)

Blog Listing Module

The Blog Listing Module can be used for show blog post in a blog listing page.

This module is only used in the blog listing page

Content Section:

• Feature Iamge: Enable the checkbox to use the featured image in post.
• Tags: Enable the checkbox to use the post tags in post.
• Title: Enable the checkbox to use the post title in post.
• Author Enable the checkbox to use the author of the post
• Publish Date: Enable the checkbox to use the publish date of post
• Show Read Time: Enable the checkbox to show the reading time of the post.
• Description: Enable the checkbox to use the description of the post.
• Button: Enable the checkbox to use the button link of the post.
• Button Text: The text or label of button.
• Layout
• Layout Style: Choose from multiple options Grid and Slider.
• Column Grid Selector: Choose from multiple options from Column-One to Column-Four to display element in a row
• Heading Tag: Choose from h1 to h6 for the title
• Button Selector: Choose various styles of button.
• Show Icon in Button: Add the icons in button.
• Scheme Light Color: Switch between light and dark color scheme
• Number of Words in Post Description: Set the number of words in post description of the post.

Style Section:

• Box
• Spacing: Add the custom padding and margin
• Background
• Background?: Choose the background option from solid color and gradient color
• Color: Set the custom solid color background for module, the color will display if you selected the solid color in background
• Gradient: Set the custom gradient color, direction of color in background for module, the color will display if you selected the gradient color in background
• Border
• Border: Set the border styles, width and color
• Corner Radius: Apply the corner radius in px of all the direction
• Hover: Here you can edit background hover color, border hover color, and box shadow.
• Equal Height: If you want to make all card equal then enable this option.
• Feature Image: Here you can customize image corner radius and image height.
• Content: Here you customize spacing of content.
• Tags: Here you can customize tag background color, spacing, font style font size and font color.
• Read Time: Here you can customize read time font style, size, color and spacing.
• Title: Here you can customize title font style, size, color and spacing.
• Author: Here you can customize author font style, size, color and author image corner radius.
• Publish Date: Here you can customize publish date font style, size and color.
• Description: Here you can customize description font style, size and color.

Blog Pagination

The Blog Pagination Module improves user experience by dividing posts into manageable pages, allowing readers to navigate easily with "Previous" and "Next" buttons, and numbered links, enhancing readability and SEO.

This module is only used in the Blog Listing Page.

Content Section:

• Show Previous and Next Links: if you want to add previous and next label on pagination enable this checkbox.
• Show First and Last Links: if you want to add first and last label on pagination enable this checkbox.

Style Section:

• Alignment: Choose the content alignment options from left, center and right
• Spacing
• Space between Links: Add the custom spacing between links.
• Spacing: Add the custom spacing.
• Number
• Text: Set the font style, font size, color, weight, text-decoration of number.
• Background Color: Set the background color for number elements.
• Height and Width: Set the Custom Height and Width of box.
• Border: Set the border styles, width and color of box.
• Corner Radius: Set the corner radius in px.
• Box Shadow
• Use Box Shadow: Enable for using the box shadow in element, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow

Blurb Module

The Blurb Module is used for adding the Image, Text and Button.

Content Section:

• Icon: Select the icon (Note: The Icon field will display if you have selected the Icon in layout Image/Icon?)
• Image: Select the image (Note: The Image field will display if you have selected the Image in layout Image/Icon?)
• Title: Title of Blurb (note:- If you want to add a gradient color in some of the words in title then start the some words)
• Description: Description of Blurb in rich text field
• Button Label: Optional Button Label for blurb (Note: This field will display if you have check the Button Required? field in the layout)
• Button Link: Optional Button Link for blurb (Note: This field will display if you have check the Button Required? field in the layout)

Layout:

• Image/Icon?: Choose the options between Image or Icon to use in the module
• Image/Icon Placement: Choose the options between Top of Left placement of image/icon
• Heading Level: Choose from h1 to h6 for the title
• Column Grid Selector: Choose from multiple options from One Column to Four Column to display element in a row
• Button Required?: Check if required button in the blurb
• Show Icon in Button: Check if the icon required in button
• Scheme Light Color: Switch between light and dark color scheme

Style Section:

• Box Style:
• Text Alignment: Select the alignment of text
• Background Color: Set the background color for all the elements
• Border: Set the border styles, width and color
• Spacing: Add the custom padding and margin
• Corner Radius: Apply the corner radius of all the direction for the elements
• Box Shadow
• Box Shadow: Enable for using the box shadow, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow
• Equal Height: If you want to make all card equal then enable this option.
• Box Hover Style:
• Background Color: Set the hover background color for all the elements
• Border: Set the hover border styles, width and color, select the same border width in which you have selected in box style border
• Box Shadow
• Box Shadow: Enable for using the box shadow, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow
• Content Style:
• Image Width: Set your image size in
• Title Spacing: Set the custom spacing for title
• Text Color: Set the custom color for title
• Description Color: Set the custom color for description
• Image Round Width: Set the custom corner radius for image
• Content Style:
• Text Color: Set the custom color on box hover element for title
• Description Color: Set the custom color on box hover element for description
• Title:
• Gradient color:
• Use Gradient: Enable the checkbox to use Gradient color
• Gradient: Choose the directions from dropdown and add as much color you want

Examples

Custom Button

The Button Module is used for the button on your website.

We have 20 Styles available in the button.

Content Section:

• Button Link: Set the button link, In external you can add the url and in content you can select the pages of hubspot which you have created
• Button Label: The text or label of button
• Button Style: Choose from various styles of button
• Show Icon: Switch between to add icon in button or not

Style Section:

• Alignment: Set the horizontal alignment of button

The .btn class are the common class, where the different classes show different buttons.

The Classes of the Primary Buttons are given below simultaneously.

1. btn-primary

2. btn-outline-primary

3. btn-link-primary

The Classes of the Secondary Buttons are given below simultaneously.

1. btn-secondary

2. btn-outline-secondary

3. btn-link-secondary

The Classes of the Dark Buttons are given below simultaneously.

1. btn-dark

2. btn-outline-dark

3. btn-link-dark

The Classes of the Light Buttons are given below simultaneously.

1. btn-light

2. btn-outline-light

3. btn-link-light

The Classes of the Other Buttons are given below simultaneously.

1. btn-success

2. btn-outline-success

3. btn-danger

4. btn-outline-danger

5. btn-warning

6. btn-outline-warning

7. btn-info

8. btn-outline-info

For Selecting a different styles of button edit the button module.

Cards with Hover Module

The Cards with Hover Module is used to showcase the portfolio or services of your brand.

Content Section:

• Icon: Iconpicker for icon show in box, (Note: The Icon field will display if you have selected the Icon in layout Image/Icon?)
• Image: Select the image (Note: The Image field will display if you have selected the Image in layout Image/Icon?)
• Title: Title of card (note:- If you want to add a gradient color in some of the words in title then start the some words)
• Description: Description of card in rich text field
• Button Label: Text or Label of button for card
• Button Link: Button Link for card
• Background Front: The Options for front side of element
• Background? : Choose the background option from color and image
• Background Color: Set the background color for front side of card
• Background Image Choose the background image for front side of card
• Scheme Color: Switch between light and dark color scheme
• Overlay Over Image: This group will display if you select the image in background?
• Use Overlay Switch between use overlay or not
• Overlay Color: Set the overlay color over image, this option will display if you chech the use overlay field
• Background Back: The Options for back side of element
• Background? : Choose the background option from color and image
• Background Color: Set the background color for back side of card
• Background Image Choose the background image for back side of card
• Scheme Color: Switch between light and dark color scheme
• Overlay Over Image: This group will display if you select the image in background?
• Use Overlay Switch between use overlay or not
• Overlay Color: Set the overlay color over image, this option will display if you chech the use overlay field
• Button:
• Button Style Choose from various styles of button
• Icon Show in Button: Switch between to add icon in button or not

Layout:

• Image/Icon?: Choose the options between Image or Icon to use in the module
• Heading Level: Choose from h1 to h6 for the title
• Column Grid Selector: Choose from multiple options from Column-1 to Column-4 to display element in a row

Style Section:

• Front:
• Spacing: Set the custom padding and margin in front side of card
• Border: Set the border styles, width and color in front side of card
• Back:
• Spacing: Set the custom padding and margin in back side of card
• Border: Set the border styles, width and color in back side of card
• Height: Set the custom maximum height for the card
• Alignment: Set the text alignment
• Shadow: Select the box shadow default style from selector, the default selected is regular shadow
• Icon:
• Icon Width: Set the custom icon width as per your requirement
• Color: Set the custom color of icon
• Title:
• Font: Set the font style, font size, color, weight, text-decoration of title
• Gradient color:
• Use Gradient: Enable the checkbox to use Gradient color
• Gradient: Choose the directions from dropdown and add as much color you want
• Description:
• Font: Set the font style, font size, color, weight, text-decoration of description
• Number of Words: Set the number of words to display in the description
• Separator:
• Use Separator: Check the fields to display seperator below the text, All below style option will display if you check this use checkbox
• Color: Set the color of separator
• Width: Set the width in percentage of separator
• Height: Set the height in px of separator
• Corner Radius: Set the corner radius in px of separator
• Spacing: Set the custom padding and margin of separator

Case Study Module

The Case Study Module can e.g. be used for showcase the project, services, etc.

Content Section:

• Main Title: Main title of case study
• Title: Title of case study
• Description: Description of case study in rich text field
• Button Label: Text or Label of button for case study
• Button Link: Button Link for case study
• Image: Select the image (Note: The Image field will display if you have selected the Image in Case Study layout Content Image/Video)
• Video: Select the video (Note: The Video field will display if you have selected the Video in Case Study layout Content Image/Video)
• Layout:
• Background Color: Set the background color for the element
• Scheme White Color: Switch between light and dark color scheme
• Content Alignment Choose the content alignment between content left or right for the element
• Content Image/Video: Choose the alignment between image or video for the element
• Button Style Choose from various styles of button
• Show Icon in Button: Switch between to add icon in button or not

Style:

• Heading Level: Choose from h1 to h6 for the title

Style Section:

• Box:
• Gradient In All Box:
• Apply Gradient Background: Enable the checkbox to display the gradient background color in all the boxes or element, if this field will enable all other options in this group will display
• Gradient: Choose the directions from dropdown and add as much color you want
• Border:
• Border: Set the border styles, width and color in front side of card
• Corner Radius: Apply the corner radius of all the direction
• Shadow: Choose the shadow selector from the dropdown
• Spacing: Set the custom padding and margin in the box
• Content Spacing: Set the custom padding and margin of content
• Alignment: Set the text alignment of content
• Image:
• Image Height: Set the custom height for image
• Corner Radius: Set the corner radius of all the direction for image
• Video:
• Corner Radius:
• Custom Corner Radius: Check the checkbox for custom corner radius for video
• Top Left: top left corner radius for video
• Top Right: top right corner radius for video
• Bottom Right: bottom right corner radius for video
• Bottom Left: bottom left corner radius for video
• Main Title:
• Font: Set the font style, font size, color, weight, text-decoration of main title
• Spacing: Set the custom padding and margin of main title
• Title:
• Font: Set the font style, font size, color, weight, text-decoration of title
• Spacing: Set the custom padding and margin of title
• Description:
• Font: Set the font style, font size, color, weight, text-decoration of description
• Spacing: Set the custom padding and margin of description


Note

Our Preview page of the module is Click here.

Client Logo Module

The Client Logo Module can e.g. be used for showcase the partners, brands, etc.

Content Section:

• Brand Logo: Select the image for element
• Link: Set the image link, In external you can add the url and in content you can select the pages of hubspot which you have created.

Layout:

• Slider Required: Enable for using the slider in the module
• Slider Column Selector: Choose from multiple options from one column to six column, display on slider only
• Grid Column Selector: Choose from multiple options from one column to six column, display on without slider only

Style Section:

• Image:
• Image Width: Set the custom image width
• Spacing: Set the custom padding and margin for element
• Border:
• Border: Set the border style, border width and border color for element
• Corner Radius: Set the corner radius of all the direction
• Box Shadow:
• Box Shadow: Enable for using the box shadow in element, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow

Content Gallery Module

The Content Gallery Module can e.g. be used for showcase the project, services, etc.

Content Section:

• Icon: Iconpicker for icon show in box, (Note: The Icon field will display if you have selected the Icon in layout Image/Icon?)
• Image: Select the image (Note: The Image field will display if you have selected the Image in layout Image/Icon?)
• Title: Title of content (note:- If you want to add a gradient color in some of the words in title then start the some words)
• Description: Description of content in rich text field
• Button Label: Text or Label of button for card
• Button Link: Button Link for card
• Background:
• Image Choose the background image for box/element
• Hover Background:
• Background Color Set the background color on hover for box/element
• Scheme Color:
• White Color: Switch between light and dark color scheme
• Button Style:
• Button Style Choose from various styles of button
• Show Icon In Button: Switch between to add icon in button or not

Layout:

• Image/Icon?: Choose the options between Image or Icon to use in the module
• Heading Level: Choose from h1 to h6 for the title
• Column Grid Selector: Choose from multiple options from Column-1 to Column-4 to display element in a row

Style Section:

• Content Visibility:
• Hide Content: Enable to hide the content in the element, only background image will display
• Alignment: Set the text alignment
• Border: Set the border styles, width and color for element
• Corner Radius: Set the corner radius in px for element
• Spacing: Set the custom padding and margin for element
• Shadow: Select the box shadow default style from dropdown for element
• Image:
• Image Width: Set the custom image width in px as per your requirement
• Spacing: Set the custom padding and margin for image
• Icon:
• Icon Width: Set the custom icon width in px as per your requirement
• Color: Set the custom color of icon
• Spacing: Set the custom padding and margin for icon
• Title:
• Font: Set the font style, font size, color, weight, text-decoration of title
• Spacing: Set the custom padding and margin for title
• Gradient color:
• Use Gradient: Enable the checkbox to use Gradient color
• Gradient: Choose the directions from dropdown and add as much color you want
• Description:
• Font: Set the font style, font size, color, weight, text-decoration of description
• Number of Words: Set the number of words to display in the description
• Spacing: Set the custom padding and margin for title

Countdown Timer Module

The Countdown Timer Module can be used to display any special events, brand anniversary, etc.

Content Section:

• Date and Time: Select the date from datepicker and time from timepicker for countdown timer

Layout:

• Scheme Light Color: Switch between light and dark color scheme

Style Section:

• Background:
• Background?: Choose the background option from solid color and gradient color
• Color: Set the custom solid color background for module, the color will display if you selected the solid color in background
• Gradient: Set the custom gradient color, direction of color in background for module, the color will display if you selected the gradient color in background
• Border:
• Border: Set the border styles, width and color
• Corner Radius: Apply the corner radius in px of all the direction
• Box Spacing:
• Spacing: Set the custom padding and margin for box
• Spacing In Mobile: Set the custom padding and margin in mobile size for box
• Content Spacing: Set the custom padding and margin for content
• Number:
• Font: Set the font style, font size, color, weight, text-decoration of number
• Spacing: Set the custom padding and margin of main title
• Text:
• Font: Set the font style, font size, color, weight, text-decoration of title
• Separator: Seperator between the elements in the module
• Color: Set the color of separator
• Width: Set the width of separator
• Box Shadow:
• Box Shadow: Enable for using the box shadow in module, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the module. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow

Counter Module

The Counter Module can be used for e.g the number of interests, completed project, number of clients, etc.

Content Section:

• Icon: Iconpicker for icon show in box, (Note: The Icon field will display if you have selected the Icon in layout Image/Icon?)
• Image: Select the image (Note: The Image field will display if you have selected the Image in layout Image/Icon?)
• Title: Title of element
• Counter Number: Counter number of element
• Text after CounterThis text is used to add a plus sign, K for thousand and M for Million

Layout:

• Image/Icon?: Choose the options between Image and Icon
• Scheme Light Color: Switch between light and dark color scheme
• Grid Column Selector: Choose from multiple options from One Column to Four Column to display element in a row

Style Section:

• Alignment: Set the content alignment in the box
• Background:
• Background?: Choose the background option from solid color and gradient color
• Color: Set the custom solid color background for module, the color will display if you selected the solid color in background
• Gradient:
Set the custom gradient color, direction of color in background for module, the gradient color will display if you selected the gradient color in background
• Border:
• Border: Set the border styles, width and color for element
• Corner Radius: Set the corner radius in px for element
• Box Shadow:
• Box Shadow: Enable for using the box shadow in element, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow
• Spacing: Set the custom padding and margin for element
• Image:
• Height: Set the custom image height in px as per your requirement
• Icon:
• Height: Set the custom icon height in px as per your requirement
• Image/Icon Spacing: Set the custom padding and margin for image and icon in element
• Title:
• Font: Set the font style, font size, color, weight, text-decoration of title
• Spacing: Set the custom padding and margin for title
• Counter Number:
• Font: Set the font style, font size, color, weight, text-decoration of counter number

Cta Section Module

A call to action (CTA) is a prompt on a website that tells the user to take some specified action

Content Section:

• Main Title: Main title of call to action
• Title: Title of call to action (note:- If you want to add a gradient color in some of the words in title then start the some words)
• Description: Description of call to action
• Button Text: Text or Label of button
• Button Link: Button Link of card
• Background:

Styles:

• Heading Level: Choose from h1 to h6 for the title
• Scheme Color: Switch between light and dark color scheme
• Button Style Choose from various styles of button
• Show Icon In Button: Switch between to add icon in button or not

Layout:

• Alignment: Choose the options between Vertical and Horizontal directions, see the examples below

Style Section:

• Background:
• Background?: Choose the background option from color, image and gradient color
• Color: Set the custom solid color background for module, the color will display if you selected the solid color in background
• Background Image: Choose the background image for background for module, the background image will display if you selected the image in background
• Gradient: Set the custom gradient color, direction of color in background for module, the color will display if you selected the gradient color in background
• Overlay: This group will display if you select the image in background?
• Overlay Over Image: Use Overlay Switch between use overlay or not
• Overlay Color: Set the overlay color over image, this option will display if you chech the use overlay field
• Custom Max Width:
• Custom Max Width: Enable to use the custom max width of the module
• Width: Set the custom max width of the module
• Spacing:
• Spacing: Set the custom padding and margin for the module
• Spacing in Mobile: Set the custom padding and margin in mobile size for the module
• Border:
• Border: Set the border styles, width and color for module
• Corner Radius: Set the corner radius in px for module
• Alignment: Choose the alignment between left, center and right in the vertical layout of call to action
• Main Title:
• Font: Set the font style, font size, color, weight, text-decoration of main title
• Spacing: Set the custom padding and margin for main title
• Title:
• Font: Set the font style, font size, color, weight, text-decoration of title
• Spacing: Set the custom padding and margin for title
• Gradient color:
• Use Gradient: Enable the checkbox to use Gradient color
• Gradient: Choose the directions from dropdown and add as much color you want
• Description:
• Font: Set the font style, font size, color, weight, text-decoration of description
• Spacing: Set the custom padding and margin for description

Horizontal Layout :-

Vertical Layout :-

Event Module

The Event Module can be used for listing the events.

Content Section:

• Title: Title of event (note:- If you want to add a gradient color in some of the words in title then start the some words)
• Date: Date of event, Please Use the Proper Format For.Ex:- 27 oct
• Time: Time of event, Please Use the Proper Format For.Ex:- 08:00 am - 04:00 pm
• Speaker Name: Speaker name of event
• Description: Description of event
• Featured Image: Select the image of event
• Button Link: Button Link of card
• Button Text: Text or Label of button

Layout:

• Display Options: Choose the display options between grid and list, see the example below of both the options
• Grid Column: Choose from multiple options 1 to 4 Column (Note:- This options will only display if the Grid is selected in Display Options. )
• Heading Level: Choose from h1 to h6 for the title
• Scheme Light Color: Switch between light and dark color scheme
• Button Style Choose from various styles of button
• Show Icon In Button: Switch between to add icon in button or not

Style Section:

• Background:
• Background?: Choose the background option from solid color and gradient color
• Backround Color: Set the custom solid color background for element, the color will display if you selected the solid color in background
• Gradient: Set the custom gradient color, direction of color in background for element, the gradient color will display if you selected the gradient color in background
• Box Spacing: Set the custom box padding and margin for the element
• Content Spacing:
• Spacing: Set the content custom padding and margin for the element
• Spacing In Mobile: Set the content custom padding and margin for the element in mobile size
• Border:
• Border: Set the border styles, width and color for element
• Corner Radius: Set the corner radius in px for element
• Box Shadow:
• Use Box Shadow: Enable for using the box shadow in element, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow
• Title:
• Font: Set the font style, font size, color, weight, text-decoration of title
• Spacing: Set the custom padding and margin for title
• Gradient color:
• Use Gradient: Enable the checkbox to use Gradient color
• Gradient: Choose the directions from dropdown and add as much color you want
• Date:
• Font: Set the font style, font size, color, weight, text-decoration of date
• Spacing: Set the custom padding and margin for title
• Backround Color: Set the custom solid color background for date
• Border:
• Border: Set the border styles, width and color for date
• Corner Radius: Set the corner radius in px for date
• Box Shadow:
• Use Box Shadow: Enable for using the box shadow in date field, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow in date
• Description:
• Font: Set the font style, font size, color, weight, text-decoration of description
• Spacing: Set the custom padding and margin for description

Layout :-

We have provided multiple Event layouts. Of course, each of the layouts can be customized by changing the color theme and the background options.

Grid

List

For selecting a different layout in the event module select the layout as show below in figure.

Full Width Header Section Module

The Full Width Header Module is used in the Banner Section of the Page. It Contains the Image,Text and Button

The background options are Image, Video, Solid color and Gradient color.

Content Section:

• Page Header: Page header of the page
• Title: Title of the header section (note:- If you want to add a gradient color in some of the words in title then start the some words)
• Description: Description of the header section
• Logo Image: Select or upload the image, the logo image will display above the page header
• Header Image: Select or upload the image
• Button1 Label: Text or Label of button1, If you do not want a button leave the textbox empty
• Button1 Link: Link of button1, If you leave the empty space in button1 label, the button1 link field does not display
• Button2 Label: Text or Label of button2, If you do not want a button leave the textbox empty
• Button2 Link: Link of button2, If you leave the empty space in button2 label, the button1 link field does not display

Layout:

• Video: Select the video file from the file manager of hubspot, This field will display if you have selected the video in Styles Layout Background
• Make Fullscreen: Enable the checkbox if you want to use the section height 100%
• Scheme Light: Switch between light and dark color scheme
• Content Alignment: Choose the content alignment options from left, center and right
• Heading Level: Choose from h1 to h6 for the title

Style Section:

• Layout:
• Background?: Choose the background option from solid color, image, video and gradient color, Note the video selection or upload field is in content section
• Background Color: Set the custom solid color background for section, the color will display if you selected the solid color in background
• Background Image: Choose the background image for background for section, the background image will display if you selected the image in background
• Gradient: Set the custom gradient color, direction of color in background for section, the gradient color will display if you selected the gradient color in background
• Overlay: The overlay will work only on image and video
• Overlay Required?: Use Overlay Switch between use overlay or not
• Overlay Color: Set the overlay color over image or video, this option will display if you check overlay required
• Max Width:
• Custom Content Max Width: Enable to use the custom max width of the section
• Container Max Width: Set the custom max width of the section
• Button
• Button 1:
• Button 1 Style: Choose various styles of button1
• Show Icon in Button1: Add the icons in button1
• Button 2:
• Button 2 Style: Choose various styles of button2
• Show Icon in Button2: Add the icons in button2
• Spacing:
• Spacing: Set the custom padding and margin of the section
• Spacing in Mobile View: Set the custom padding and margin in mobile size of the section
• Border:
• Border: Set the border styles, width and color for module
• Corner Radius: Set the corner radius in px for module
• Text Alignment: Select the alignment of text
• Animation: Select the various animations for content of the section
• Logo Image:
• Width:
Set the width of logo image
• Header Image:
• Image Alignment: Select the alignment of header image
• Width: Set the width of header image
• Page Header:
• Font: Set the font style, font size, color, weight, text-decoration of page header
• Spacing: Set the custom padding and margin for page header
• Title:
• Font: Set the font style, font size, color, weight, text-decoration of title
• Spacing: Set the custom padding and margin for page header
• Gradient color:
• Use Gradient: Enable the checkbox to use Gradient color
• Gradient: Choose the directions from dropdown and add as much color you want
• Description:
• Font: Set the font style, font size, color, weight, text-decoration of description
• Spacing: Set the custom padding and margin for page header

Header Module

We have used this module as a header in our theme.

These module contains three parts Notification bar, Top bar and Main Header.

You have to use the theme settings for applying a background color and various options for these module.

You have the options whether to use the notification bar and top bar.

1. Notification Bar

The notification bar is used to show any kind of notification

• Show Notification Bar: Enable to use the notification bar in the header
• Notification Text: Add the notification text for e.g, offer, notice, warning, etc.

2. Top Bar

The top bar contains the social follow, simple menu and contact information.

• Show Top Bar: Enable to use the top bar in the header
• Contact No: Add the contact number of your company or office
• Email Address: Add the email address of your company or office
• Menu: Select or create a new menu for top bar, if you don't want menu here leave the empty
• Show Social Icon: Enable to use the social icon in the top bar
• Social Links Group:
• Social Account: Choose the options from various social media platforms
• Social Link: Set the social follow link of that selected social media
• Accessibility:
• Title: Add the accessibility title, it will display when user hover on icon

3. Main Header

The top bar contains logo, Main Menu and button.

As you know we have covered this part on Header Section of the Document.

• Logo Image: Select or upload the logo image from imagepicker
• Logo Link: Add internal or external logo link on logo
• Menu: Select or create a new menu for main header
• Show CTA: Enable to use the button in main header
• Button Link: Add the internal or external button link of button
• Button Label: The text or label of button

Style Section:

• CTA Style: Choose from various styles of button
• Show Icon In CTA: Switch between to add icon in button or not

Hero Slider Module

The Hero Slider Module e.g can be used for Hero Banner. This module contains the Image, Video, Text and Button.

This module is similar to Full Width Header Module, The difference is the module have the video option and the module is in slider view.

Content Section:

• Small Image: Select or upload the image, the small image will display above the page header
• Page Header: Page header of the page
• Title: Title of the hero section (note:- If you want to add a gradient color in some of the words in title then start the some words)
• Description: Description of the hero section
• Button1 Label: Text or Label of button1, If you do not want a button leave the textbox empty
• Button1 Link: Link of button1
• Button2 Label: Text or Label of button2, If you do not want a button leave the textbox empty
• Button2 Link: Link of button2
• Header Image: Select or upload the image, This field will display if you have selected the Image in Layout Content Image/Video
• Video: Select the video file from the file manager of hubspot, This field will display if you have selected the Video in Layout Content Image/Video
• Layout:
• Background?: Choose the background option from color and image
• Background Color: Set the custom solid color background for element, the background color will display if you selected the color in background
• Background Image: Choose the background image for element, the background image will display if you selected the image in background
• Overlay: This group will display if you select the image in background dropdown
• Custom Overlay: Use Overlay Switch between use overlay or not
• Overlay Color: Set the overlay color, this option will display if you check the custom overlay
• Button 1 Style: Choose various styles of button1
• Show Icon in Button1: Switch between to use icons or not in button1
• Button 2 Style: Choose various styles of button2
• Show Icon in Button2: Switch between to use icons or not in button2
• Image/Video Required: Enable to use image or video in the element
• Content Image/Video? :Choose between Image and Video in the content of element, This field will display if you check the Image/Video Required checkbox
• Image/Video Position: Choose between Left, Center and Right of the position of Image/Video, This field will display if you check the Image/Video Required checkbox
• Image/Video Alignment: Choose between Left, Center and Right of the alignment of Image/Video, This field will display if you check the Image/Video Required checkbox
• Custom Max Width: Enable to use custom max width of the element
• Max Width: Enable to use custom max width in px of the element
• Content Alignment: Choose the content alignment options from left, center and right
• Scheme Light: Switch between light and dark color scheme

Layout:

• Animation Required in Content: Enable the checkbox to add the animation in content
• Content Animation Selector: Select the various animations from dropdown for content of the module

Style Section:

• Layout Style:
• Custom Content Max Width: Enable the checkbox for using the custom content max width of entire module
• Content Max Width: Enable to use content max width in px of the module
• Spacing: Set the custom padding and margin of the module
• Spacing in Mobile: Set the custom padding and margin in mobile size of the module
• Content Style:
• Use Text Overlay: Enable the checkbox for using the overlay background in text content
• Text Background Overlay Color: Set the background overlay color of the text content, This field will display if you check the above checkbox
• Spacing: Set the custom padding and margin of the text content of the module
• Corner Radius: Set the corner radius of all the direction of the background of text content
• Video Width: Set the custom width of video in px
• Image Max Width: Set the custom width of image in px
• Navigation:
• Arrow:
• Show Arrows: Check the checkbox for using the arrow in the slider, If this checkbox will checked the other style options will display in these group
• Color: Set the custom color for arrow of the slider
• Hover Color: Set the custom hover color for arrow of the slider
• Arrow Font Size: Set the custom arrow size in px
• Dot Navigation:
• Show Dot Navigation: Check the checkbox for using the dot navigation in the slider, If this checkbox will checked the other style options will display in these group
• Background Color: Set the custom background color for dot navigation of the slider
• Hover Background Color: Set the custom hover background color for dot navigation of the slider
• Active Background Color: Set the custom active background color for dot navigation of the slider
• Corner Radius: Set the custom corner radius in px of all the direction of the dot navigation
• Spacing: Set the custom padding and margin of the dot navigation
• Border: Set the custom border style of dot navigation
• Hover Border: Set the custom hover border style of dot navigation, make sure the width of the border have the same size as used in border of dot navigation
• Page Header:
• Font: Set the font style, font size, color, weight, text-decoration of page header
• Spacing: Set the custom padding and margin for page header
• Title:
• Heading Level: Choose from h1 to h6 for the title
• Font: Set the font style, font size, color, weight, text-decoration of title
• Spacing: Set the custom padding and margin for page title
• Gradient color:
• Use Gradient: Enable the checkbox to use Gradient color
• Gradient: Choose the directions from dropdown and add as much color you want
• Description:
• Font: Set the font style, font size, color, weight, text-decoration of description
• Spacing: Set the custom padding and margin for description
• Small Image:
• Width: Set the custom width of small image
• Spacing: Set the custom padding and margin for small image

Image Gallery Module

The Image Gallery Module can be used for e.g images of awards ceremony, functions, etc.

The module have the fancybox effect.

Content Section:

• Image: Select or upload the image
• Caption: caption of the Image, these text will display after the popup of image on the bottom of the screen

Layout:

• Column Grid Selector: Choose from multiple options from Column 1 to Column 6 to display number of element in a row

Style Section:

• Image:
• Image Height: Set the custom height of image in px

Job Post Module

The Job Post Module can be used for e.g vacancy of job.

Content Section:

• Tab Title: Tab Title of job post, This textfield will display if you enable the checkbox of use tab in layout
• Job Post:
• Address: Add the city and country name of job post
• Job Type: Add the job type of job post, In this text field add the job duration or working facilities i.e., remote work or office work, full time of part time.
• Position: Add the job position (note:- If you want to add a gradient color in some of the words in title then start the some words)
• Description: Description of job post
• Button Label: Text or Label of button
• Button Link: Button Link of job post

Layout:

• Use Tab: Enable the checkbox for using the tab in the module
• Scheme Light Color: Switch between light and dark color scheme
• Column Grid Selector: Choose from multiple options Column 1 to Column 3
• Heading Level: Choose from h1 to h6 for the title

Style Section:

• Tab Alignment:
• Alignment: Choose the options between left, center and right of the tab alignment
• Tab:
• Font:
• Font: Set the font style, font size, color, weight, text-decoration of page header
• Seperator:
• Color: Set the custom color of separator
• Height: Set the height in px of separator
• Spacing:
• Spacing: Set the custom padding and margin of the tab
• Active Tab:
• Tab Font Color:
• Color: Set the custom color of active tab
• Seperator:
• Color: Set the custom separator color of active tab
• Content:
• Background:
• Background?: Choose the background option between solid color and gradient color
• Backround Color: Set the custom solid color background for box, the color will display if you selected the solid color in background
• Gradient: Set the custom gradient color, direction of color in background for box, the gradient color will display if you selected the gradient color in background
• Spacing:
• Spacing: Set the custom padding and margin of the box
• Border:
• Border: Set the border styles, width and color for element
• Corner Radius: Set the corner radius in px for element
• Box Shadow:
• Use Box Shadow: Enable for using the box shadow in element, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow
• Content Hover:
• Background:
• Background?: Choose the hover background option between solid color and gradient color
• Backround Color: Set the custom hover solid color background for box, the color will display if you selected the solid color in background
• Gradient: Set the custom hover gradient color, direction of color in background for box, the gradient color will display if you selected the gradient color in background
• Border:
• Border: Set the custom hover border styles, width and color for element, make sure to add the width is same as the border width of content
• Box Shadow:
• Use Box Shadow: Enable for using the box shadow in the hover of element, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow
• Address:
• Font: Set the font style, font size, color, weight, text-decoration of address
• Hover:
• Color: Set the custom color of address on hover of box/element
• Job Type:
• Font: Set the font style, font size, color, weight, text-decoration of job type
• Background:
• Color: Set the custom background color of job type
• Spacing:
• Spacing: Set the custom padding and margin of the job type
• Border:
• Border: Set the custom border styles, width and color for job type
• Hover Style:
• Background:
• Color: Set the custom background color of job type on the hover of element/box
• Color:
• Color: Set the custom font color of job type on the hover of element/box
• Border Color:
• Color: Set the custom border color of job type on the hover of element/box
• Position:
• Font: Set the font style, font size, color, weight, text-decoration of position
• Spacing:
• Spacing: Set the custom padding and margin for position
• Hover:
• Color: Set the custom color of position on hover of box/element
• Gradient color:
• Use Gradient: Enable the checkbox to use Gradient color
• Gradient: Choose the directions from dropdown and add as much color you want
• Description:
• Font: Set the font style, font size, color, weight, text-decoration of description
• Hover:
• Color: Set the custom color of address on description of box/element
• Button:
  • Button Style: Choose from various styles of button
  • Show Icon In Button: Switch between to add icon in button or not
• Responsive Tab:
• Backround Color: Set the custom background color of tab in mobile view

Map Content Module

The Map Content Module is used for adding the location of your company, contact information and contact form.

This module is used to show Google maps, optionally with additional information. This module is based on using a Google maps embed code or preferably using an embed code generated with “Snazzy Maps”. snazzymaps.com

We recommend Snazzy Maps because you can easily configure your map, add custom styling, markers, etc.

To be able to generate your specific embed code, follow these steps:

1. Visit the snazzy maps website: snazzymaps.com

2. Create an account on snazzy maps.

3. Click on “Build a map” in the main navigation and follow the steps there.

4. Once you are done click on “View Code”

5. You will be asked to enter a map name and a google maps API key. Follow the instructions here: API KEY to create your own API key. This is always needed to embed a Google Map on your own website. If your API is not valid Google will block the rendering on your website.

6. Once you finish entering the needed information, you can copy the embed code and paste it in the module settings.

Content Section:

• Map Embed Code: Paste the code which you have copied from snazzy map
• Title: Title of the Map Content
• Description: Description of the Map Content
• Contact Information:
• Contact Number: Add the contact number
• Landline Number: Add the landline number
• Email Address: Add the email address
• Social Media:
• Facebook: Enter the url of your facebook id
• Instagram: Enter the url of your instagram id
• Twitter: Enter the url of your twitter id
• Linkedin: Enter the url of your linkedin id
• Business Hours: Add the timing of business hours in proper format (for ex. 10:00 to 18:00, closed)
• Monday: Monday time of company/office
• Tuesday: Tuesday time of company/office
• Wednesday: Wednesday time of company/office
• Thursday: Thursday time of company/office
• Friday: Friday time of company/office
• Saturday: Saturday time of company/office
• Sunday: Sunday time of company/office
• Form:
• Choose a form: Choose or create a new form

Layout:

• Heading Level: Choose from h1 to h6 for the title
• Content Layout: Choose from multiple options Contact Info, Opening Hours and Contact Form (examples see below)
• Hide All Contents: Switch between hide or display content on the map
• Add social media: Switch between add social media or not in the contact info layout
• Scheme White Color: Switch between dark and light color scheme
• Content Position: Choose between left and right horizontal alignment of the content

Style Section:

• Content:
• Background:
• Background? : Choose the background option from solid color and gradient color
• Color: Set the custom solid color background for content, the color will display if you selected the solid color in background
• Gradient: Set the custom gradient color, direction of color in background for content, the gradient color will display if you selected the gradient color in background
• Spacing:
• Spacing: Set the custom padding and margin of the content
• Border:
• Border: Set the custom border style of content
• Corner Radius: Set the custom corner radius of all the direction of the content background
• Box Shadow:
• Use Box Shadow: Enable for using the box shadow in content, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow
• Max Width:
• Width: Set the custom width of content
• Map:
• Border
• Border: Set the custom border style,color and width of Map
• Corner Radius: Set the custom corner radius of all the direction of the map
• Box Shadow:
• Use Box Shadow: Enable for using the box shadow in map, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow
• Title:
• Font: Set the font style, font size, color, weight, text-decoration of title
• Desc:
• Font: Set the font style, font size, color, weight, text-decoration of description
• Contact Information:
• Icon:
• Font: Set the font size and color of icon
• Link:
• Font: Set the font style, font size, color, weight, text-decoration of link
• Social Media Icon:
• Icon:
• Font: Set the font size and color of icon
• Spacing:
• Spacing: Set the custom padding and margin of the icon
• Social Media Hover:
• Color: Set the custom hover color of icon
• Opening Hours:
• Day:
• Font: Set the font style, font size, color, weight, text-decoration of day
• Time:
• Font: Set the font style, font size, color, weight, text-decoration of time

Layout :-

We have provided multiple layouts.

1. Contact Info

2. Opening Hours

3. Contact Form

Portfolio Module

The Portfolio Module can be used for e.g showcase the attractive and powerful projects or services.

Content Section:

• Tab Title: Tab Title of portfolio, This textfield will display if you enable the checkbox of use tab in layout
• Portfolio:
• Category: Add the category of portfolio
• Image: Select or upload the image
• Content Title: Add the title of the element (note:- If you want to add a gradient color in some of the words in title then start the some words)
• Rich Text: Description of the element
• Button Label: Text or Label of button
• Button Link: Button Link of portfolio

Layout:

• Use Tab: Enable the checkbox for using the tab in the module
• Scheme White Color: Switch between light and dark color scheme
• Column Grid Selector: Choose from multiple options Column 1 to Column 4
• Heading Level: Choose from h1 to h6 for the title

Style Section:

• Alignment:
• Text Alignment: Select the alignment of text
• Tab Alignment: Choose the options between left, center and right of the tab alignment
• Tab:
• Font:
• Font: Set the font style, font size, color, weight, text-decoration of tab
• Seperator:
• Use Separator: Enable the checkbox if you want to use the separator in tab item
• Color: Set the custom color of separator
• Height: Set the height in px of separator
• Background:
• Background?: Choose the background option between solid color and gradient color
• Backround Color: Set the custom solid color background for tab item, the color will display if you selected the solid color in background
• Gradient: Set the custom gradient color, direction of color in background for tab item, the gradient color will display if you selected the gradient color in background
• Spacing:
• Spacing: Set the custom padding and margin of the tab item
• Border:
• Border: Set the border styles, width and color for tab
• Corner Radius: Set the corner radius in px for tab
• Active Tab:
• Tab Font Color:
• Color: Set the custom color of active tab
• Seperator:
• Color: Set the custom separator color of active tab
• Background:
• Background?: Choose the background option between solid color and gradient color for active tab item
• Backround Color: Set the custom solid color background for active tab item, the color will display if you selected the solid color in background
• Gradient: Set the custom gradient color, direction of color in background for active tab item, the gradient color will display if you selected the gradient color in background
• Border:
• Border: Set the border styles, width and color for active tab item
• Content:
• Background:
• Background?: Choose the background option between solid color and gradient color
• Color: Set the custom solid color background for box, the color will display if you selected the solid color in background
• Gradient: Set the custom gradient color, direction of color in background for box, the gradient color will display if you selected the gradient color in background
• Spacing:
• Spacing: Set the custom padding and margin of the element
• Border:
• Border: Set the border styles, width and color for element
• Corner Radius: Set the corner radius in px for element
• Shadow:
• Use Box Shadow: Enable for using the box shadow in element, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow
• Image:
• Custom Height:
• Height: Set the custom height for image
• Border:
• Border: Set the border style, border width and border color for image
• Corner Radius: Set the corner radius of all the direction
• Title:
• Font: Set the font style, font size, color, weight, text-decoration of title
• Spacing:
• Spacing: Set the custom padding and margin for title
• Gradient color:
• Use Gradient: Enable the checkbox to use Gradient color
• Gradient: Choose the directions from dropdown and add as much color you want
• Description:
• Font: Set the font style, font size, color, weight, text-decoration of description
• Button:
• Button Style: Choose from various styles of button
• Show Icon in Button: Switch between to add icon in button or not
• Category:
• Position: Choose the options from top left, top right, bottom right and bottom left on the image
• Background:
• Color: Set the custom background color of category
• Gradient Color: Set the custom gradient color, direction of color in background for category
• Spacing:
• Spacing: Set the custom padding and margin of the category
• Border:
• Border: Set the custom border styles, width and color for job type
• Corner Radius: Set the custom corner radius of all the direction of the category
• Font:
• Font: Set the font style, font size, color, weight, text-decoration of category
• Box Shadow:
• Use Box Shadow: Enable for using the box shadow in category, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow

Pricing Module

The Pricing module e.g can be used for pricing plan of the products or services.

Content Section:

• Plan: Add the plan of your pricing for e.g, basic plan, professional plan and premium plan, etc
• Price: Add the price in your local currency
• Timeframe: Enter the timeframe of your plan. For example :- Per Year, Per Month, OneTIme, etc.
• Button Text: Text or Label of button
• Button Link: Button Link of pricing
• Product Description: Short description of product
• Features: Add the features of the plan or product, if you want to set the particular sentence or word in strikethrough set this way in rich text module, example given below

Layout:

• Scheme White Color: Switch between light and dark color scheme
• Button Style Choose from various styles of button
• Icon In Button: Switch between to add icon in button or not

Style Section:

• Background:
• Background?: Choose the background option from solid color and gradient color
• Color: Set the custom solid color background for module, the color will display if you selected the solid color in background
• Gradient Color: Set the custom gradient color, direction of color in background for module, the color will display if you selected the gradient color in background
• Spacing:
• Spacing: Set the custom padding and margin for the module
• Spacing in Mobile: Set the custom padding and margin in mobile size for the module
• Border:
• Border: Set the border styles, width and color for module
• Corner Radius: Set the corner radius in px for module
• Box Shadow:
• Use Box Shadow: Enable for using the box shadow in element, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow
• Plan:
• Font: Set the font style, font size, color, weight, text-decoration of plan
• Price:
• Font: Set the font style, font size, color, weight, text-decoration of price
• Timeframe:
• Font: Set the font style, font size, color, weight, text-decoration of timeframe
• Description:
• Font: Set the font style, font size, color, weight, text-decoration of description
• Features:
• Font: Set the font style, font size, color, weight, text-decoration of features
• Strikethrough: Strikethrough is a typographical presentation of words with a horizontal line through their center, resulting in text like this Strikethrough
• Font: Set the font style, font size, color, weight, text-decoration of strikethrough features
• Separator:
• Use Separator: Check the fields to display seperator below the product description, All below style option will display if you check this use overlay checkbox
• Color: Set the color of separator
• Height: Set the height in px of overlay

Progress Bar Module

The Progress Bar Module can be used for e.g showing the progress of task

Content Section:

• Progeress: Set the progress of the element
• Title: Add the title of the element

Layout:

• Heading Tag: Choose from h1 to h6 for the title.

• Scheme Color Light: Switch between light and dark color scheme

Style Section:

• Background Color: Set the custom solid color background for element
• Border: Set the border styles, width and color for element
• Spacing: Set the custom padding and margin for the element
• Corner Radius: Set the corner radius in px for element
• Height: Set the custom height in px for element
• Progress:
• Background?: Choose the background option from solid color and gradient color
• Background Color: Set the custom solid color background for progress, the color will display if you selected the solid color in background
• Gradient: Set the custom gradient color, direction of color in background for progress, the color will display if you selected the gradient color in background
• Transition Speed: Set the transition speed of progress from 1 to 9 second
• Percentage Text:
• Font: Set the font style, font size, color, weight, text-decoration of percentage text

Section Heading

The Section Heading Module is used for the heading of the section.

Content Section:

• Main Title: Add the main title of the section, (note:- leave empty if you does not required this field)
• Title: Add the title of the section (note:- If you want to add a gradient color in some of the words in title then start the some words)
• Description: Add the description of the section

Layout:

• Header Tag: Choose from h1 to h6 for the title.

• Scheme Light Color: Switch between light and dark color scheme

Style Section:

• Width:
• Max Width: Set the custom max width in px for module
• Alignment:
• Content Alignment: Choose the content alignment options from left, center and right
• Main Title:
• Font: Set the font style, font size, color, weight, text-decoration of main title
• spacing:
• Spacing: Set the custom padding and margin of the main title
• Title:
• Font: Set the font style, font size, color, weight, text-decoration of title
• spacing:
• Spacing: Set the custom padding and margin of the title
• Gradient color:
• Use Gradient: Enable the checkbox to use Gradient color
• Gradient: Choose the directions from dropdown and add as much color you want
• Description:
• Font: Set the font style, font size, color, weight, text-decoration of description

Social Sharing

The Social Sharing is used for sharing the post, or page.

Content Section:

• Title: Add the title of the module
• Link URL: This is the destination link that will be shortened for easier sharing on social networks.
• Facebook: All the fields are required in these group
• Enabled: Enable to share on facebook

• Link: Add the link of sharing in your facebook account
• Twitter: All the fields are required in these group
• Enabled: Enable to share on twitter

• Link: Add the link of sharing in your twitter account
• Instagram: All the fields are required in these group
• Enabled: Enable to share on instagram

• Link: Add the link of sharing in your instagram account
• Pinterest: All the fields are required in these group
• Enabled: Enable to share on pinterest

• Link: Add the link of sharing in your pinterest account
• Pin Image: Add or upload the image
• Whatsapp: All the fields are required in these group
• Enabled: Enable to share on whatsapp

• Link: Add the link of sharing in your whatsapp account

Style Section:

• Title:
• Title Required: Enable the checkbox if you want to use the title in the module
• spacing:
• Spacing: Set the custom padding and margin of title

Steps Process Module

The Steps Process Module can be used for e.g building knowledge and organizing information.

Content Section:

• Icon: Iconpicker for icon show in box, (Note: The Icon field will display if you have selected the Icon in layout Image/Icon)
• Image: Select the image (Note: The Image field will display if you have selected the Image in layout Image/Icon)
• Step Text: Add the Step Text for e.g, A, 01 (Note: This field will display if you have selected the Text in layout Image/Icon)
• Title: Title of element (note:- If you want to add a gradient color in some of the words in title then start the some words)
• Description: Description of element

Layout:

• Image/Icon?: Choose the options between Image, Icon and Text to display in the content of the element
• Image/Icon/Text Placement: Choose the options between top, left and right
• Vertical Align Center: Enable the checkbox if you want to set the vertical align center in the element for step box
• Column Grid Selector: Choose from multiple options from Column 1 to Column 4 to display element in a row
• Scheme Light Color: Switch between light and dark color scheme
• Heading Level: Choose from h1 to h6 for the title.

Style Section:

• Text Alignment:
• Text Alignment: Set the text alignment of the element
• Spacing:
• Spacing: Set the custom padding and margin for element
• Step Style:
• Background:
• Background?: Choose the background option from solid color and gradient color for step box
• Color: Set the custom solid color background for step box, the color will display if you selected the solid color in background
• Gradient: Set the custom gradient color, direction of color in background for step box, the gradient color will display if you selected the gradient color in background
• Border:
• Border: Set the custom border styles, width and color for step box
• Corner Radius: Set the custom corner radius in px for step box
• Spacing:
• Spacing: Set the custom padding and margin for step box
• Spacing in Mobile:
• Spacing: Set the custom padding and margin in mobile view for step box
• Box Shadow:
• Box Shadow: Enable for using the box shadow in step box, after the enable all other options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow
• Step Hover:
• Background:
• Background?: Choose the background option from solid color and gradient color for step box on hover of element
• Color: Set the custom solid color background for step box, the color will display if you selected the solid color in background
• Gradient: Set the custom gradient color, direction of color in background for step box, the gradient color will display if you selected the gradient color in background
• Border Color:
• Color: Set the custom border color for step box on hover of element
• Image:
• Image Width: Set the custom image width in px as per your requirement
• Icon:
• Icon Width: Set the custom icon width in px as per your requirement
• Color: Set the custom icon color in px as per your requirement
• Hover:
• Color: Set the custom icon color on hover of element
• Step Text:
• Font: Set the font style, font size, color, weight, text-decoration of step text
• Hover:
• Color: Set the custom step text color on hover of element
• Title:
• Font: Set the font style, font size, color, weight, text-decoration of title
• Hover:
• Color: Set the custom title color on hover of element
• Spacing:
• Spacing: Set the custom padding and margin for title
• Gradient color:
• Use Gradient: Enable the checkbox to use Gradient color
• Gradient: Choose the directions from dropdown and add as much color you want
• Description:
• Font: Set the font style, font size, color, weight, text-decoration of description

Subscribe Module

The Subscribe Module contains the subscribe form.

Content Section:

• Main Title: Main title of subscribe module
• Title: Title of subscribe module (note:- If you want to add a gradient color in some of the words in title then start the some words)
• Description: Description of subscribe module
• Subscribe Form: Choose or create a new form for subscribe module

Layout:

• Alignment: Choose the options between Vertical and Horizontal
• Heading Level: Choose from h1 to h6 for the title
• Scheme White Color: Switch between light and dark color scheme

Style Section:

• Layout:
• Background?: Choose the background option from color, image and gradient color
• Color: Set the custom solid color background for module, the color will display if you selected the solid color in background
• Background Image: Choose the background image for background for module, the background image will display if you selected the image in background
• Gradient: Set the custom gradient color, direction of color in background for module, the color will display if you selected the gradient color in background
• Spacing:
• Spacing: Set the custom padding and margin for the module
• Spacing in Mobile: Set the custom padding and margin in mobile size for the module
• Border:
• Border: Set the border styles, width and color for module
• Corner Radius: Set the corner radius in px for module
• Max Width:
• Width: Set the custom max width of the module
• Alignment:
• Text Alignment: Choose the text alignment options from left, center and right of the module
• Main Title:
• Font: Set the font style, font size, color, weight, text-decoration of main title
• Spacing: Set the custom padding and margin for main title
• Title:
• Font: Set the font style, font size, color, weight, text-decoration of title
• Spacing: Set the custom padding and margin for title
• Gradient color:
• Use Gradient: Enable the checkbox to use Gradient color
• Gradient: Choose the directions from dropdown and add as much color you want
• Description:
• Font: Set the font style, font size, color, weight, text-decoration of description
• Spacing: Set the custom padding and margin for description

Tab Content Module

The Tab Content Module is used for showing the text, image in a separated tab. It can be used for ex. explaining the services in brief.

Content Section:

• Tab Title: Add the tab title
• Tab Short Description: Add the short description of tab
• Tab Icon: Select the icon from iconpicker to use in the tab
• Tab Image: Select or upload the image from imagepicker to use in the tab
• Content:
• Content Title: Add the title of the content (note:- If you want to add a gradient color in some of the words in title then start the some words)
• Rich Text: Description of the content, You can add image, button,etc from the rich text to use in the content

Style:

• Image/Icon Required: Enable the checkbox if you want to use the image/icon in tab
• Tab Image/Icon: Choose the options between image and icon to add in the tab, these field will display if you checked the Image/Icon Required
• Scheme White Color: Switch between light and dark color scheme

Layout:

• Alignment: Choose the options between horizontal tab and vertical tab, for e.g, given below

Style Section:

• Tab:
• Background?: Choose the background option between solid color and gradient color
• Color: Set the custom solid color background for tab item, the color will display if you selected the solid color in background
• Gradient: Set the custom gradient color, direction of color in background for tab item, the gradient color will display if you selected the gradient color in background
• Border: Set the border styles, width and color for tab
• Spacing: Set the custom padding and margin of the tab item
• Corner Radius:
• Corner Radius: Set the custom corner radius of all directions in px for tab
• Custom Corner Radius: Enable the checkbox for using the separated corner radius of all directions for tab, if you checked this checkbox all below options will display in these group
• Top Left Corner: The value applies to Top-Left corner of the tab.
• Top Right Corner: The value applies to Top-Right corner of the tab.
• Bottom Right Corner: The value applies to Bottom-Right corner of the tab.
• Bottom Left Corner: The value applies to Bottom-Left corner of the tab.
• Active Tab:
• Background?: Choose the background option between solid color and gradient color for active tab item
• Background Color: Set the custom solid color background for active tab item, the color will display if you selected the solid color in background
• Gradient: Set the custom gradient color, direction of color in background for active tab item, the gradient color will display if you selected the gradient color in background
• Border: Set the border styles, width and color for active tab
• Show Shadow: Enable for using the box shadow in active tab, after the enable all below options will display in this group
• Horizontal Offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. Note:- If not require then set as 0
• Vertical Offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box Note:- If not required then set to 0
• Blur: Optional, The blur radius. The higher the number, the more blurred the shadow will be
• Spread: Optional, The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
• Color: Set the color of box shadow
• Content:
• Spacing: Set the custom padding and margin of the content
• Tab Seperator:
• Show Tab Separator: Enable the checkbox if you want to use the separator in tab
• Color: Set the custom color of separator
• Height: Set the custom height in px of separator
• Active Separator:
• Color: Set the custom color of active tab item separator
• Image:
• Image Width: Set the custom width of tab image
• Icon:
• Color: Set the custom color of tab icon
• Active Color: Set the custom active color of tab icon
• Width:
• Icon Width: Set the custom width of tab icon
• Tab Title:
• Font: Set the font style, font size, color, weight, text-decoration of tab title
• Active Tab:
• Color: Set the custom active color of tab title
• Tab Description:
• Font: Set the font style, font size, color, weight, text-decoration of tab description
• Active Tab:
• Color: Set the custom active color of tab description
• Content Title:
• Font: Set the font style, font size, color, weight, text-decoration of content title
• Spacing: Set the custom padding and margin for content title
• Gradient color:
• Use Gradient: Enable the checkbox to use Gradient color
• Gradient: Choose the directions from dropdown and add as much color you want
• Content Description:
• Font: Set the font style, font size, color, weight, text-decoration of content description

Layout :-

We have provided multiple layouts.

1. Horizontal

2. Vertical Layout :-

Team Module

The Team Module e.g can be used for showing the team of the brand.

Content Section:

• Tab Title: Tab Title of team module, This textfield will display if you enable the checkbox of use tab in layout
• Team Group:
• Member Image: Select or upload the image of team member of element
• Member Name: Add the name of member of element
• Member Designation: Add the designation of member of element
• Member Description: Description of member of element, if you does'nt require this field leave the empty space
• Email: Add the id of the email, if you does'nt require this field leave the empty space
• Phone: Add the contact number, if you does'nt require this field leave the empty space
• Facebook: Add the facebook account id url, if you does'nt require this field leave the empty space
• Instagram: Add the account account id url, if you does'nt require this field leave the empty space
• Linkedin: Add the linkedin account id url, if you does'nt require this field leave the empty space
• Twitter: Add the twitter account id url, if you does'nt require this field leave the empty space
• Youtube: Add the youtube account id url, if you does'nt require this field leave the empty space
• Skype: Add the skype account id url, if you does'nt require this field leave the empty space

Layout:

• Grid Column Selector: Choose from multiple options One Column to Four Column
• Scheme White Color: Switch between light and dark color scheme
• Use Tab: Enable the checkbox for using the tab in the module
• Header Tag: Choose from h1 to h6 for the title

Style Section:

• Card:
• Backround Color: Set the custom solid color background for card
• Border: Set the border styles, width and color for card
• Corner Radius: Set the corner radius in px for card
• Card Hover:
• Backround Color: Set the custom solid color background for card hover
• Border: Set the border styles, width and color for card hover
• Box Shadow Required: Enable for using the box shadow in element
• Box Shadow Color: Set the color of box shadow
• Member Image:
• Height: Set the custom height in px for member image
• Corner Radius:
• Top Left: The value applies to Top-Left corner of the member image
• Top Right: The value applies to Top-Right corner of the member image
• Bottom Right: The value applies to Bottom-Right corner of the member image
• Bottom Left: The value applies to Bottom-Left corner of the member image
• Member Name:
• Font: Set the font style, font size, color, weight, text-decoration of member name
• Spacing: Set the custom padding and margin of member name
• Member Designation:
• Font: Set the font style, font size, color, weight, text-decoration of member designation
• Spacing: Set the custom padding and margin of member designation
• Social Icon:
• Spacing:
• Spacing: Set the custom padding and margin of the icon
• Background:
• Background Color: Set the custom background color of icon
• Hover Background:
• Background Color: Set the custom hover background color of icon
• Color:
• Color: Set the custom color of icon
• Hover Color:
• Color: Set the custom hover color of icon
• Font Size:
• Size: Set the custom font size in px of icon
• Border:
• Border: Set the custom border styles, width and color of icon
• Hover Border:
• Border Color: Set the custom border color of icon on hover
• Corner Radius:
• Corner Radius: Apply the corner radius of all the direction for the icon
• Box Height
• Height: Set the custom height in px of the icon box
• < strong>Box Width
• Width: Set the custom width in px of the icon box
• Alignment:
• Content Alignment: Choose the options between left, center and right of the content alignment
• Tab:
• Text Alignment:
• Text Alignment: Select the alignment of text
• Border:
• Border: Set the border styles, width and color for tab
• Color:
• Color: Set the custom color of tab item
• Active:
• Color: Set the custom color of active tab item
• Border Color:
• Border Color: Set the custom border color of active tab item
• Spacing:
• Spacing: Set the custom padding and margin of tab item

Testimonial Module

Display one or more quotes in multiple columns and rows, or a slider.

Great for testimonials or quotes from your business partners, key employees, etc.

Content Section:

• Client Image: Select or upload the image from image picker for client image
• Client Review: Add the review or quote
• Client Name: Add the name of the user or client
• Client Designation: Add the designation of client or user

Elements:

• Show Quote Icon: Enable to add the quote icon above the client review
• Show Arrows: Enable to use the arrow in the slider
• Show Controls: Enable to add the dot navigation or control in the slider

Layout:

• Use Slider: Enable to use the slider in the module
• Slider Column Selector: Choose the options between One Slider and Two Slider (Note:- This options will only display if use slider checkbox is checked in Layout. )
• Grid Column Selector: Choose from multiple options One Column to Three Column (Note:- This options will only display if use slider checkbox is unchecked in Layout. )
• Content Layout: Choose the options between Vertical Image, Title Designation and Horizontal Image, Title Designation
• Scheme Light Color: Switch between light and dark color scheme
• Quote Image/Icon
• Quote Image/Icon Selector: Choose the options between Icon and Image
• Icon: Choose the icon from icon picker for quote icon
• Quote Image: Select or upload the image from image picker for quote image

Style Section:

• Text Alignment:
• Text Alignment: Select the alignment of text
• Alignment:
• Content Alignment: Choose the options between left, center and right of the content alignment
• Box
• Background Color: Set the custom color for background.
• Corner Radius: Set the corner radius of box.
• Equal Height: If you want to make all testimonial card equal then enable this option.
• Max Width:
• Slide Max Width: Set the custom max width in percentage of slider
• Spacing:
• Spacing: Set the custom padding and margin of the element
• Quote Icon:
• Custom Icon Style: Enable the checkbox to use the custom styles of quote icon, after it got checked all other options will display in these group
• Color:
• Color: Set the custom color for quote icon
• Width:
• Width: Set the custom width of quote icon
• Spacing:
• Spacing: Set the custom padding and margin of the quote icon
• Image:
• Image Width: Set the custom width of user/client image
• Corner Radius: Set the corner radius of image
• Review:
• Font: Set the font style, font size, color, weight, text-decoration of review
• Spacing: Set the custom padding and margin of review
• Separator:
• Show Separator After Image: Check the fields to display seperator below the image, All below style options of group will display if you checked this checkbox
• Width: Set the width in percentage of seperator
• Color: Set the color of separator
• Client Name:
• Font: Set the font style, font size, color, weight, text-decoration of name
• Spacing: Set the custom padding and margin of name
• Designation:
• Font: Set the font style, font size, color, weight, text-decoration of designation
• Spacing: Set the custom padding and margin of designation

Timeline Module

The Timeline Module e.g can be used for highlight your company's significant achievements and milestones with an excellent timeline design.

Content Section:

• Title: Add the title of timeline (note:- If you want to add a gradient color in some of the words in title then start the some words)
• Description: Add the description of timeline
• Date: Add the date of timeline

Style Section:

• Max Width:
• Max Width: Set the custom max width in px for module
• Base Line
• Color: Set the custom color in Base line
• Top & Bottom:
• Background Color: Set the Top & Bottom Dots Background color
• Date:
• Font: Set the font style, font size, color, weight, text-decoration of name
• Title:
• Font: Set the font style, font size, color, weight, text-decoration of name
• Spacing: Set the custom padding and margin of the title
• Gradient color:
• Use Gradient: Enable the checkbox to use Gradient color
• Gradient: Choose the directions from dropdown and add as much color you want
• Description:
• Font: Set the font style, font size, color, weight, text-decoration of name
• Center Image:
• Icon: Iconpicker for icon show in box
• Color: Set the color of the image

social follow

The Social follow module is used to follow or subscribe in the social media of your brands.

Content Section:

• Social Account: Choose the options from various social media platforms
• Social Link: Set the social follow link of that selected social media
• Accessibility:
• Title: Add the accessibility title, it will display when user hover on icon

Style Section:

• Fill:
• Color: Set the custom color of icon
• Hover Color: Set the custom hover color of icon
• Size:
• Size: Set the custom size of icon
• Background:
• Color: Set the custom background color of icon
• Hover Color: Set the custom background hover color of icon
• Border
• Border: Set the border styles, width and color.
• Border Hover color: Set the border hover color.
• Corner:
• Radius: Set the custom corner radius of icon
• Spacing:
• Space between icons: Set the custom space between icons in px
• Spacing: Set the custom spacing and margin of icons
• Alignment:
• Alignment: Set the horizontal alignment of icon