The best place to start is by getting some of your brand styles like colors, fonts, etc. set up.
Step 1: Access Theme Settings1. **Navigate to Your HubSpot Dashboard**: Log into your HubSpot account and go to your dashboard.
2. **Open the Website Pages or Landing Pages**: Click on "Marketing" > "Website" > "Website Pages" or "Landing Pages."
3. **Select Your Clarity Theme**: Find a page that uses the Clarity theme, click on "Actions" > "Edit," and then in the page editor, click on the "Design" tab on the left-hand sidebar.
4. **Enter Theme Settings**: Click on "Theme Settings" to access global settings that affect your entire site.
Step 2: Customize Your Brand Kit
1. **Upload Logo and Favicon**: In the "Brand" section, upload your company logo and favicon. This ensures your branding is consistent across all pages and tabs.
2. **Define Color Palette**: Navigate to the "Colors" section. Here, you can set your primary, secondary, and background colors according to your brand guidelines. The Clarity theme allows you to apply these colors globally or customize them for specific elements.
3. **Select Fonts**: Move to the "Typography" section to select fonts that match your brand identity. Clarity supports a range of fonts from HubSpot’s font library, allowing you to choose different fonts for headings, subheadings, and body text.
4. **Customize Buttons**: In the "Buttons" section, align the button styles with your brand by choosing colors, fonts, and border-radius that fit your brand's look and feel.
Step 3: Apply Your Brand Kit to Custom Modules
1. **Access Custom Modules**: If you’re using custom modules within the Clarity theme, ensure they adhere to your brand kit. You can edit module settings directly by navigating to the specific module within the page editor and adjusting its style settings.
2. **Consistent Styling Across Modules**: For a cohesive look, apply the same color schemes, typography, and button styles you set in the brand kit to your custom modules.
Step 4: Implement Additional Brand Elements
1. **Custom CSS/JS**: For further customization, such as implementing unique hover effects or custom animations that reflect your brand, utilize the "Advanced Options" in Theme Settings to add custom CSS or JavaScript files.
2. **Responsive Design Check**: Ensure your brand elements look great across all devices. Clarity theme is designed to be responsive, but it’s always good to preview your site on mobile and tablet views and adjust any elements as necessary.
Step 5: Review and Publish
1. **Review Your Website**: Before publishing, thoroughly review your website to ensure all brand elements are correctly applied and consistent across pages.
2. **Publish Changes**: Once satisfied with the branding, publish your changes. Your website now fully represents your brand identity with the help of the Clarity theme.
Remember, the Clarity theme is designed to be flexible, allowing you to convey your brand's unique style and personality easily. If you encounter any challenges or have specific customization needs, don't hesitate to reach out to us at info@1406consulting.com