TDvorak/MyClub
1
0
Fork 0
mirror of https://github.com/Dvorinka/MyClubServer.git synced 2026-06-03 18:22:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
e9a63073e53d04d0d3a360756c7922883b23e1e4
MyClub/DOCS/MYUIBRIX_QUICK_START.md
T
Tomáš Dvořák 35d0954afd dev day #62
2025-10-16 17:10:13 +02:00

7.9 KiB
Raw Blame History

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

Reference in New Issue View Git Blame Copy Permalink