Instructions.
How to make Cifra your firm's site: details, content, charts and animations. Most changes are made once and update every page.
Getting started
- Firm details. Replace Cifra, the entity names (Cifra Partners LLP, Cifra Wealth Ltd, Cifra Asesores, S.L.P.), addresses and registration numbers in the Nav, Footer and Contact CTA components. Each component is edited once and updates every page.
- Pick your homes. Home (Tax & accounting), Wealth and Advisory share one design system. Keep one, two or all three. To make Wealth or Advisory your homepage, copy its sections into Home and delete the pages you do not use.
- Figures. The Statement of the firm and the green ledger band are plain text on each home. Edit them in place.
- Deadlines. Each deadline has a Due date, an Office and a Practice. Lists hide past dates on their own and filter by practice and office. For deadlines due in the next two weeks, set Status to Due soon and paste ✓ in Tick.
- Services and cases. Each item belongs to a Practice. Every home shows only its own, ordered by the Order field. Each service page pulls its Lead adviser, Advisers, Related services and Further reading from the fields of the same name, so fill them in when you add a service. Case pages list the Advisers who led the work.
- People, insights and legal pages. Each adviser page lists the services where they appear under Advisers and the guides where they are the Author. Insights are ordered by Date. Legal notice, Privacy, Cookies, Regulatory information and Complaints live in the Legal collection and share one template.
- Forms. The Contact, Application (on Careers) and Newsletter forms send to Webflow form submissions. Add your notification email in Site settings, Forms.
- Notices. Review the regulatory notice in the footer and the investment risk warning on the Wealth home with your compliance lead.
Layouts
Cifra comes with three versions of the Home, Fees and Firm pages, one per practice. Keep the set that fits your firm and delete the other pages, or mix sections between them: every section is built from the same classes.
Colours and type
Colours, font and sizes are Webflow variables. Open the Variables panel: the Brand collection holds the colours and the font, and the Responsive collection holds the type sizes and spacing, with their own values for tablet and mobile. Change a variable once and every page follows. The Style Guide shows them all.
Charts (inline SVG)
The quarterly chart on each home is inline SVG inside an Embed element (class chart-embed). To change the data, open the Embed and edit the height and y of each rect: bar height = value ÷ axis maximum × 280, and y = 294 − height. Update the desc text too, so screen readers read the new values.
How to Edit GSAP Animations
All animations are Webflow Interactions built with GSAP. Open them in the Interactions panel. Every one respects reduced motion.
Element Map
Customizing Key Variables
Select the interaction, then the action, and change these values:
Removing GSAP Animations
- Open the Interactions panel and delete the interaction, or remove its trigger.
- Elements stay in their final state, so nothing disappears. The only exception is the case photos: if you delete their interaction, check that they show at full opacity.
- To turn off motion on one breakpoint only, add a breakpoint condition (Don't animate) instead of deleting the interaction.