While covering product reviews, comparison tables, tutorials, travel stories, infographics, educational content, etc., you may have to put texts and images side by side. There are numerous ways to do this in WordPress.
In this article, we’ll show you several effective ways of how to put text and image side by side in WordPress. So, be with us till the end. You’ll really learn something exciting.
Create Beautiful Tables
With Block Editor
Get the plugin by clicking the buttons attached to the above banner.
Method One: Using the Media & Text Block
Media & Text is a default block of the Gutenberg block editor. With this block, you can put text and images side by side without depending on any third-party tool.
Step 01: Add the Media & Text to the Editor
Click the plus (+) icon on the editor. Type Media & Text in the search bar. Add the block to the editor.
Step 02: Add/Upload an Image to the Block
You can add an image whether by uploading from the local drive, media library, or from the featured one. Choose the option you like.
You can see the image is added to the block.
Step 03: Add Text to the Media & Text Block
Write your desired text on the right column of the block. You may customize the text color, alignment, and more if you want.
Step 04: Alternate the Text and Media File Position
The block allows you to alternate the position of the text and media files by clicking the respective options on the toolbar.
Method Two: Using the Columns Block
The Columns is also a default block of the editor. It’s one of the most used to blocks in WordPress content creation.
Step 01: Add the Columns Block to the Editor
You can display text and image side by side by adding the Paragraph and Image blocks separately within column blocks.
So, add the Columns block first to the editor.
Select a two-column layout.
Step 02: Add the Image Block to the Columns Block
It’s better to display the on the left. So, add the Image block to the left column.
Here again, add your desired image, whether from the local drive, media library, or through a URL.
You can see the image has been added to the block.
Step 03: Add Text to the Cloumns Block
Add the Paragraph block to the right column. This will allow you to add text.
You can see the text is added to the column.
Next, you can customize the columns block, including the image and text on it.
Method Three: Using the Tableberg Block
Tableberg is a wonderful table builder plugin that allows you to design numerous parts for your website. This plugin also allows you to put text and images side by side. Download the plugin by clicking the buttons attached to the banner below.
Create Beautiful Tables
With Block Editor
Start following the tutorial now.
Step 01: Add the Tableberg Block to the Editor
This plugin adds a block named Tableberg to the Gutenberg block library. Add the Tableberg block to the editor.
Select the number of columns and rows you need for the layout. We’ll select 2*1.
You can see the columns and row are ready.
Step 02: Add an Image to a Cell of the Table
Tableberg lets you add several custom blocks to its cells. By clicking the plus (+) icon, find and add the Image block to one of its cells.
Upload the image for the local drive or add one from your media library.
We have added an image, which you can see below.
Step 03: Add Text to the Table
Simply add text to the right column using the paragraph block.
Step 04: Modify the Tableberg Border
You can make this section more appealing by removing or colonizing the table border. Go to the Styles tab.
Come to Table Border by scrolling down the tab. You’ll get options to remove or colorize the table border from these options.
Thus, you can create web sections to put text and image side by side in WordPress.
Conclusion
Indeed, you can leverage the default Gutenberg blocks to create and design your web posts and pages. But as they lack many advanced features, you often need additional block plugins that come with many exciting features.
Tableberg is an exciting plugin you can use in this case. Ultimate Blocks is another great block plugin you should consider. Explore the free versions of both these two plugins by clicking the buttons attached below.
