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.
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.
Custom Width: Adjust the custom width of 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
Flex Properties
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 ‘no-wrap’, ‘wrap’, and ‘wrap-reverse’.
Gutenberg Container Block Flex Properties
Style Settings for Gutenberg Flex Container Block
Explore the vast styling options to add background images, overlays, borders, and shape dividers, elevating your container’s visual appeal.
Background Type: Choose the background type (color, gradient, image, or video).
Background Overlay: Select the type of background overlay (color, gradient, etc.).
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.
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).
Top Shape/Bottom Shape Dividers: Select a shape to divide the sections at the top or bottom.
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? Premium Blocks 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.
