Table of Contents
A wrapper is a block that can be used to wrap other blocks.
1. How to add Wrapper Block #
To add the “Wrapper Block” click on the Gutenberg Editor block inserter plus icon(+) and then find Wrapper Block from the search option. Just click on the Block and it will be activated.
2. General Settings #
In the general settings tab, you can set container width and HTML tag. These panel settings are as bellows
- Container Width: You can set the container width to Full width or custom width.
- HTML Tag: Set HTML tag for the Wrapper.
3. Styles Settings #
From the Styles settings tab, you can set all possible styles like typography, color, margin, background and other style settings.
- Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set the default border or hover border with different border styles and also can set border-radius.
- Shadow: You can set box shadow for normal and hover style.
4. Advanced Settings #
From the advanced settings tab, you can control the device-wise visibility.
- Show/ Hide Condition: You can show/ hide the Wrapper in the Desktop, Tab or Mobile view.
- Animation: Select Animation, Animation Duration and Animation Delay.
