How to Put a Box Around Text in WordPress

How to Put a Box Around Text in WordPress

Effective content presentation is crucial to the success of any website. This is why you need to present your web content in varying styles to suit different needs so it becomes easily readable to web visitors and users.

Putting boxes around texts could be an effective way to do this. Because it can help make certain text completely distinct from others. This concept is highly effective in presenting important details, quotes, and calls to action.

In this tutorial post, we’ll show you multiple methods of how to put a box around text in WordPress.

Create Beautiful Tables
With Block Editor

Method One: Using the Group Block

The Group is a default WordPress block. This block allows you to add various other blocks within it.

Step 01: Add the Group Block to the Editor

Find and add the Group block to the editor.

Add the Group block to the editor

Select a layout for the Group block. For the tutorial, we’ll select the first layout.

Select a layout for the Group block

Step 02: Add the Paragraph Block to the Group Block

Now, add the Paragraph block to the Group block so you can write text content.

Add the Paragraph block to the Group block

Next, add your desired text content to the block.

Add text to the Group block

Step 03: Customize the Block and Make It a Box

Go to the Settings tab on the right sidebar. You can customize the layout for the Group block if needed. Otherwise, leave it.

Customize the layout for the Group block

Then, come to the Styles tab. From the color section, colorize the text content and background of the block.

Colorize the Group block content

Scroll down the tab and come to the Padding and Border sections.

The Padding will let you add space between the content and the border. The Border will allow you to increase its width.

Add padding and border to the Group block

Thus, you can create a box around the text.

Method Two: Using the Tableberg Block

Tableberg is a wonderful and easy to use table builder plugin. You can create and put a stunning box around your text content with this plugin as well. Get the plugin by clicking the buttons on the banner below.

Create Beautiful Tables
With Block Editor

Once installed on your site, follow the tutorial.

Step 01: Add the Tableberg Block to the Editor

This plugin comes with a block named Tableberg. Add the block to the editor.

Add the TableBerg block to your Gutenberg editor

Place the number of column and row to create as many boxes as you want. Let’s for this tutorial, set 1*1 to create only one box.

Set the number of rows and columns

You can see the box layout is added.

The box layout is added to the editor

Step 02: Add Text to the Box

Just write or copy-paste the text content you want to the box.

Add Text to the Box

Step 02: Stylize the Box

Go to the Styles tab keeping the Tableberg block selected. Add a background color to the box from the Color section.

Stylize the box

Step 03: Customize the Table Border

Scroll the tab and come to the section Table Border and Inner Border.

By placing suitable values, you can adjust the border color, width and radius.

Customize the Table Box Border

Step 04: Customize the Text Color

If you want, change the text color so the design looks beautiful and readable.

Customize the Text Color

Conclusion

So, it’s easy to put a box around text in WordPress. Now, it’s your turn to choose the method that suits you. However, there are several things you must remember. Make sure the box and the text color contrast each other so your content is readable.

Besides, try to maintain the color scheme of your website in the content box as well to ensure your consistency in branding. You can do more interesting designs with the Tableberg plugin. For example, explore how to add Amazon product box in WordPress.



The Tableberg Team