In this article, we explain how to place the banner image below the body text of your invitation. This is a two-step process that will require you to, first, generate a URL for your image and then paste the image URL into the source code of your body text as a second step.
Step 1: Generate Image URL
In order to generate the image URL, you need to host your image online. You can do this either by using a free image hosting service, or simply by working with the 'Banner' section inside the zkipster Email Builder as a host:
Using a Free Image Hosting Service
It is easy to find free image hosting services on the web which are simple to work with. For instance, you could use imgbb or a similar service.
Using the Banner Section inside the Email Builder
1. Upload your image file to the 'Banner' section of your invitation
2. Once the file is uploaded, right click the image to "Open Image in New Tab"
3. The image URL you need for Step 2 can be copied from this new browser tab
4. Turn the 'Banner' section from 'On' to 'Off' in order to hide the image here, as you will continue to work in the 'Body Text' section from this point onwards
Step 2: Paste Image URL into Source Code of Body Text
To place the image in the body text part of your invitation, you will need to manipulate the source code of this section:
- Click on the 'Body Text' tab of the Email Builder
- Inside the text formatting menu menu, click on the source code icon (it is the icon with the two opposite arrows: <>) which will open the source code window
- Copy the provided source code from the gray box below and paste it into the source code window of the Email Builder
- Copy the image URL you generated and paste it over the example URL (Please make sure to place the URL inside the quotation marks, after src= )
<p><img style="width: 450px; height: 610px; align="center"" src="https://zkipsterproduction.blob.core.windows.net/event-images/77e1b7e7-b52d-4c28-99bf-6154e7cd5cda.png" /></p>
You can see the all of the above-mentioned steps demonstrated here in this GIF below:
To center align the image, please use the following source code instead:
<p align="center"><img style="width: 450px; height: 610px; align="center"" src="https://zkipsterproduction.blob.core.windows.net/event-images/77e1b7e7-b52d-4c28-99bf-6154e7cd5cda.png" /></p>
Keep in mind that you may still want to manipulate the width and height of the image to properly align it inside the body text.
- To view the height and width dimensions, right click on the image and
choose "Inspect" from the menu
- To align the image, open the source code where the image code
is located to adjust the measurements as desired
We additionally recommend sending a test email to ensure your banner image appears how you intended inside your invitation. Please also note that by choosing this method the banner image will no longer be linkable to a private response form like it is possible in the dedicated 'Banner' section.