How to Add Two Buttons in One Column or Slide

How To  Tutorials  Last Updated: Time to Read: 1 minute

Difficulty: Easy

This tutorial explains how you can use basic Layers Framework HTML snippets or CSS classes to style any element in your widget content areas for doing things like adding two buttons in a single column or slide.

  1. Edit your page layout and expand the Body panel
  2. Expand the widget to edit or +Add New Widget
  3. In the Slide or Column, remove your existing Button Text and Button Link
  4. Click into the Excerpt or Content area and type the text you want to link as a button. For two buttons side by side, type each text one after another and use the spacebar to add some extra space.
    • Example:   Link 1         Link 2
  5. Highlight each link and click the link button on the editor toolbar to add your link and select whether to open in a new tab
  6. Click the Code button <> on the text editor toolbar.
  7. You should see the HTML for your two links, which looks something like this:
    • <a href="http://www.mysite.com" />Link 1</a>&nbsp;&nbsp;&nbsp;<a href="http://www.mysite.com" />Link 2</a>
  8. Click to place your cursor just after the <a  of the first link wrapper, and hit the spacebar once to create a space.
  9. Add class="button btn-large"
  10. Double check to make sure there is a space between the endquote and href
  11. Repeat for the second link
  12. Click the Code <> button again to turn it off. You should now see two buttons in the content area.

For more tips on widget customization, including how to add custom classes to change button colors, see How to Use the Advanced Design Bar Option for Custom Classes, Margins and Padding