MyClub/DOCS/MYUIBRIX_QUICK_START.md

# MyUIbrix Quick Start Guide - Elementor Edition

## 🚀 Quick Access

### For Admins:
```
Method 1: URL Parameter
→ Navigate to: http://your-site.com/?myuibrix=edit

Method 2: Admin Sidebar
→ Click "MyUIbrix Editor" in admin navigation
```

---

## ⌨️ Keyboard Shortcuts

| Key | Action |
|-----|--------|
| `ESC` | Close panels / Exit edit mode |
| `Ctrl+S` | Save changes |
| `L` | Toggle Layers panel |
| `A` | Open Add Element picker |
| `↑` | Move selected element up |
| `↓` | Move selected element down |
| `Delete` | Remove selected element |
| `Ctrl+B` | Bold text (in inline editor) |
| `Ctrl+I` | Italic text (in inline editor) |
| `Ctrl+U` | Underline text (in inline editor) |

---

## 🎨 Basic Workflow

### 1. Enter Edit Mode
- Click floating edit button (bottom-left)
- Or use URL: `/?myuibrix=edit`

### 2. Select Element
- Hover over sections to see badges
- Click to select

### 3. Change Variant
- Choose from available styles in popup
- See live preview instantly

### 4. Reorder Elements
- Open Layers panel (L key)
- Use arrow buttons or drag

### 5. Edit Text Inline (NEW!)
- Click on any text element
- Toolbar appears with formatting
- Bold, Italic, Underline, Links
- Auto-saves on blur

### 6. Apply Custom Styles (NEW!)
- Select element
- Open "CSS" tab in style panel
- Write custom CSS or use examples
- Click "Apply CSS"

### 7. Create Column Layouts (NEW!)
- Select element
- Open "Layout" tab
- Choose from 8 templates
- Or create custom columns

### 8. Navigate to Admin (NEW!)
- Select element
- Open "Admin" tab
- Click contextual link
- Jumps to relevant admin page

### 9. Toggle Visibility
- In Layers panel
- Click eye icon to hide/show

### 10. Save Changes
- Click "Publikovat" button
- Page will reload with new design

---

## 📦 Available Elements

### Layout (5)
- **Header** - 7 variants
- **Hero** - 8 variants
- **Footer** - Standard, Minimal, Extended
- **Sidebar** - Left, Right, Sticky
- **Banner** - Top, Bottom, Sidebar, Overlay

### Content (11)
- **News** - 8 variants (Grid, Scroller, Magazine, etc.)
- **Matches** - 7 variants (Compact, Timeline, Scoreboard, etc.)
- **Team** - 8 variants (Grid, Formation, Auto-scroll, etc.)
- **Table** - League standings
- **Stats** - Cards, Charts, Dashboard
- **Activities** - List, Calendar, Timeline
- **Sponsors** - 8 variants (Grid, Pyramid, Spotlight, etc.)
- **Merch** - Product grid/carousel
- **Testimonials** - Reviews carousel
- **Achievements** - Trophy showcase
- **History** - Club timeline

### Media (5)
- **Gallery** - 7 variants (Grid, Masonry, Stories, etc.)
- **Videos** - 6 variants (Grid, Playlist, Highlights, etc.)
- **Live** - Stream player
- **Podcast** - Episode list/player
- **Social** - Social media feeds

### Interactive (9)
- **Newsletter** - Subscription forms
- **Contact** - Contact form
- **Countdown** - Match countdown
- **Poll** - Fan voting
- **Quiz** - Interactive quizzes
- **Search** - Search box
- **Map** - Stadium location
- **Calendar** - Events calendar
- **Weather** - Match day weather
- **Ticketing** - Ticket sales widget

---

## 🎯 Common Tasks (Updated with New Features!)

### Change Homepage Layout
1. Enter edit mode
2. Click hero section
3. Select variant: Grid / Carousel / Split
4. Save

### Hide/Show Sections
1. Press `L` for Layers
2. Click eye icon next to element
3. Save changes

### Reorder Sections
1. Press `L` for Layers
2. Use ↑↓ buttons
3. Save changes

### Add New Element
1. Press `A` for Add Element
2. Browse by category
3. Click to add
4. Configure and save

### Preview Mobile View
1. Use viewport switcher (top bar)
2. Select: Desktop / Tablet / Mobile
3. Test responsive behavior

### Edit Text Directly (NEW!)
1. Click on any text
2. Inline editor activates
3. Format with toolbar
4. Save automatically

