What is a Person membership type panel?
A person membership type panel is a way of displaying the available person membership types with titles, descriptions, images, prices, joining fees, durations and an Add to cart button. When a customer clicks the Add to cart button, the membership type is added to the cart, the customer can then join online through the checkout process. Person membership type panels have a range of settings that can be used to customise the arrangement of the membership types, the appearance of the image and the appearance and behaviour of the scroll-triggered animation.
Once a person membership type panel panel has been added, it can then be displayed on your website by adding it to the content of a row column.
How do I add a person membership type panel?
In the admin area
For a person membership type panel that displays the membership types in individual rows:
Go to Website > Widgets.
Click the Add button in the top right.
Click on the Person membership type panel icon.
Enter a Title.
Select the List option from the listing arrangement Layout drop-down menu.
Select a listing arrangement Alignment.
Select a listing arrangement Horizontal layout.
Select a listing image Aspect ratio.
Optionally, enter a listing image Minimum width.
Optionally, enter a listing image Maximum width.
Optionally, select a listing animation Type.
Enter a listing animation Duration.
Tick/un-tick listing animation Only play the animation once.
Click the Add button.
For a person membership type panel displays a number of membership types per row:
Go to Website > Widgets.
Click the Add button in the top right.
Click on the Person membership type panel icon.
Enter a Title.
Select the Grid option from the listing arrangement Layout drop-down menu.
Select a listing arrangement Orientation.
Select a listing arrangement Alignment.
Select a listing arrangement Horizontal layout*.
Enter a listing arrangement Maximum per row.
Enter a listing arrangement Minimum width.
Select a listing image Aspect ratio.
Optionally, enter a listing image Minimum width*.
Optionally, enter a listing image Maximum width*.
Optionally, enter a listing image Maximum height**.
Optionally, select a listing animation Type.
Enter a listing animation Duration.
Tick/un-tick listing animation Only play the animation once.
Click the Add button.
You can now add this widget to your website but it will only be visible if it contains person membership types so it's important to ensure that you have some published person membership types available.
* Only available if the Listing orientation is set to Horizontal.
** Only available if the Listing orientation is set to Vertical.
How do I edit a person membership type panel?
In the admin area
Go to Website > Widgets.
Find the person membership type panel you are looking for and click the Edit button in the Options column.
Edit the person membership type panel's details.
Click the Update button.
How do I delete a person membership type panel?
In the admin area
Go to Website > Widgets.
Find the person membership type panel you are looking for and click the Delete button in the Options column.
Click the Delete button to confirm.
How do the settings affect the appearance of a person membership type panel?
The range of customisation settings available depends on which listing arrangement layout option is used.
For an person membership type panel using the List option:
Listing arrangement alignment - Changes the alignment of any text to left-aligned or center-aligned.
Listing arrangement horizontal layout - Changes the ratio of the text and the image.
Listing image aspect ratio - Changes how the images are cropped and sized.
Listing image minimum width - Sets a minimum image width to prevent the image from getting too narrow.
Listing image maximum width - Sets a maximum image width to prevent the image from getting too wide.
Listing animation type - Changes which animation will play when a customer scrolls past the person membership type panel.
Listing animation duration - Changes the speed of the animation, a longer duration means the animation will be slower.
Listing animation only play the animation once - Sets the animation to only play the first time the customer scrolls past the person membership type panel or to play every time the customer scrolls past the person membership type panel.
For an person membership type panel using the Grid option:
Listing arrangement orientation - Changes the orientation of the membership types to vertically (image above, text below) or horizontally (image on the left, text on the right).
Listing arrangement alignment - Choose how you want the listing to be aligned. Everything to the left, or everything centred.
Listing arrangement horizontal layout* - Changes the ratio of the text and the image.
Listing arrangement maximum per row - Sets the maximum number of membership types to display per row in the grid. (e.g. 3 per row, 4 per row, etc).
Listing arrangement minimum width - Sets the minimum width of a membership type. This determines when the membership types will wrap onto the next row in the grid when the space available is reduced.
Listing image aspect ratio - Changes how the images are cropped and sized.
Listing image minimum width* - Sets a minimum image width to prevent the image from getting too narrow.
Listing image maximum width* - Sets a maximum image width to prevent the image from getting too wide.
Listing image maximum height** - Sets a maximum image height to prevent the image from getting too tall.
Listing animation type - Changes which animation will play when a customer scrolls past the person membership type panel.
Listing animation duration - Changes the speed of the animation, a longer duration means the animation will be slower.
Listing animation only play the animation once - Sets the animation to only play the first time the customer scrolls past the person membership type panel or to play every time the customer scrolls past the person membership type panel.
* Only available if the Listing orientation is set to Horizontal.
** Only available if the Listing orientation is set to Vertical.