Inside the "Template" directory, you'll find a page titled "Blank Starter Template". This template includes a navigation bar and a footer - the ideal starting point for your pages.
1. Duplicate the Blank Starter Page template
2. Create or Copy and paste blocks to the newly created page:
Copy Sections from any page, then paste them into the body of your newly created page. Also you may copy sections from any other page in the template.
The Style Guide page demonstrates the display of all base elements found in Mercer and is a good place to start familiarising yourself with the template.
You'll also find a section demonstrating how to correctly use the associated utility classes.
Instead of using classes, you must click the header then in the Selector drop-down where you would type in the class name, select “All H1 Headings” then make your change. Same goes for all base heading elements. Click the element, choose “All heading 5”, then any changes you make to that will be reflected across all in the site.
Follow the same procedure for body text and paragraphs - which are specified on the Body element. Select the body element, and from the Selector dropdown, choose “Body (All Pages)” and change the typography settings for that element. These styles then flow through to the paragraphs and other generic text elements in the site.
Mercer uses 3 container sizes to house the contents in most sections. For your convenience, you can use these classes to easily contain content in your sections:
Additionally, use the class Align Center to align the container in the center of its parent element.
If you'd prefer not to use the loading animation:
For correct function of the search modal, you will need to ensure that the Search Modal symbol is place as the last element inside the body of the page.
Unfortunately Webflow does not allow dynamic coloring of SVG icons. To change the icon color from the default orange:
Inside the Project Settings, in the Custom Code tab you'll notice some style code has been added to the head of each page:
This code is to ensure that the text rendering is smooth and consistent across all browsers. It does not require any action on your part.