9.7 Styling and Customization

Control the visual look and feel of your pages using the settings available when you select Sections, Rows, Columns, or individual Elements.

  • Spacing (Margins & Padding - CRUCIAL): Found in the Advanced tab of the Settings Sidebar for most items.
    • Padding: Space inside the border of an element/container (pushes content inward).
    • Margin: Space outside the border of an element/container (pushes other elements away).
    • Control: Set values (in px - pixels, or % - percentage) for Top, Bottom, Left, Right. Adjust separately for Desktop and Mobile views using the device icons next to the settings. Proper spacing is key to a clean, professional layout.
  • Typography (Fonts):
    • Page Defaults: Set default fonts and sizes for headlines and paragraphs for the entire page via Builder Settings → Typography.
    • Element Overrides: Select a specific text element (Headline, Paragraph, Button) → Use Style options in the sidebar to override defaults: change Font Family, Font Size (adjust for Mobile!), Font Weight (boldness), Color, Text Alignment, Letter Spacing, Line Height.
  • Backgrounds: Apply to Sections, Rows, or Columns.
    • Options: Solid Color, Gradient (linear/radial), Image (upload/select, set position, parallax effect), Video (subtle background video loop - requires Image Fallback for unsupported devices and Overlay Color for text readability).
  • Borders & Corner Radius: Apply to Sections, Rows, Columns, Images, Buttons, etc.
    • Borders: Choose Style (Solid, Dashed, Dotted), Color, Thickness (px), which Sides (All, Top, Bottom, etc.).
    • Corner Radius: Set value (px) to create rounded corners. Higher value = more rounded.
  • Effects (Use Sparingly): Found in the Advanced tab.
    • Shadow: Add Box Shadow (to containers/images/buttons) or Text Shadow. Configure color, blur, offset, spread.
    • Hover Effects: Define how elements change appearance when the mouse hovers over them (e.g., button color change, image zoom).
    • Animations: Add subtle entrance animations (Fade In, Slide In), hover animations, or looping effects. Use sparingly to avoid distracting visitors.
  • Custom CSS: For advanced users needing precise control beyond the visual tools.
    • Page-Specific: Add CSS rules in Builder Settings → Custom CSS.
    • Element-Specific: Assign a unique Custom Class name to an element (Advanced tab → Custom Class). Then, add CSS rules targeting that class in the page's Custom CSS area.