Instructions

Last updated on October 26, 2026.

Open a page from the Pages panel. Select text or an image in the Navigator to edit it. Purple CMS fields are edited in the Projects or Blog Posts collection. Green component instances share their structure and styles across pages.

Use the Variables panel for shared colors, fonts, and spacing. Update shared classes in the Style panel. Test desktop, tablet, mobile landscape, and mobile portrait after changing typography or spacing.

Edit project titles, years, images, descriptions, and links in CMS → Projects. Home shows 5 projects, Projects shows 7, and About shows 2. Select the Collection List wrapper in the Navigator, then change the item limit in Element Settings to show more or fewer. Display order controls the sequence. Review the Projects Template after editing content.

Edit articles in CMS → Blog Posts. Home displays 3 and Blog displays 6. Adjust Collection List settings to change the number shown. Blog Card is a shared component; edit its layout once to update every use. Article content and images come from CMS fields.

Headers, Footer, Mobile Navigation, cards, and shared sections are organized in the Components panel. Edit the main component for shared design changes. Use exposed properties for per-instance content. Keep CMS property bindings when editing collection cards.

The responsive Menu button appears at tablet and mobile widths. Edit its native links and styles in Components → Navigation → Fullscreen Mobile Menu. Its documented GSAP embed controls opening, closing, and slide-in motion. Test in Preview with custom code enabled. Keep internal links in the same tab and external links in a new tab. Footer arrows go to each page’s top; project and blog detail arrows return to their listing pages.

Open the Interactions panel to edit named Webflow interactions. Blog cards zoom their own image when the pointer enters the card, then reverse on leave. Duplicate an interaction before experimenting. Respect reduced-motion settings and verify keyboard navigation.

Replace images using the Asset panel or the relevant CMS image field. Provide meaningful alt text for informative images. Compress raster images, preserve aspect ratios, and check sharpness on large screens. Only use media with confirmed template redistribution rights.

Edit form labels, field names, validation, success, and error messages in the Designer. Configure your own notification address after installing the template. Preview every page and CMS item, check navigation and form behavior, then publish when ready.

Most page animations are editable in Webflow’s Interactions panel. The code embeds described below use GSAP for specific interactive effects. Keep Webflow’s GSAP and ScrollTrigger libraries enabled. They respect the visitor’s reduced-motion preference.

Fullscreen Mobile Menu: edit the native links and styles inside the Fullscreen Mobile Menu component. Its script animates .fullscreen-menu from yPercent: -100 to 0, with duration: .55 and ease: "power4.out". Change those values in the component’s GSAP code embed to adjust the entrance. Keep the open, close, keyboard-focus and scroll-lock handlers when changing the motion.

FAQ Section: the native details elements keep their keyboard and disclosure behavior. The GSAP embed rotates .accordion-icon-vertical between 90 and 0 degrees over .25 seconds and animates question spacing and the answer entrance over .35 seconds. The icon bars are editable native spans. Keep the native details and summary tags.

Achievements Section: Webflow’s native Dropdown controls each panel. The GSAP embed observes its expanded state and rotates the editable vertical icon bar over .25 seconds. Change duration to adjust the icon motion.

Password page: native hidden form fields preserve Webflow’s password routing. The GSAP embed reveals an incorrect-password message after a failed attempt, with a .2-second fade and a 4px movement. Keep the form action, hidden fields, pass input ID and password-error message ID unchanged.

To disable motion, set the relevant GSAP duration to 0. Do not remove navigation-menu event handlers unless you also replace their open and close behavior. Removing the FAQ or achievement animation embed leaves native disclosure controls working, but the decorative icon will remain a plus. Home and Services include a small page-head CSS rule for Webflow’s native GSAP interactions. It keeps the initial hero, navigation, Services heading and first service card visible while the interaction runtime starts. The selectors are restricted to the page ID and #top and stop applying once Webflow adds w-mod-ix3. The first service card uses data-image-priority="high"; its image remains eager-loaded. These rules do not replace layout styles. Edit the existing native rise/movement interactions in the Interactions panel; the initial above-the-fold opacity fades have intentionally been removed. Keep the below-the-fold service-card fade and the other animations separate.

Projects listing: the native CMS lists show items 1–5 and 6–7, sorted by Display Order. The first card of each desktop group is wide. Update the list limits and offsets together if you change the number of projects; avoid duplicate or skipped items. Studio showcase and Projects caption styling use named combo classes.