The flowing of text around an image is a technique that is frequently part of a designer's arsenal. Although the process of wrapping text has changed over the years, this is easily accomplished with Responsive Layout Maker and Responsive Site Designer.

Here we will walk you through how to add images and text to your layout and make them wrap around one another.

Demo 1: Text Wrapping around an image

 

Step 1:

Create a new project in RLM or RSD and delete the second row.

Step 2:

Add an image to the column in the remaining row. Next, double click the image to be taken to the Properties Tab and set the following:

  • float: left
  • margin-right: 1%
  • margin-bottom: 0px
Figure 1: Left Image Settings

Step 3:

Add a paragraph below the image and change the amount of words to your desired length. For this example we have them set to 146.

Step 4:

Add another image just below the paragraph you created in Step 3. Next, double click the image to be taken to the Properties Tab and set the following:

  • float: right
  • margin-left: 1%
  • margin-bottom: 0px
Figure 2: Right Image Settings

Step 5:

Add a paragraph below the second image and change the amount of words to 146.

 

You can also set the Paragraphs to display:inline which would create the look of one large article.

Figure 3: Inline Paragraph Tip Example

If you would like to practice with our project be our guest! You can download it here: Image-Text-Wrap.RLMP