Styling Overview
XBuilder provides comprehensive styling controls to customize every aspect of your popup's appearance. From layout to animations, you have complete control over the design.
Styling Areas
| Area | What It Controls |
|---|---|
| Layout | Position, size, spacing |
| Typography | Fonts, text styling |
| Colors & Backgrounds | Colors, gradients, images |
| Borders & Shadows | Borders, corner radius, shadows |
| Animations | Entry, exit, hover effects |
| Responsive Design | Device-specific styling |
Where to Find Styling Options
Popup-Level Styling
Found in the Layout and Design tabs:
- Popup position and size
- Overlay appearance
- Background styling
- Close button design
- Animation effects
Element-Level Styling
Found when selecting any element:
- Typography settings
- Spacing (margin/padding)
- Background
- Borders and shadows
- Custom CSS
Styling Workflow
1. Start with Layout
Set the foundation:
- Popup position on screen
- Width and height
- Content alignment
2. Apply Colors & Backgrounds
Establish visual identity:
- Background color or image
- Text colors
- Brand colors
3. Add Typography
Set text styling:
- Font families
- Sizes and weights
- Line heights
4. Refine with Details
Polish the design:
- Borders and radius
- Shadows and effects
- Spacing adjustments
5. Add Motion
Bring it to life:
- Entry animations
- Hover effects
- Transitions
6. Test Responsively
Verify on all devices:
- Desktop preview
- Tablet preview
- Mobile preview
Design Tabs Overview
Layout Tab
Controls popup structure:
| Setting | Function |
|---|---|
| Position | Where popup appears |
| Width/Height | Popup dimensions |
| Offset | Distance from edges |
| Overlay | Background dimming |
| Close Button | X button styling |
Design Tab
Controls visual styling:
| Setting | Function |
|---|---|
| Background | Color, gradient, image |
| Border | Border styling |
| Border Radius | Corner roundness |
| Shadow | Box shadow |
| Animation | Entry/exit effects |
Element Styling
Each element has styling sections:
Content Section
- Element-specific content
- Text, images, links
Style Section
- Typography
- Colors
- Spacing
- Background
- Border
Advanced Section
- Custom CSS classes
- HTML ID
- Device visibility
Quick Styling Tips
Use Consistent Spacing
Stick to a spacing scale:
8px, 16px, 24px, 32px, 48px
Maintain Typography Hierarchy
H1: 32px, bold
H2: 24px, semi-bold
Body: 16px, regular
Small: 14px, regular
Color Best Practices
- Use 2-3 main colors
- Ensure contrast ratios
- Test dark/light modes
Border Radius
Common values:
Sharp: 0px
Subtle: 4px
Rounded: 8px
More rounded: 16px
Pill: 9999px
Responsive Considerations
Every style setting can have device-specific values:
| Device | Adjustments |
|---|---|
| Desktop | Full design |
| Tablet | Slightly reduced |
| Mobile | Optimized for small screens |
Common responsive changes:
- Smaller font sizes on mobile
- Reduced padding
- Full-width buttons
- Simplified layouts
Inheritance
Style inheritance works as follows:
Popup Settings
└── Section Settings
└── Column Settings
└── Element Settings
Child elements can inherit or override parent styles.
Best Practices
Consistency
- Use design system values
- Reuse color palette
- Consistent spacing
- Matching typography
Performance
- Optimize images
- Use system fonts when possible
- Minimal shadows on mobile
- Efficient animations
Accessibility
- Sufficient color contrast
- Readable font sizes
- Clear focus states
- Touch-friendly targets
Maintainability
- Use CSS classes for repeated styles
- Document custom CSS
- Keep styling simple
- Test thoroughly
Next Steps
Deep dive into each styling area:
- Layout — Position and sizing
- Typography — Text styling
- Colors & Backgrounds — Visual foundation
- Borders & Shadows — Detail and depth
- Animations — Motion and effects
- Responsive Design — Multi-device support