Getting Started with the GitGuardian Component Library in Webflow

Introduction

Welcome to the GitGuardian Component Library guide for Webflow.
GG UI is a Webflow component library that adheres to the company’s design principles. It offers a wide range of pre-built components and provides customization options through component variants, allowing you to implement your designs effortlessly.

Start Now

To use GG UI components, you must be authenticated in the GitGuardian workspace.

The Webflow components can only be built by designers in design mode. However, with ready-to-use components, other users, such as "marketers" and clients, can create new pages using these pre-configured block elements.

Before diving in, ensure you have:

1. Access to Webflow: Ensure you have a Webflow account with the necessary permissions to edit or create projects in your workspace.
   👉 Learn more about Webflow accounts and permissions here.
2. Basic Knowledge of Webflow: Familiarize yourself with Webflow's interface and tools.
   👉 Get started with Webflow University.
3. Permission: Access to the Webflow Page Building system requires specific permissions. The roles with these permissions are listed here.

Step 1: Authenticate and Access Webflow

1. Login to Webflow: Navigate to Webflow Login and enter your credentials.
2. Workspace Access: Ensure you're part of the GitGuardian workspace and that you have build-mode access to the GitGuardian main website.

Step 2: Create a New Page in Webflow

1. Navigate to GitGuardian main website.
2. Select Create New Page from the Pages panel.
3. Choose the template (e.g., Product Page Template, Persona Page Template, Solution Page Template, Industry Page Template).
4. Name your page appropriately (e.g., Product - Product X, Solution - Solution X).

Step 3: Add a component to the page

1. Access the GitGuardian Component Library: Open the GG UI Library.
Select a component type (e.g., Heros, Sliders, Tabs Sections).

2. Search for Components: Scroll to find the desired component and click the copy button.

3. Add Components to Your Page: To add the selected component to the page, just open the Quick find/Search bar and press ctrl + v to paste the exact component name and press Enter.

Step 4: Structure Your Page

1. Set Up Sections: Divide your page into meaningful sections (e.g., Header, Features, Testimonials).
2. Apply Proper Hierarchy: Organize elements with semantic structure for better usability and SEO.

Step 5: Customize and Optimize

1. Edit Content: Replace placeholder text and images with your project-specific content, using the components override.
   Choose the appropriate variants to ensure the components fit seamlessly into your page design.
   Learn more about components here.
2. Test Responsiveness: Use Webflow’s responsive design tools to adjust for different screen sizes.
3. Preview Your Page: Regularly preview your changes to ensure everything looks correct.

Step 6: Publish Your Page

1. Use Webflow's Publish button to deploy your page to a staging or live environment.
2. Verify all components are displaying and functioning as expected.

‍

‍