Container Block

A fully customizable Gutenberg editor block used for wrapping several blocks in a parent wrapper, which enables you to do more sophisticated styling as well.

Key Features

• Maximum width
• Full-height
  • Vertically align top.
  • Vertically align center.
  • Vertically align bottom.
• Scroll down icon — A scrolling mouse wheel animation that will offer direction to the user.
  • Element ID — Smoothly scroll the window to a specific element or tag ID within the page.
  • Color
• Visibility
  • Desktop
  • Laptop
  • Tablet
  • Smartphone
• Horizontal spacing
  • Desktop
  • Laptop
  • Tablet
  • Smartphone
• Alignment
  • Desktop
  • Laptop
  • Tablet
  • Smartphone
• Link to
  • Page address or URL.
  • Open in a new window.
• Border
  • Width — Sets a width for the borders.
  • Radius — Defines the radius of the corners.
  • Color
• Shadow — Adds a box-shadow to the block.
• Shape — Multiple shapes to use as separators for sections or as the background graphic.
  • Height — A few of the shapes such as “Simple” are adjustable.
  • Color
• Animation on scroll
  • Type — Allows you to animate elements as you scroll down, and up.
  • Ease — Timing function to ease elements in different ways.
  • Offset — Offset to trigger animation sooner or later in pixels.
  • Delay — Delay the animation.
  • Duration — Duration of animation.
  • Run once — Whether animation should fire once, or every time you scroll up/down to the block.
• Background image
  • Position — Sets the starting position of the background image; “Focal Point Picker” support.
  • Repeat — Sets if and how the background image will be repeated.
  • Size — Sets the size of the background image.
  • Parallax — Not scrolling the background image with the page.
  • Sliding background effect — Supports “Left to Right” and vice versa.
• Background video
• Background color
• Overlay opacity
• Align full and wide support
• Aria label — To define a string that labels the current block. You might use it in cases where the block content is not visible on the screen.