This page will guide you through how to effectively use and customize your new template. Whether you're a beginner or have some experience with templates, this guide will help you make the most of the tools and components provided.
1. How to Use the Template Effectively
Overview: This template is designed to help you get started quickly with a Medical Clinic. It’s fully responsive, customizable, and built with simplicity in mind.
Key Features:
Responsive design for mobile, tablet, and desktop
Pre-built components like navigation bars, footers, and content sections
Easily customizable color schemes, fonts, and layout styles
First Steps: Begin by exploring the pre-built pages and understanding the layout. We recommend starting with the homepage, as it serves as the foundation for most designs.
2. Customization of Template Components
Navigation Bar:
How to Edit: To customize the nav bar, simply click on the navigation element. You can change links, adjust styles, and add logos. Be sure to check both mobile and desktop views for consistency. A full guide can be found here.
Sections:
Customizing Layouts: Each section is modular, meaning you can drag and drop, reorder, or remove sections as needed. Adjust background colors or images by selecting the section and updating the styles.
Cards:
Cards are designed for showcasing services and benefits. You can edit text, and customize the card background and padding to fit your brand.
Note, cards with a colorful background have a combo class the adds the color background. To remove the colored background simply remove the combo class. A video walkthrough on using combo classes classes can be found here.
3. Style Guide and Variants
Using the Style Guide:
The style guide includes predefined typography, color swatches, and spacing rules. You can use these to maintain consistency throughout your website.
To change the theme color, go to the Variables section by pressing "V". Changing the color here will update all instances of this color across the entire template. A guide can be found here.
4. Interactions and Animations
Interaction Effects: The template includes advanced interactions such as hover effects, scroll animations, and transitions. You can find these in the Interactions panel. Adjust timing, triggers, and easing effects to match your preferences.
How to Customize: For each animation, simply select the element, go to the Interactions tab, and adjust the properties like speed, direction, and trigger points. A guide can be found here.
Tip: When adding new interactions, test them on both desktop and mobile views to ensure smooth performance.
