Sections (Group & Cover Blocks)
This article explains how to create full-width sections on a page. This is mostly used to build homepages but can also be applied to landing pages, start here pages, etc. We'll also dive into Mai Theme's custom block settings on WordPress's Group and Cover blocks.
The video below walks through many of the settings (core and Mai custom) available on Group and Cover blocks.
When To Use
One of our most used blocks when building websites is the Group block. The Cover block is also very popular This block can be thought of as a container for other blocks inside. Here are some of the reasons to use a Group or Cover block.
- Create a full-width sections.
- Group together many "nested" blocks inside a single container.
- Add a background color and change text color (Group block).
- Add a background image and colored overlay (Cover block).
- Control the content width and content alignment.
How To Use (Full Width Sections)
- Insert a Group or Cover block into your page/post. Make sure it's a top level block that is not nested inside any other blocks.
- Click the alignment icon in the top left toolbar (pops up when the block is highlighted in the editor) and change it to "Full width".
- Customize via the block settings in the Block sidebar on the right. Color, Layout, and Padding are the most popular settings (see below).
Group Block Settings
Toolbar
The toolbar is on the top left when the block is highlighted. The most popular settings here is alignment which allows you to set the block to Wide or Full width. The other controls let you move the block, delete, or add another block before or after.
Color
Set a background and/or text color on the group container.
Layout
Set the max width and alignment on the content inside the group. These are custom Mai settings.
Padding
Set the padding (inside spacing) on the group container. These are custom Mai settings.
Margin
Set the margin (outside spacing) on the group container. These are custom Mai settings.
Advanced
Change the group HTML element, add an HTML id for anchor links, and add custom CSS classes. HTML anchor allows you to make a unique web address for a particular block. Then, you’ll be able to link directly to a block of your page. The Additional CSS class(es) lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.
Cover Block Settings
Media Settings
Fixed Background
In the block settings on the sidebar, you have some other options, the first of which is a toggle for a fixed background. A fixed background means the cover image scrolls along with your page. Turning this option off embeds the image in place, so the image doesn’t scroll.
Repeated Background
The Repeated background option lets you repeat the same image to form a pattern in the cover block. For example, if you have a small image and you want it to repeat multiple times in the cover block, you can enable this option.
You can use the Repeated background toggle in combination with Fixed background, but Fixed background does not necessarily have to be turned on. Feel free to play around with these options to find what suits your needs.
Focal Point Picker
If the fixed background option is turned off, you will see the focal point picker. This tool lets you identify the main point of interest in the photo and highlight. Click on the picker to drag it to the spot you want, or use the horizontal and vertical position percentages below to set it manually.
Dimensions
We rarely use this feature and typically recommend using our Padding settings (below) instead of setting fixed a height.
Overlay Color
Using the Overlay Color options, you can add a color overlay to the cover image. By default, this is a gray, transparent overlay, but with the overlay color options, you can switch that color to any other color of your choice.
Overlay Opacity
Using the Opacity slider, you can set the opacity of the cover image’s overlay. Moving the slider right toward 100 makes the overlay darker and more opaque, and moving it left toward 0 makes the overlay lighter and more transparent. At 100, the overlay is completely opaque and the cover image is no longer visible. At 0, the overlay disappears completely, leaving only your image.
Layout
Set the max width and alignment on the content inside the group. These are custom Mai settings.
Padding
Set the padding (inside spacing) on the group container. These are custom Mai settings.
Margin
Set the margin (outside spacing) on the group container. These are custom Mai settings.
Advanced
Change the group HTML element, add an HTML id for anchor links, and add custom CSS classes. HTML anchor allows you to make a unique web address for a particular block. Then, you’ll be able to link directly to a block of your page. The Additional CSS class(es) lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.
Screenshots
