Navigation & Theme Customization
Overview
Customize your microsite's appearance and navigation to match your brand. Control colors, fonts, navigation links, and overall styling to create a cohesive brand experience.
Navigation Settings
Navigation Bar
Display Options
Show Navbar: Toggle navigation bar on/off
Navbar Style: Choose from:
Transparent: See-through with backdrop blur
Solid: Solid background color
Gradient: Gradient background
Navigation Links
Custom Links: Add navigation links
Link Labels: Customize link text
Link Destinations: Internal (#section) or external URLs
External Links: Mark links as external (opens in new tab)
Navigation Logo
Custom Logo: Upload custom navbar logo
Logo Size: Automatically sized
Logo Position: Left side of navbar
Call-to-Action Button
CTA Text: Button label (e.g., "Contact Us", "Book Now")
CTA Link: Button destination
CTA Style: Matches theme button style
Footer
Display Options
Show Footer: Toggle footer on/off
Footer Text: Custom footer text
Footer Links: Add footer navigation links
Show "Powered By": Toggle Tourism Accelerator attribution
Theme Settings
Colors
Primary Color
Brand Color: Your main brand color
Usage: Buttons, links, accents, badges
Format: Hex code (e.g., #1e40af)
Secondary Color
Accent Color: Secondary brand color
Usage: Highlights, secondary elements
Format: Hex code
Background Colors
Background: Main background color
Footer Color: Footer background color
Format: Hex code or color name
Typography
Font Families
Body Font: Main text font
Heading Font: Headings font
Options: System fonts or web fonts
Styling
Border Radius
Options: None, Small, Medium, Large, Full
Affects: Buttons, cards, images
Recommended: Medium for balanced look
Button Style
Options: Solid, Outline, Ghost
Solid: Filled with background color
Outline: Border with transparent fill
Ghost: Transparent with hover effect
Best Practices
Color Selection
Brand Consistency: Use your brand colors
Contrast: Ensure text is readable
Accessibility: Meet WCAG contrast guidelines
Limited Palette: Stick to 2-3 main colors
Navigation
Keep it Simple: 3-5 main links maximum
Clear Labels: Use descriptive link text
Logical Order: Most important links first
Mobile Friendly: Test on mobile devices
Typography
Readability: Choose readable fonts
Hierarchy: Use different sizes for headings
Consistency: Use same fonts throughout
Web Safe: Prefer web-safe or web fonts
Configuration Steps
Setting Up Navigation
Enable Navbar
Go to Microsite Settings
Enable "Show Navbar"
Choose navbar style
Add Navigation Links
Click "Add Link"
Enter link label
Set destination (internal or external)
Mark as external if needed
Configure Footer
Enable footer if desired
Add footer text
Add footer links
Toggle "Powered By" attribution
Setting Up Theme
Choose Primary Color
Enter hex code or use color picker
Preview changes in real-time
Ensure good contrast
Set Typography
Choose body font
Choose heading font
Preview text appearance
Configure Styling
Set border radius
Choose button style
Preview changes
Troubleshooting
Navigation not showing?
Ensure "Show Navbar" is enabled
Check navigation settings are saved
Refresh the page
Colors not applying?
Verify color codes are valid hex format
Check for CSS conflicts
Clear browser cache
Links not working?
Verify link URLs are correct
Check internal links use #section format
Ensure external links include https://
Theme not updating?
Save theme settings
Clear browser cache
Check for conflicting styles
Advanced Customization
Custom CSS
Some themes support custom CSS
Use sparingly to avoid conflicts
Test thoroughly before publishing
Responsive Design
Navigation adapts to mobile automatically
Test on multiple screen sizes
Ensure touch targets are adequate
Brand Consistency
Match your main website
Use consistent colors and fonts
Maintain brand guidelines