Instructions
First time using ORYVA? This guide shows you how to make the template your own — clear steps, no confusion, just a calm start.
On this page
01
ORYVA is built on Webflow Variables, so one change in the Variables panel updates every page at once.
1
Open Variables. In the Designer, open the Variables panel from the left toolbar.
2
Colors. Edit Primary, Heading, Paragraph, Bg and the other swatches in the Colors collection. Buttons, cards and sections follow automatically.
3
Fonts & type sizes. In Base collection, change the Font Family variables (Heading, Body, Display) and the Heading Text / Body Text sizes. The Tablet, Mobile (L) and Mobile modes hold the sizes for each breakpoint.
4
Spacing & radius. The Spacing (Responsiveness) collection controls section spacing, container padding and corner radius, again with its own values per breakpoint.
5
Check contrast. After changing colors, make sure text still reads clearly on its background (4.5:1 for body text).
02
The Navbar, Footer, CTA, Buttons, Tag and Logo Strip are components. Edit the main component and every page updates.
1
Open the Components panel from the left toolbar and pick the component you want to change.
2
Edit the main component to change it everywhere — for example, add a link to the Footer or a page to the Navbar menu.
3
Use props for single instances. Select a Button or Tag on the page and change its Text, Link or Variant in the right panel without affecting the others.
4
Navbar variants. Use the base variant on light page tops and the Light variant over dark or photo heroes.
03
Services, Blog Posts, Case Studies and Careers are CMS collections. Lists and detail pages update on their own.
1
Open the CMS panel and choose a collection: Services, Blog Posts, Case Studies or Careers.
2
Add or edit an item. Click “+ New Item” to add one, or click an existing item to change it.
3
Fill in the fields — name, slug, summary, images and rich text. Careers use a Department option field that drives the tabs on the Career page.
4
Style the template page once. Each collection has its own template page (Services, Blog Posts, Case Studies and Careers Template); every item follows its layout.
5
Save and publish the site to make your changes live.
04
Hero and video sections use Webflow’s native Background Video element, so replacing a clip takes a minute.
1
Select the Background Video in the Navigator (look inside the hero or video section).
2
Upload your clip in the Settings panel. Use an MP4 or WebM file under 30 MB; short, calm and silent clips work best.
3
Keep the play/pause button visible so visitors can stop motion whenever they like.
4
Preview every breakpoint and check that faces and key details stay in frame on tablet and mobile.
05
All photos and videos come from Magnific (see the Licenses page). All icons and line-art shapes were designed by Wondrflow for ORYVA and are free to edit and reuse in your project.
1
Swap a static image. Select it, open the Settings panel and click “Replace image”. Update the alt text so it describes the new photo.
2
Swap a CMS image inside its collection item, not on the page.
3
Keep pages fast. Use WebP files, about 2000px wide for large photos and 800px for cards and avatars.
4
Check the sources on the Licenses page before reusing any asset in another project.
06
All motion in ORYVA uses GSAP and ScrollTrigger. Effects are calm, and they switch off for visitors who prefer reduced motion.
Site-wide code
Site Settings → Custom Code → Footer Code. Loads GSAP + ScrollTrigger from a CDN and runs the marquee, accordion, piano-key and counter scripts on every page.
Page code
Page Settings → Custom Code → Before </body> tag. Home 01–03, About, Service, Team, Career, Book A Session, Contact and other pages hold their own sliders, steppers and hovers.
Marquee
data-marquee
Slow, endless logo and testimonial strips that pause on hover.
Accordion
data-accordion
FAQ lists that keep one answer open at a time.
Piano-key divider
data-keys
Repeats the designed key bar across the full width of the CTA and dark sections.
Counters
data-count
Numbers count up once when they scroll into view. Add data-pad or data-comma to format them.
Sliders
page code
Card sliders with prev/next arrows on Home, About and Blog sections. They stop at the ends instead of looping.
Steppers
page code
“Why choose us” and process sections that open one card or step at a time.
1
Reuse an effect by copying the element together with its data attribute, for example data-marquee.
2
Remove an effect by deleting its block from the custom code. Every layout still works without it.
3
Fine-tune timing by changing duration or ease values inside the script, then publish to see the result.
07
A few minutes here helps search engines and visitors recognise your practice.
1
Page titles and descriptions. Open Page Settings (the gear next to each page) and edit the SEO title, meta description and Open Graph image.
2
CMS pages. On each collection template page, bind the SEO fields to the item’s name and summary.
3
Favicon and webclip. In Site Settings → General, upload a 32×32 favicon and a 256×256 webclip with your own logo mark.
Join our service
You don’t need to know beforehand. We’ll listen to your concerns and help you find the right starting point.