With the Block component, you can add multiple components and set a single background for all of them. This is useful when you want to highlight certain elements on the page, and also makes it easier to copy or move around groupings of components. To get started, click Add Content and drag the Block component to a page of your site. Next, click on the component to open the options panel on the side of the website editor.
Adding Content
To add content to the component, you can click the Add Content button within the options panel, click the button within the component, or just drag and drop components directly. You can remove components by dragging them back out, too. Within the component itself, you can organize content just like on the rest of the page, using Columns, Grids, and even other Block components.
Group Hover States
This option is toggled on by default. If you have hover states set for individual items within the Block component, this means that hovering over the component will activate the hover state for all items. With the option toggled off, hover states of items only activate when you hover over them individually.
Visibility
One powerful feature of the Block component is the option to hide it on different screen sizes. To do that, click the desktop/mobile icon for the Hidden option, then toggle the option on for any screen size where you want to hide the component.
Within this option group is also the Opacity option, which can set the opacity to a fixed percentage.
Design
The options within the Design option group control the styling of the component.
- Shape - By default, this option inherits the your site setting, though you can change this to something unique for the component. You can also set this separately for different screen sizes by clicking the desktop/mobile icon. The effect of this option is easier to see if your component has a border or box shadow.
- Box Shadow - This option adds a shadow around part of the component. You can set the size, color, and opacity of the shadow.
- Background - With this option you can add a background to the component, choosing a color, gradient, image, or image with overlay.
- Border - Use this option to add a border around the component. You can set the width, color, and style of the border.
Spacing
To control spacing around the component, use the Margin option. To control spacing within the component, use the Padding option. Both of these options can be set separately for different screen sizes by clicking on their respective desktop/mobile icons.
Hover
To control some of the styling of the component itself when hovering over it with a mouse, click on Hover at the top of the options panel. You can set the Background and Border specifically on-hover.