Each Online Program has a dedicated Program Page on your site. From the Program Page, participants can see the overview of the program, the steps and their progress. New site visitors can view the program information from this page and request to join.
You can choose your preferred layout and customize the design of your Program Page based on who's viewing it.
Show me how to access my Program Page
- Go to your Program page in your Editor:
- Wix Editor:
- Click Pages and Menu
on the left side of the Editor. - Click Program Pages.
- Click Program Page.
- Editor X:
- Click Pages
at the top of Editor X. - Click Program Page under Program Pages.
In this article, learn how to customize your Program Page:
Changing the layout of the Program Page
After you add Online Programs to your site, each program page is a dynamic page. When you edit the content in the Online Programs app, each program page displays the content from the relevant program.
Choose the layout that best showcases your program's content. You can use a different layout for site visitors and participants.
To change the layout:
- Go to your Program page in your Editor:
- Wix Editor:
- Click Pages and Menu on the left side of the Editor.
- Click Program Pages.
- Click Program Page.
- Editor X:
- Click Pages at the top of Editor X.
- Click Program Page under Program Pages.
- Click the Program Page element in your Editor.
- Click Settings.
- Click the Layout tab.
- Choose a layout, depending on if it's a visitor or a current participant:
Customize the layout of your Program Page for people who have not joined your program yet.
- Click Visitor at the top.
- Select a layout for the page's header: Classic or Side by Side.
- Customize the layout of the header and the entire page:
- Image Alignment: Select where to place the program's cover photo on the header.
- Spacing between header parts: Drag the slider to add more space between the different elements on the header.
- Description: Choose how to align the program's info and set the padding around it.
- Image/Video: Set the height and position of your program's image/video.
- Customize Image Cropping: Choose the focal point of your program's image.
- Body: Set the alignment, padding and spacing for the content of your program.
- Sidebar: Add a sidebar to appear on your program page. Go to the Sections tab to choose what info the sidebar displays.
Note: The available options vary based on the header layout you choose.
Customize the layout of your Program Page for participants in your program.
- Click Participant at the top.
- Customize the layout of the sidebar and the entire page:
- Sidebar proportions: Set the proportions between the sidebar and the expanded step info.
- Space between sections: Choose how much space to add between the sidebar and expanded step info.
- Text alignment: Choose whether you want the sidebar to the left or right of the expanded information.
- Side padding: Set the amount of padding around the edges of the sidebar.
- Space between steps: Choose the amount of space between each step in the sidebar.
- Side padding: Set the amount of padding around the expanded step info.
- Space from top: Choose how much space you want to include at the top of the section.
Customizing the sections of your Program Page
Your Program Page is made up of sections of information, like "Overview", "Instructor", "Price" and others. You can choose what to display in these sections, and control their order on the page as well.
To customize the information:
- Go to your Program page in your Editor:
- Wix Editor:
- Click Pages and Menu on the left side of the Editor.
- Click Program Pages.
- Click Program Page.
- Editor X:
- Click Pages at the top of Editor X.
- Click Program List under Program Pages.
- Click the Program Page element in your Editor.
- Click Settings.
- Click the Sections tab.
- (Optional) Change the order of the sections using drag and drop.
- Customize the title and information that appears in each section:
This section introduces your program and showcases its description.
- Click the Arrow
icon next to About. - Click the Show title toggle:
- Enabled: A title appears in the About section. Enter your desired title under Section Title.
- Disabled: No title appears in the About section.
- (Optional) Enable the Show Join Button toggle to encourage people to join your program. You can then choose what the button says.
This section shows an overview of your program's content and steps.
- Click the Arrow icon next to Overview.
- Click the Show title toggle:
- Enabled: A title appears in the Overview section. Enter your desired title under Section Title.
- Disabled: No title appears in the Overview section.
- Customize other layout settings of the Overview section:
- Box padding: Set the padding around the box that displays the information in your program's overview.
- Steps shown: Enter the number of steps you want to display.
- Load all steps button: Enter the text to display on the button that encourages people to see all the steps in your program.
This section showcases the instructors of your program (e.g. Instructors or Mentors).
- Click the Arrow icon next to Instructor.
- Click the Show title toggle:
- Enabled: A title appears in the Instructor section. Enter your desired title under Section Title.
- Disabled: No title appears in the Instructor section.
- Select an Image shape for your instructor's photo: Square or Round.
- (Optional) Select the Move to sidebar checkbox to display your instructor list on the side panel of your program's page.
Note: This option is only available if you enabled the sidebar option from the Layout tab.
This section shows the pricing of your program.
- Click the Arrow icon next to Price.
- Click the Show title toggle:
- Enabled: A title appears in the Price section. Enter your desired title under Section Title.
- Disabled: No title appears in the Price section.
- (Optional) Enable the Show Join Button toggle to encourage people to join your program. You can then choose what the button says.
- (Optional) Select the Move to sidebar checkbox to display your program's price on the side panel of the page.
Note: This option is only available if you enabled the sidebar option from the Layout tab.
- Click the Arrow icon next to Group Discussion.
- Click the Show title toggle:
- Enabled: A title appears in the Group Discussion section. Enter your desired title under Section Title.
- Disabled: No title appears in the Group Discussion section.
- (Optional) Enable the Show Group Image toggle to add the group image to the section.
- (Optional) Select the Move to sidebar checkbox to display the group on the side panel of your program's page.
Note: This option is only available if you enabled the sidebar option from the Layout tab.
This section encourages people to share the program page on Facebook, Twitter, LinkedIn or through a direct link.
- Click the Arrow icon next to Share.
- Click the Show title toggle:
- Enabled: A title appears in the Share section. Enter your desired title under Section Title.
- Disabled: No title appears in the Share section.
- (Optional) Select the Move to sidebar checkbox to display the share options on the side panel of your program's page.
Note: This option is only available if you enabled the sidebar option from the Layout tab.
This section shows your program's start date. If you let participants pick their own start date, this is where they can do so.
- Click the Arrow icon next to Start Date.
- Click the Show title toggle:
- Enabled: A title appears in the Start Date section. Enter your desired title under Section Title.
- Disabled: No title appears in the Start Date section.
- (Optional) Enable the Show Join Button toggle to encourage people to join your program. You can then choose what the button says.
- (Optional) Select the Move to sidebar checkbox to display the start date on the side panel of the page.
Note: This option is only available if you enabled the sidebar option from the Layout tab.
Choosing what to display on your Program Page
Choose which details and options to show on the Program Page. For example, you can decide whether or not to display the program's image, participants and duration. You can also control the option to join the program on mobile, the option to share it on social media and more.
To choose which details display:
- Go to your Program page in your Editor:
- Wix Editor:
- Click Pages and Menu on the left side of the Editor.
- Click Program Pages.
- Click Program Page.
- Editor X:
- Click Pages at the top of Editor X.
- Click Program Page under Program Pages.
- Click the Program Page element in your Editor.
- Click Settings.
- Click the Display tab.
- Choose which details to display, depending on if it's a visitor or a current participant:
- Click the Visitor tab.
- Select the checkbox next to the detail(s) 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 are not displayed on the page if there are no people in the program. - Button: The "Join" button.
- Enable the toggle(s) under Additional to add more options to the page:
- Join via the App: Include a sentence inviting site visitors to join your program via the Wix member apps.
- Owner info: Include the program owner's name and photo.
- Content Overview: Include an overview of your program's content and steps.
- Show price section for free programs: If your program is free of charge, you can show "Free" under "Price" to encourage visitors to join.
- Enable social sharing: Allow visitors to share the program page on social networks.
- Click the Participant tab.
- Select the checkbox next to the detail(s) you want to show in the Overview:
- Steps: The number of steps in the program.
- Participants: The number of participants in the program.
Note: The number of participants are not displayed on the page if there are no people in the program. - Group: The group you connected to the program.
- Enable the toggle(s) under Additional to add more options to the page:
- Overview: Include an overview of your program's content and steps.
- Enable social sharing: Allow visitors to share the program page on social networks.
Designing the Program Page
Design how your Program Page looks by choosing from a variety of colors, font styles and sizes.
To design the Program Page:
- Go to your Program Page in your Editor:
- Wix Editor:
- Click Pages and Menu on the left side of the Editor.
- Click Program Pages.
- Click Program Page.
- Editor X:
- Click Pages at the top of Editor X.
- Click Program Page under Program Pages.
- Click the Program Page element in your Editor.
- Click Settings.
- Click the Design tab.
- Design the Program Page for site visitors and current participants:
- Click the Visitor tab.
- Design every individual part of your Program Page:
- Background & Dividers: Customize the color and opacity of the page background and the dividers.
- Video: If your program includes a video, choose the color and opacity for the overlay, as well as the Play button.
- Text Style: Customize the color, font and style of text elements inside the program page (e.g. Program name, Section title/name).
- Button: Design the buttons that appear on the page. You can create a different look for when people hover over the buttons.
- Overview: Customize your program's overview section. You can design the background, border, dividers and text in this section.
- Sidebar: Customize the side panel that appears on your program page. You can design the background, divider and text in this section.
- Click the Participant tab.
- Design every individual part of your Program Page:
- Background & Dividers: Customize the color and opacity of the page background and the dividers.
- Text Style: Customize the color, font and style of text elements inside the program page (e.g. Program name, Section title/name).
- Button: Design the buttons that appear on the page. You can create a different look for when people hover over the buttons.
Editing the button text on the Program Page
Your Program Page includes a button that allows people to join, as well as a button that lets participants complete a step. You can enter your own text for these buttons so they match your voice and tone.
To customize the button text:
- Go to your Program page in your Editor:
- Wix Editor:
- Click Pages and Menu on the left side of the Editor.
- Click Program Pages.
- Click Program Page.
- Editor X:
- Click Pages at the top of Editor X.
- Click Program Page under Program Pages.
- Click the Program Page element in your Editor.
- Click Settings.
- Click the Text tab.
- Enter your text under Join Button and Complete Step Button.
