How to make left border box with Gutenberg WordPress

In the digital era, practical design is crucial to differentiate one’s content. Now, it’s not enough to have an exciting story or a fantastic blog post; the visual aspect of your content can make a huge difference in its success. WordPress’s Gutenberg editor, meant to make content creation more accessible, has many tools that help you create visually appealing pages. A tool which allows you to create design elements, for example, a left box with a border, which is excellent for features you want to give importance to or focus on.

Understanding the Left Border Box

A left border box is a design element consisting of a vertical line or colored stripe running along the left side of a block of content. This simple yet efficient design can make any content look more appealing.

Left Border Boxes Applications

• Emphasizing testimonials or quotes: Bring practical value to the readers.
• Advice boxes or tips: Give your audience supplementary value in a unique format.
• Section organization: Make content more readable by dividing it into categories.

Making Left Border Box Using Gutenberg WordPress

The Gutenberg WordPress editor is the best tool for developing and styling posts and pages on your website. The block editor is a new way of managing content, increasing flexibility and design freedom. From the Gutenberg block editor, one of the design features you can create is a left border box. This effectively calls attention to content or even comes up with a spectacular format.

Step 1: Understanding the Basics

Gutenberg’s Design Tools and Features

Gutenberg’s block-based system represents each piece of content as a “block.” Thus, you can easily rearrange or adjust everything from custom design elements to videos and images. Reused blocks to make the design consistent. Reusable blocks let you save a styled block (e.g., a left border box) and reuse it on multiple posts or pages, so you don’t have to create the same thing twice.

It is important to have a general knowledge of the Gutenberg editor before proceeding to build a left-border box. Gutenberg is designed to work on a block-level basis, which means that your content is created block by block. In this structure, the design and usefulness of each block can differ. They include text, images, galleries, and columns.

For creating the left border box, use the Columns block, which will enable you to create columns within a single row. In this connection, each of the given columns can independently contain blocks of different types, such as text, images, or others.

Step 2: Adding the Columns Block

The first step in creating a left-border box is to create a new Column block in the content area. To do this, go to the top left corner, click the ‘.’, and select columns from the block lists, or find the block by going to the block inserter, using the ‘/’ key, and selecting the columns block.

If you’ve added the Columns block, you’ll have a line with three equal column blocks next to each other. These columns have to be changed to create the left border box.

Step 3: Editing the Columns

To edit the columns, go to the Block toolbar, denoted by three dots at the upper right section of the Columns block. In the toolbar menu, click on “Format” then click on “Edit as HTML.” This will open the HTML editor, and by using a simple code, you can change the width ratio of each of the columns.

By default, Bootstrap sets the three columns to equal width, which is 33.33%. However, creating a left border-box will require adjusting the width of the columns accordingly. You can make one column wider, say 75%, while the other two columns will be fairly thin, say 12.5% each. Also, be sure to click on the ‘Apply’ button to write the changes that are made to the newly set widths.

Step 4: Adding more content

If you want to add more content to the site, you should put some content in the left column. Having drawn a left border box, you can proceed with adding the left column content. This can be achieved by clicking on the left column within the Columns block and then entering content blocks of choice. These may be text blocks, images, buttons, or any other elements that create interaction with the audience or users.

To create a text block, go to the top panel, click the ‘Add block’ dropdown, and click the ‘Paragraph’ option. Enter your text below and find the options in the toolbar above to change the text’s font, size, and color. You can also put other text blocks like headings, lists, quotes, and so on in order to design a good-looking and practical left border box.

Step 5: Styling the Left Column

Once the content is placed in the left column, the design can be modified as you’d like it. To view the block settings, go to the top of the left column and click the three dots in the block toolbar. In the dropdown menu, click “Block Settings.”

In the block settings, you can change the text’s typeface, size, color, and orientation. Moreover, the padding can be altered to add space between the element’s border or around any content it contains, compared to the margin, which refers to the space between an element and the rest of the page content. Setting up a border for the left column from the Styles/Borders options is also possible.

Step 6: Applying Background Color & Images

If you wish to liven up the left border box’s appearance even more, add a tint or image to the background. To add background color, visit the ‘Background’ tab under the block settings and choose from the available color options, or enter the code in hex format.

But if you wish to select a background image instead, click the “+” sign close to the color selector. Choose “Upload” if you want to upload a particular photo from your computer; choose “Media Library” if you wish to use a picture previously uploaded photo. Once an image has been selected, it can be repositioned, and the repeat style can be changed using the presented settings.

Step 7: Aligning the Left Column

If the left border box has to be aimed at other content, it may be necessary to align the left column. To do this, open the section in the block and click on the “Alignment” option. You can choose from four alignment options: left, right, center, or wide. If Wide is chosen, the left column will expand and occupy as much width as possible, making the border far more apparent.

Step 8: Compiling your left border box

After uploading the content, you will have to format the left column and arrange the elements of that box in a specific manner. This will complete the design of the left border box. It is also important that you go through the places you have written your content and the formatting you did to make sure it appears ideal. There is also the “Preview” button in the upper right corner, which will give you an idea of what your left border box looks like on your live website.

With Gutenberg as the editor, the options for producing fabulous looks are limitless. Try various block types and styling to achieve the characteristic left border box for your business and personal style. Happy designing!