- 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
- How can I Change the Contents of the Sidebar?
- Templates and Template Parts in FSE
- How to create Custom Front Page in WordPress
- Frequently Asked Questions
- How to Hide and Show Block Elements?
- How to use Group Blocks or create Containers in Spectra One
- How to clear customizations in Spectra One theme
- What are the Actual Sizes of the Predefined Font Sizes?
- How to make changes to single pages like 404, Archive, Single
- How to change the post/page hero section?
- How to Install Spectra One Theme?
- How to Global Change the Width Using Layouts
- How to Use Sidebar for Page and Post
- What is a Stylebook in FSE?
- How to Change the Global Color Palette?
- Customizing Block Styles in Spectra One Theme
- Understanding Patterns and How to Modify Them in Spectra One Theme
- Changing Sidebar Position for Pages and Posts
- Understanding Duotone and Adding Dynamic Color to SVG
- Exploring Full Site Editing: Creating Websites Made Easy!
- Exploring the “Edit Template” Feature in the Admin Bar
- How to Change the Favicon in Spectra One
- Sticky Header in WooCommerce Based Template
- Integrating Google Analytics into Spectra One Theme
- How to Create a Child Theme for Spectra One
- How to Use WPML for Translating Spectra One Websites
- Accessing the Additional CSS Section in an FSE Theme
- Creating and Managing Templates for Custom Post Types in Spectra One
How to use Group Blocks or create Containers in Spectra One
Introduction:
Spectra One is a powerful and versatile platform that offers a wide range of tools for website design and development. Among its many features, the ability to utilize group blocks and create containers stands out as an efficient way to organize and structure content. In this article, we will explore the fundamentals of using group blocks and demonstrate how to create containers in Spectra One, empowering you to optimize your website layout and enhance user experience.
Understanding Group Blocks:
Group blocks in Spectra One allow you to combine multiple elements or blocks into a single unit. This grouping feature enables you to manipulate and manage related content collectively, making it easier to rearrange, style, or apply settings to the entire group at once. Group blocks are especially useful when you want to maintain consistent formatting across different sections of your website or when you need to organize complex layouts.
Creating Group Blocks:
- To create a group block in Spectra One, navigate to the desired page or post in the editor.
- Add a block and select Group Block
- You will be asked to choose a layout for the Group Block. Currently, there are three different layouts that you can choose from. You can select a layout based on your requirements.
- Group: This layout gathers all the blocks in a container
- Row: This layout arranges the blocks horizontally
- Static: This layout arranges the blocks vertically
In this example, we will be choosing the Row layout.
4. Once you have chosen a layout, you will be able to add blocks inside the group blocks simply by clicking on the + icon on each Row.
5. Add a block of your choice and then click on the + icon at the bottom corner to another block to the group.
6. In this example, we have added a test heading and an image block to the group.
Managing Group Blocks
Once you have created a group block, Spectra One provides various options to manage and manipulate the grouped elements:
- Switching Layouts: You can easily change the orientation of blocks by selecting the group and switching between the Group, Row, and Static layout.
- Justification: this option allows you to change the alignment of the blocks inside the group block. You can either position the blocks aligned to the left, right, or center or even create a space between them.
- Orientation: The orientation option allows you to rearrange the blocks inside the group block as horizontal or vertical.
4. Wrapping Multiple Lines: If you have multiple lines inside the group block, by enabling this option, you will be able to wrap them up in a single line.
- Styling: Apply consistent styling to the entire group by selecting the group block and adjusting the relevant formatting options in the block’s toolbar. This gives you access to change the color of the text, background, and links of the group blocks along with typography, dimension, border, and radius.
- Duplicating: Click on the three dots on the group block settings and choose the “Duplicate” option to create an identical copy of the entire group, including all its contained blocks.
- Ungrouping: If you need to separate the blocks within a group, select the group block and choose the “Ungroup” option from the “Block” menu. This action will revert the blocks back to individual elements.
Conclusion
Group blocks are indispensable tools for structuring and organizing content within Spectra One. By harnessing their power, you can efficiently manage complex layouts, maintain consistency, and enhance the overall user experience of your website. With the step-by-step instructions provided in this article, you are now equipped to leverage group blocks to their fullest potential in Spectra One. Happy designing!
We don't respond to the article feedback, we use it to improve our support content.