Go Back to Parent Doc

Layout & Section Blocks

These blocks build the big structures of a page — full-width sections, sliders, dividers, and framing devices.

Advanced Container

A section wrapper with everything the core Group block can’t do, while keeping everything it can.

  • Image or video background with focal-point picker, fixed (parallax-style) and repeated modes, and duotone filters.
  • Color or gradient overlay with adjustable opacity, set in the native Color panel.
  • Nine-position content placement — pin the inner content to any corner, edge, or center of the section.
  • Top and bottom shape dividers built in (the same shapes as the Shape Divider block).
  • Plus the full native Group feature set: layout (flow/row/stack/grid), content width, min-height, aspect ratio, sticky position, colors, borders, shadows, and spacing.
  • Converts to and from the core Group block, both ways.

Use it as the outer shell of any hero, banner, or striped section.

Shape Divider

A decorative SVG transition between sections — wave, layered waves, curves, tilt, triangles, arrow, split, book, zigzag, and mountains (12 shapes).

  • The shape color uses the native text-color control; put a background or gradient behind it for two-tone transitions.
  • Height, horizontal stretch, and flip controls.
  • Pure SVG/CSS — no images to load, crisp at any size.
  • The same shapes are also available as built-in top/bottom dividers on the Advanced Container.

Slider

Slide anything. Each slide is a blank canvas for any blocks — images, headings, buttons, columns, entire hero sections.

  • 1–4 slides per view with responsive collapsing; slide spacing via the native block-gap control.
  • Arrows and dots, with placement over the slides or in a strip below, size and color controls, and dot or bar pagination styles.
  • True infinite loop — the first slides follow seamlessly after the last, never rewinding.
  • Scroll by page or single slide, and a peek option that reveals the edge of the next slide.
  • Optional autoplay that pauses on hover (configurable), on focus, off-screen, and under reduced-motion preferences.
  • Native touch swiping that keeps working even without JavaScript — the track is a real scroll area, not a JS simulation.
  • Slides support backgrounds, borders, padding, min-height, and layout constraints; equal-height slides come free.
  • Transform anything into a slider: multi-select existing blocks and convert — each block becomes a slide.

Looking for a testimonials-specific slider? See the Testimonial Carousel, which shares this engine.

Scroll Indicator

A reading-progress indicator for long pages and posts.

  • Multiple icon styles and animations, with click actions (e.g. scroll to top).
  • Color, size, and position controls, plus visibility rules for where it appears.
  • Great engagement signal on long-form content and documentation.

Device Mockup

Show a screenshot — or any content — inside a phone, tablet, laptop, or browser frame.

  • The frames are pure CSS: no frame images to download, crisp on every screen, instantly recolorable.
  • Phone and tablet support portrait and landscape; the browser frame has traffic-light dots and an optional address-bar text.
  • Frame shade (dark/light) or any custom frame color; width control; content is clipped to the screen, and images fill it edge-to-edge.
  • The screen is an inner block area, so you can even put a Slider inside a phone.
Shopping Cart
  • Your cart is empty.