Instructions.
Instructions.
Instructions.
Instructions.
Instructions.
How to edit Sereniya: content, styles, breakpoints, animations, forms, fonts and images.
Editing content
Editing content
Editing content
Classes and spaces are CMS content. Open the CMS, choose Classes or Spaces and edit an item: every list and detail page that shows it updates.
Classes: Name, Slug, Short Description, Full Description, Time, Day, Duration, Level, Instructor, Featured Image, Tags / Style, Button Label, Order, Color, Informations and guide message.
Spaces: Name, Slug, Preview Image, Number, Description and Subtitle / tagline.
Everything else: edit texts and images directly on the canvas.
Colours and text styles
Colours and text styles
Colours and text styles
Colours and type are saved as styles, so one edit updates the whole site.
Colours: colour styles such as Brand/Forest Shadow, Brand/Mint Cloud, Brand/Sage Mist and Brand/Ash Green. Edit a style in the Assets panel and every layer that uses it follows.
Text styles: headings and body copy use text styles (Heading/… and Text/…). Change sizes, weights and line heights there, not on single layers.
Large headings: they scale with the window width from the Laptop breakpoint up (see Fluid Headings below), so keep their line height in em.
Breakpoints
Breakpoints
Breakpoints
The site has five breakpoints:
Large: 1440 px and wider
Desktop: 1200 px, the primary breakpoint
Laptop: 992 px
Tablet: 768 px
Phone: below 768 px
Edit Desktop first: the other breakpoints inherit its changes unless they override a value.
Animations
Animations
Animations
Most animations are native Framer effects (Appear, Text and Scroll effects, Hover variants), edited in the right panel. A few use code because native effects cannot reproduce the original behaviour:
Lottie animations (SereniyaLottie): icons and illustrations driven by scroll or by a component state. Controls: JSON URL, Mode (State, Scroll or Loop), Active, From % and To %, Duration, Scroll layer, Scroll start and end, Smoothing and Color.
Fluid headings (Fluid Headings layer in the Main layout template): display headings sized in vw, which text styles cannot do. Controls: Enabled, Webflow text rendering, and a size and range for each heading style.
Classes carousel (ClassesSlider): snap scrolling, mouse drag and arrow buttons. Keep the layer names Classes Slider, Classes Mask and Classe Slide.
Studio tour and classes images (SereniyaHome overrides): hovering a room or scrolling the class list switches the large image. Rows and images come from two CMS lists matched by order, so both lists must keep the same sorting.
Image loader (ImageLoader): the stripe wipe that reveals photos. Controls: Color, Columns, Duration and Hide after.
Link underline (withLinkLine): the line that slides in and out under links on hover, which a native hover cannot do.
FAQ height (withFaqAnswer): answers open and close with a real height animation, so the page below moves smoothly. Keep the FAQ Item variants named Open and Closed.
Scroll effects (SereniyaMotion): About page image parallax, footer logo rise and contact image zoom, timed on the section scroll like the original.
Preloader (SereniyaPreloader, in the Main layout template): the logo intro on the home page. Controls: Enabled, Logo, Background, Overlay duration, Pause and Collapse duration. It shows only on pages where the Main template variable Current page is set to Home.
Visitors who turn on reduced motion in their system settings skip the preloader.
Forms
Forms
Forms
The contact and booking forms use Framer Forms. Before you publish, select each form, open its settings and connect a destination (email, webhook or an integration such as Google Sheets) so submissions reach you.
Fonts
Fonts
Fonts
Sereniya uses Geist for headings and body text and Playfair for italic accents. Both are free Google Fonts available in Framer. To change a font, edit the text styles that use it.
Images
Images
Images
Images are replaced in two places:
CMS images: replace the Featured Image of a class or the Preview Image of a space in its CMS item.
Page images: select the layer and choose a new image in its Fill. The photos come from Lummi.ai (see Licensing).
Support
Support
Support
Questions about the template, or found an issue? Get in touch with the creator:
Contact
Villa Sereniya Carretera Playa Bonita #12
Las Terrenas, Samaná Dominican Republic
+33 01 02 03 04 05
hello@sereniya.com
© Made by Merdy MOUANGA
Powered by Framer
Instructions.
Instructions.
Instructions.
Instructions.
Instructions.
How to edit Sereniya: content, styles, breakpoints, animations, forms, fonts and images.
Editing content
Editing content
Editing content
Classes and spaces are CMS content. Open the CMS, choose Classes or Spaces and edit an item: every list and detail page that shows it updates.
Classes: Name, Slug, Short Description, Full Description, Time, Day, Duration, Level, Instructor, Featured Image, Tags / Style, Button Label, Order, Color, Informations and guide message.
Spaces: Name, Slug, Preview Image, Number, Description and Subtitle / tagline.
Everything else: edit texts and images directly on the canvas.
Colours and text styles
Colours and text styles
Colours and text styles
Colours and type are saved as styles, so one edit updates the whole site.
Colours: colour styles such as Brand/Forest Shadow, Brand/Mint Cloud, Brand/Sage Mist and Brand/Ash Green. Edit a style in the Assets panel and every layer that uses it follows.
Text styles: headings and body copy use text styles (Heading/… and Text/…). Change sizes, weights and line heights there, not on single layers.
Large headings: they scale with the window width from the Laptop breakpoint up (see Fluid Headings below), so keep their line height in em.
Breakpoints
Breakpoints
Breakpoints
The site has five breakpoints:
Large: 1440 px and wider
Desktop: 1200 px, the primary breakpoint
Laptop: 992 px
Tablet: 768 px
Phone: below 768 px
Edit Desktop first: the other breakpoints inherit its changes unless they override a value.
Animations
Animations
Animations
Most animations are native Framer effects (Appear, Text and Scroll effects, Hover variants), edited in the right panel. A few use code because native effects cannot reproduce the original behaviour:
Lottie animations (SereniyaLottie): icons and illustrations driven by scroll or by a component state. Controls: JSON URL, Mode (State, Scroll or Loop), Active, From % and To %, Duration, Scroll layer, Scroll start and end, Smoothing and Color.
Fluid headings (Fluid Headings layer in the Main layout template): display headings sized in vw, which text styles cannot do. Controls: Enabled, Webflow text rendering, and a size and range for each heading style.
Classes carousel (ClassesSlider): snap scrolling, mouse drag and arrow buttons. Keep the layer names Classes Slider, Classes Mask and Classe Slide.
Studio tour and classes images (SereniyaHome overrides): hovering a room or scrolling the class list switches the large image. Rows and images come from two CMS lists matched by order, so both lists must keep the same sorting.
Image loader (ImageLoader): the stripe wipe that reveals photos. Controls: Color, Columns, Duration and Hide after.
Link underline (withLinkLine): the line that slides in and out under links on hover, which a native hover cannot do.
FAQ height (withFaqAnswer): answers open and close with a real height animation, so the page below moves smoothly. Keep the FAQ Item variants named Open and Closed.
Scroll effects (SereniyaMotion): About page image parallax, footer logo rise and contact image zoom, timed on the section scroll like the original.
Preloader (SereniyaPreloader, in the Main layout template): the logo intro on the home page. Controls: Enabled, Logo, Background, Overlay duration, Pause and Collapse duration. It shows only on pages where the Main template variable Current page is set to Home.
Visitors who turn on reduced motion in their system settings skip the preloader.
Forms
Forms
Forms
The contact and booking forms use Framer Forms. Before you publish, select each form, open its settings and connect a destination (email, webhook or an integration such as Google Sheets) so submissions reach you.
Fonts
Fonts
Fonts
Sereniya uses Geist for headings and body text and Playfair for italic accents. Both are free Google Fonts available in Framer. To change a font, edit the text styles that use it.
Images
Images
Images
Images are replaced in two places:
CMS images: replace the Featured Image of a class or the Preview Image of a space in its CMS item.
Page images: select the layer and choose a new image in its Fill. The photos come from Lummi.ai (see Licensing).
Support
Support
Support
Questions about the template, or found an issue? Get in touch with the creator:
Contact
Villa Sereniya Carretera Playa Bonita #12
Las Terrenas, Samaná Dominican Republic
+33 01 02 03 04 05
hello@sereniya.com
© Made by Merdy MOUANGA
Powered by Framer
Instructions.
Instructions.
Instructions.
Instructions.
Instructions.
How to edit Sereniya: content, styles, breakpoints, animations, forms, fonts and images.
Editing content
Editing content
Editing content
Classes and spaces are CMS content. Open the CMS, choose Classes or Spaces and edit an item: every list and detail page that shows it updates.
Classes: Name, Slug, Short Description, Full Description, Time, Day, Duration, Level, Instructor, Featured Image, Tags / Style, Button Label, Order, Color, Informations and guide message.
Spaces: Name, Slug, Preview Image, Number, Description and Subtitle / tagline.
Everything else: edit texts and images directly on the canvas.
Colours and text styles
Colours and text styles
Colours and text styles
Colours and type are saved as styles, so one edit updates the whole site.
Colours: colour styles such as Brand/Forest Shadow, Brand/Mint Cloud, Brand/Sage Mist and Brand/Ash Green. Edit a style in the Assets panel and every layer that uses it follows.
Text styles: headings and body copy use text styles (Heading/… and Text/…). Change sizes, weights and line heights there, not on single layers.
Large headings: they scale with the window width from the Laptop breakpoint up (see Fluid Headings below), so keep their line height in em.
Breakpoints
Breakpoints
Breakpoints
The site has five breakpoints:
Large: 1440 px and wider
Desktop: 1200 px, the primary breakpoint
Laptop: 992 px
Tablet: 768 px
Phone: below 768 px
Edit Desktop first: the other breakpoints inherit its changes unless they override a value.
Animations
Animations
Animations
Most animations are native Framer effects (Appear, Text and Scroll effects, Hover variants), edited in the right panel. A few use code because native effects cannot reproduce the original behaviour:
Lottie animations (SereniyaLottie): icons and illustrations driven by scroll or by a component state. Controls: JSON URL, Mode (State, Scroll or Loop), Active, From % and To %, Duration, Scroll layer, Scroll start and end, Smoothing and Color.
Fluid headings (Fluid Headings layer in the Main layout template): display headings sized in vw, which text styles cannot do. Controls: Enabled, Webflow text rendering, and a size and range for each heading style.
Classes carousel (ClassesSlider): snap scrolling, mouse drag and arrow buttons. Keep the layer names Classes Slider, Classes Mask and Classe Slide.
Studio tour and classes images (SereniyaHome overrides): hovering a room or scrolling the class list switches the large image. Rows and images come from two CMS lists matched by order, so both lists must keep the same sorting.
Image loader (ImageLoader): the stripe wipe that reveals photos. Controls: Color, Columns, Duration and Hide after.
Link underline (withLinkLine): the line that slides in and out under links on hover, which a native hover cannot do.
FAQ height (withFaqAnswer): answers open and close with a real height animation, so the page below moves smoothly. Keep the FAQ Item variants named Open and Closed.
Scroll effects (SereniyaMotion): About page image parallax, footer logo rise and contact image zoom, timed on the section scroll like the original.
Preloader (SereniyaPreloader, in the Main layout template): the logo intro on the home page. Controls: Enabled, Logo, Background, Overlay duration, Pause and Collapse duration. It shows only on pages where the Main template variable Current page is set to Home.
Visitors who turn on reduced motion in their system settings skip the preloader.
Forms
Forms
Forms
The contact and booking forms use Framer Forms. Before you publish, select each form, open its settings and connect a destination (email, webhook or an integration such as Google Sheets) so submissions reach you.
Fonts
Fonts
Fonts
Sereniya uses Geist for headings and body text and Playfair for italic accents. Both are free Google Fonts available in Framer. To change a font, edit the text styles that use it.
Images
Images
Images
Images are replaced in two places:
CMS images: replace the Featured Image of a class or the Preview Image of a space in its CMS item.
Page images: select the layer and choose a new image in its Fill. The photos come from Lummi.ai (see Licensing).
Support
Support
Support
Questions about the template, or found an issue? Get in touch with the creator:
Contact
Villa Sereniya Carretera Playa Bonita #12
Las Terrenas, Samaná Dominican Republic
+33 01 02 03 04 05
hello@sereniya.com
© Made by Merdy MOUANGA
Powered by Framer