- Using Spectra Heading Block
- Buttons
- Post Grid
- Content Timeline
- Social Share
- Google Map
- Add Testimonials to Your WordPress Website
- Info Box
- Team
- Icon List
- Price List
- Post Masonry
- Post Carousel
- Post Timeline
- Call To Action
- Advanced Columns
- Blockquote
- Marketing Button
- Gravity Form Styler
- Table Of Contents
- How-to Schema
- FAQ – Schema/ Accordion
- Inline Notice
- WP – Search
- Review Schema
- Lottie
- Taxonomy List
- Tabs Block
- How to Create Contact Forms for Your WordPress Website
- Star Rating
- Masonry Image Gallery
- Wireframe Blocks
- Spectra – Heading Block
- Spectra – Image Block
- Spectra – Buttons block
- ‘Translate Everything’ Feature in WPML
- Spectra – Container Block
- Spectra – Taxonomy Styling Options
- Spectra – Block Presets
- Image Gallery
- Counter Block
- Modal Block
- Registration Form Block
- Slider Block
- Custom CSS On Page Level
- Countdown Pro
- Designing Custom Navigation for Your Slider
- Instagram Feed
- Loop Builder
- Animations
- Using Spectra Login Form Block
- Global Block Style Extension
- How to Create Popups Using Spectra
- How to Add Custom Blocks Under Spectra Blocks
- Move Block Patterns from One Site to Another
- Getting Started with Grid Builder
- Adding a Newsletter Form to Your WordPress Site Footer
- How to Register High-Privileged Users on Your Website
- Section
- Troubleshooting – Icons missing from the blocks
- Spectra Patterns
- How to Set Multiple Column Fields in Contact Form 7 Styler of Spectra?
- Styling Checkbox / Radio / Acceptance control in Contact Form 7 Designer block of Spectra
- Unable to Style Checkbox / Radio Buttons / Acceptance Control using Contact Form 7 Styler of Spectra
- Tab Index – for multiple Gravity Forms
- How to Get Started with Spectra
- How to Exclude A Heading from Table of Contents?
- Spectra – Display Conditions for Blocks
- Installing and Importing Starter Templates
- How to Get Started with Spectra
- Manually Install Spectra via FTP
- Automatic Beta Updates for Spectra
- How to Rollback to Previous Spectra Versions
- How to Load Google Fonts Locally
- Activate the Spectra Pro License Key
- How to Install Spectra Pro Plugin
- Translate Spectra Strings using Loco Translate
- How to add a Transparent / Sticky header?
- How to Change the Site Logo?
- How to Change Global Styles?
- How to Disable Title on Posts, Pages?
- How to add a transparent/ sticky header for a single page/post?
- Change Header and Footer Patterns in Spectra One Theme
- Add Custom/Google Fonts In Spectra One
- How To Reset Global Default Styling?
- Manually Install Spectra One via FTP?
- Disable or Enable Header/Footer for Specific Pages/Posts
Spectra – Container Block
The Container Block in the Gutenberg page builder provides a robust and flexible solution for designing custom layouts with ease. It allows users to combine various blocks within a single row, offering ultimate flexibility in terms of container layout and size configurations.
This versatile block allows users to create unique column layouts, manipulate container paddings and margins, and control the responsiveness of columns on different devices.
Go through the below sections of this document to learn more about how to use the container block using Spectra.
How to use the Container Block
To use the Container Block, you can begin by adding it to your page.
Once added, you can easily create your own column layout and manage the margins and paddings of each column. Other blocks can be added inside these columns, offering a seamless combination of different elements.
What are the Container Block General Settings
Upon selecting the Container Block, navigate to the General Tab in the settings sidebar. Here, you can fine-tune various parameters:
- Layout: You can set the container width to Full Width or Boxed, adjust the content width, and define minimum height.
- Flex Properties: Control the direction in which contained elements appear.
What are the Container Block Styling Options
You can move to the Style tab to customize the appearance of the container.
- Background: Select from solid color, gradient, image, or video backgrounds.
- Color: Set text and hyperlink text colors from the palette.
- Border: Define border type, and border radius for rounded corners, and configure border settings.
- Shape Dividers: Apply dividers at the top and bottom of the container, specifying color, width, and height.
- Box Shadow: You can add a shadow effect to the container.
- Spacing: You can add row gap, column gap, padding, and margin.
What are the Container Block Advanced Options
In the advanced settings section, you have the following options:
Responsive Conditions: You can determine the page’s visibility on Desktop, Tablet, and Mobile devices. Note that these settings take effect only when the page is live, not during the editing process.
Sticky Container: This feature is controlled by a single toggle in the container’s advanced tab. Enabling this toggle allows you to specify whether the container should stick to the top or bottom of the screen. You can also adjust the distance (offset) from the edge at which it should be stuck.
For example; I have created a page with a container block added to it and I have chosen that the container should stick to the top. Then in the front end, it would be like this:
If the container is nested within a parent container and set to stick at the top, you have the option to keep it inside the parent. With this setting, when the parent container scrolls out of view, the sticky element will also be out of view as it stops at the bottom of the parent.
How to work with Container blocks
Add a container block and then add other blocks inside it. These can be new, existing, or container blocks for nested styling. You can change different style settings for any Container block.
Adding new blocks to a Container
To add a new block inside an existing container block, click the + icon.
Dragging Existing blocks into a container
You can drag and drop any existing block into a container block. You can rearrange the order of blocks inside a container similarly.
Reusing a Container block in Multiple Designs
WordPress allows you to reuse blocks on as many pages as needed. This allows you to avoid setting up the same blocks repeatedly. You can also make container blocks to be reusable. This can save you a lot of time because container blocks can feature several other blocks and specific styling.
To make a Container block reusable, select it, then click the three dots icon for more block options. In the dropdown that appears, click the Create Pattern option and give a name to your reusable block.
You can now insert this reusable container block in any design you create. Click to insert a new block, and in the Patterns section, click the one you want to insert.
We hope this document has been helpful. Please feel free to drop a comment below if you have any questions.
We don't respond to the article feedback, we use it to improve our support content.