Instructions

It’s great to see you! This Quick Start Guide will show you basics on how to get started editing your website.

If you are just beginning with Webflow, we highly recommend you to take Webflow 101 Crash Course, as this introductory course by Webflow University offers the overview of the basics and the most essential information you need to learn to get up and building your first Webflow website.

Edit this template with AI

Webflow now supports MCP, which lets AI tools work directly with your site. Once connected, you can update this template by typing what you want instead of editing every page by hand.

How to connect

  1. Open your preferred AI tool that supports MCP connectors.
  2. Add the Webflow connector and sign in to your Webflow account.
  3. Allow access to the site you want to edit.
  4. For image uploads or visual checks, open your site in the Webflow Designer so the AI can see the canvas.

What you can ask it to do

  • Replace all page text with content for your business.
  • Add, edit, or remove CMS items like programs, mentors, or blog posts.
  • Change brand colors, fonts, and spacing site wide.
  • Write SEO titles, meta descriptions, and image alt text for every page.
  • Duplicate pages or sections and update them.
  • Upload and swap images.

Before you start

For bigger changes, start a new chat with this prompt first. It helps the AI learn how this template is set up, so it works with what's already there.

"Review my Webflow site [your site name]. Check the color and font variables, class naming, components, and CMS collections. Give me a short summary. From now on, use the existing classes, variables, and components instead of creating new ones."

Try these prompts

  1. "Change the primary color to #1A7F5A and update all buttons."
  2. "Replace the mentors with these 4 people: [details]."
  3. "Write SEO titles and meta descriptions for every page. My business is [description]."
  4. "Add a new program called [name] with this description: [details]."
  5. "Rewrite the homepage hero for a tutoring center in [city]."
  6. Find more ideas in the Webflow prompt library.

Good to know

Content and style updates work best. Complex animations are easier to fine tune in the Designer. Always review changes before you publish.

Customizing colors

This template utilizes the Webflow variables feature, allowing you to effortlessly modify all colors, which will be promptly updated across the entire site.

To adjust a color, navigate to the Variables panel, then choose the color you wish to modify.

SVG element color

In order to change the color of SVGs, Download .svg file from Assets and open it to any text editor. Change HEX color code with color of your choice and replace updated .svg file with the current file.

Changing fonts

To adjust the font family, navigate to the Variables panel, then choose the font family you wish to modify.

If you want to change fonts, you can always go to Site Settings > Fonts. There, you will be able to upload custom fonts, use Google Fonts, or even connect your Adobe Fonts account.

Once you've uploaded a font from Site Settings, navigate to the Variables panel, then choose the font family you uploaded.

Starter Page

The “Starter Page” template provides a solid foundation for building your pages. It includes a pre-designed header, footer, and a blank section with a container to help you get started quickly.

Duplicate the Starter Page and start editing or adding sections from other pages.

Starter Page

Lenis smooth scroll

This template uses Lenis to create a smooth, modern scrolling experience across all pages. Lenis replaces the browser’s default scroll behavior with a more fluid and refined motion, enhancing the feel of animations and transitions throughout the site.

This is handled entirely through custom code added in your Site Settings.

Where the code is added?

Before </body> tag

In Site Settings, scroll to the Custom Code → Footer (Before </body> tag) section and you'll see the initialization script:

<!-- Smooth scroll -->
<script src="https://unpkg.com/lenis@1.3.4/dist/lenis.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.4/dist/lenis.css">

<script>
// Lenis Smooth Scroll
const lenis = new Lenis({
  smooth: true,
  lerp: 0.1,
  wheelMultiplier: 1,
  infinite: false,
});

// GSAP + Lenis Connect
lenis.on('scroll', ScrollTrigger.update);

gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});

gsap.ticker.lagSmoothing(0);
</script>

How to disable the scroll animation (optional)

To disable the smooth scroll animation, go to Site Settings → Custom Code → Footer (Before tag) and remove the script added there.

Important notes:

  • SVG: For the best visual experience, we recommend using SVG icons and logotypes. You can explore a wide selection of SVG icons on Icon Finder or download them from the Iconstica icons web app.
  • Resize your Images: It is important to resize your images before adding them to your website, rather than simply downloading and placing them as they are. The size and resolution of an image can have a significant impact, and using an image size of 1200px x 800px for a content size of 300px x 200px is unnecessary. Resize it to 300px x 200px.
  • Image Formats: There are mainly 2 common file types that are used for web images which are JPEG and PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images.
  • Compress images: For a better loading site, compress existing image to AVIF or WebP files with the built-in Image conversion tool.
  • Clean up: Clean up interactions and Clean up CSS styles before publishing your site.
  • Audit panel: Before going live with your site, find and fix accessibility issues with Webflow's Audit panel.
  • SEO: Before publishing your site, make sure to edit the Title Tag, Meta Description, etc. For more information on SEO and how to optimize your website, Visit Add SEO title and meta description and SEO and Webflow: the essential guide.