How to add an image to a page

1. Sign into wordpress, if you are unsure how to do this, see the beginning of this tutorial here.

2. Once you are on the page that you wish to edit, click on the page where you would like to add your image

3. Select the responsive image icon from the tool bar. This re-sizes the image when viewed on mobile devises and it’s recommended.

screen-shot-2016-09-30-at-9-31-41-pm

4. This will add in some special short code tags that look like this

screen-shot-2016-10-01-at-9-52-26-am

5. Select the “IMAGE HERE” text in between the tags and delete it. Make sure you don’t delete any of the brackets either side.

Now leave your curser in between the tags, and go to “Add Media” at the top of the toolbar.

screen-shot-2016-10-01-at-9-02-41-am

screen-shot-2016-09-30-at-9-01-14-pm

6. Either choose an image from your existing library, or upload a new file from you computer.

screen-shot-2016-09-30-at-8-43-51-pm

7. Select the image you wish to use.

screen-shot-2016-10-01-at-9-05-45-am

8. On the right hand side you will see some extra options. You can left align, right align, or no align the image. You can also choose it’s size. The page is around 1000px wide, so if you want the image to be around 1/3 of the page size, choose around 3oopx or smaller.

screen-shot-2016-10-01-at-9-06-00-am

9. When you are happy with your options, select “Insert into page”

screen-shot-2016-10-01-at-9-09-44-am

10. Now your image will appear on the page. You can ignore the location of the responsive tab’s, they will sit on their own on the page, it will look like they aren’t encasing the image, but they are behind the scenes.

screen-shot-2016-10-01-at-9-13-19-am

11. If you want to edit the image you just inserted or adjust its size, then click on it, and a tool bar will appear above it. You can change the alignment, and click on the pencil icon to edit it.

screen-shot-2016-10-01-at-9-16-13-am

12. You can either replace it, edit the original, or you can resize it using the drop down menu.

screen-shot-2016-10-01-at-9-18-39-am

13. You can also choose a custom size if you prefer.

screen-shot-2016-10-01-at-9-19-37-am

14. When you are happy with your changes, select the blue “Update”. When you are happy with your page, then press “Update” again.

screen-shot-2016-09-30-at-6-06-15-pm

15. Now head up to the home icon in the top left hand corner to see how the new page looks. You can also go to “View Page” at the top, to go directly to the page you just edited. To go back to the dashboard again, you can click the dashboard icon in the same place, or simple click “Edit Page” at the top.

screen-shot-2016-09-30-at-6-22-21-pm

16. To sign out, select the person icon in the top right hand corner, and press “Log out”

 

Tip:

Sometimes when you insert more than one image, they can stack up next to each other, this is common when you have made the image right or left aligned. You can solve this by adding a “clear” shortcode to the right hand side of the image.

The easiest way to do this is select the image, click the right arrow on your keyboard (this moved the curser to the right of the image). Head up to the tool bar and select the “Clear” icon.

screen-shot-2016-10-01-at-9-35-46-am

screen-shot-2016-10-01-at-9-35-54-am