Please Note: This is an advanced feature. Using button groups will require some technical skill on your part or time with a paid consultant. Additional details below.

When we say advanced, we're referring to the fact that users will need some basic HTML knowledge. If you're not afraid to dive into the page's source code or add a line or two of CSS, you should be fine. Just take your time working through this documentation.

Button groups act as a pseudo-navigation for your site visitors. Instead of putting several pages related to your annual event in the main site's navigation, you can keep all information related to that event within one clickable space.

A button group is a collection of links to other pages / sections of a page. While you could put in placeholders for pages you haven't created yet, it's much easier to create the button group once and copy it, rather than have to update the links later in multiple places.

Tip: It will be easier to fill out all the links in the source code if you have a naming convention for all your pages in the Friendly File Name.

Example: annual-speakers and annual-travel

>> Learn more about adding a page to your website

Go to Tools > Source Code in the content editor on your main page and add the following code where you want your button group to display.

This code will show that we want a button group that's centered and will wrap on mobile devices if there's a large number of buttons.

IT DOES NOT INCLUDE YOUR LINKS YET. Don't panic if you don't see anything yet!

Now that you have a div for your button group, you need to add the links / buttons you want in this group. These will be placed between the divs.

Here's an example of a button link code:

/annual-speakers/ — this is the Friendly File Name of the page you want to link

btn btn-primary — this determines whether you want your primary button color or secondary button color (note: use btn btn-secondary for your secondary color)

Speakers — this is what the button will say

When put together on the frontend, it will look something like this (but with your own branding colors):

Your links should start after the wrap;"> and end before the first </div>. You should create your links (see above) starting in this space.

Here is an example:

Now that you have the code for both the button group and the buttons in that group, you should get something that looks like this:

Note: You could do alternating button colors, or change the button color of the page they are on -- once you have the code in place, you can make it your own!

Now that you've finished the full code, copy and paste it into the source code of every static page linked in your button group where you'd like it to appear.

No need to recreate, now that you've made it once, it's complete!

Note: You can also link to external pages, but keep in mind that those pages may not have the same navigation or button group, so make sure to bring them back to your main page somehow.

If you prefer to have buttons with spacing between them - like this example:

- then you could start with this sample code that includes padding around the buttons so they look good even when they wrap onto separate lines: