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.

Powered by BetterDocs