Free Download

Gutenberg Flex Container Block Tutorial

Table Of Content

Introduction


Maximize your WordPress site’s design capabilities with our comprehensive Gutenberg Container Block tutorial. This key component of Premium Blocks for Gutenberg unlocks extensive customization options, empowering you to design distinctive sections. Learn how to navigate through layout configurations, flex properties, and styling choices within the Gutenberg editor, enabling you to assemble engaging and visually striking sections that grab your viewers’ attention.

Visit Demo Page
Free Download

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

  • Premium Blocks for Gutenberg – The Free WordPress Plugin.
  • Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Container Block?

Once you’ve enabled Premium Blocks, the beginning is effortless just add Premium Container Block to your Gutenberg editor. From there, you can easily input any Gutenberg Block you want.

General Settings

Adjust the container’s overall settings and flex properties to align with your concept, designing layouts that integrate smoothly throughout your page.

  • Container Width: Choose between ‘Full Width’ for the container to span the entire width of the screen or ‘Boxed’ to limit its width.
  • Content Width: Define the content width type inside the container.
  • Max Width: Adjust the maximum width of the container, with a slider allowing for precise control up to the displayed value.
  • Min Height: Set a minimum height for the container, with the ability to adjust the value in pixels (PX) or viewport height (VH) units.
  • Overflow: Control how content that is too large for the container box is handled (e.g., ‘Default’, ‘Hidden’, ‘Scroll’, etc.).
  • HTML Tag: Select the HTML tag that best describes the container’s content for semantic HTML structure (e.g., ‘div’, ‘section’, ‘article’, etc.).
Gutenberg Container Block Settings
Gutenberg Container Block Flex Proporties

Become adept at using flex properties to dictate the arrangement, placement, and organization of items in the container, ensuring an impeccable layout.

  • Direction: Choose the flex direction of the items within the container. The options suggest ‘row’, ‘row-reverse’, ‘column’, and ‘column-reverse’.
  • Align Items: Set the alignment of items on the cross axis. The icons suggest options like ‘flex-start’, ‘center’, ‘flex-end’, and ‘stretch’.
  • Justify Items: Set the distribution of space along the main axis. The icons suggest options like ‘flex-start’, ‘center’, ‘flex-end’, ‘space-between’, ‘space-around’, and ‘space-evenly’.
  • Wrap Items: Choose whether items should wrap onto multiple lines or stay on a single line. The icons suggest ‘nowrap’, ‘wrap’, and ‘wrap-reverse’.
Gutenberg Container Block Flex Properties
Gutenberg Container Block Flex Properties
Style Settings for Container Gutenberg Block

Explore the vast styling options to add background images, overlays, borders, and shape dividers, elevating your container’s visual appeal.

  • Background:
  • Background Type: Choose the background type (color, gradient, image, or video).
  • Background Overlay:
  • Background Type: Select the type of background overlay (color, gradient, etc.).
  • Border:
  • Border: Choose the style of the border (solid, dotted, dashed, etc.).
  • Border Radius: Adjust the curvature of the border’s corners.
  • Box Shadow: Add a shadow effect around the element.
  • Spacing:
  • Row Gap: Adjust the gap between rows, with units in pixels (PX), em (EM), or rem (REM).
  • Margin Top: Set the top margin of the element.
  • Margin Bottom: Set the bottom margin of the element.
  • Padding: Set the space inside the border of an element for all four sides (top, right, bottom, left).
  • Shape Divider:
  • Top Shape/Bottom Shape: Select a shape to divide the sections at the top or bottom.
Here you can customize styling options like background, overlay, border and shape divider.
Gutenberg Container Block Styling Controls

Conclusion

In conclusion, Gutenberg Container Block significantly enhances WordPress design, enabling unique and integrated section creations. This guide has shown you how to effectively use its features for impactful designs. With Premium Blocks for Gutenberg and the Kemet Theme, you’re well-equipped for any project. Flex Container Block simplifies complex designs, offering endless possibilities to bring your creative vision to life with ease and sophistication. Embrace these tools for a more dynamic and customized website experience.

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support
Facebook Group

Global Features

Help Center

Our Products

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks