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, 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 Studio and Email sections are hidden in the designer. To edit these sections, please follow these steps:

• Double-click on the "Navigation" component to enter its settings.
  

• The first section is the "Studio" popup. Select it and remove the "Hide" tag in the style selector
  

• Modify the content to your convenience.
  

• Put back the "Hide" tag.
  

• Apply the same steps for the "Email" section.
  

• Save the changes and publish your website.
  

There is various variations of the footer according to the page. To modify these variations please follow these steps:  

• Enter the "Navigation" component by double-clicking on it
  

• Select the top div called "Navigation"
  

• On the style panel, select the "Props" tab
  

• Here you'll be able to select the desired variation Click on it and select "Visible".
  

• Make the desired edits and put back the variation in its initial state.
  

• Save the changes and publish your website.
  

In order use anchors in the "Case" page, each images and  anchor links have been isolated into a different collection. If you need to add more images, please follow these steps.

• Access the CMS by clicking on the cylinder icon.
  

• In the CMS Case settings, add the number of images needed.
  

• Access the Case Template page. Duplicate the "All Images Wrapper" element as many times as required.
  

• For each duplicated "All Images Wrapper," press the 'D' key to open its settings. Assign a new ID, such as "third," "fourth," and so on.
  

• Make sure to choose the appropriate image settings for each newly created "Image Cover" element.
  

• Find the "Case Other Image" block within your project.
  

• Duplicate the "Navigation Image" block as many times as needed.
  

• For each newly created "Navigation Image" block, press the 'D' key to enter its settings. In the links settings, select the corresponding page section you previously created and assign the relevant ID to create anchors.
  

• Select the correct image settings for each new "Image Cover" element.
  

• Save the changes and publish your website.
  

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.