Placing text and images in 2 columns

Introducing the 2-Column Widget

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 get it done.

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'd like!

To add 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.

Note: If you're adding multiple 2-column Widgets to your page, we recommend you hit Return a couple of times between them, to leave blank lines. That way, if you decide to place a widget in a different spot, you can insert it in any of these blank spots. You can remove these when you have your layout finalized.

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.

Resizing the 2-Column Widget

The 2-Column Widget is set to a default width, but you can always change that. Hover over the left or right edges of the Widget to bring up the blue handles. Then, click on a handle and drag it. You'll be able to choose between three 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 the placement of your content.

Resizing the columns and image

Once you've placed your content into each column, you'll be able to adjust the widths of the two columns.

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. The widget will stay the same overall width, but as you adjust the column widths, the text and images will resize accordingly.

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 Cidget, 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 by clicking the trash can within the widget, and 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.

Copying a 2-column Widget

To copy a 2-column widget, you can use your browser's copy-and-paste commands. To copy, use command + C on a Mac or Ctrl + C on a PC. To paste, use command + V or Ctrl + V. Make sure you have the entire border of the 2-column widget selected to properly copy the content as shown below.

Stuck? Reach out to the Support Team at help@qwilr.com!