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:

Add a Container element to the canvas.

Step 2:

Add an Image element to the Container element. Next, double click the image to be taken to the Styles pane and set the following within the Layout > Dimensions section:

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

Step 3:

Add a Paragraph element 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 element just below the paragraph you created in Step 3. Next, double click the image to be taken to the Styles pane and set the following within the Layout > Dimensions section::

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

Step 5:

Add a Paragraph element below the second image and adjust how many words you want.

 

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 the Site Designer project file here: Image Text Wrap Example