GuidePlugin DocsDesigns
Customize the visual appearance of your guides with colors, fonts, backgrounds, and styling options.
Designs control the visual appearance of your guides in the frontend. They act as styling templates that can be applied to multiple guides, ensuring consistent branding across your website.
Design Components
| Component | Controls | Use Cases |
|---|---|---|
| Colors | Primary colors, accents, backgrounds | Brand matching, visual hierarchy |
| Typography | Font sizes, colors for titles and text | Readability, style consistency |
| Backgrounds | Gradients, images, patterns | Visual interest, brand identity |
| Layout | Spacing, alignment, component positioning | User experience optimization |
Creating a Design
Navigate to Design Creation
Go to GuidePlugin > Designs > Create in your WordPress admin.
Configure Colors
Set up the primary color scheme for your guide:
| Color Setting | Purpose | Impact |
|---|---|---|
| Basic Color | Main brand color applied to buttons, highlights, and active states | Primary visual identity |
| Slider Progress Color | Color of the progress bar at the top of filters | User progress feedback |
Brand Consistency: Use your website's primary brand color as the Basic Color to maintain visual coherence.
Set Typography
Configure text appearance throughout the guide:
| Typography Option | Controls | Recommendations |
|---|---|---|
| Title Color | Guide heading color | Dark colors for readability |
| Title Font Size | Heading size in pixels | 24-32px for prominence |
| Description Color | Subtitle/description text color | Medium gray for hierarchy |
| Description Font Size | Body text size | 14-16px for readability |
Design Background
Create visual interest with backgrounds:
| Background Element | Effect | Best Practices |
|---|---|---|
| Background Color (Start) | Beginning of gradient | Light, non-distracting colors |
| Background Color (End) | End of gradient | Subtle contrast with start color |
| Background Image | Visual overlay above gradient | Low opacity, high contrast content |
Apply to Guides
Once saved, your design can be selected when creating or editing guides.
Design Best Practices
| Aspect | Recommendation | Why |
|---|---|---|
| Color Contrast | Ensure 4.5:1 minimum contrast ratio | Accessibility and readability |
| Font Sizes | Use relative sizing (em/rem) when possible | Better responsive behavior |
| Background Images | Keep file sizes under 200KB | Faster loading times |
| Brand Alignment | Match your website's existing color scheme | Consistent user experience |
Common Design Patterns
Professional/Corporate
| Element | Setting | Value |
|---|---|---|
| Basic Color | Corporate blue | #2563EB |
| Title Font Size | Large | 28px |
| Background | Subtle gradient | Light gray to white |
E-Commerce/Retail
| Element | Setting | Value |
|---|---|---|
| Basic Color | Action-oriented | #DC2626 (red) or #059669 (green) |
| Title Font Size | Medium-large | 24px |
| Background | Clean white | #FFFFFF |
Creative/Agency
| Element | Setting | Value |
|---|---|---|
| Basic Color | Bold accent | #7C3AED (purple) or #EA580C (orange) |
| Title Font Size | Statement size | 32px |
| Background | Dynamic gradient | Color to complementary color |
Design Customization Tips
Color Psychology
| Color Family | User Perception | Best For |
|---|---|---|
| Blue | Trust, reliability, professional | B2B, finance, healthcare |
| Green | Growth, success, nature | Sustainability, finance, health |
| Red | Urgency, excitement, action | Sales, entertainment, food |
| Purple | Creativity, luxury, innovation | Creative services, luxury goods |
Responsive Considerations
- Font sizes scale down automatically on mobile devices
- Background images may not display on some mobile browsers
- Color contrast becomes more critical on smaller screens
- Touch targets need sufficient spacing and size
Troubleshooting Design Issues
| Problem | Symptoms | Solutions |
|---|---|---|
| Poor Readability | Text hard to read, low engagement | Increase color contrast Adjust font sizes Test on different devices |
| Inconsistent Branding | Design doesn't match website | Use brand color picker Match existing font sizes Align with style guide |
| Slow Loading | Guide takes time to appear | Optimize background images Use web-safe fonts Minimize complex gradients |
| Mobile Issues | Design breaks on small screens | Test responsive behavior Use relative font sizes Simplify background elements |
Applying Designs to Guides
Once created, apply your design to guides:
| Method | Location | Steps |
|---|---|---|
| New Guide | Guide creation page | Select design from dropdown |
| Existing Guide | Edit guide page | Change design in Design tab |
| Multiple Guides | Bulk actions | Select guides → Apply design |
Next Steps
| Action | Purpose | Link |
|---|---|---|
| Apply to Guides | Use your design in actual guides | Guides Documentation → |
| Test Appearance | Preview how design looks with content | Getting Started → |
| Advanced Styling | Custom CSS and deeper customization | Templates Documentation → |