A step-by-step guide to help you set up, customize, and launch, your Swingora template in Webflow with ease.
01
Global Settings
Start by updating the global settings to match your brand. All core design tokens are managed through Webflow's Style Panel and Site Settings.
- Open the Style Panel → navigate to Variables → update primary, secondary, and accent colors
- Go to Site Settings → Fonts → replace with your preferred Google or custom font
- Select the Logo image in the Navigator → open Asset Panel → swap with your own logo file
- Check all pages after changes to ensure consistency
02
Swap Images
Images in this template are ready to use. You can replace any of them with your own assets whenever needed.
- Click on any image on the canvas
- Open the Element Settings panel (press D)
- Click the image thumbnail → select from Asset Panel or upload a new file
- Recommended ratio: 16:9 for hero images, 4:3 for cards, 1:1 for thumbnails
03
Edit Content
All text content is fully editable directly on the canvas. No special setup required.
- Double-click any heading or paragraph to enter edit mode
- Update CTA button text by double-clicking the button element
- To update links, select the element → open Element Settings → update the URL
- For Rich Text blocks, double-click to access the rich text editor
04
CMS Setup
This template includes 3 CMS collections - Projects, Services, and Blogs. Each collection powers its respective pages dynamically.
- Go to CMS Panel → open each collection
- Review the existing items to understand the content structure, then edit or add your own items as needed.
- Add your own items by clicking + New Item and filling in all fields
- Each collection item is automatically linked to its template page - no extra setup needed
- Publish the site after adding content to make it live
⚠️ Do not delete or rename any collection fields — it will break the dynamic bindings on the template pages.
05
GSAP Animation
This template uses GSAP combined with Webflow's native interactions for smooth animations. Follow these guidelines to avoid breaking them.
- Do not delete any element that has an interaction trigger attached
- Do not rename classes that are used as animation targets
- To disable an animation, open the Interactions Panel → select the element → remove or turn off the trigger
- Animations are set to trigger on page load and scroll - test on preview before publishing
⚠️ Modifying trigger elements or renaming targeted classes will cause animations to stop working. When in doubt, leave animation-related elements untouched.
