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
- This is unordered list item
- This is unordered list item
- This is unordered list item
- 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.
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.
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.
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.
Styles added here will apply at 478px and down. Sprkl use 2 column grid at SM breakpoint. You can change them from here.
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.
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).
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.
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).
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
Alignment
Elements display
Borders
Plans
Images
Navigation
Horizon Insights
Floor 35, 68 Harborview Tower, Wan Chai District, Hong Kong, Hong Kong SAR