Customize the look and feel of your interactive poll where people will vote, and the results display for your broadcast or stadium screens
Open your Poll and select the Design tab at the top. This is the second step of setting up your poll. If you still need to setup your poll, check out our step-by-step walkthrough here.
Start by selecting a layout from the left side of your screen to get started. There are two types of layouts:
- Interactive (web): This is the actual poll that your viewers will click to vote on. It will be on your Tagboard Page or embedded on your website or mobile app. Your Poll needs to have at least one Interactive (web) Display.
- On-Screen Display: This will show the real-time results of your poll on your broadcast or stadium screen. These displays are not interactive or clickable. You can create as many On-Screen Layouts per poll as you’d like! Choose between Fullscreen, Lower Third, or Tombstone. Why would you need more than one display? 💡 Give yourself optionality by creating a fullscreen and a lower third. Or if you plan to reset your round for a repeating poll campaign, create several options (ie. 3, 4, and 5-option displays, text only vs. images) so you are ready for any scenario.
✨ Save time with a pre-designed template package! Love the way a template design looks, but want to update to your background and font? No problem. Start with a fully customized template package to get you most of the way there, then tweak any part of the design using our no-code builder.
First, let's talk about how the builder works.
You have complete control to customize every state and aspect of each display. In the “Customize Layouts” Menu in the left sidebar, select the layer you want to customize. You’ll see the settings & design options available for that layer on the right side of your screen. Let's walk through it step by step.
You don’t need to adjust every setting! We chose default settings that will look good out of the box. We'll walk through what's available to customize below. Look for the 💡 to see tips & tricks.
Interactive (web) Poll Display
Poll Settings:
- Aspect ratio: set the screen size for your poll. Not sure what to choose? Interactive Displays are typically viewed on a phone, so we recommend a responsive or 9:16 aspect ratio.
- Design: This is where you can choose a poll container, or a background, for your poll. Set the width/height, alignment, border radius, and padding you want around your entire poll.
- 💡 If your landing page has a background that you want to be the background of your poll, it may look best to set your poll container background type to 'None'. If your landing page background is busy, try using a poll container with a smaller width & height so the background shows behind it.
Round Settings:
- Vote progression: Choose whether voters will automatically advance from one question to the next upon voting, or cast their vote and manually click a ‘Next’ button. If you select 'Manual Advance', you'll see design options to style the 'Next' button.
- 💡 Auto advance is one-click voting. Manual Selection will allow a user to change their answer before submitting.
Question Settings:
- This is where you’ll style the question of your poll. Choose font, color, size, alignment, and spacing. Each question is styled separately, which gives you the flexibility to customize the font size based on the length of your question.
💡 Creating a round with multiple questions? Make things easier by copying styles! Once you design the question or option settings, you can copy and paste the Question Settings and Option Settings from one question to another within your round. Just click the three dots to the right of your Question or Options.
💡 Created a design you love, and want to use it in another Round? We recommend Duplicating your Round in the Setup tab and updating the questions, to bring all of your customizations with it.
Option Settings:
This is where you can customize each state of your poll.
- Open: What your poll looks like before someone has voted
- First choose a layout. You can choose to show text only, image only, or image & text. (If you need to upload or change images, you'll do that on the 'Setup' tab.) Depending on what Content Layout you pick, you’ll see corresponding style options below to customize everything from the font and colors, to image size and position.
- 💡 Looking for the right layout? Check out the option to customize your “Option Group Layout” to put your options in a stack, grid, or wrapped
- Post-Vote: What your poll looks like after someone has voted
- You have total control of what you want to show your voters after they vote, and how you want to lay it out on screen. First, drag & drop the items you want to show on your poll. Then, organize them in rows. You can choose to show the vote bar (that scales as people vote), text and/or image of each option, or the unit (percentage of the vote).
- Click the gear next to each row to control alignment and spacing. If you want to add space in between elements (for example, you want some breathing room between your image and vote bar) use the padding controls in the 'Image' section.
- 💡 There are so many dynamic and creative ways to display your results! Try putting the text & percentage inside the vote bar for a clean look. Or stack your image and vote bar into separate rows. Check out our template packages for inspiration.
- Once you have your layout set, you'll see options to customize each corresponding piece of your layout below.
We populate your display with randomized vote totals to make it easier for you to design. Don't worry...this is just test data! It won't impact your poll or analytics.
- Closed: What your poll looks like when the round has ended, and the poll is no longer open for voting
- This is where you can style the winner of the poll to make it stand out, including border, color, font, and size.
On-Screen Display
Fullscreen, Lower Third, or Tombstone Settings:
- Aspect ratio: set the screen size for your results display. The screen size should match the aspect ratio of the screen you plan to run this display on, whether it’s your broadcast, livestream, or stadium screen. By default, we’ll start with 16:9.
- Show QR Code: Toggling this on will add a QR code to your display. We recommend putting a QR code on your display so viewers & fans have easy access to participate in your poll!
⚠️ Once you publish your poll, don't forget to come back here and update the destination of your QR code! If you're using a Tagboard Page, we'll make it easy for you to copy & paste the Page URL and get full analytics.
- Design: This is where you can choose a background color or image, and add a poll container (think of this like a smaller background that only goes behind your poll and can give your display even more depth)
- Lower Third & Tombstone:
- The grey outline shows you the edges of the overlay graphic. By default, the background is set to "None" which means everything outside of the grey line will be transparent when you go live. If you want to use a Chromakey, set the Background Type to "Color"; we recommend #0F0 for chroma green.
- Use the safe zone to size and position your overlay graphic in the right spot.
Question Settings:
- This is where you’ll style the question of your poll. Choose font, color, size, alignment, and spacing. Each question is styled separately, which gives you the flexibility to customize the font size based on the length of your question.
Option Settings:
This is where you can customize each state of your poll. You’ll be able to animate between each state in Producer to make your display dynamic.
- Open: What your on-screen display will look like before displaying any results. This is a great initial visual to show on screen during a call to action so viewers & fans can scan the QR code and participate in your poll.
- First choose a layout. You can choose to show text only, image only, or image & text. (If you need to upload or change images, you'll do that on the 'Setup' tab.) Depending on what Content Layout you pick, you’ll see corresponding style options below to customize everything from the font and colors, to image size and position.
- 💡 Looking for the right layout? Check out the option to customize your “Option Group Layout” to put your options in a stack, grid, or wrapped
- Results: What your on-screen display looks like with results. This will continue to live update as people vote. (💡 This is the default setting when you go live in Producer, so it's the most important one to customize!)
- Just like the Interactive Poll display, the Option Layout lets you decide how you want to show your real-time results. Drag & drop the items you want to include on your display, and organize them into rows. Choose to show the vote bar (that scales as people vote), text and/or image of each option, or the unit (percentage of the vote).
- Click the gear next to each row to control alignment and spacing.
- Once you have your layout set, you'll see options to customize each corresponding piece of your layout below.
- Final: What your on-screen display looks like when the round has ended, the poll is no longer open for voting, and a winner has been chosen.
- This is where you can style the winner of the poll to highlight it on your display, including border and font.
Adding Elements to your Layouts
You can add additional elements to your Poll or On-Screen Layouts, including an Image, Text, or a Button. This gives you more flexibility when designing your Layouts!
The most common use case is using an Image element to add a Sponsor Logo.
💡 Need more creative inspo? Try out a "Caption This" or "Name this Player" poll! These are great examples where you'd want one highlight image on your poll, versus individual images for each option.
Once your Layouts are designed, it's time to Publish your Poll. Click the 'Publish' tab at the top, to move to step 3.