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.