Skip to main content

Universal Section Settings

Every section in Wave provides a consistent set of settings that control its appearance, spacing, and behavior. These settings appear in the section's configuration panel in the theme editor.

Width​

  • Width: Control the section's content width:

    • Global: Uses the theme's default page width.
    • Boxed: Uses a custom max-width container (1200-1800px).
    • Fill: Content spans the full browser width.

  • Custom width: When boxed is selected, set a specific width (1200-1800px).

Height​

  • Height: Control the section's height:
    • Auto: Height adapts to the content.
    • Fill: Section fills the full viewport height.
    • Custom: Set a specific height in viewport units (vh).

Spacing​

  • Section spacing: Use global or custom spacing between this section and adjacent sections.
  • Container gap: Control the gap between elements inside the section.
  • Padding (desktop): Top, right, bottom, left padding.
  • Padding (mobile): Separate padding values for mobile screens.
  • Margin (desktop): Top, right, bottom, left margin.
  • Margin (mobile): Separate margin values for mobile screens.

Color scheme​

  • Color scheme: Choose from your defined color schemes, or select Inherit to use the parent's scheme.

Background​

  • Background type: None, Color, Gradient, Image, or Video.
  • Background color: Solid color background.
  • Background gradient: Gradient background.
  • Background image: Image background with optional parallax.
  • Background video: Video background (auto-playing, muted).
  • Background overlay: Add a color overlay on top of the background.

Borders​

  • Border radius: Control the corner roundness of the section.
  • Border style: Set border width, color, and style.

Animation​

  • Animation effect: Choose an entrance animation:
    • Fade, Fade up, Fade down
    • Slide left, Slide right
    • Zoom in, Zoom out
    • Rotate
  • Animation duration: Control animation speed.

Visibility​

Sections can be configured to appear only on specific page templates through the section schema's enabled_on and disabled_on settings. This is handled automatically — sections only appear in the editor where they're relevant.