Pages — the builder and the designer

Every club has a set of public pages, such as its home page and the story page each ambassador shares. You design each one in the admin, and visitors see the version you last published.

This page covers finding your pages, editing them in the builder, and the settings each page carries. Drafts, publishing and going back to an earlier design are covered in Versions, previewing and publishing.

Your club's pages

1. Open the club.
2. In the sidebar, select Pages.

A new club usually has these four pages:

Each page shows as a card with a preview image, its name and its description. A page with no description shows "There is no description for this page." The preview image is taken when a page is created and each time you publish it, so it can take a moment to catch up.

Each card has:

• Design, which opens the page for editing.
• More, with:
  • Open page, which opens the public page in a new tab. Of these pages, it appears only on the Club home page, and only while the club is live. The club-wide story, join and welcome pages have no single address, so they have no Open page.
  • Rename page, which changes the Name and Description on the card. Supporters never see these. Name is required. Select Save changes.

These pages cannot be deleted.

Which page your visitors see

Visitors always see the most recently published version of a page. A draft is never shown to the public.

• Club home page: shown at the club's address while the club is published. If the club is not published, or is archived, visitors get a "not found" page. If an archived club has a redirect club, visitors are sent to that club instead. See Publishing, archiving and redirecting.
• Ambassador story page: shown while both the club and the ambassador are published, or to anyone using the ambassador's preview link. Otherwise visitors are sent to the ambassador's redirect, or get a "not found" page if there is none. See Unpublishing and redirects.
• Supporter join page: in a published club, it is down for an ambassador who is not published, and visitors follow that ambassador's redirect. While the club is not published, the join page keeps working so you can try the join journey before launch.
• Membership welcome page: shown to a new supporter after they join. See Referrals and joining.

Pages use your club's theme for colours and fonts. See Themes, colours and logos.

Edit a page in the builder

Your pages open in the builder. The builder shows the page on a canvas, with a Sections panel on the left and a Settings panel on the right.

You can only change a draft. When you open a published page, the canvas is read-only and the header shows Edit.

1. On the page's card, select Design.
2. If the header shows Edit, select it. This makes a draft copy of the published page and opens it.
3. Make your changes. Each change is saved as you make it.
4. Select Publish to make the draft the live page. You see a confirmation such as "Published “Club home page” — it is now the live version of this page."

When Supporter Club creates a page from its template, it writes the page's starting text from your organisation's mission. Edit does not appear until that writing has finished. If you don't see Edit on a new page, come back to it a little later.

Select Close to go back to the list of pages.

Move around the builder

• Switch page, at the top left, opens another of the club's pages.
• The canvas size buttons show the page at Phone, Tablet or Laptop width. Laptop is the default. Toggle device frame shows or hides a device outline around the canvas.
• On the Ambassador story page, Preview as an ambassador shows the page with one of the club's ambassadors' details. Choose an ambassador from Select ambassador.
• Hide Sections and Hide Settings put a panel away. Select its tab at the edge of the screen to bring it back.

Sections

A page is built from sections, listed top to bottom in the Sections panel.

• Reorder a section by dragging its row, or select its handle and use the arrow keys.

• Add a section with Add section at the foot of the panel, or with the + between two rows to add one in that gap. In the Add a section dialog:

  1. Check Position, which says where the new section goes.
  2. Choose a section type. Use the search box to find one by name.
  3. Choose a layout for it. Each type says how many layouts it has, followed by "The layout can be changed later." A type with only one layout says "This section has one layout." instead.
  4. Optionally give it a Name. The name is only shown in the sections list, never on the page.
  5. Select Add section.

• Manage a section from its row's menu:

  • Change layout shows the section's other layouts. Choose one and select Use this layout. Your words move across to the matching places in the new layout. This only appears when the section has more than one layout.
  • Rename changes the name in the list. "Only shown here, never on the page."
  • Duplicate adds a copy of the section.
  • Delete removes the section after you confirm with Delete section. This cannot be undone.

  Duplicate and Delete only appear on sections that can be removed. Some sections are a fixed part of the page.

Change a section's content

Select anything on the canvas to see its settings in the Settings panel. Until you select something, the panel says "Select an element on the canvas to make changes."

When you select a part of the page, a small toolbar appears next to it:

• Edit settings opens its settings in the Settings panel.
• Delete this component removes it, where that is allowed.

Some settings can be set separately for Phone, Tablet and Laptop. Phone settings apply to all devices. Tablet settings apply to tablets and larger screens. Laptop settings apply to laptops, desktops and larger screens.

The settings you meet depend on the part you selected:

• Text: select the text to open the text editor, headed with the name of the part you selected. Format it with Bold, Italic, Underline, Subscript, Superscript and Link, and add personal details from the Merge tag list (see Merge tags). Select Save changes.
• Logo: choose Main logo or one of your organisation's named logos. If a named logo has been deleted, the field shows its name followed by "(missing)", and the page shows your main logo instead. See Themes, colours and logos.
• Image upload: upload a file. Once there is one, View opens it and Remove takes it away.
• Photos (galleries): select Add photo, then pick one under Choose a photo. Drag the handles to reorder and select Remove to take a photo out. The list offers the photos of the ambassador chosen in Preview as an ambassador, and the page shows each ambassador's own photo with the same name. See Assets and share images.
• Size: set Width and Height. Where the shape is fixed by the file, the lock shows "Locked to the file's shape".
• Choices: pick Default or one of the options.
• Colour, slider and anchor settings: pick a colour, drag the slider, or select the edges (top, right, bottom, left) to anchor to.

