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.

Create a Text Link within a Text Block with Visual Composer

Create a text link within a text block with Visual Composer

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

create-a-text-link-in-a-text-block-with-visual-composer

Edit a page using Visual Composer

create-a-text-link-in-a-text-block-with-visual-composer-1

Let’s make a text link to another page. To do that, first, we need to edit the page where that text is located. To edit the page, click Edit with Visual Composer.

Edit a Text Block

To edit a text block, hover your mouse to a text block and click on the pencil icon in the green bar.

Text Block Settings will pop-up

create-a-text-link-in-a-text-block-with-visual-composer-3

In the red arrow indicated in the image above, you can see the Insert/Edit Link icon. It looks like a little chain link.

To hyperlink a text, first, you need to highlight the text that you want to link. After highlighting the text that you want to link, click on the Insert/Edit Link icon.

Hyperlink a text

create-a-text-link-in-a-text-block-with-visual-composer-4

After you click the Insert/Edit Link icon, a textbox will appear. This is the textbox wherein you place the link of the page to hyperlink a text. However, if you don’t have the link of the page, you can click on the cog icon at the rightmost side of the textbox.

Search for the page that you want to be linked

create-a-text-link-in-a-text-block-with-visual-composer-5

If you manage multiple pages, you can directly search the page that you want. Type the name of the page in the Search textbox. If you already found the page, click on it and the URL textbox will be automatically filled with the page’s link. Once done, click on the Add Link button.

Text already linked

create-a-text-link-in-a-text-block-with-visual-composer-6

As you can see, the text that we highlighted is already linked to our desired page destination. If you have no more changes, click Save Changes. Afterward, click Close to close Text Block Settings.

Update page

create-a-text-link-in-a-text-block-with-visual-composer-7

After closing the Text Block Settings, click on the Update button. This will commit the changes to the database. Afterward, click X to exit the Visual Composer.

Link ready

create-a-text-link-in-a-text-block-with-visual-composer-8

As you can see, the text is already linked and is now ready to be clicked by everyone.