Prerequisite: Before you style your Winners gallery, you'll need to define the award(s) and assign some entries to the award.
To learn how to complete these actions, please refer to the article: Contest Awards.
Building a Winners gallery in the Website Builder
This guide will walk you through the process of creating a dedicated "Winners Gallery" on your Launchpad6 ContestPad website. By following these steps, you can effectively showcase the successful entries and celebrate the winners of your contest.
1. Accessing the Website Builder
To begin, you'll need to navigate to the website builder for your contest.
From your main dashboard, select Contest to view all the contests you have created.
Locate the contest for which you wish to create a Winners Gallery and click the corresponding Design button.
Next, click the Edit button for the Default Design Template. This will take you into the website builder interface.
2. Crafting a Dedicated Winners Page
While a gallery of winners can be added to any page, creating a distinct "Winners" page provides a focused space to highlight their achievements.
In the website builder, locate the name of the current page (on the left of the screen under the Pages tab). Next to it, click the expand icon (>) to reveal a list of all current pages.
At the top of this list, select the + New Page option.
3. Configuring Your New Winners Page
A parameter panel will appear on the right-hand side. Here, you will define the details of your new "Winners" page.
Name:
WinnersStatus:
Enabled if Winner Announced(This ensures the page is only visible once you have officially declared the winners).URL Slug:
winnersPage Description: Briefly describe the content, for example, "Meet the talented winners of our contest."
Name in Menu:
See who won!(This is the text that will appear in your site's navigation menu).
After filling in these details, click the Submit button.
4. Adding a Title to Your Winners Page
With your "Winners" page created, it's time to add a congratulatory title.
On the right side of the screen, ensure the Widgets tab is selected.
Click the Rich Text widget to add it to the section area of your page.
The parameters of the new widget will appear in the Parameters panel on the right side of the screen
Scroll through the parameters and expand the Appearance tab, then click Open text editor.
Remove the placeholder text and type "Congratulations to our Winners!". Use the editor's tools to format this as a Heading 1 and center-align the text.
Press the Update & Close button to save you changes to the text box.
5. Adding and Configuring the Winners Gallery Widget
Now, you will add the Gallery widget and configure it to display the winning entries.
From the Widgets tab, click the Gallery widget to add it to the page below the Rich Text widget.
Make sure the Gallery widget selected in the section area, to display its settings panel on the right.
Under the Entry List parameter, set the List Type field to Winners.
An Award filter option will now appear. Here, you can choose to display all winners or filter by a specific award.
Important Note: The awards available in the 'Award filter' dropdown are populated from your contest's backend. You must first create the awards in Entries > Winner Settings before they will appear here.
6. Styling and Customizing Your Gallery
Next, customize the appearance and behavior of your gallery for a clean, professional look.
In the Gallery widget's parameters, expand the Appearance tab.
Check the Include primary details box to display the entry's Title
You can also display the entrant's Name below the thumbnail by checking the the Include secondary details box
Use the available options to set the Font and Text Color for these captions.
You can also set the caption's Background Color and the Aspect Ratio of the thumbnails to best suit your images.
For a dedicated Winners Gallery, it's recommended to hide unnecessary elements. Uncheck the boxes for Search box and Category filter.
Expand the Page Load Interactions tab. For most cases, you should set the Entries per load and Maximum Entries to match the number of winners assigned to the award you are displaying. This ensures all winners are loaded on the page at once.
7. Connecting the Entry View for an Interactive Experience
Allow your site visitors to click on a winner's thumbnail to see their full entry in a pop-up window.
In the Gallery widget's parameters, find and expand the Behavior section to reveal the On-click action settings.
Set the action to Navigate to the page that contains your single Entry widget. In the default Launchpad6 templates, this page is typically named View Entry.
Set the Display as field to Pop Up.
Set the pop-up Width to 70% for an optimal viewing experience on most devices.
Prerequisite: This functionality requires a page (like the default 'View Entry' page) that already contains an 'Entry' widget.
8. Publishing Your Winners Gallery
Once you are satisfied with your setup, you must publish the changes to make them live.
Click the Publish button, located in the top-left of the website builder.
Final Visibility Check: Remember, in Step 3 you set the page Status to Enabled if Winner Announced. This means the "Winners" menu item, the page itself, and the entries in your gallery will only become fully viewable on your live site after you have finalized the winner selection in the backend. You must ensure the following settings are active in Entries > Winner Settings:
The main Announce Winner switch is set to ON.
The Enable switch for the specific award(s) you are displaying is also set to ON.