Add a Button to a Page with Visual Composer

Add a Button to a Page with Visual Composer

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

add-a-button-to-the-page-with-visual-composer

Use back-end editor of the Visual Composer

Adding a button with Visual Composer is a really cool way of linking between pages and drawing attention to the actions available on that page. So, let’s start creating a button. First of all, we need to add the button element. To do that, click on the + icon inside the box.

Select the button element

After clicking the + icon, an Add Element box will pop-up. Select the button element. If you’re having a hard time looking for the button element inside the All tab, you can filter them out when you go to the Content tab.

Button Settings will pop-up

Inside the Button Settings, a number of properties will be seen. These properties are:

  • Text – Sets the text of the button.
  • URL (Link) – URL of the page that you want to link
  • Style
    • Modern
    • Classic
    • Flat
    • 3D
    • Custom
    • Outline custom
    • Gradient
    • Gradient custom
  • Shape
    • Rounded
    • Square
    • Round
  • Color
    • Classic Grey
    • Classic Blue
    • Classic Turquoise
    • Classic Green
    • Classic Orange
    • Classic Red
    • Classic Black
    • Blue
    • Turquoise
    • Pink
    • Violet
    • Peacock
    • Chino
    • Mulled Wine
    • Vista Blue
    • Black
    • Grey
    • Orange
    • Sky
    • Green
    • Juicy Pink
    • Sandy Brown
    • Purple
    • White
  • Size
    • Mini
    • Small
    • Normal
    • Large
  • Alignment
    • Inline
    • Left
    • Right
    • Center
  • Set full-width button – Sets the size of the button to full. If the button is placed inside a column, the full width of the button is the full width of the column.
  • Add Icon – Sets an icon to the button. You can have the icon either before the text or after the text.

Set the URL Link

If you already have the link and it’s ready to be pasted, just paste the link inside the URL box. However, if you don’t have the link, you can either search the name of the page on the Search textbox or you can scroll down the list of pages under the Search textbox. Once done, click on Set Link.

Set the other button properties

For styles, let’s have it in flat because it’s a nice simple flat shape. For shapes, let’s have it in rounded. For color, let’s have it in classic black. For size, let’s have it large. For alignment, let’s have it in the center. Let’s also set the button to full width. After everything, let’s save our changes by clicking the Save Changes button. After closing the Button Settings box, let’s preview our changes by clicking on Preview Changes.

How our button will look like after some changes

This is how our button will look like after the changes we’ve made. Clicking the button will take us to the page that we have set in the URL (Link) property.

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.