Changelog

Documentation of template changes.

Introduction

The Nextlo Webflow Template is built with Webflow, a powerful no-code platform for creating modern and fully responsive websites. If you’re already familiar with Webflow, customizing and editing this template will be smooth and intuitive.

This page includes key guidelines and best practices to help you get started quickly and make the most of your new template.

Introduction

Color Palette
Defines primary, secondary, and accent colors used throughout the site.
Typography
Includes font choices, sizes, and styles for headings, paragraphs, links, and text highlights.
Spacing & Layout
Sets guidelines for margins, padding, containers, sections, and grid structure.
UI Components
Pre-styled elements like buttons, inputs, forms, and navigations — ready to reuse and customize.
Imagery & Icons
Usage guidelines for photos, illustrations, icons, and backgrounds to keep visuals consistent.

How to Edit the Style Guide

Follow these steps to customize the visual identity of your site:

Open the Style Guide Page
Go to the Pages panel and click on the "Style Guide" page. This is your workspace for global design standards.
Use the Style Manager
In the right sidebar of Webflow Designer, open the Style panel to edit text, layout, and color settings.
Edit Global Color Swatches
Navigate to the Colors section in the Style panel. Modify existing swatches or add new ones to instantly update your template's color palette.
Customize Typography
Select any text element (e.g., H1–H6, Paragraph, Link) and update font family, size, weight, and line height. These changes will reflect across the template.
Update UI Components
Select elements like buttons, forms, or navbars and tweak their styles using the Style panel to match your brand.
Adjust Layout & Spacing
Modify margin and padding on sections, containers, and components to maintain clean and consistent structure.
Preview & Publish
After making updates, preview the site across all breakpoints. Once you're happy with the changes, publish your site to apply the updates globally.

Tip:

Any style changes made here will affect all pages that use the same classes and global elements. Always check your layout across all breakpoints (desktop, tablet, mobile) before publishing.

Class Naming and Combo Classes in Webflow

In Webflow, class naming and combo classes are essential concepts for organizing and styling your website efficiently. Here's an explanation of these concepts and the conventions mentioned:

Class Naming

Class naming in Webflow refers to how you label the CSS classes for your elements. Consistent class naming helps maintain a clean, organized, and easily manageable codebase. The template you're working with suggests using one of the following naming conventions consistently:

Default
Uses spaces between words, capitalizing each word (e.g., "Hero Container Element")
Snake Case
Uses underscores between lowercase words (e.g., "hero_container_element")
Pascal Case
Capitalizes the first letter of each word with no spaces (e.g., "HeroContainerElement")
Camel Case
Capitalizes the first letter of each word except the first, with no spaces (e.g., "heroContainerElement")
Kebab Case
Uses hyphens between lowercase words (e.g., "hero-container-element")
BEM (Block Element Modifier)
A naming methodology that uses double underscores for elements and double hyphens for modifiers (e.g., "block__element--modifier")

Choosing one convention and sticking to it throughout your project ensures consistency and makes your code more readable and maintainable.

Combo Classes

Combo classes in Webflow are a powerful feature that allows you to combine multiple classes on a single element. This approach enables you to create reusable styles and apply them flexibly across your site. Here's how combo classes work:

You can apply multiple classes to an element by creating a new class.
Each class in the combo can define different aspects of the element's style.
Combo classes allow for more modular and reusable CSS, reducing redundancy in your stylesheets.

For example, using the BEM naming convention, you might have a combo class like this:
‍button button__primary--large

This combo class applies the base button styles, styles specific to primary buttons, and styles for large-sized buttons.

By using consistent class naming conventions and leveraging combo classes, you can create a more organized, flexible, and maintainable design system in your Webflow project.

Webflow Components and Symbols

In Webflow, components (also known as symbols) are reusable design elements that can be created once and used multiple times across your website. They are powerful tools for maintaining consistency and efficiency in your web design process. Here's an overview of Webflow components/symbols:

What are Webflow Components/Symbols?

Components or symbols in Webflow are design elements that you create once and can reuse across your website. They can be anything from simple buttons to complex layouts like headers or footers.

Key Features of Components/Symbols:

Reusability
Once created, a component can be used multiple times across different pages of your website.
Consistency
Changes made to the original component are automatically applied to all instances, ensuring design consistency
Customization
Individual instances of a component can be customized without affecting the original or other instances.
Nested Components
You can create components within components for more complex, modular designs.

How to Use Components/Symbols:

Create a Component
Select the elements you want to turn into a component and click the "Create Component" button in the top right corner of the Designer.
Use a Component
Drag and drop the component from the Symbols panel onto your canvas where you want to use it.
Edit a Component
Double-click on a component instance to enter isolation mode, where you can make changes to the original component.
Customize Instances
Select a component instance and use the Properties panel to make instance-specific changes.

Using components effectively can significantly streamline your workflow, reduce redundancy in your design, and make site-wide updates much easier to manage.

Editing & Adding Interactions in Webflow

Webflow’s Interactions feature allows you to build animations and user-triggered effects without writing any code. Whether you’re editing an existing interaction or creating a new one, here’s how to do it step by step.

Editing Existing Interactions

Select the Element
Click on the element that already has an interaction applied.
Open the Interactions Panel
Click the lightning bolt icon in the right-hand sidebar to open the Interactions tab
Locate the Interaction
Under the “Element Trigger” or “Page Trigger” section, find the interaction you want to modify.
Make Edits
Adjust the trigger type, animation steps, easing, duration, or delay as needed.
Save Changes
Edits are saved automatically. Use the Preview button to test your changes before publishing.

Adding a New Interaction

Select an Element
Click on the element you want to animate.
Open the Interactions Panel
Go to the right sidebar and click the Interactions tab.
Click “+” to Add an Interaction
Choose whether it’s a Page Trigger (e.g., on page load, scroll) or an Element Trigger (e.g., click, hover, scroll into view).
Set the Trigger
Define when the animation should run (e.g., on click, on hover, while scrolling).
Choose an Animation
Select an existing animation or create a new one with keyframes like Move, Opacity, Scale, Rotate, etc.
Customize Settings
Fine-tune the interaction by adjusting:
-Duration
-Delay
-Easing (e.g., ease-in-out, linear)
Test & Save
Use Webflow’s Preview mode to test the interaction in real time. When you're satisfied, save and publish your site.

Pro Tips

Go to the right sidebar and click the Interactions tab.
Choose whether it’s a Page Trigger (e.g., on page load, scroll) or an Element Trigger (e.g., click, hover, scroll into view).
Define when the animation should run (e.g., on click, on hover, while scrolling).
Select an existing animation or create a new one with keyframes like Move, Opacity, Scale, Rotate, etc.

Help

New to Webflow? No worries! Get started with Webflow University's 101 course.
If you have any questions, please do not hesitate to contact us.