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.

 

Step Four

Next, click on the ‘Single Image’ option.

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.

 

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.

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.

Step Eight

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

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’.

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.

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.

Step Twelve

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