How to add images to your web pages and image gallery

Please read and follow instructions to prepare your photos before adding them to your web pages. You can view a larger version of the images on this page by clicking on them.

To add images on a post

Unless you are advised otherwise, you should be using the default post editor without any page or post builder, when writing a blog post. It looks similar to this:
Post page editor

When you are ready to insert the image that you had prepared (cropped, sized to requirement, named appropriately, compressed), click on the ‘Add Media’ button.
add media button on a post page

This will open to show all the media in the media library that have already been uploaded. Media could consist of images (.jpg, .png, .gif, .svg), PDFs of documents, audio or video files. If the image you want to add to the post is already in the library, click on the image.

Take note of the ATTACHMENT DETAILS on the right hand side:
attachement details
Fill in the appropriate title, caption (this will show up under the image on the post/page), alt text (this tells search engines and those with visual impairment what the image is about) and description. Check that the ATTACHMENT DISPLAY SETTING is how you want it to be, with regards to its alignment (left, center, right, none), if it’s linked to its original image, an attachment page or a link to another website.

Click ‘insert into post’ and your image will appear on the post/page.

If the image you want to insert to the post/page is new and is not in the library, click the UPLOAD FILES tab. You will get this:
upload files tab to insert images
Click SELECT FILES. Then find the image/file on your computer that you want to upload.

Check and fill in the information for the ‘attachment display setting’ as above. Then click INSERT INTO POST.

Your post may look similar to this with the text content you have added and also the images. This is on ‘visual’ view. If you’re on ‘text’ view, then you will see the html tags. Note that on ‘visual’ view, you can click on the image and edit it from there, if you wish.


To add images to a gallery on a DIVI website

This applies to websites using the Divi theme or Divi page builder only.

After logging in, navigate to the page with the Gallery that you want to add images to. Once there, click on ENABLE VISUAL BUILDER on the very top black bar. The page, with visual builder enabled, will load. Scroll down to your image gallery.

Hover your mouse anywhere in the area of your gallery. You will get the various functions you can use. Click on the MODULE SETTING icon:
DIVI image gallery module setting
This opens up the GALLERY SETTINGS. It shows the images you already have and empty boxes with plus signs for you to add new images.

Click on the plus (+) sign and you will get the ‘upload files’ box:
upload files tab to insert images
Again, make sure you fill in the attachment details, then click SELECT. Your new image will be added to the gallery. Don’t forget to click the green tick to save the addition of your new image.
save image to gallery

Then click on the purple circle with 3 dots on the bottom of the page and you will get the function to SAVE your work so the new image/s can be viewed by your visitors.
save new image on gallery

I hope you find this post helpful for you to manage and to add content to your website yourself. It gets easier the more you work on your website.

If you prefer not to work on it yourself and to concentrate on your core business instead, contact me to get the job done for you. Hourly rate applies.