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 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, Paragraph accent, 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.
  

• 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.
  

The menu is hidden. To modify the menu please follow these steps:

• Open the "Nav" Component by double-clicking on it.
  

• Choose the "Nav Menu Wrapper" section.
  

• The menu is hidden with a sliding effect. In the Style menu on the right, go to "2D & 3D Transforms" and click the small eye icon to hide the sliding effect.
  

• The height of the "Nav Menu Scroller" is set using the "vh" unit to work with scaling down animations. You can change the height to 100vh if you need to access the lower part of the menu.
  

• Remember to show the sliding effect and restore the original menu height before you finish and publish your website.
  

Here's how to change the buttons in your template.
By following these steps, you can edit this button without affecting the others.

• Just click on the button you want to change.
  

• On the right, you'll see the Style Panel. Change the text there. This will update both text sections needed for the animation.
  

• Do the same to update the links.
  

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.