Buttons (Adv)

The Buttons (Adv) block is different from the Buttons, and Button List block. Before we talk about how to use this block, let's talk about why you might use this one over the other two.

Buttons (Adv) allow you to link a button to an external website, an internal page in your site, or to a file; as do the other button blocks. However, Button (Adv) is the only which allows you to utilize icons within the button.

The tutorial below refers specifically to Button (Adv). 

Add A Button

1. Insert a new block
2. Click on the white plus sign (upper left of the page)
3. Search for buttons
4. Click on the buttons (adv) icon

Putting Content In The Button

There are two parts to the button content, the label (what people see) and where it goes.

To update the label just click into the button and type. Being succinct but instructional is recommended. Avoid non descriptive items which may not be ADA compliant such as, "click here", or "learn more".

To set what the button links to, click the link icon while the button is selected and either paste your link.

Adding More Buttons

Select the parent container (left most icon) for buttons and you will see a plus sign in the bottom right corner of the block. Click that to add a button. There is also a plus sign in the toolbar of the parent container that you can use.

Please note that if you are going to add more than two or three buttons, then the button list is likely a better block for you.

Deleting A Button

You can delete a specific button, or all the buttons at once. To delete a specific button, select it, hit the three dots on the right of the toolbar and select "delete". To delete all the buttons at once, select the parent container, and then hit the three dot and select delete. You can do this in the edit screen or in the list view of blocks on the left.

Reordering Buttons

To reorder buttons, click on the one that you want to move, and then move it left or right with the arrow buttons.

Buttons Properties

There are properties that you can set in the right side property panel for buttons as a whole (with the parent container selected) or individually (with a specific button selected).

Parent properties: justification, orientation and wrapping onto multiple lines

Individual button properties; width. Options are auto (content width), fixed (specific width by pixel or percent of content area), full (whatever space is left in the row). In the example below you'll see the third item is set to full, so when we adjust the widths of the other two it changes to compensate.

Icons

You can put an icon in your button, which can be a nice way to design contact buttons amongst other things. Select the button you are adding an icon to. In the block properties panel on the right, click the "style tab" and scroll down to the "icon settings" accordion and open it. There you can select in icon, position it with text and size it. We recommend keeping your button label text and consistently positioning it throughout the site (so if you opt for left of text, do that everywhere you use a button icon). We also recommend that you are consistent with your sizing.
A note about selecting an icon. Things sometimes take a few tries to find. For example, if you type "email" nothing comes up, but if you type "envelope" you get a lot of choices. It's a big database, so try a few synonyms before giving up.