Step-by-Step Guide

‍

Where to find it: Project Settings > Custom Code > Before </body> tag (or individual Page Settings for pages other than Home).

What it does:

For the rest of the website (About, Projects, Blog, Contact), we use Lenis, a state-of-the-art smooth scroll library. It removes the clunky, jagged scrolling of standard web browsers and replaces it with a fluid, momentum-based glide.

How to customize it:

Look for the Initialize Lenis section in the code. You can adjust the following values to change how heavy or fast the page feels:

1. Duration (duration: 1.2,)This controls how long the scrolling momentum lasts.

• 0.8 = Faster, lighter page feel.
• 1.2 = Default Daylight premium weight.
• 2.0 = Very heavy, cinematic, slow glide.

2. Touch Multiplier (touchMultiplier: 2,)This speeds up how fast the page moves when users swipe on trackpads or mobile devices. You can increase this to 3 if the site feels too slow on laptops.

⚠️ Important Settings to Leave Alone:

• smoothTouch: false — Keep this false! Forcing smooth scroll on mobile touch screens creates a terrible, laggy experience. Native iOS/Android scrolling is always better for phones.
• Keep your main page wrappers padded with at least 1px of bottom margin/padding to ensure Lenis can calculate the absolute bottom of the page perfectly.

‍

Updating the branding is the first step to making the template yours.

• Enter the Component: Double-click the Navbar component to enter edit mode.
• Select the Image: Click on the Brand Image (Logo) placeholder.
• Replace: Click the Gear Icon (Settings) in the top-right of the element and select Replace Image. Upload your logo, and it will update across the entire site.

The CMS (Content Management System) is where you'll manage your dynamic content like Case Studies or Blogs.

• Access the CMS: Click the CMS icon (stacked coins) in the top-left toolbar.
• Choose a Collection: Navigate to the Case Studies or Blogs collection.
• Edit or Add: Click on an existing item to change the text and images, or click the + New button to create a brand-new post from scratch.

To ensure your site looks great on Google and social media, you need to update your metadata.

• Open Pages: Open the Pages list on the left-hand side.
• Page Settings: Hover over the page you want to edit and click the Gear Icon next to the page name.
• Update Info: Scroll down to the SEO Settings section to update your Title Tag and Meta Description.
• Social Sharing: Keep scrolling to the Open Graph section to upload the image people see when you share your link on LinkedIn or X (Twitter).

These are the small icons that appear in browser tabs and on phone home screens.

• Go to Settings: Click the Webflow Logo in the top-left corner and select Site Settings.
• Upload Icons: Navigate to General > Icons.
• Format: Upload your Favicon (32x32px) and your Webclip (256x256px). Don't forget to Publish your site for these changes to take effect!

‍

‍