Wrap text around an image

Select Tools -> CSS Style Editor from the main menu press this button on the toolbar.



 

Press the "Add" button to create a new style. Press the "Rename" button or "F2" key when the newly created style is still selected. Change the name of the style from "style1" to "left-align-image".

   

 

Select the "Box tab" on the left. Select the option "Float" and select "left" from the drop down menu. As we will align the image to the left of the text, we will add a margin of 5px on the right and also bottom. Deselect the option "Same for all" in the "Margin" section. Select the "Top" and "Right margins and set the values to 5px and 10px respectively. Depending on the size of your image, you may like to change the margins to your like instead of using our values. You may also set values to the other two margins.


 

Click on the "Elements" tab. Select the option "Image (img)" in the "Miscellaneous" section as shown below:


 

Press the "OK" button to save the style.

Insert a text element to a page by selecting Insert -> Text from the main menu or pressing the corresponding button on the toolbar.

Double-click on the text element or right-click on it and select "Edit Element" from the context menu.


 

Insert some text. We use the following piece of text as example:

Pellentesque luctus imperdiet urna feugiat sollicitudin! Quisque venenatis, justo sed pretium volutpat; nisl purus hendrerit odio, vitae luctus ipsum purus non massa. Vestibulum imperdiet, sem in bibendum hendrerit, est nibh pellentesque quam, et placerat diam lectus ut neque. Donec nibh leo, lobortis id hendrerit in, sollicitudin vel nunc. Sed at lectus leo. Ut mattis dolor quis nisl viverra venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam nec augue sem. Quisque orci est, rutrum nec malesuada non, iaculis nec ipsum. Fusce sagittis, velit non sagittis tristique, est est egestas magna, vitae gravida justo felis quis libero. Proin eu mollis metus! Aenean et massa sit amet lorem commodo venenatis sit amet a urna! Morbi auctor turpis eget nibh accumsan non congue libero condimentum. Aenean vitae euismod tortor? Suspendisse non dolor nisi, eu accumsan nibh.


 

Move the cursor to the beginning of the text and press this button on the toolbar.
 

Select the image that you want to insert from the drop down menu. Here we select "sample.png" as example.


 

Press the "OK" button to insert the image. You may need to resize the editor to see all the text after the image is inserted.


 

Press the "Save and Close" button to save the text element. We then resize the element to 600 x 400.

Right-click on the text element and select "Styles" from the context menu.


 

Press the "Add" button on the Styles Dialog. Select the style "left-align-image" from the Select Styles Dialog. Press the "OK" button to add the style. Then press the "OK" button to apply the style to the text element.

   
 

The results will look like below:

To align the image to the right. Create a new style as above. For example, create a new style with name "right-align-image". Use the following values for the "Box" tab to replace step 3 above. Change "Float" to "right". Deselect the option "Right" margin. Select the option "Left" margin and set the value to 10px.


 

Remove the style "left-align-image" from the text element and apply this new style, say "right-align-image", to it. It will look like below after applying the style:

In case you have two paragraphs which look like below and want one of the images to align to the left and another to the right. The above approach will not work as the style affects all the images within the text element. You can separate them into two text elements or follow the steps below to change the styles created above so that they can be used together within the same text element.

Select the "Element" tab of the style "left-align-image" and deselect the option "Image (img)" in the "Miscellaneous" section. Do the same to the style "right-align-image".
 

Open the text element in the Text Element Editor. Select the first image.
 

Select the style "left-align-image" from the drop down menu on the toolbar.



 

Select the second image and then select the style "right-align-image" from the drop down menu.



 

You will find no changes to the layout of the images as the results can only be previewed in the internal or external browsers but not in the Page Designer or the Text Element Editor. So, press the "Save and Close" button to save the text element and previewed the results in the internal or external browsers. It will look like below: