Get started

Thanks for purchasing the Horizon Webflow Template!

The Horizon Webflow Template is powered with an advanced TheSprkl UI Kit Styleguide and a various Components, which intended to help you develop your site further following your growth.

We strongly suggest that you take the Webflow 101 Crash Course from Webflow University if you are not well-versed in using Webflow. This course will provide you with all the fundamental knowledge required to start using the platform effectively.

Follow Styleguide page to get information of template resources and possibility.

Youtube tutorial

Watch our definitive guide on TheSprkl Templates! Dive deep to explore the structure, customization, and optimization of Templates to align perfectly with your branding and business goals.

Frequently Asked Questions

Need Assistance?

If you require assistance in building a custom and distinctive version of Horizon or a spectacular website created from the ground up using Webflow, please don't hesitate to contact our Creative Agency. The exceptional team responsible for the Norizon  Webflow Template will be delighted to assist you.

Can I ask for a template?

If you have a idea for a Webflow Template that you would like to be built, submit it to us and we'll be happy to reward you with a very special price.

Can I get a support?

Sure thing! Ping as at templates@ego-cms.com and we'll be happy to assist you!

Quick start

By default TheSprkl UI Kit uses 12-column grid with Max Width of 1320px on LG (deskrop) breakpoint, 6-Column grid on MD (Tablet) and MDL (Mobile landscape) breakpoints and 2-column grind on SM (Mobile portrait) breakpoint. Everything are ready to work from the box without any changes.

Below you'll know how to set Custom grids and change colors in the system.

Grid setup

In case if you'd like to set Custom grid, please go through the simple steps below.

Wrapper

Wrapper holds rows or block components, in other words it responsible for overall structure.

With this class you can set your website global Margins (left and right). By default Sprkl uses 20px margins on LG breakpoint (Desktop).

Make sure to add changes on MD, MDL and SM breakpoints.

In addition don't forget to set Max Width for Wrapper class (Row Max Width + Global Margins).

Row

Row each row holds columns and is a global class for all rows. With this class you can set your website Max Width.

By default Sprkl uses 1320px Max Width.

Columns

Col is a global class for all columns. With this class you'll be able to set gutters. By default Sprkl uses 40px gutters (20px on left and right sides) on LG breakpoint (Desktop).

Make sure to add changes on MD, MDL and SM breakpoints.

Colors setup

Overview

On the colors page you'll know what classes Sprkl uses to style background and text. Changes to those classes will only affect components which uses them. In order to make changes globally you need to update color swatch, as all colors are taken from one single color swatch.

Update color in swatch

  1. This is unordered list item
  2. This is unordered list item
  3. This is unordered list item
  4. This is unordered list item


Now changes will affect all classes and components which use color from this swatch. Make sure you don't forget to press Save button, otherwise changes won't be saved.

Breakpoints

The Grid System can adapt across all 4 default webflow breakpoints (Desktop, tablet, mobile ladscape and mobile portrait). We are using different names for breakpoints e.g. Desktop = Large (LG), Tablet = Medium (MD), etc. Default grid tiers are as follows:

  • Large (LG) - Base

  • Medium (MD) - ≤ 991

  • Medium landscape (MDL) - ≤ 767

  • Small (SM) -  ≤ 478

HEADS UP. Switch between breakpoints in designer mode in order to make changes.

Large (LG)

Styles apply at all breakpoints, unless they’re edited at a larger or smaller breakpoint. Sprkl use 12 column grid at LG breakpoint. You can change them from here.

lg1
lg2
lg3
lg4
LG5
LG6
LG7
LG8
LG9
LG10
LG11
LG12
Mediuam (MD)

Styles added here will apply at 991px and down, unless they’re edited at a smaller breakpoint. Sprkl use 6 column grid at MD breakpoint. You can change them from here.

MD1
md2
md3
md4
md5
md6
Medium landscape (MDL)

Styles added here will apply at 767px and down, unless they’re edited at a smaller breakpoint. Sprkl use 6 column grid at MDL breakpoint. You can change them from here.

mdl1
mdl2
mdl3
mdl4
mdl5
MDL-6
Small (SM)

Styles added here will apply at 478px and down. Sprkl use 2 column grid at SM breakpoint. You can change them from here.

SM1
SM2

Structure

The design system use a series of containers, rows, and columns in order to build different layouts. Overall structure listed below.

  • Body

  • ↳ Section

  • ↳↳ Wrapper

  • ↳↳↳ Row

  • ↳↳↳↳ Col

Section

You can visually structure you content into logical groups with Section global class. Wrapper, Row and Col classes should be nested inside of it.

Section

Wrapper

Wrapper defines global paddings of your website. Note that wrapper has its own Max-width and should be sum of Row width and global paddings width (e.g. Row width 1320px + 20px left global padding + 20px right global padding = 1360px Wrapper max-width).

Wrapper

Row

All columns should be nested inside of rows, you can stack any row amount on top of each other. Rows defines Max-width of your content and its overall width includes left and right paddings of nested columns.

Row

Columns

Columns constructed of Col global class and LGN supporting combo class. Where Col class holds global settings for columns and LGN defines width of the column (where N is a number 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 which defines width of column).

COL

Modifiers

Modifier is a global or combo-classes which brings you an additional layer of customization for your components and designs. Below you'll find available list of all available modifiers.

Containers
Modifier
Full Screen
BG Image
Wrap
Fill 25%
Fill 50%
Fill 75%
Fill 100%
Description
Sets container height to 100vh.
Adds Background-image to a selected container.
Adds Wrap to Flex block
Sets container width to 25%.
Sets container width to 50%.
Sets container width to 75%.
Sets container width to 100%.
Alignment
Modifier
AHS
AHC
AHE
AHST
AVS
AVC
AVE
AVST
JHS
JHC
JHE
JHSB
JHSA
JVS
JVC
JVE
JVSB
JVSA
Sizing Shring
Sizing Grow
Sizing None
Description
Align horizontal start.
Align horizontal center.
Align horizontal end.
Align horizontal stretch.
Align vertical start.
Align vertical center.
Align vertical end.
Align vertical stretch.
Justify horizontal start.
Justify horizontal center.
Justify horizontal end.
Justify horizontal space between.
Justify horizontal space around.
Justify vertical start.
Justify vertical center.
Justify vertical end.
Justify vertical space between.
Justify vertical space around.
Sizing: shrink if needed.
Sizing: grow if possible.
Sizing: don't shrinl or grow.
Elements display
Modifier
Display None
Display LG
Display MD
Display MDL
Display SM
Hide MD
Hide MDL
Hide SM
Description
Hide element from all resolutions.
Display element only at LG resolution.
Display element only at MD resolution.
Display element only at MDL resolution.
Display element only at SM resolution.
Hide element at MD resolution.
Hide element at MDL resolution.
Hide element at SM resolution.
Borders
Modifier
Border Around
Border Top
Border Bottom
Description
Adds 1px border around an element.
Adds 1px border at the top of an element.
Adds 1px border at the bottom of an element.
Plans
Modifier
Promo plan
Promo plan
Description
Helps to highlight preferred plan. Adds 2px outline around an element.
Helps to highlight preferred plan. Adds 2px outline around an element.
Images
Modifier
Image
Side Image
BG Image
Column Image
Description
Default image class. No spacings applied.
Adds 40px bottom margin on MВ and lower resolutions.
Adds Background-image to a selected container.
Adds 24px bottom margin

Horizon Insights

Horizon Template Ltd,
Floor 35, 68 Harborview Tower,  Wan Chai District, Hong Kong, Hong Kong SAR
+1 000 000 00horizoninsights@gmail.com