How To Customize AlphaWave

Getting Started

AlphaWave is built with native Webflow elements, variables, components and CMS collections. Follow these steps to make it yours.

• Open the Style Guide page first. It shows every heading, text style, color, button and form field the template uses.
• Replace the logo: swap the image inside the Navbar and Footer components. Each component uses one logo asset, so every page updates at once.
• Update the SEO title, meta description and Open Graph image of each page in Page settings.
• Add your notification email under Site settings, Forms, before you publish.

Colors, Spacing & Typography

Every color, font, size, line height, letter spacing, spacer and radius is a Webflow variable. Change a variable once and the whole site updates.

• Color Palette holds the raw shades (Primary, Secondary, Gray, White, Black and accent colors).
• Theme Colors holds the semantic tokens used by the styles: Text Color, BG Color, Border Color and Button Color. Point a theme token at a different palette shade to rebrand.
• Typography holds font families, sizes, weights, line heights and letter spacing, with Tablet, Mobile (L) and Mobile modes applied automatically per breakpoint. Two Google Fonts are used: Inter for headings, body text, navigation and buttons (Heading, Body and Secondary Font Family variables), and Literata, the accent font used for the italic highlighted words in headings (Accent Font Family variable, class heading-accent). To swap a font, add it under Site settings, Fonts, then change the matching font family variable.
• Base collection holds spacers, radius, container sizes and blur. Its responsive modes are applied on the page-wrapper class.

Components

Repeated pieces live in the Components panel. Edit the main component to update every page, or use the properties to change a single instance.

• Navbar, Footer and CTA appear on every page. The CTA has a Body Text property; the Footer holds the newsletter form, social links and the Powered by Webflow credit.
• Buttons (Primary, Secondary, Small Primary, Small Secondary, Light and Link Button) expose Button Text and Button Link. The Primary Button also has a Show Icon toggle.
• FAQ Item exposes Question and Answer, so you can add or edit questions without touching the layout.

CMS Collections

Three collections feed the dynamic content. Add, edit or unpublish items in the CMS panel and every list updates on its own.

• Blog Posts feed the blog lists on Home, About, Services and Blogs, plus the Blog Posts template page for each article.
• Services feed the services list on Home and the Services page, plus the Services template page with each service's details.
• Jobs feed the job listings on the Jobs page, plus the Jobs template page with each role's description.

Forms

The Contact form, the Style Guide form and the Footer newsletter are native Webflow forms, so submissions arrive in Site settings, Forms with no integration.

• Every field has a visible label. Rename a field from its Settings panel (Name) so submissions stay readable.
• Success and error messages use the form-message class (and form-message is-error). Edit their text directly on the page.

SVG Icons

Button arrows, slider arrows, social icons, contact icons (phone, email, office) and card icons are inline SVG code inside Embed elements. Each SVG uses currentColor, width 100% and height 100%, so the class on the Embed controls its size and color.

• Change the color of every button icon: edit the Button Icon Dark or Button Icon Light variable in Theme Colors.
• Change other icons: edit the Text Color variable bound to the icon class (for example contact-info-icon uses Text Color Primary Dark, contact-location-icon uses Text Color Dark), or bind a different color variable on that class.
• Replace an icon: select the Embed in the Navigator, open its code, paste your new SVG and set its fill or stroke to currentColor and its width and height to 100%. Keep aria-hidden="true" for decorative icons.

FAQ Accordion

The FAQ Item component opens and closes with a Webflow Interactions (IX3) animation called Toggle FAQ answer on click. It is scoped to the component, so every FAQ Item on every page works on its own.

• Clicking the question animates the answer height from 0 to auto and rotates the plus icon 45 degrees. A second click plays it in reverse.
• To change the speed or easing, open the FAQ Item component, then the Interactions panel, and edit the timeline of Toggle FAQ answer on click.
• To add a question, drop in another FAQ Item instance and fill in its Question and Answer properties. No interaction setup is needed.

Animations

Every animation in AlphaWave is a native Webflow Interaction (IX3). There is no custom code. Most of them are attached with custom attributes, so you can add or remove motion on any element without opening the Interactions panel. Visitors who turn on reduced motion in their operating system see every element in its final state, with no movement.

Interactions and What They Do

• Hero Load Animation (page load): elements with page-load-1, page-load-2, page-load-3 or page-load-4 fade in and rise 60px, starting 0s, 0.2s, 0.4s and 0.6s after load (page-load-5 = 0.8s).
• Hero Title Animation (page load): the page H1 with hero-title splits into letters that rise and fade in one after another.
• Reveal Animation 0.0s / 0.2s / 0.4s / 0.6s / 0.8s Delay (scroll): elements with Reveal-anim-1 to Reveal-anim-5 fade in and rise 60px when they reach 90% of the viewport. Use 1 for eyebrows, 2 for intro text and button wrappers, 3 to 5 for cards in a row.
• Opacity Reveal (0.2s Delay) (scroll): elements with Reveal-2s fade in without moving.
• Section Title Animation (scroll): section H2s with section-title split into letters that rise in as the heading enters the screen.
• Partners Logo Loop (page load): the logo strip on Home and Contact scrolls left forever (50 seconds per loop).
• Hero Image Scrolling (scroll, Home): the hero photo moves slowly inside its frame as you scroll. It is turned off on mobile.
• Blog Image Hover, Featured Blog Hover, Service Card Hover, Job Card Hover and Values Card Hover (hover): show the arrow badge, the mint overlay, the image zoom or the color change on cards, and play back when the mouse leaves.
• Toggle FAQ answer on click (click): opens and closes each FAQ Item.

Add or Remove an Animation

• Select the element, open Element Settings (D), scroll to Custom attributes and click +.
• Type the attribute name exactly, for example Reveal-anim-2 or section-title, and leave the value empty. Names are case-sensitive.
• To remove an animation, delete the attribute from the list. The element then simply shows without motion.
• Put reveals on wrappers, never on a Primary or Secondary Button itself, so the button hover lift keeps working. Inside Collection Lists, put the attribute on the Collection Item.

Change Timing or Easing

• Open the Interactions panel, select the interaction (for example Reveal Animation (0.4s Delay)) and click its action to edit duration, delay and easing. All reveals use 0.6s with Sine Out.
• Card hovers are scoped to their pages and FAQ to its component. Open that page or the FAQ Item component first to edit them.
• Reduced motion and the mobile switch-off are under Playback conditions on each interaction.

Logo Marquee Structure

logos-track-wrap (overflow hidden) holds two identical logos-track rows. Each row moves from 0% to -100% of its own width, so the second row slides in behind the first and the loop never jumps. Each row has right padding equal to its gap. If you add or replace a logo, change it in both rows. The second row is hidden from screen readers with aria-hidden.