mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 02:32:57 +00:00
upload
This commit is contained in:
Tomáš Dvořák
@@ -0,0 +1,280 @@
|
||||
# ⚡ 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!** ⚽🎨
|
||||
Reference in New Issue
Block a user