Sajedeh Gooklani

Mahdi Yazdani

Markus Göckeritz

sixa

<p>Combine blocks into a fully customizable wrapper block with sixa Container.<br />
Create more sophisticated designs with more space, colors, gradients, background images, videos and much more.</p>
<h4>Features</h4>
<ul>
<li>Full-height toggle to automatically stretch Container to full viewport height</li>
<li>Content alignment inside container
<ul>
<li>Top left</li>
<li>Top center</li>
<li>Top right</li>
<li>Center left</li>
<li>Center center</li>
<li>Center right</li>
<li>Bottom left</li>
<li>Bottom center</li>
<li>Bottom right</li>
</ul>
</li>
<li>Minimum height in px, %, em, rem, vw, and vh</li>
<li>Maximum content width in px, %, em, rem, vw, and vh</li>
<li>Background color including gradients directly from your theme</li>
<li>Text color</li>
<li>Gutenberg alignment (Full-width and wide-width)</li>
<li>Background image
<ul>
<li>Custom background size
<ul>
<li>Auto</li>
<li>Cover</li>
<li>Contain</li>
<li>Custom (width and height)</li>
</ul>
</li>
<li>Fixed Background</li>
<li>Repeated Background</li>
<li>Focal Point Picker to adjust background position</li>
<li>Background overlay color</li>
<li>Background overlay opacity</li>
</ul>
</li>
<li>Background video</li>
</ul>


sixa Container Block

A fully customizable wrapper block to group other blocks together. Create more sophisticated designs with…

MyPreview

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


Container Block

A Gutenberg editor block used for wrapping several blocks in a parent wrapper.

sixa Container Block vs Container Block