Placing text and images in 2 columns

Sometimes you want to place an image next to some text, or have 2 columns of text, or even 2 images side by side. Qwilr's 2-Column widget can do all these things.

Adding the 2-Column widget

You can place the 2-Column widget in any type of block except the Embed Block. You can also use as many widgets in a block as you like.

To insert a 2-Column widget, click on the  + symbol. (If you don't see that symbol, try hitting the Return key to add a new line.) From there, choose 2 Columns from the menu.

To add an image to your new widget, click on the image side to browse our image library or upload your own. To add text to the text side, either click on it and start typing, or click and then paste in your text.

Note: The default widget places text on the left and an image on the right. See the Swapping the columns and Tips sections below to learn how to change that.

Swapping the columns

If you'd rather have your image on the left and text on the right, no problem - you can swap the columns any time.

Hover over the center of the widget to bring up the Swap Columns icon. Click on it to swap, and click it again to swap them back.

Resizing the columns and image

Once you've placed your text and image, you'll be able to adjust the widths of the 2 columns. The widget will stay the same overall width, but as you adjust the column widths, the text and images will resize accordingly.

To resize columns, click on the border between columns and drag it from side to side. You'll see 3 column guides pop up as you're dragging. These will help you place the columns at 25%, 50% and 75% of the overall width. But you don't have to use these guides - you can place your column divider anywhere in the widget.

You can also use the Block Styles tool to adjust the overall width of the widget.

Note: No matter what width you select, the 2-column sections of your page will be wider than the main column.

As an alternative, you can click on the image to bring up handles at its corners. Then you can click and drag these to change the image size without changing the column width.

Adding styling to the widget

You can use the text formatting toolbar in the 2-Column widget. Highlight any text you want to format and choose your option from the toolbar.

You can also use the image frame tool to make any image a circle.

Tips for using the 2-Column widget

Qwilr Pages are built for the web, so they work a bit differently than your print-page editor might. These tips will help you use the 2-Column widget.

Changing the content of the columns

Need 2 columns of text side by side? No problem! You can delete the image side, then add text to both columns. And once you have text in both columns, you can click any + symbol to insert images into each text column. 

Note: Keep in mind that your 2 columns of text will operate separately. In other words, text can't wrap from one column to the next.

You can also use the widget to place 2 images side by side without any text. Click the Image side to add an image, and then click the + icon on the other side to add another image. Then you can click and drag the column border to resize both images, or click on either image to resize it individually.

Managing text wrapping

In the widget, text doesn't wrap around images or column breaks - it will stay in its own column. But there are ways you can create the look of a text wrap.

Method 1: First, add a 2-Column widget, and add your image and text. Adjust the size of the columns as needed so that the image is the same height as the block of text. Then add the remainder of the text to your page below the widget.

Method 2: Add a 2-column widget, but delete the image side. Then type or paste text into both sides, so you have 2 text columns. From there, you can click the + symbol on any blank line in the text, and insert an image there. From there, you can resize the columns as needed so that the 2 sides match in length.

Still need help? Contact Us Contact Us