Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

Website - Getting Started

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.

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. 


Use Case(s)

 Buttons are primarily used to "used as clickable action item" on a website.

  • View Meeting Minutes
  • View Dinner Menus
  • Navigate to a new page

Tables provide an efficient way of summarizing the given information into columns.

  • Tournament Dates
  • Pricing Information
  • Hours of Operation

Content


Accessing the Tool

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

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

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

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. 

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. 

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.). 

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

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. 

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.

Examples


Tables

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.
 

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

Select the folder Responsive Tables.

There are 3 options for tables.

Table Stack 

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).

Table Striped 

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).

Table Scroll  

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).

Examples



  • No labels