A text box is a designated area within the Gutenberg editor where you can craft and publish texts with different typography, font, color, stylization, and other formatting options.
When you want to highlight an important announcement, testimonial, or a brief product description, text boxes allow you to do so. In this article, we’ll show you several ways how to create text boxes in WordPress.
Type 1: Add a Text Box With a Colored Background
This is a simple-straightforward process. You just have to add a color to the background of the specific paragraph block.
Step 1: Select a Text on Your Post/Page
Open the post/page where you want to add the text box. Select your desired text by placing your cursor on the particular paragraph.
Step 2: Add a Color to the Background of the Block
Go to the Styles tab, as pointed out in the image below. Click the Background option and select a color. The color will be instantly applied to the block which you can see in real time.
Once the color is applied around and inside the entire block, it will seem like a box has been created around it, creating a text box.
Thus, you can create a text box with a colored background.
Type 2: Add a Text with Borders
Adding borders around the block is another easy to create a text box. Follow the steps explained below.
Step 1: Select the Text on the Editor
Select a text again by clicking your desired paragraph block as we showed you on the above method.
Step 2: Convert It into the Ground Block
By default, the paragraph block doesn’t allow you to add a border around it. So, convert it into the Group block.
Click the Paragraph icon on the Gutenberg toolbar. A list will appear with the Group option at the end. Click the Group option on the list.
The block will be converted into the Group block.
Step 3: Add Border and Radius to the Block
Go to the Styles tab of the block selected. Scroll down the tab a bit.
You’ll see the Border option. Place a pixel value to define the border width. You may add radius and padding to the block as well if you want.
So, your text box is ready. Adding radius and padding can make the text box more presentable. As a result, you can consider adding them.
Type 3: Add Text Boxes in Table
You may often want to create multiple text boxes in the same row. But it’s not possible with the default paragraph block. However, you can do it easily by creating a table.
Tableberg is such a table-builder plugin to do so. Install and activate the plugin and follow the steps shown below.
Step 01: Add the TableBerg Block to Your Site
Simply find the TableBerg block in the Gutenberg block library and add it to your post/page editor.
Step 02: Create Columns as Required
Like the default Gutenberg table, create as many columns as you need on the table.
Step 03: Add Content to the Table Columns
Although TableBerg allows you to add Lists, CTA buttons, and Images to the table, we have added plain text only to explain the tutorial.
Step 04: Add Colors to the Table Columns
Select a column on the table by placing your cursor on it. Go to the Styles tab. Click the Background option and select a color. You’ll see the color has been applied to the column.
Following the same method, apply different types of colors to other columns on the table. You can see we have applied four different colors to the columns of the table.
So, your text boxes are ready. But if you want to remove the table border, follow the next step.
Step 05: Remove the Table Border
Select the entire table by clicking the TableBerg icon twice on the toolbar. Go to the Styles tab on the right sidebar. Scroll down a bit. Toggle off the option Enable Inner Border. The table borders will be invisible.
Conclusion
Thus, you can create text boxes in WordPress in various ways. But before concluding, we want to say one thing which is each of these methods may not be effective in all cases.
Depending on your content type, you must use a suitable method that upholds readability. Let’s share your feedback in the comment box below if you love this post.
Explore our blog archive to learn more interesting articles on WordPress.
