Instructions
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.
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.
Change images Home
The image wrapper is hidden, to change the images please follow this steps:
Look for the "Hero Interactive Container". It contains all the interactive images.
Open the sub-blocks and select the image element.
Press "d" to open the settings or click on the clog icon on the right top corner.
Click on "replace image" and upload the image you wish. Apply this steps for the 12 images.
Finally, publish your website to make the updated changes visible to your website visitors.
Change Info popup
The info popup is hidden. To change it, please follow this steps.
Double click on the Navigation Component to open its settings. Select the Info Popup div.
Look for the property that controls the display and change it from "none" to "flex". This change will make the Info popup visible on the website.
You can now edit the content of the Info Popup according to your requirements.
After you have made the desired changes, remember to put the display property back to "none". This will hide the Info Pupup again.
Finally, publish your website to make the updated changes visible to your website visitors.
Improved Home interaction
By implementing these steps, the text selection on the interactive images will be disabled, providing a smoother experience by preventing the images from being selected and allowing fluid user interaction.
Click on the "Pages" tab located on the left sidebar (paper icon).
Hover over the "Home" page and select the settings icon (cog icon).
In the settings, find the section for adding custom code and paste the following code into the "Inside <head> tag" selection:
<style>
.prevent-select img, header.prevent-select {
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>Save the changes and publish your website.
Help + Feedback
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.