Online Programs: Customizing Your Program List

8 min read
Your Program List showcases previews of all your programs where visitors click to view their full details. Choose your preferred layout and customize every element that appears in your list. 
Tip:
In this article, learn more about:

Customizing the layout of the Program List

The Program List arranges your programs in cards in the layout you prefer. You can display the programs in a grid or stack them vertically on the page. 

To customize the layout:

  1. Go to your Program List page in your Editor:
    • Wix Editor:
      1. Click Pageson the left side of the Editor.
      2. Click Program Pages.
      3. Click Program List.
    • Editor X:
      1. Click Pages  at the top of Editor X.
      2. Click Program List under Program Pages.
  2. Click the Program List element.
  3. Click Settings.
  4. Click the Layout tab.
  5. Choose a layout and set it up: 
A screenshot of the layout settings of your Program List.

Choosing which details display on your Program List

Choose which info displays in each card in your Program List. You can show or hide the Program List title and details about each program such as the cover image, duration, participants and price. 

To choose which details display:

  1. Go to your Program List page in your Editor:
    • Wix Editor: 
      1. Click Pageson the left side of the Editor.
      2. Click Program Pages.
      3. Click Program List.
    • Editor X:
      1. Click Pages  at the top of Editor X.
      2. Click Program List under Program Pages.
  2. Click the Program List element.
  3. Click Settings.
  4. Click the Display tab.
  5. Choose which details you want to display:
    • List Details: Enable the toggle to show the title on the Program List. 
      Note: You can edit the default "Programs" title in the Text tab. 
    • Program Details: Click the checkbox next to each detail you want to show on the list:
      • Image: Show the program cover image. 
      • Duration: Show the duration of your program (e.g. 18 days).
      • Participants: Show the number of participants in the program.
      • Price: Show the price of each program. 
A screenshot of the Display settings where you choose which details display in your Program List.

Customizing the Program List text

Go to the Text tab to edit the title of your Program list and the buttons and labels that appear in it. 

To customize the Program List text:

  1. Go to your Program List page in your Editor:
    • Wix Editor:
      1. Click Pageson the left side of the Editor.
      2. Click Program Pages.
      3. Click Program List.
    • Editor X:
      1. Click Pages  at the top of Editor X.
      2. Click Program List under Program Pages.
  2. Click the Program List element.
  3. Click Settings.
  4. Click the Text tab.
  5. Click the relevant fields to update the text:
    • List title: Edit the title that displays at the top of the list.
    • Button Text for Visitors: Edit the text that displays on the button that visitors click to join a program.
    • Button Text for Participants: Edit the text that displays on the button that participants can click to view details about the program they've joined. 
    • Participant: Edit the label text that displays for participants that have joined. 
    • Request Pending: Edit the label text that displays for participants that have a pending request to join a program. 
    • Program Completed: Edit the label text that displays for participants that have completed a program. 
A screenshot of the Text settings of your Program List.

Customizing the design of the Program List

Customize the design of your Program List including its background, dividers, text style, buttons, badges, and categories. 

To customize the design:

  1. Go to your Program List page in your Editor:
    • Wix Editor:
      1. Click Pageson the left side of the Editor.
      2. Click Program Pages.
      3. Click Program List.
    • Editor X:
      1. Click Pages  at the top of Editor X.
      2. Click Program List under Program Pages.
  2. Click the Program List element.
  3. Click Settings.
  4. Click the Design tab.
  5. Choose what you want to customize:
A screenshot of the Design settings of your Program List.
Tip:
Click Reset to Original Design at the bottom of the panel to restore the default design settings. 

FAQs

We are here to help with all your questions. Click a question below to learn more.

Did this help?

|