Page settings: title, description and share image

Each page version has its own title and description, and the Ambassador story page also has a share image. You change them on a draft, and they reach your public page when you publish.

1. Open the page and select Edit if you are not already on a draft.
2. Select More, then Page settings.
3. In Page Settings, change the Title and Description.
4. Select Save changes.
5. Select Publish when you are ready for the change to go live.

Title is the page's title in the browser tab. On the Club home page and the Ambassador story page it is also the title shown when the page's link is shared in a messaging or social app.

Description is saved but not shown on your public page. When a link is shared, the description shown is the club's Purpose (home page) or the ambassador's Introduction message (story page).

New pages start with a title and description that include merge tags. For example, a club home page's title starts as Join *|CLUB_NAME|* in support of *|ORGANISATION_NAME|*. You can use merge tags in both fields. See Merge tags.

Share image (Ambassador story page)

The share image is the picture a messaging or social app shows when someone shares an ambassador's story page link. Under Share image, choose:

• Member's photo: the ambassador's own profile photo. If an ambassador has no photo, the uploaded image is used instead, if you have uploaded one.
• Uploaded image: an image you upload, used for every ambassador. You must upload a file when you choose this.

The upload takes a PNG, JPEG, WebP, AVIF or SVG image no larger than 5000 pixels wide or tall. It is shown as a square, and anything outside the centre square is cropped. To take an uploaded image away, tick Remove under it and select Save changes.

When there is an image, the shared link shows it as a large picture. When there is none, the link shows as a small summary without a picture.

Pages for a single ambassador

You can give one ambassador their own design of the story, join or welcome page. Visitors to that ambassador's pages then see their page instead of the club's.

For the story, join and welcome pages, Supporter Club first looks for a page made for that ambassador (for the welcome page, the ambassador who referred the supporter). If there is one, visitors see it. If not, they see the club's page. The club home page is always the club's own.

Create a page for an ambassador

You need at least one ambassador in the club. If there are none, the form says "This club has no ambassadors yet. Add an ambassador before creating their page." and offers Add ambassador.

1. On Pages, under Ambassador pages, select Create a page.
2. Under "What type of page would you like to create?", choose a page type. The list offers the club's own page types except the home page: Ambassador story page, Supporter join page and Membership welcome page. In a club set up with Join on the ambassador's page, it offers only Ambassador story page (see Clubs where supporters join on the ambassador's page).
3. Under "Which ambassador would you like to create this page for?", choose the ambassador.
4. Select Create.

Each ambassador can have one page of each type. If they already have one, you see "Ambassador already has a page of this type".

The new page is published straight away, so it replaces the club's page for that ambassador as soon as you create it. It is named after the page type and the ambassador, for example "Ambassador story page – Sam Lee", and it opens in the builder. It starts from the template, not from the club's current design.

Until you create one, Ambassador pages shows "No ambassador specific pages were found."

On the card of an ambassador's page, More offers:

• Open page, on an ambassador's story or join page while that ambassador is published. An ambassador's welcome page has no Open page.
• Rename page, as for the club's pages.
• Delete page (see below). Only pages made for a single ambassador can be deleted.

Find an ambassador's pages

• On Pages, ambassador pages are listed under Ambassador pages.
• On a member's page (sidebar Members, then the member), the Pages panel lists that member's own pages, each with Design and, on a story or join page while the ambassador is published, Open. A welcome page has no Open. With no pages, the panel says "No membership pages were found."

Delete an ambassador's page

1. On the page's card, select More, then Delete page.
2. Read the warning: once deleted, visitors to that ambassador's version of the page see the club's design.
3. Select Continue.

The designer

The designer is a free canvas for a page, for people comfortable with design software. Pages open in the builder; you reach the designer from the builder's More menu (see the next section).

In the designer:

• The page name at the top is a menu of the club's pages, with All pages to go back to the list.
• The canvas has zoom controls, a canvas size control and, on the Ambassador story page, a preview-as-ambassador control.
• On a draft, four panels open from the side: Layers (N) ("Design Layers", the outline of everything on the page), Library (L) (parts you can add), Theme (T) (the club's colours and fonts, see Themes, colours and logos) and Editor (E) (the selected part's settings).
• The toolbar on a selected part also offers Show this component in the layers panel, Select this component's container, Switch this section's layout variant, Add a component to this container, Add a component before this one, Add a component after this one and Duplicate this component.

The header actions match the builder's, with View history added:

• On a published page: Edit, and under More: Replace with another page's design, Reset to the latest template and View history.
• On a draft: Publish, and under More: Page settings, View history and Discard changes.

View history opens a read-only view of the page with a Versions list. Each version shows when it was made, who made it (or "System") and whether it is Published or Archived. Drafts are not listed. Select a version to look at it. Close takes you back.

Switching between builder and designer

You can open the same version of a page, asset or document in the other editor:

• In the builder, select More, then Switch to designer.
• In the designer, select More, then Switch to builder.

In the page designer, Switch to builder only appears for a page that normally opens in the builder. Every page in a new club does.

Clubs where supporters join on the ambassador's page

If you chose Join on the ambassador's page when you created the club, supporters join in a window over the ambassador's story page instead of on a separate join page. See Choosing how supporters join.

Such a club has only two pages:

• Club home page
• Ambassador story page, which also carries the join window.

It has no Supporter join page and no Membership welcome page. When you create a page for a single ambassador in such a club, the only page type offered is Ambassador story page.