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.

Cree bonitas mesas
Con el editor de bloques

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

Haga clic en el botón icono más (+) en el editor. Escriba a 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.

Segundo método: utilizar el bloque de columnas

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

Paso 01: Añadir el Bloque de Columnas al Editor

You can display text and image side by side by adding the Párrafo y 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, añadir el bloque Imagen 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

Añada el Bloque de párrafos 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

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.

Cree bonitas mesas
Con el editor de bloques

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 al 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 icono más (+), find and añadir el bloque Imagen 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. Ir a el Ficha Estilos.

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.

Conclusión

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.



El equipo de Tableberg