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.
What does "advanced feature" mean?
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.
Common Uses
Creating an Event "Microsite" within your Novi Site
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.
Adding a Button Group
Step 1: Create All the Static Content Pages You Will Need
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
Step 2: Add the Button Group Code to the Source Code of Your Main Page
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.
<div class="btn-group" role="group" aria-label="Basic example" style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
</div>
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!
Step 3a: Create Your Button Links
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):
Step 3b: Place All the Button Links You Need Between the Divs
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:
<div class="btn-group" role="group" aria-label="Basic example" style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
<a href="/annual-conference/" class="btn btn-primary">Conference Home</a>
<a href="/annual-speakers/" class="btn btn-primary">Speakers</a>
<a href="/annual-travel/" class="btn btn-primary">Travel</a>
<a href="/annual-sponsors/" class="btn btn-primary">Sponsors</a>
<a href="/annual-registration/" class="btn btn-primary">Registration</a>
</div>
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!
Step 4: Copy the Full Code You Created and Paste on Every Static Page
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.