MyClub/DOCS/ELEMENTOR_QUICK_START.md

⚡ Elementor-Style Editor - Quick Start

🎯 What You Need to Know

This is a visual page builder similar to WordPress Elementor. Edit your homepage visually by clicking elements and changing their styles - no coding needed!

🚀 5-Minute Setup

Step 1: Database Migration

# Run this once to create the database table
make migrate-up

Step 2: Restart Backend

# Restart your Go server
go run main.go

Step 3: Access Editor

1. Login as admin
2. Go to homepage
3. Look for purple edit button (bottom-left corner)
4. Click it - elements light up with badges!

💡 Quick Tour

The Interface

Top Bar: Navbar (logout, etc.)

Left Side (Floating Panel):          Right Side (Settings Drawer):
┌──────────┐                          ┌────────────────────────┐
│  👁️/✏️   │ Toggle Edit Mode         │  🔍 Search Elements    │
│  ⚙️      │ Open Settings    ←───→   │  📋 Elements List      │
│  ↶       │ Undo                      │  ⚙️  Settings          │
│  ↷       │ Redo                      │  💾 Save Button        │
│  🖥️      │ Device View              │  📤 Export/Import      │
│  💾      │ Save Changes              └────────────────────────┘
└──────────┘

Main Area: Your homepage with blue dashed borders around editable sections

Element Badges

When edit mode is ON, hover over any section and you'll see:

┌──────────────────────────┐
│ header                   │ ← Click this badge
└──────────────────────────┘

📝 Editing Workflow

Method 1: Click Badges (Fastest!)

1. Turn on edit mode (purple button)
2. Hover over any section (header, hero, news...)
3. Click the element name badge that appears
4. Choose a different variant from dropdown
5. Repeat for other elements
6. Click green save button

Method 2: Use Settings Panel

1. Click gear icon (⚙️) in left panel
2. Search or browse for element
3. Expand accordion item
4. Select variant from dropdown
5. Click save when done

🎨 Available Customizations

Header (Top Logo Area)

• Unified - Classic horizontal layout
• Edge - Modern gradient centered
• Minimal - Simple centered
• Modern - Bold with accent colors

Hero (Main Feature Section)

• Grid - 3 news cards (1 big + 2 small)
• Swiper - Carousel slider
• Swiper Full - Full-width carousel
• Edge - Dramatic full-screen

News (Article Listings)

• Grid - Card grid
• Scroller - Horizontal scroll
• List - Vertical list
• Magazine - Magazine style

Matches (Fixture Display)

• Compact - Minimal cards
• Expanded - Detailed info
• Timeline - Timeline view

Sponsors (Logo Display)

• Grid - Title sponsor + grid
• Slider - Auto-scrolling
• Scroller - Horizontal scroll
• Pyramid - Tiered layout

⌨️ Keyboard Shortcuts

Action	Shortcut
Undo	Ctrl/Cmd + Z
Redo	Ctrl/Cmd + Y
Save	Ctrl/Cmd + S
Close Drawer	Esc

💾 Saving Your Work

The Save Button Turns Green When:

• ✅ You've made changes
• ✅ You're ready to save

What Happens When You Save:

1. All changes batch save to database
2. Success message appears
3. Configs are stored permanently

Note: Some changes need a page refresh to fully appear. The editor will show this.

📱 Device Preview

Test how your changes look on different devices:

1. Click monitor icon (🖥️) in left panel
2. Choose Desktop / Tablet / Mobile
3. View how elements adapt
4. Dark overlay appears to simulate device width

💡 Pro Tips

Tip 1: Experiment Freely

• Use Undo/Redo liberally
• Try different variants
• You can always go back

Tip 2: Export Before Major Changes

• Click Export button
• Save the JSON file
• You have a backup!

Tip 3: Check All Devices

• Desktop looks good?
• Check tablet view
• Check mobile view
• Then save!

Tip 4: Batch Your Changes

• Edit multiple elements
• Preview them together
• Save once for all

Tip 5: Use Element Badges

• Faster than settings panel
• Click badge → change → done
• No scrolling needed

🐛 Troubleshooting

"I don't see the purple button"

• ✅ Are you logged in as admin?
• ✅ Are you on the homepage?
• ✅ Check bottom-left corner
• ✅ Try refreshing the page

"Elements don't highlight"

• ✅ Is edit mode turned ON?
• ✅ Purple button should be pressed
• ✅ Try toggling it off and on

"Changes don't save"

• ✅ Check browser console (F12)
• ✅ Are you still logged in?
• ✅ Try exporting as backup first
• ✅ Save one element at a time

"Can't find an element"

• ✅ Use the search bar
• ✅ Check different page styles
• ✅ Some elements appear conditionally

🎓 Learning Path

Beginner (Day 1)

1. Turn on edit mode
2. Click one element badge
3. Try 2-3 different variants
4. Pick your favorite
5. Save!

Intermediate (Week 1)

1. Edit all 5 main elements
2. Try device preview
3. Export your config
4. Experiment and restore

Advanced (Month 1)

1. Create multiple templates
2. Test different combinations
3. Share templates with team
4. Understand variant purposes

📚 Next Steps

After mastering the basics:

1. Read ELEMENTOR_STYLE_EDITOR.md for full details
2. Explore advanced features (history, templates)
3. Create custom variant combinations
4. Share your best templates

🎉 Popular Configurations

Modern Sports Club

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

Classic Traditional Club

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

Bold Contemporary

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

Minimalist Clean

Header: Minimal
Hero: Swiper
News: Scroller
Matches: Compact
Sponsors: Scroller

✅ Checklist for First Edit

• Database migrated
• Backend restarted
• Logged in as admin
• On homepage
• Edit mode ON (purple button)
• Elements show badges
• Clicked a badge
• Selected new variant
• Clicked save
• Saw success message
• Changes applied!

🆘 Need Help?

1. Read: ELEMENTOR_STYLE_EDITOR.md (detailed docs)
2. Check: Browser console for errors (F12)
3. Test: Try in Chrome/Firefox
4. Verify: Database table page_element_configs exists
5. Export: Always backup before asking for help

---

Remember: This is like Elementor but for your football club website. Click, change, save - it's that simple!

Have fun building! ⚽🎨