MyClub/DOCS/QUICK_START_VISUAL_EDITOR.md

Quick Start: Visual Element Editor

What It Does

The Visual Element Editor lets you change the visual style of different page elements (header, hero section, news layout, etc.) without touching code.

How to Use (Admin)

1. Access the Editor

1. Login as admin
2. Navigate to the homepage
3. Look for the purple floating button in the bottom-right corner (gear icon)
4. Click it to open the Visual Editor

2. Configure Elements

1. Toggle Editing Mode ON

   • Switch the toggle at the top of the drawer to "Editing"

2. Select Variants

   • Header: Choose between Unified, Edge, Minimal, or Modern
   • Hero: Choose between Grid, Swiper, Swiper Full, or Edge
   • News: Choose between Grid, Scroller, List, or Magazine
   • Matches: Choose between Compact, Expanded, or Timeline
   • Sponsors: Choose between Grid, Slider, Scroller, or Pyramid

3. Save Changes

   • Click "Save & Reload"
   • The page will reload with your new configuration

Header Variants Explained

Unified (Default)

Classic header with logo on left and text on right. Professional and clean.

Edge

Modern gradient background, centered logo and text. Bold and eye-catching.

Minimal

Simplified centered header. Just logo and club name, very clean.

Modern

Bold header with accent border at bottom. Logo has colored background glow.

Quick Tips

• Try Before Saving: Select different options and review the descriptions
• Unsaved Changes: Yellow badge warns you if you haven't saved
• Cancel: Reverts to last saved configuration
• Hide Button: You can temporarily hide the floating button if needed

Technical Setup (Developer)

1. Run Database Migration

# Make sure migrations are up to date
make migrate-up

Or manually:

cd database/migrations
# Apply: 000020_create_page_element_configs.up.sql

2. Restart Backend

The routes are already configured. Just restart:

go run main.go

3. Frontend is Ready

No build needed - components are already integrated in HomePage.

Example Configuration

Modern Sports Club:

• Header: Modern
• Hero: Swiper Full
• News: Grid
• Matches: Expanded
• Sponsors: Slider

Classic Club:

• Header: Unified
• Hero: Grid
• News: List
• Matches: Compact
• Sponsors: Grid

Bold Contemporary:

• Header: Edge
• Hero: Edge
• News: Magazine
• Matches: Timeline
• Sponsors: Pyramid

Troubleshooting

Q: I don't see the purple button

• Make sure you're logged in as admin
• Check the bottom-right corner (may be below fold)

Q: Changes don't save

• Check browser console for errors
• Ensure backend is running
• Verify database migration was applied

Q: Page doesn't reload after save

• The save triggers a window.location.reload()
• Check for JavaScript errors in console

Q: I want to reset to defaults

• Delete configurations from admin panel or database
• System falls back to default variants (usually 'unified')

API Reference

For programmatic access:

# Get current config
GET /api/v1/page-elements?page_type=homepage

# Update config (admin only)
POST /api/v1/admin/page-elements
{
  "page_type": "homepage",
  "element_name": "header",
  "variant": "modern"
}

Support

For issues or feature requests, check:

• VISUAL_ELEMENT_EDITOR.md - Full documentation
• Console logs for debugging
• Database table page_element_configs for stored values