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.
In this article:
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.
Resizing the 2-Column widget
The 2-Column widget is set to a default width, but you can always change that. Hover over the center of the left or right side of the widget to bring up the blue handles. Then, click on a handle and drag it. You'll be able to choose 3 widths.
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 three guides pop up as you're dragging. These show you where you can place the divider - at 25%, 50% and 75% of the overall width.
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 or alignment 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.
Deleting the 2-column widget
When you delete a widget, all content in it is deleted and can't be recovered. If you need to keep the text, you might want to copy and paste that somewhere else first. (If you've added an image to the widget, it's already stored in your image library.)
To delete the widget, click on its top edge. Then click the Delete icon.
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 the + symbol on any blank line. That lets you insert images into each text column.
Note: Keep in mind that your two 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 two 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. Then you can resize the columns as needed so that the 2 sides match in length.