How to Add an Image

Step One

To start adding text, navigate to the page you want to edit in the admin area. Then click the blue ‘Frontend Editor’ button. This will bring you up to the Frontend Editor page, where you can see a live update of website changes that you make on the page.

Step Two

HINT: Normally when adding an image, it’s best to use a 3/4 + 1/4 column layout, like the example below. That way there is still enough room for your text, but also for your image.

Hover over the ‘+’ box where you want to add the image.

Screenshot 2015-10-20 00.42.22 copy


Step Four

Next, click on the ‘Single Image’ option.

Screenshot 2015-10-20 00.42.33

Step Five

A Single Image Setting box will now appear. At the moment it is currently block where you would see the image in live view. Click on the blue bar of the Single Image Settings, hold and move the box to the left.

Screenshot 2015-10-20 00.42.47


Step Six

You should now be able to see the image placeholder for where your image is going to go. Now click on the Image ‘+’ box, like shown below.

Screenshot 2015-10-20 00.44.54

Step Seven

This will bring up your Media Library from which you can upload a image from your computer, or choose one that has already been uploaded to your Media Library. Once you are happy with your select, click the blue ‘Set Image’ button in the bottom right of the page.

Screenshot 2015-10-20 00.45.16

Step Eight

You should now see the image in the box. To change the image you can click on the ‘+’ again.

Screenshot 2015-10-20 00.45.27

Step Nine

When you are happy with your image selection, scroll down the ‘Single Image Settings’ until you get to the Image Size section. From here you will need to input the word ‘medium’.

Screenshot 2015-10-20 00.45.41

Step Ten

You can also add animations to your image. Scroll down further until you get to the section ‘CSS Animation’. You can text select an option from the dropdown list.

Screenshot 2015-10-20 00.46.14

Step Eleven

Once you are happy with your image options, you can click the blue ‘Save Changes’ button, this will update the image on the live view. Then click the exit ‘x’ button on the ‘Single Image Settings’ window. You will then be able to see your webpage.

Screenshot 2015-10-20 00.46.37

Step Twelve

Remember to press the light blue ‘Update’ button in the top right hand corner of the Frontend Editor.

Partner with the team that will never let you down

Get access to all our features and one-on-one support