How to Put Text and Image Side by Side in WordPress

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.

美しいテーブルを作る
ブロックエディター付き

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

をクリックする。 プラス(+)アイコン と入力する。タイプ Media & Text in the search bar. Add the block to the editor.

Add the Media & Text block to WordPress

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.

Add/Upload an Image to the Block

You can see the image is added to the block.

Image is added to the Media & Text 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.

Add Text to the Media & Text Block

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

について Columns is also a default block of the editor. It’s one of the most used to blocks in WordPress content creation.

ステップ01:エディターに列ブロックを追加する

You can display text and image side by side by adding the パラグラフ そして Image blocks separately within column blocks.

So, add the Columns block first to the editor.

Add the Columns block to the editor

Select a two-column layout.

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, 画像ブロックを追加する to the left column.

Add the Image Block to the Columns Block

Here again, add your desired image, whether from the local drive, media library, or through a URL.

Upload an image to the columns block

You can see the image has been added to the block.

Image is added to columns block

Step 03: Add Text to the Cloumns Block

を追加する。 段落ブロック to the right column. This will allow you to add text.

Add the Paragraph block to the Columns block

You can see the text is added to the column.

Text is added to the columns block

Next, you can customize the columns block, including the image and text on it.

Method Three: Using the Tableberg Block

テーブルバーグ 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.

美しいテーブルを作る
ブロックエディター付き

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.

Add the TableBerg block to your Gutenberg editor

Select the number of columns and rows you need for the layout. We’ll select 2*1.

Set the number of rows and columns

You can see the columns and row are ready.

Rows and columns are added to the editor

Step 02: Add an Image to a Cell of the Table

Tableberg lets you add several custom blocks to its cells. By clicking the プラス(+)アイコン, find and 画像ブロックを追加する to one of its cells.

Add an Image block to Tableberg

Upload the image for the local drive or add one from your media library.

Upload or add an image to Tableberg

We have added an image, which you can see below.

An image is added to the table

Step 03: Add Text to the Table

Simply add text to the right column using the paragraph block.

Add text to Tableberg

Step 04: Modify the Tableberg Border

You can make this section more appealing by removing or colonizing the table border. こちらへ その スタイルタブ.

Come to Table Border by scrolling down the tab. You’ll get options to remove or colorize the table border from these options.

Remove borders from the table

Thus, you can create web sections to put text and image side by side in WordPress.

結論

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.



テーブルバーグ・チーム