.svg)
Documentation & Setup Guide
Thank you for purchasing Pluggo – a scalable CRM Webflow template. This guide will walk you through the essential steps to set up, customize, and launch your website with confidence.
Getting Started
Thank you for purchasing the Pluggo template! This documentation will help you quickly understand how to customize core elements such as colors, typography, and CMS-driven content.
If you're new to Webflow, we recommend starting with the Webflow 101 Crash Course available on Webflow University. It covers the fundamentals you need to confidently edit and manage your website.
Colors & Fonts
Start by personalizing the visual identity of your template.
Colors
Pluggo uses global color variables, enabling consistent, site-wide color updates from a single location.
To update colors, open the Variables panel in the left sidebar, navigate to the Colors section, and modify any color swatch. Changes will automatically apply across all connected elements.
.webp)
Fonts
Pluggo uses a centralized typography system powered by variables, allowing you to update your primary font across the entire site instantly.
To update your font, open the Variables panel, select the main font variable, and apply your preferred brand typeface.
.webp)
To use custom or premium fonts, go to Site Settings → Fonts, where you can upload custom files or connect Adobe Fonts for expanded typography options.
.avif)
Graphics & Icons
Some visual elements in the template are image-based assets (PNG, JPG, SVG), meaning their colors are not controlled by CSS variables.
To customize these assets, edit them in design tools such as Figma, Illustrator, or Photoshop, or replace them with your own brand-aligned graphics.
Editing Pages
Static content refers to elements that are not connected to the CMS, such as fixed text, images, and layout components.
Static Content
Static Content is all the content that is not CMS-based, which means that it is not dynamic (like a Blog Post, for example).
.avif)
You can identify static elements in the Navigator panel, where they appear as standard elements without CMS bindings.
To edit static content, simply select the element and update it directly within the Designer.
Best Practices
Below are key best practices and tips to help you work more efficiently and maintain a high-quality website.
Interactions
To modify animations or interactions, locate elements marked with the Interactions icon in the Navigator panel.
Click the icon to open the Interactions panel, where you can adjust or remove animations as needed.
.avif)
Responsive Design
After making design updates, always review your layout across tablet and mobile breakpoints to ensure responsiveness.
Minor content updates typically require minimal adjustments, but structural changes should always be tested across all breakpoints to maintain design consistency.
SEO & Social Sharing Settings
To customize SEO settings and social sharing previews, open the Pages panel, access page settings, and update the meta title, description, and open graph image.
.webp)
These settings should be optimized individually for each page.
Backups
If you need to restore a previous version, Webflow’s backup system allows you to quickly revert changes.
.avif)
Access backups in Site Settings, where you can review and restore previous versions with a single click.
Support & Assistance
While Pluggo is built for ease of use, our support team is available to assist you with any questions or issues.
Custom Design & Development
If you need a fully customized version of Pluggo or a bespoke Webflow solution, our team can deliver tailored design and development services to match your requirements.