Instruc-tions

Fluid Design

The site uses fluid design based on the font size of the body. Please keep this in mind when making changes to the template.
‍
What this means: Every part of this website is fully responsive and adjusts to the screen's width. It has been crafted to be scalable and ensure a perfect and consistent experience on all devices. For this reason, please follow the following advice:

Never change the font size of the body.
This template utilize global classes. If you wish to change the size of a typographic element, please refer to its respective tag. For instance, Paragraph, Paragraph lowercase, Big Headline, etc.
If you want to change or add padding, margin, or typography size, prefer using the "em" unit to ensure the overall proportion of your website remains flawless.
Use the "px" unit for small elements or elements you don't want to scale throughout viewports. In this design, the font size of the paragraphs is fixed on mobile.
Please use the "Is Padding" tag to add consistent horizontal margins to your containers.
The website uses a 12-column grid. Don't hesitate to use the column classes to create your own layouts if needed. Check the Styleguide utility tab for more information.

Heading animation

To add a title with a scroll animation and maintain consistency, please follow these steps:

Start by selecting the text you want to turn into a title.
Ensure that you name your title appropriately. You can use either "Big Heading" or "Small Heading" as the title tag.
Highlight the selected text and click on the small brush icon that appears to add a span.
Add the tag "Span" to the new span created.

Image parallax

To incorporate the parallax effect into an image, please follow these steps:

Create a Block and set its overflow property to "none".
Inside this Block, insert your desired image.
Apply the "Image Cover" and "Parallax" tags to the image element.

Collections

This will allow you to showcase an expanded number of projects on the "Home Showcase" and "Gallery Museum" pages.

The "Home Showcase" and "Gallery Museum" pages are designed to showcase Collections with a variable layout.
To achieve this layout, the Collection has been duplicated three times during the setup process.
If you wish to add more than three projects to these pages, follow these steps:
a. Duplicate the Collection you want to use.
b. Adjust the "Limit Item" setting of the duplicated Collection to accommodate the desired number of projects. For example, if you want to add a fourth Collection, set the "Show Item" to 1 and the "Start at" to 4.
Repeat step 3 for each additional Collection you want to include.

Smooth scroll

A smooth scroll feature adds a touch of elegance and interactivity to your website, capturing users' attention and encouraging them to explore your content further. The smooth and effortless scrolling experience can make browsing more enjoyable, leading to increased engagement and longer session durations.

This template has been thoughtfully designed and meticulously coded to seamlessly integrate with smooth scroll functionality. If you're interested in implementing this feature on your website, I would be delighted to assist you. Simply send an email to fireal@resonancestudio.co with a proof of purchase, and I'll gladly guide you through the setup process.
‍
Take a moment to explore Esther's experience with the smooth scroll feature.