Instructions

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 and the line-height of the body.
  

• If you wish to change the size of a typographic element, please refer to its respective tag in the Styleguide. For instance, Paragraph, Big Title, 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.
  

• By using the "em" unit, you'll most likely not have to worry about responsiveness; it should scale automatically throughout all viewports for easy and fast editing. Be sure to check for more complexe designs, mostly for vertical screens.
  

• Please use the "Is Padding" tag to add consistent horizontal paddings 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.
  

For each paragraph, follow this tag structure: Chunk > Inline > Big Title or Link component.

To create a sentence, put the 'Inline' blocks after each other inside the 'Chunk' block. Insert a paragraph with the 'Big Title' tag in the 'Inline' block for a normal text. Insert the 'Link' component for a link.You can modify the text of the link in the component settings located in the right panel (press the 'D' key).

To change the colors of the 'Fun Mode', please folloz these steps:

• Select the 'Button' located at the top of the Navigator.
  

• Access the 'Interaction' tag located on the right panel.
  

• Select the 'Background Color' animation
  

• Here you'll be able to change the hex of the color rotation.
  

To avoid the content of the site to pop before the Preloader shows, please follow these steps:

• Enter the 'Preloader' Block by double clicking on it.
  

• Select the 'Preloader' Block, set its display to 'Block'.
  

• Save and publish your work.
  

If you need any help or have any remarks or want to leave feedback, don't hesitate to contact me: fireal@resonancestudio.co

I am happy to assist you and would like to know how I can improve your experience.