# ⚡ 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
```bash
# Run this once to create the database table
make migrate-up
```

### Step 2: Restart Backend
```bash
# 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!** ⚽🎨