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. Always be sure the 'Body' tag is added the to div '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.
  

If you'd like adding/ changing/ removing content that will impact the length of the 'Track Wrapper' container, be sure to follow these steps

• Be sure to set the width of every block inside the 'Track Wrapper' in 'vw'.
  

• Be sure to set the height of every block inside the 'Track Wrapper' to '100vh'.
  

• The 'Home Horizontal Scroll' interactions should be edited for each 4 viewports. Change each of the 4 interactions created to each viewport.
  Click on the last 'move' animation, and adapt the 'x-translate' to the new design.
  

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

• Before publishing the site for production, be sure to set the display of the 'Preloader' block to 'Flex'.
  

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

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

• Save and publish your work.
  

The list view is hidden on the designer. To access the list view please follow these steps:

• Open the 'Track Wrapper' block and locate the 'List View' block in the first 'Container'. Set 'List View' display to 'Block'.
  

• In the Collection, locate the ' List View Popup'. Set its display to 'Block'.
  

• Make the desired changes and put back the display of 'List View' and 'List View Popup' to 'Hide'.
  

To edit the links and name of the fullwidth navigation, please follow these steps:

• Locate the 'Loop Wrapper' component in the first 'Container' of the 'Tracker Wrapper'
  

• Click on the component and check its settings on the right panel.
  

• Here you'll be able to easily edit the navigation links, names and images.
  

To edit the images of the Loop anmation on the Home page, please follow these steps:

• Locate the 'Menu' component.
  

• Click on the component and check its settings on the right panel.
  

• Here you'll be able to easily edit the images.
  

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.