You can easily update the website colors using Webflow’s Style panel. Select the element you want to customize, then change its background, text, border, or other color settings from the appropriate style options.
For consistent styling across the entire website, we recommend using existing color variables instead of applying individual colors to each element. Updating a shared variable can automatically update every element connected to that color.
Heading styles control the appearance of titles and section headings throughout the website. To edit a heading, select it in the Designer and use the Style panel to adjust the font family, size, weight, line height, spacing, and other typography settings.
For global changes, edit the main heading styles such as H1, H2, H3, and other heading tags from the Style Guide. This helps maintain consistent typography and prevents unnecessary custom styles across different pages.
The Style Guide contains the main visual styles used throughout the template, including typography, colors, buttons, form elements, spacing, and other common design elements. It provides a clear reference for the overall design system.
Using the Style Guide makes customization easier and helps maintain visual consistency. Before creating new styles, check the Style Guide to see whether an existing class or design element can be reused.
Components are reusable Webflow elements that can be used across multiple pages. Common examples include navigation bars, footers, call-to-action sections, and other elements that appear repeatedly throughout the website.
Components help keep repeated content consistent and easier to manage. Instead of editing the same section on every page, you can update the main component and apply those changes wherever the component is used.
To edit a component, select the component instance in Webflow and enter the main component editing mode. Changes made to the main component structure or styling can automatically appear across all connected instances.
Some component content may be customized through properties without changing every instance. Use component properties when you need different text, links, images, or other content while keeping the same overall design and structure.
Color variables are reusable color values stored within Webflow. Instead of entering the same color code repeatedly, you can create a variable and connect it to backgrounds, text, borders, buttons, and other elements.
Variables make global color customization much faster. When a color variable is updated, every element using that variable can reflect the new color, helping maintain a consistent visual identity across the website.
Open Webflow’s Variables panel to view the colors used throughout the template. Select the color variable you want to modify and replace its existing value with your preferred brand or project color.
Before changing a variable, remember that it may be connected to several elements across the website. Review the affected sections after making changes to ensure proper contrast, readability, and overall design consistency.
Typography can be customized from Webflow’s Style panel. Select a text element and adjust its font family, font size, weight, line height, letter spacing, alignment, and other available typography properties.
For a consistent result, update global typography styles whenever possible instead of changing individual text elements. This makes it easier to maintain the same visual hierarchy across headings, paragraphs, buttons, and other content.
GSAP, or GreenSock Animation Platform, is a JavaScript animation library used to create smooth and controlled animations for modern websites. This template may use GSAP to enhance selected elements with motion and interactive effects.
GSAP is useful for creating polished animations while providing precise control over timing, easing, sequencing, and movement. These animations help make the browsing experience more engaging without changing the website’s core content.
GSAP animation settings are usually controlled through custom JavaScript added to the website or individual pages. You can modify values such as duration, delay, easing, position, opacity, scale, and animation triggers within the relevant script.
When editing GSAP code, make small changes and preview the website before publishing. Avoid removing important selectors or animation logic unless you understand how they are connected to the elements used throughout the template.
To replace an image, select the image element in Webflow and choose a new asset from the Assets panel or upload your own image. For background images, select the section or element and update the image from the background settings in the Style panel.
Use properly optimized images to maintain good website performance. Choose images with suitable dimensions and compression so they remain clear while keeping page loading times as low as possible.
Buttons, text links, navigation items, and other clickable elements can be updated directly from Webflow. Select the element and use the link settings to connect it to another page, section, external website, email address, or other supported destination.
After updating links, test important buttons and navigation elements in Preview mode. Make sure every interactive element leads to the correct destination and avoid leaving empty or placeholder links before publishing the website.
The Trends-Eng template includes three CMS collections to help you manage and update your website content with ease. The Blog collection contains 9 posts, the Services collection includes 13 items, and the Projects collection features 10 items. You can easily add, edit, or remove CMS items through the Webflow CMS panel to keep your website content up to date.
Trends-Eng includes 12 distinct page layout variations across Home, About Us, Services, and Contact, with three variations for each page type. Each variation features a unique layout, typography, heading structure, and section arrangement, offering greater design flexibility and customization options for different website needs.
This template uses Space Grotesk for headings. Please check the Style Guide for the body font and typography settings. The CMS includes Blogs, Services, and Projects collections, allowing you to manage and update content directly from Webflow’s CMS. To add or edit content, open the CMS panel, select the desired collection, and create or update items using the available fields. If Lenis Smooth Scrolling is enabled in this template, it provides a smoother scrolling experience; keep its settings and custom code intact for the effect to work correctly.
.svg)