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 change images on a PAGE

This applies to websites using the Divi theme.
After you have logged in, go to the page you want to edit or add images to.
On the top of the page, click ENABLE VISUAL BUILDER. The page will load with editing functions enabled so that when you hover on the various parts of the page, boxes and icons will appear:
visual builder on Divi page

If you wish to change an existing image, hover on the image and click on MODULE SETTING icon (cogwheel).
module setting

You will get the image setting box.
image setting

Click on the image in the box and you will be able to select another image already uploaded in your media library or upload a new image from your computer.
When the new image is inserted, remember to click the ‘SAVE CHANGES’ button.
Then, click on the round, purple button in the middle of your screen and click the green SAVE button. Your new image will now show on the page on the frontend.

Save button on divi visual builder

To add a NEW images to a PAGE

After you have logged in, go to the page you want to ADD the new image.
On the top of the page, click ENABLE VISUAL BUILDER.
Scroll down to the location where you want to add the image. As an example, I want to add an image under this block of text.
Add module

Click on the ‘+’ button and you have the option to add MODULES and then INSERT MODULE.
Select the IMAGE module:
insert image module

You will get the IMAGE SETTING BOX.
Image setting

Click on the dummy image and you will be able to select an image already uploaded in your library or upload a new one from your computer.
Click SAVE CHANGES button and then the SAVE button.

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.