### Create Two-Column Layout (NEW!)
1. Select element
2. Open "Layout" tab
3. Click "Two Equal" template
4. Element splits into columns
5. Save changes

### Apply Background Gradient (NEW!)
1. Select element
2. Open "CSS" tab
3. Choose "Background Gradient" example
4. Or write custom CSS
5. Enable preview
6. Apply and save

### Quick Jump to Content Manager (NEW!)
1. Select News section
2. Open "Admin" tab
3. Click "Manage Articles"
4. Opens in new tab
5. Edit and return

---

## ⚠️ Important Notes

### Preview Mode
- ✅ Changes visible only to you during editing
- ❌ Not visible to regular visitors
- 💾 Must click "Publikovat" to make live

### Saving
- Changes auto-reload page after save
- All visitors will see new design
- Previous design lost (no undo yet)

### Performance
- No impact on page load for visitors
- Editor loads only for admins
- Live preview uses client-side events only

---

## 🐛 Troubleshooting

### Can't select elements?
→ Element might be missing `data-element` attribute  
→ Contact developer to add it

### Changes not saving?
→ Check browser console for errors  
→ Verify admin permissions  
→ Check network tab for API errors  
→ 🆕 Try refreshing and re-entering edit mode

### Custom CSS not applying? (NEW!)
→ Check for syntax errors (missing braces/semicolons)  
→ Enable preview mode first  
→ Click "Apply CSS" button  
→ Save and publish changes

### Inline editor not working? (NEW!)
→ Make sure element is editable  
→ Click directly on text (not container)  
→ Check if toolbar appears  
→ Try refreshing page

### Preview not updating?
→ Refresh page and try again  
→ Check if edit mode is active  
→ Try different browser

### Element disappeared?
→ Check visibility in Layers panel  
→ Element might be at bottom of page  
→ Scroll to find it

---

## 📚 Learn More

- **Elementor Features:** `DOCS/MYUIBRIX_ELEMENTOR_FEATURES.md` ⭐ NEW!
- **Enhancement Summary:** `DOCS/MYUIBRIX_ENHANCEMENT_SUMMARY.md` ⭐ NEW!
- **Full Audit:** `DOCS/MYUIBRIX_INTEGRITY_CHECK.md`
- **Fixes Applied:** `DOCS/MYUIBRIX_FIXES_APPLIED.md`
- **Code:** `frontend/src/components/editor/MyUIbrixEditor.tsx`

---

## 🎓 Pro Tips

1. **Use keyboard shortcuts** - Much faster than clicking
2. **Preview on mobile** - Always check responsive design
3. **Save often** - No undo functionality yet
4. **Test variants** - Try different styles to see what works
5. **Check performance** - Some variants are more complex
6. **Use layers panel** - Easier than clicking elements
7. **Category filter** - In Add Element picker for quick search
8. **Hover for details** - Variant descriptions explain differences
9. **🆕 Start with templates** - Use layout templates before custom columns
10. **🆕 Use CSS examples** - Browse examples in CSS tab for inspiration
11. **🆕 Inline editing** - Edit text directly without going to admin
12. **🆕 Contextual links** - Use Admin tab for quick navigation
13. **🆕 Live CSS preview** - Enable preview before applying custom CSS
14. **🆕 Color pickers** - Use visual pickers in Style tab
15. **🆕 Grid layouts** - Leverage grid templates for complex designs

---

## 🆘 Need Help?

1. Check this guide
2. Review documentation in `/DOCS/`
3. Contact system administrator
4. Check browser console for errors
5. Review server logs if issues persist

---

---

## 🆕 New Elementor-Style Features

### Inline Text Editor
- Click-to-edit any text
- Rich formatting toolbar
- Bold, Italic, Underline
- Insert links
- Auto-save

### Column Layout Manager
- 8 pre-built templates
- Dynamic columns (add/remove)
- Visual layout preview
- Per-column element management

### Custom CSS Editor
- Full CSS code editor
- Real-time validation
- Live preview mode
- CSS examples library
- Error detection

### Contextual Admin Links
- Smart navigation per element
- Quick links to manage content
- Link descriptions & icons
- Opens in new tab

### Enhanced Style Panel
- 5 tabs: Content, Style, Layout, CSS, Admin
- Typography controls (font, size, weight, etc.)
- Color pickers with hex input
- Padding/margin controls
- Grid layout controls
- Full CSS editor

---

**Version:** 2.0 (Elementor Edition)  
**Last Updated:** December 2024  
**Status:** ✅ Production Ready with Advanced Features