Replace Images with Visual Composer

Replace Images with Visual Composer

Get a copy of the transcript of this guide (pdf)

replacing-images-with-visual-composer

Edit a page by clicking on the Edit Page menu from the top toolbar

replacing-images-with-visual-composer-1

Changing a picture is a really common thing to do on a website. You might just want to freshen up the look of your website, you might have a new product, or you’ve taken a bit of photo.

So let’s edit a page. To edit a page, click on the Edit menu.

Backend editor of the Visual Composer

replacing-images-with-visual-composer-2

After clicking the Edit menu, this will drop us to the backend editor for the visual composer.

As you can see in the image above, we’ve got three image elements. Hover your mouse over the first one and click on the little pencil on the green bar.

Add an image

replacing-images-with-visual-composer-3

After clicking the pencil on the green bar, a pop-up box will appear wherein you can set the properties of your image.

Now, to add an image, click on the box with green ‘+’ sign. Clicking the plus sign will take us to the media gallery.

Upload an image

replacing-images-with-visual-composer-4

If the image you want to add was already uploaded in the gallery, you can select the image, but if it wasn’t, then you can click the Upload Files tab to add more images.

Upload Files tab

replacing-images-with-visual-composer-5

In the Upload Files tab, you have two ways in uploading your images. You can either drag and drop the files in your computer directly to WordPress or you can click Select Files and file selector will pop-up.

Select Files pop-up

replacing-images-with-visual-composer-6

Select the images that you want to upload. You can select one image or multiple images at the same time. After selecting the images, click Open.

Uploaded images in progress

replacing-images-with-visual-composer-7

After selecting the image that you want to upload, a progress bar will be seen. It means that the image is currently uploading.

Note: Don’t upload images that are really huge files. If you’ve taken a file photo on a phone, it’s probably okay just to upload it as it is. But if you use a high-resolution camera, I recommend to bring the size down to under one megabyte. You can bring down the image up to 1200 or 1600 pixels. It’s perfectly fine and it’s pretty big enough for a website. Uploading a huge file will take a time to upload them depending on your internet connection.

Edit title and set image

replacing-images-with-visual-composer-8

A thumbnail will be seen to your uploaded images. The image size we uploaded was reduced a little bit because we’ve got our Smush setup. For SEO purpose, applying the proper title to your images is a great plus. Select the image that you want to be set in our first image element then click Set Image.

Save changes

replacing-images-with-visual-composer-9

You can see now the thumbnail of your selected image. Click Save Changes.

Update page

replacing-images-with-visual-composer-10

In our first image element, we can see the thumbnail of our selected image. To update the page, click Update. Clicking Update will commit the changes in the database. To see the changes of the page you edited, click on the permalink.

Edit with Visual Composer

replacing-images-with-visual-composer-11

Great! There’s the new image we set.

The other way to edit this is with the front-end editor for Visual Composer. To edit the page using Visual Composer, click on the Edit the Visual Composer menu.

Front-end editor: Visual Composer

replacing-images-with-visual-composer-12

On the little pencil again on the green bar, same from the process before. After clicking the green pencil, click the green ‘+’ inside the box and choose the image that you want to set. If you have already selected the image that you want to set, click Save Changes. Repeat the process until you’ve completed all the three elements.

Update page and close

replacing-images-with-visual-composer-13

Now, we have our three images lined up beautifully. If you’re happy with it, click Update and that commits the changes. Now, to close the Visual Composer, click X.

Page successfully edited

replacing-images-with-visual-composer-14

After clicking X to close the Visual Composer, we will be seeing the normal view of the page. That’s how we edit the page using the Visual Composer.