Single Image Sizing with Visual Composer

Single Image Sizing with Visual Composer

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

Edit a page using the back-end editor of the Visual Composer

single-image-sizes-in-visual-composer-1

On our sample page, we’ve got two different sized images. We’ve got the large one on the right and a thumbnail on the left. Let’s try to change the size of the image on the right side in a way that it would fill the whole width of the column. Let’s go to our back-end editor. To do that, click on Edit on the top menu bar of your WordPress.

Hover your mouse over the right image and click the pencil icon

single-image-sizes-in-visual-composer-2

To edit the image, hover your mouse over the image that we want to edit and a green bar will appear. Click on the pencil icon.

Single Image Settings will pop-up – change image size from thumbnail to large

single-image-sizes-in-visual-composer-3

As you can see, the size of the image on the right image is ‘thumbnail’. So what we’re going to do is to change the image size from thumbnail to large. Make it all in lowercase then press Save Changes. So let’s preview our changes by pressing Preview Changes.

Image now set to large

single-image-sizes-in-visual-composer-4

Now, you’ll see that the image on the right got bigger.

Change row layout from three columns to two

single-image-sizes-in-visual-composer-5

Let’s have the layout of our row into two columns. To do that, click the option ½ + ½. So now we’ve got two column pictures. Let’s preview our changes again.

Row layout now changed from 3 columns to 2

single-image-sizes-in-visual-composer-6

As you can see, the pictures are still filling the entire column width. The trick with this is that the large image size is approximately 1024 pixels wide while the columns’ width is 585 pixels only. Now that the picture’s width is greater than the column’s width, it will automatically shrink to exactly fit into the columns entire width.

If we were going to change that picture’s size to medium, which is 300 pixels wide in default WordPress settings, will definitely leave empty spaces inside the column.

Change image size from large to medium

single-image-sizes-in-visual-composer-7

Let’s try to change the image size from large to medium. The same process as before. Hover your mouse over the image that you want to edit. Click on the pencil icon inside the green bar. Then, change the image size from large to medium. Afterward, click Save Changes and close the Single Image Settings. To preview our changes, click on Preview Changes.

Image changed from large to medium

single-image-sizes-in-visual-composer-8

As you can see, the image is leaving big space in between. Setting the image to medium will usually work to columns set to 1/3 or ¼.

Setting the image size approximately

single-image-sizes-in-visual-composer-9

If you’re going to set the size of the image, then you need to know the exact dimension that you want to set. For example, let’s set the size to 500×200 pixels. 500 is the width of the image and 200 is the height. So, this will give me a 500×200 pixels image.

Image now changed from large to 500×200 pixels

single-image-sizes-in-visual-composer-10

Now, as you can see, the image is now set to 500×200 pixels. We’ve also got a bit more room on the sides because the column’s width is wide than the image’s size.

These are the dimensions of WordPress’s default image sizes:

  • thumbnail – 150 x 150 pixels
  • medium – 300 x 300 pixels
  • large – 1024 x 1024 pixels
  • full size – image’s full size

Make an Image Link to Another Page with Visual Composer

Make an Image Link to Another Page with Visual Composer

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

make-an-image-link-to-another-page-with-visual-composer

Get the link of the page

make-an-image-link-to-another-page-with-visual-composer-1

What we’re going to do is that we need to make this picture, highlighted in the red box, a link to another page. First, we need to work out on which page we’re going to link to. I’ve decided to have the Service 1 page as the link to my image.

The first thing that we need to do is to get the URL  of the Service 1 page. To do that, we need to go to the page.

Get the link of Service 1 page

make-an-image-link-to-another-page-with-visual-composer-2

The link of the page is located in the address bar at the top of the page. Highlight or select all the link and copy.

The other way of getting Service 1’s link

make-an-image-link-to-another-page-with-visual-composer-3

The other way of getting Service 1’s link is to instantly right-click on the link and select Copy Link Address.

Edit the page using Visual Composer

make-an-image-link-to-another-page-with-visual-composer-4

Now that we have the link, let’s start editing the page. To edit the page, click on Edit with Visual Composer if you want to edit using a front-end editor or you can just use the back-end editor to do so. If you want to edit using the back-end editor, click on Edit.

Edit the image’s properties

make-an-image-link-to-another-page-with-visual-composer-5

We’re now on the front-end editor using the Visual Composer. To start, hover your mouse over the image and a green bar will appear. Click on the pencil icon inside the green bar.

Single Image Settings will pop-up – modify On Click Action

make-an-image-link-to-another-page-with-visual-composer-6

If you scroll down a bit further, you will see the On Click Action property. By default, it is set to None. It means that nothing will happen when you click the image. What we’re going to do is to change it to Open Custom Link. After selecting Open Custom Link, an extra property will appear wherein you need to supply the link for the image link.

Supply Image link

make-an-image-link-to-another-page-with-visual-composer-7

After supplying the link for the Image link, click on Save Changes. Afterward, click on Close. Now, hover your mouse over the image, it changes the cursor of the mouse. Clicking on the image now will link us to the Services 1 page.

To commit the changes to the database, click on Update. Afterward, click on X to exit the front-end editor if you’re using Visual Composer.

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.