Instructions
Everything you need to edit Agasis with confidence
01 Start here02 Editing content03 Page structure04 CMS collections05 Animations06 Variables07 Fonts and assetsBefore you launch
01
Start here
Duplicate before you edit
Work on a copy of the site so you can always compare against the original demo.
Set your brand once
Open Variables, then Colors, and change Secondary Color (orange), Main Color (ink), Subtle Main Color (bone) and White Color (paper). Every page updates automatically, because there are no hard-coded colours anywhere in the template.
Three things behave differently here
Read sections 02, 04 and 05 before you start editing. Some homepage sections are edited in the CMS rather than in component properties, several lists use filters, and the Selected Work scroll is tuned to the number of cards.
02
Editing content
Shared parts such as the Navbar, Process, Clients, CTA, Footer and every button are components. Their text lives in component properties, so double-clicking a heading on the canvas will not let you type.
1
Click the section once to select the component instance
2
Look at the right-hand panel, below Style
3
Edit the fields listed under the component name
Services, Selected Work, Testimonials and Journal are the exception. They are regular sections connected to the CMS, so you change their content in the matching collection instead of on the canvas.
03
Page structure
Agasis is a one-page site. The navbar links jump to each section by its ID, and the detail pages for services, projects, journal posts and testimonials are CMS template pages that share the same navbar, CTA and footer.
Section IDs used by the navbar
01
about, services, work, process, testimonials, journal and contact
02
If you rename or remove a section, update the matching link in the Navbar component properties
03
Buttons use the Primary, Secondary and Link Button components, so a style change updates every button at once
Adding a dark or orange section
Set the section background to Main Color or Secondary Color. On an orange background, switch any Primary Button to its Dark variant so it stays visible.
04
CMS collections
Four collections power the dynamic content. Every field is plain text except the journal body.
01
Services. Name, number, summary, three tags, four included items with a title and text, and a main image. Cards are sorted by the number field, so type 01, 02, 03 to set the order.
02
Projects. Client, year, category, industry, services provided, overview, three stats, a cover and three gallery images, plus a reference to its Service.
03
Blogs. Title, summary, body, category, publish date, read time, cover image and the author's name, role and photo.
04
Testimonials. Name, quote, position, photo, client since and a reference to the related Project.
Filters and SEO
Related Work on a service page shows only projects whose Service equals the current service, and the More lists on journal and testimonial pages leave out the current item. Keep these filters if you rename fields. The SEO title and description of each template page are built from CMS fields plus fixed text, so keep names short and summaries around 80 to 110 characters.
05
Scroll and loop animations
Every animation is a native Webflow Interaction with no custom code. Two of them are worth understanding before you add content.
Selected Work scrolls sideways on desktop
1
The Work list is limited to four projects, and the horizontal scroll distance is tuned for exactly four cards
2
To show more, select the Collection List inside the Work track and raise its Limit
3
Open Interactions, select the Work horizontal scroll and make the end X value more negative
4
Preview on desktop until the last card and the end card are fully visible when the scroll finishes
5
Tablet and mobile use a native swipe row, so no change is needed there
Testimonials loop on their own
The testimonial row is two identical Collection Lists moving right to left in a 50-second loop. The second list is hidden from screen readers. The loop works with any number of items, so you only need to add testimonials in the CMS.
This is the one that will catch you out
Adding a fifth project in the CMS will not change the homepage. Raise the Work list limit, then adjust the horizontal scroll distance, or the extra cards will never scroll into view.
06
Variables
The template uses three variable collections and no hard-coded values. Changing a variable updates the entire site.
Colors
Secondary Color (orange), Main Color (ink), Subtle Main Color (bone) and White Color (paper) drive the design, with translucent versions such as Main Color 10 to 70 and Light Grey Color 20 to 90 for borders and overlays. If you change a base colour, update its translucent versions too, or old tints will show through.
Sizes
The spacing scale, section padding and radius tokens. Radius Full is deliberately 999px so buttons and tags stay pill-shaped at any height. Do not correct it.
Responsive modes
Sizes and Typography have Tablet, Mobile (L) and Mobile (P) modes. Headings and spacing scale down automatically at each breakpoint, so you do not need to override them manually.
07
Fonts and assets
01
Fonts. Syne for headings and Inter for body text, both from Google Fonts, already connected in Site Settings.
02
Images. Sourced from Lummi, free for personal and commercial use. Replace them with your own before launch.
03
Icons. Iconoir, embedded as SVG so they follow the text colour.
Full licensing details are on the template's Licenses page.
Before you launch
01
Delete this Instructions page
02
Replace all demo images, copy and CMS items
03
Set the notification email on the contact and newsletter forms
04
Review the SEO title and description on each page and CMS template
05
Update the Open Graph image in Site Settings and on each page
06
Check the 404 and password-protected pages
07
Publish and test every form and navbar link