Modules

Simply choose from our pre-made templates, get inspired, and mould them to your needs with more than 45 handcrafted modules. A large library of modules will allow you to customize our pre-made templates or create your own beautiful pages.

Many modules have the similar set of options for text customization. This allows you to maintain a uniform style of the pages of the website and it is convenient to work with it.

Hero Slider

Powerful module to create beautiful slider. Large library of options. You can use the slider in any part of the page regardless of the name of the module. You can customize every slide:

  • Change background between image and color.
  • Change content width between 100%, 75%, 67% and 50%.
  • Select content position.
  • Enable or disable subtitle and description text.
  • Select title size and colors.
  • Add CTA, Button, Link or Video PopUp and customize it.
  • Activate arrows and bullets, change position layout of it.
Note: Switch toggle Mix Blend Mode to subtracts the darker of the two colors from the lightest color. This improves the contrast for controls when using both light and dark slides together.
Example: Home 01
Full Screen or Full Width Slider
  • Switch toggle Full Screen Height to On to set height of slider equal to browser’s window height. Miss this option if you need only full width.
  • Click on section and select tab Alignment and Spacing. Set: ‘Content Alignment = Full Width‘, ‘All Paddings = 0‘.
  • Open column options to remove left and right padding. Set ‘Padding Left = 0‘ and ‘Padding Right = 0‘ in tab Alignment and Spacing.
Section settings
Slider settings
Column settings

Stacked Sections

Stacked sections module has same options with Hero Slider but doesn’t have control elements. Slides are stacked on top of each other. Use same instructions with Hero Slider to get full screen sections.

Example: Home 02. Scroll to the middle of the page.
Full Screen or Full Width Stack
  • Switch toggle Full Screen Height to On to set height of section equal to browser’s window height. Miss this option if you need only full width.
  • Click on section and select tab Alignment and Spacing. Set: ‘Content Alignment = Full Width‘, ‘All Paddings = 0‘.
  • Open column options to remove left and right padding. Set ‘Padding Left = 0‘ and ‘Padding Right = 0‘ in tab Alignment and Spacing.
Section settings
Stacked sections settings
Column settings

Promo Box

Content box with image background. Easy to use module.

  • Switch toggle Add Link to add link to content page/post or external website.
  • You can change height of box. On mobile devices (smartphones) height always will be 540px.
  • Switch toggle Scale Hover effect to disable or enable scaling on hover.
  • Select Title font weight between normal and bold.

Example: Home 02. Scroll to the bottom of the page.

Video PopUp

Simple module to add YouTube embed videos in a popup. Customize color scheme, style, alignment and size.

Use YouTube video ID to add video.

Example
Link: https://www.youtube.com/watch?v=uD4izuDMUQA
Video ID: uD4izuDMUQA

Feature Block

Use this simple card with icon, title and description to list some of the best features of your product or service. You can select between HupSpot icon set or upload your image/icon. Change color scheme to use module on light and dark backgrounds.

Also you can enable boxed layout and shadow, change background color in Style options tab.

Example: Home 02.

Service Card

Animated card to list your services or features. The module is very easy to set up.

  • Field Top Subtitle is necessary for creating animated text. Select between white and gray colors.
  • Check Invert Colors to inverting background colors and hover colors.
  • Switch toggle Add Link to add link to content page/post or external website.
Example: Home 01.

Cascading Images

Simple module to provide amazing look for your images. Just select style of layout between two or three images. Upload images. Switch toggle Add shadow to add shadow for images.

Hover Box

Animated card with multiple elements. It has options to add background images, transparent overlay, labels, text and CTA, Button or Link. You can change height of box. On mobile devices (smartphones) height always will be 600px. Adjust slider Title Font Scale to change font size.

Example: History.

Accordion

Quick compact piece of information or FAQs.

Title Font: select between primary font and secondary font.

Title Font Size: choose font size for titles.

Color: change accordion color scheme for light and dark backgrounds.

Example: F.A.Q.

Pricing Card

Module to create pricing tables for your products. Create as many tables as you want, and control the pricing and features of each. Switch between two styles and color schemes. Select button style to upgrade your design.

Clients

This module allows you to create a list of logos. You can list the logos in rows and columns. Row items limit: 6 logos. Row will be automatically adapted to content width. You can change style by dropdown menu.

One row, 6 columns, style: only logo.
Two rows, 4 columns, style: gray box.

Team Member

This module is used to show the team members of your company. Each team member can be linked to a page. Place information inside and outside of photo. Add social icons and color it.

Examples: Team, About 01.

Counter

The counter is a great way to animate numbers. This module is commonly used to display statistics about yourself or your company.

Use fields Value Prefix and Value Suffix to add text before or after numbers.

Customize counter by tab Counter Style. You can change font, font size, font weight and colors.

Text Mask

Mask your text with any image or gradient to achieve a cool effect. Use fields Prefix and Suffix to add text before or after mask.

Customize module by tab Font Style. You can change font, font size, font weight, colors, letter spacing and line height.

Image Mask
Gradient Mask
Note. We recommend using full width sections if you choose a font size in Vw/Vh/Vmax/Vmin. Or use columns that are obviously larger than text.
Image Mask
Gradient Mask
Font Style
Examples: Home 12, Home 04.

Large Text

Made stylish text block. This is a very simple module, but it allows you to completely change the design of your page. Just add text lines and customize it.

Enable toggle Mix Blend Mode to blend content with its direct parent background. This allows you to achieve amazing results.

Note. We recommend using full width sections if you choose a font size in Vw/Vh/Vmax/Vmin. Or use columns that are obviously larger than text.
Example: Home 03.
Example: Home 15.
Example: Home 06.

Scrolling Text

One more simple module add some style to you website. Just two text line that move as the page scrolls… but so stylish.

Enable toggle Mix Blend Mode to blend content with its direct parent background. This allows you to achieve amazing results.

Note. We recommend using full width sections if you choose a font size in Vw/Vh/Vmax/Vmin. Or use columns that are obviously larger than text.
Example: Home 01.
Example: Home 03.
Example: Home 07.

Testimonials Slider

Testimonials Slider is a simple module for adding testimonials of your clients on your own site. You can add different types of social proof to make reviews trustworthy: author’s name, photo, logo of the company.

Control count of items per page for desktops, tablets and mobile devices. Choose testimonials style by dropdown menu Style.

Full Width Testimonials Slider
  • Select Full Width by dropdown menu Width.
  • Click on section and select tab Alignment and Spacing. Set: ‘Content Alignment = Full Width‘, ‘All Paddings = 0‘.
  • Open column options to remove left and right padding. Set ‘Padding Left = 0‘ and ‘Padding Right = 0‘ in tab Alignment and Spacing.

Example: Home 01.