Adding Buttons and Responsive Tables

Owned by Jen Montano
Last updated: Jan 26, 2023 by Emily Carlson
4 min read

Table of Contents

Overview

Buttons can be a great tool to make hyperlinks more visually appealing and eye-catching to your members. Buttons provide the user with a simple way to trigger an event, like viewing a document, navigating to a new page, or confirming an action.

Tables are used to organize data that is too detailed or complicated to be described adequately in a paragraph of text, allowing the reader to quickly see the results. By using the table, we can easily find out the information and it is one of the efficient ways to summarize the given information into the form of columns. In the table, we can add the information in a specific way rather than in a paragraph.

Required Permissions

  • Admin

Buttons

To add a button to your content area you can use the preset templates. First, open the Click To Edit you wish to add your button to.

In the Axis Editor hover over Insert > Template and then click Themed.

Select the folder Responsive Tables.

There are 2 options for buttons

  • A single button - Button Link

  • A 2x2 table of buttons - Button Link - Grid

Button Link

A single button may be added in any content area to make what your linking to stand out in your content area. 

  1. From the Responsive Templates folder select Button Link and then click Insert Template and select from the dropdown where you would like it placed. 

  2. Once the link is on the page, the next thing you need to is direct the link to what action you will be performing (i.e. opening a document, a new page, etc.). Remove the Button Link and enter what text you would like it to be called. 

  3. Then select/highlight the text and select the hyperlink icon. From the drop-down menu select what you would like it to be hyperlinked to. Then Save. 

  4. For more information on uploading documents click here.

Button Link Grid

A button grid may be needed to help organize multiple documents within on page (i.e. Menus, Membership Documents, etc.). 

  1. From the Responsive Templates folder select Button Link and then click Insert Template and select from the dropdown where you would like it placed. 

  2. Once the link is on the page, the next thing you need to is direct the link to what action you will be performing (i.e. opening a document, a new page, etc.). Remove the Button Link and enter what text you would like it to be called. 

  3. Then select/highlight the text and select the hyperlink icon. From the drop-down menu select what you would like it to be hyperlinked to. Then Save.

Tables

  1. To add a table to your content area you can use the preset templates. First, open the Click To Edit you wish to add your table to.

  2. In the Axis Editor hover over Insert > Template and then click Themed.

  3. Select the folder Responsive Tables. There are 3 options for tables.

    1. Table Stack  is best used for multi-column layouts, in our example below we are showing a staff directory. On a desktop, our table has 3 columns, but then on mobile it will stack each column of information to give you the view on the right (Ex. Staff layouts, Button tables).

    2. Table Striped will generate alternating white/grey rows to help separate large amounts of information. This information will also stack on a mobile device as well. (Ex: Staff layouts, amenity hours).

    3. Table Scroll is used for layouts where stacking on mobile will not display correctly. On mobile it will allow for the user to scroll (left / right) to see all of the information (Ex: golf/tennis tournament results, general data and time tables).

Styling Tables

  • Right click on the inserted table, and choose Table Properties.

  • Apply styling to the Table or Cells.

  • Adjust Table Width or Height by adding a percentage or pixels.

  • Adjust Cell Width or Height by adding a percentage or pixels - Useful when wanting each cell to have a fixed width or height 

  • Apply content position to the table.

  • Apply content position to the cells.

  • Apply padding to cells using the Style Builder option.    

Best Practices

  1. Clubessential sites that launched after May 2020 are already set up to use the below information to add buttons within your content areas without having to go into the HTML. Sites launched before May 2020 can contact support@clubessential.com to confirm your site is compatible and add the necessary code. 

  2. For table formatting, it is best to not assign a height as the table will grow with the amount of content. It is best to assign a 100% width to the table so it spans the full content area.

FAQs