Using the post or events editor, you have the ability to wrap your text around images. Steps to follow:
-
Enter your text copy
-
Insert an inline image beside the text you wish to wrap and resize accordingly (Max 800px width)
-
Select the image and justify it left or right
-
Add additional margin to your image
Now we need to add margin to the image to create some distance between the image and the text. In order to do this, we'll need to edit the source code.
- Click Tools > Source code.
- Here you'll see the html for your post content. Look for the image tag which generally looks something like this:
<img style="float: left;" src="https://sparrowprdstorage.blob.core.windows.net/ospreyimageuploads/a2451fba-a237-42aa-ac62-e785793608b7/9e295dac-5f0c-4095-b738-1f0f31807158?sv=2016-05-31&sr=b&sig=kIVzf1jX%2BlTz7quPc%2FO6ZUmNLUQxfoi4UnNbu9cAOtY%3D&st=2023-04-10T21%3A48%3A33Z&se=2023-04-10T22%3A53%3A33Z&sp=r" width="338" height="190" data-id="9e295dac-5f0c-4095-b738-1f0f31807158"> - You'll now want to add your margin style attribute within the style property that will add padding around the image. Each value sets margin on a side of the image (margin: top right bottom left)
- For images that are floating left add margin:0 15px 15px 0;
- For images that are floating right add margin:0 0 15px 15px;
When you're done, your image tag will now look something like this:
<img style="margin:0 15px 15px 0; float: left;" src="https://sparrowprdstorage.blob.core.windows.net/ospreyimageuploads/a2451fba-a237-42aa-ac62-e785793608b7/9e295dac-5f0c-4095-b738-1f0f31807158?sv=2016-05-31&sr=b&sig=kIVzf1jX%2BlTz7quPc%2FO6ZUmNLUQxfoi4UnNbu9cAOtY%3D&st=2023-04-10T21%3A48%3A33Z&se=2023-04-10T22%3A53%3A33Z&sp=r" width="338" height="190" data-id="9e295dac-5f0c-4095-b738-1f0f31807158">
- Click Save. This will be your result:
- Click Tools > Source code.