The Styled Box block is a versatile web element by which you can create captivating boxes to present information on your website. It includes a wide range of customization options to stand out your content and grab visitors’ attention.

This documentation will explain the step-by-step process of how to use the Styled Box block and create stunning boxes that align with your web design.

Adding the Styled Box #

• Open the Gutenberg Block editor to add a new block.
• Type Style Box in its search box.
• Click the block when you see it appears.

General Setting #

• The Styled Box block has four different types of boxes.
• They are Notification Box, Feature Box, Number Box, and Bordered Box.
• Click anyone of them.
• Let’s click the Notification Box.

• You can change the box if you don’t like it.
• Go to the Select Mode section located on the right sidebar.
• You’ll get a dropdown menu including all the box styles.
• Click on the one you like.

Let’s now tour all the boxes and how to stylize them.

Notification Box

• Add text to the box.
• Below the Select Mode, you’ll get options to add Background Color, Foreground Color, and Border Color to the block.

Feature Box

• The Feature Box allows you to add an image, content title, and description.
• You can create multiple columns on the same block by clicking the Cloumn option on Gutenberg Editor.
• See the image below.

• You can add more number boxes by clicking the Plus (+) icon of Gutenberg Editor.
• Give a title to each number box.
• Add content below the title.
• Press the Plus (+) icon inside these boxes to select blocks to add other types of content, like images, videos, GIFs, etc.
• From the Color section, you can customize the Text, Background, and Link color.
• Go to the Typography section to change the font and its size.

• This box comes with a border on four sides.
• Add your content inside this box.
• Navigate to the Border Settings option on the right sidebar.
• You can customize the Border Size and Border Radius.

• There are eight border styles coming with this Border Box.
• Go to the Border Style section.
• Open the dropdown menu and choose anyone you like.

• Come to the Color Scheme by scrolling down the sidebar a bit.
• You can customize the Border Color and Background Color from here.

Conclusion #

The Styled Box block is a handy solution for creating attention-grabbing content sections. You can use any box style that perfectly suits your content type and its demand appeal.

Whether you want to announce any notification, highlight key information, showcase product features, or create a compelling call-to-action, you must try this block.