Instructions
Welcome! This Quick Start Guide will introduce you to the basics of editing your website.
If you're new to Webflow, we highly recommend taking the Webflow 101 Crash Course. This introductory course from Webflow University provides an essential overview of the basics and the most important information you need to start building your first Webflow website.
Styling Colors
The FlaskSipper template is designed with Webflow Color Variables, allowing you to easily modify a color swatch and have it update across the entire site.
To do this, navigate to the Variables tab (V) in the left sidebar, scroll to Colors, and double-click the color you wish to change. This will enable you to update it site-wide to any desired color.
Changing Fonts
The FlaskSipper template uses a single font site-wide, set up as a variable. This allows you to update the font across the entire site with just one click.
To do this, navigate to the Variables tab (V) in the left sidebar, select the Main Font variable, and change it to any font that suits your brand.
Starter Page Template
Users can easily navigate to Page (P) -> Static Page Templates and start building their page using the Starter Kit. This approach offers a Client-first navigation structure and ready-to-use Components, eliminating the need to create everything from scratch.
Custom CSS & JS
The FlaskSipper template incorporates SwiperJS for all its sliders, ensuring a seamless and dynamic user experience.
Each slider is tailored for specific scenarios, such as the Slider-thumbnail-synced feature, which enhances the Product Gallery with Variants, and the Infinite Autoplay Slider, designed to effectively display Quantifying results.
Dynamic Content (CMS)
Dynamic Content refers to all content that is automatically generated based on the information added in the CMS section, located in the left sidebar just below the Pages icon.
You can easily identify this content as it appears in purple in the left sidebar Navigator and displays a purple border when clicked or hovered over.
E-Commerce
E-commerce content is tailored to manage and display product information dynamically, much like CMS content. It allows for seamless updates and management of product listings, pricing, and inventory.
This content is easily recognizable in the left sidebar Navigator by its distinct purple color, and it highlights with a purple border when interacted with, ensuring that users can efficiently manage their online store's offerings.
Useful Reminders
- SVG: For top-notch visuals, we recommend using SVG icons and logos. You can explore a variety of SVGs on Icon Finder, and refine the results using the free filter to find what you need.
- 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 to WebP or AVIF: For a better loading site, compress existing image assets with the built-in Webflow conversion tool.
- Clean up: Tidy up interactions and styles in CSS before launching. This helps ensure your site runs smoothly and doesn’t load unnecessary scripts or styles.
- Audit panel: Before launching, inspect your site with Webflow’s Audit panel to fix accessibility problems and other site issues that could affect usability.
- SEO: Before going live, update the SEO meta title and description. For tips, visit Webflow’s SEO guide and check your site’s SEO score using their available tools.
- Backup: Always ensure to back up your site before making significant updates. This precaution allows you to revert to a previous version if any issues arise during the update process.