Customizing Online Programs
Your Program Pages include three customizable pages: The Program List page, Visitor Page, and Participant Page. You can choose to display different details on each page. Think about your site visitor's journey—from visiting your site, to being intrigued, to enrolling. What messages do you want to convey to your site visitors at each step?
In this article, learn more about:
About your Program Pages
When you add Online Programs to your site, the following pages are installed:
Program List page: This page displays all available programs on your site, organized by your preferences. It gives a brief overview of each program's details, such as price and number of participants.
Visitor Page: This page offers potential enrollees a program description and sets basic expectations, giving them a clear understanding of what the program entails.
Participant Page: This page includes elements for post-enrollment. These can be group discussions and rewards, to keep participants engaged and motivated.
Customizing your Program List page
Choosing what to display on the Program List page helps you communicate key details to your site visitors. Select essential information such as price, length, instructor, and more to ensure interested visitors have everything they need to enroll.
Wix Editor
Studio Editor
Click Pages & Menu
on the left side of the editor.Click Program Pages.
Click the Program List page.
Click the Program Listelement on your page.
Click Settings.
Customize the Program Listelement using the available tabs:
Categories
Select the categories you want to display on your program list.
Drag and drop the categories in the order you want them to appear.
Note: Can't see the Categories tab? Go to your site's dashboard to create categories and assign them to your programs.
Programs
Select the checkbox next to a program to display it on the list.
Drag and drop programs in the order you want them to appear.
Click Add a Program to create a new program in your site's dashboard.
Display
Enable thetoggle next to the details you want to show on the program list:List Details: Show the title on the program list. You can edit the default "Programs" title from the Text tab.
Program Details: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.
Layout
Choose between a Grid or Side by side alignment:Grid: Displays your programs in rows and columns.
Side by side: Displays your programs in a vertical stack.
Customize the layout according to your preferences.
Design
Choose what you want to design:
Background & dividers: Design the app background and the card background.
Text: Style text elements like program name, participants, duration, and price.
Buttons & badges:Buttons: Adjust the Default and Hover states of your buttons.
Badges: Design the label. You can customize the text in the Text tab.
Categories: Customize the Default and Selected states for your categories.
Note: Click Reset to Original Design at the bottom of the panel to undo the changes.
Text
Click the relevant fields to update the text:
List title: Edit the title that displays at the top of the list.
Buttons: Edit the text that displays on buttons.
Labels: Edit the text that displays on labels.
Tips:
Go to your dashboard to edit the specific settings of each of program.
Add your program list to another page in your site by selecting Add-ons.
Customizing your Participant Page
The Participant Page allows you to display additional information such as the number of participants, group discussions, rewards gained, and steps to complete. These details help provide a more comprehensive and engaging experience for your users.
Wix Editor
Studio Editor
Click Pages & Menu
on the left side of the editor.Click Program Pages.
Click your Participant Page.
Click the Participant Page element on your page.
Click Settings.
Select the relevant tab:
Display
Enable the toggles next to the details you want to show on your Participant Page:
Show Overview: Include an overview of your program's content and steps.
Steps: The number of steps in the program.
Participants: The number of participants in the program.
Note: The number of participants is displayed once there are participants in the program.Group discussion: The group you connected to the program.
Rewards: Any certificates or badges you've added as program rewards.
Allow social sharing: Allow visitors to share the page on social networks.
Show View on the App: Tell participants they can join programs via the Spaces by Wix app.
Layout
Choose a layout and customize it based on your preferences: Change the sidebar and text alignment, spaces between sections, and more.
Design
Choose what you want to customize:
Background & dividers: Customize the color and opacity of the page background and the dividers.
Text: Customize the color, font and style of text on the page (e.g. program name, section name, step name).
Buttons & links: Design the buttons that appear on the page. You can create a different look for when people hover over the buttons.
Video: Customize the player appearance for your uploaded videos. Change the overlay opacity and color, and the play icon color.
Tip: Click Reset to Original Design at the bottom of the Design panel to restore the default design settings.
Text
Edit the text of the Complete Step, Undo Step, Next Step and Previous Step buttons.
Customizing your Visitor Page
When customizing the Visitor Page, you can decide to include information like the content overview or only the first steps of the program. This helps visitors get a quick understanding of the program while keeping them intrigued.
Wix Editor
Studio Editor
Click Pages & Menu
on the left side of the editor.Click Program Pages.
Click Visitor Page.
Click the Visitor Page element on your page.
Click Settings.
Select the relevant tab:
Display
Enable the toggles next to the details you want to show in the Header:Image: The program cover image.
Duration: The duration of the program (e.g. 18 days).
Step: The number of steps in the program.
Participants: The number of participants in the program.
Note: The number of participants is not displayed on the page if there are no people in the program.
Rewards: The certificates and / or badges people will earn when they complete the program.
Join Button: A button that allows people to join the program.
Tip: By default, an additional "Join" button always appears at the bottom of the page.
Enable the toggles next to the details you want to show in under Program info:Instructors: Include the name of the program instructor.
Content overview: Include an overview of your program's content and steps.
Price section for free programs: If your program is free of charge, you can show "Free" under "Price" to encourage visitors to join.
Allow social sharing: Allow visitors to share the program page on social networks.
Join via the App: Include a sentence inviting site visitors to join your program via the Wix member apps.
Layout
Select what you want to customize:
Header: Choose a single or two-column layout, image position, and adjustments to fit your site design.
Body: Choose a single or two-column layout and adjust it to your preferences.
Sections
The options vary, depending on the layout you selected. Choose what you want to do.
Reorder sections: Drag and drop items on the list to organize them.
Change display settings: Place your cursor over the section title and click the Arrow icon
.Choose the column to display the section.
Click the Show title toggle to show or hide it.
Change the section title.
Click the Show join button toggle to show or hide it.
In the Overview section you can also adjust the following settings:Box padding: Adjust the padding around the information box in your program's overview.
Steps shown: Enter the number of steps you want to display.
Load all steps button: Enter text for the button that prompts users to view all program steps.
In the Instructor section: Adjust the Image shape for your instructor's photo: Square or Round.
If you connected a group to your program, you can edit the Group Discussion section which shows a snippet of the discussion.
Design
Choose what you want to customize:
Background & dividers: Customize the color and opacity of the page background and the dividers.
Text: Customize the color, font, and style of text on the page (e.g. program name, section name, step name).
Buttons & links: Design the buttons that appear on the page. You can create a different look for when people hover over the buttons.
Video: Customize the player appearance for your uploaded videos. Change the overlay opacity and color, and the play icon color.
Overview: Customize your program's overview section. You can design the background, border, dividers, and text in this section.
Tip: Click Reset to Original Design at the bottom of the Design panel to restore the default design settings.
Text
Change the default text for the Join button and the Request to Join button.
FAQs
Click a question below to learn more about customizing your program pages.
Can I customize the Programs Pages using the Wix app?
No. While you can manage many customization aspects using the Wix app, some specific per-page customization features may be limited. For more detailed customization, use the Wix Editor on desktop.
However, you can use the Wix app to customize your member apps.
To edit the program details in the Wix app:
Go to your site in the Wix app.
Tap Manage
at the bottom.Tap Online Programs.
Tap the More Actions icon
next to the relevant program.Tap Edit.
What are some key details to convey to potential participants?
Ensure potential participants get all the info they need with the following best practices:
Program Overview: Provide a concise summary of what the program entails, including its main objectives and benefits.
Price: Clearly state the cost of the program to avoid any confusion or surprises.
Program Length: Indicate the duration of the program in terms of weeks, months, or total hours, so visitors can gauge the time commitment required.
Instructor Information: Include details about the instructor(s) such as their qualifications, experience, and teaching style to build trust and credibility.
Schedule: Offer a breakdown of the program schedule, like the start date and key milestones.
Can I design each program differently?
No, you cannot customize the settings for each program individually. Any changes made will apply to all programs with a unified design.
