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.
Adding an image to the widget
There are two ways to add an image to the widget, and you can use them interchangeably.
From the library sidebar
At the top left corner of your page, click on the Show Library icon. That will open your image library in a sidebar. Your saved blocks are here as well, so make sure to click on the Images tab.
Click on Uploads to locate the image folder you need, and then drag the image over the image placeholder and drop it.
Note: You can also drop the image on the text side of the widget if you prefer. You can also drag and drop it to another location.
If you need to upload an image instead, click on the Upload icon at the top of the library.
Once it's uploaded, you can then drag and drop the image into your widget.
Alternatively, you can click on the image placeholder to open your image library.
From there, select an image and it will load into the widget. You can also upload an image in this step.
To add text to the text side of the widget, 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, you'll just want to 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 3 column guides pop up as you're dragging. You'll have 3 choices of where to 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 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 elsewhere in your page. (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 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. Then you can resize the columns as needed so that the 2 sides match in length.