Listen
Colors, fonts, page layout, images. Everything that makes your event look like it came from your organization rather than from us.
The Styling phase is where you control how your event looks to the people taking it. You can set the colors, the font used for headers, how content sits on the page, and the images that appear on your event pages. Your color, font, and layout choices apply across the whole event, while images can be set page by page.
This article walks through
Access the styling settings
Navigate to the Styling phase for the event you want to style. There are two ways in.
From within the Event Builder
- Click Styling in the left panel.
From Listen
- In the Live Events section or the All Events section, click Manage Event for the event you want to work with.
The Event Builder opens, displaying the Overview page. - In the left panel, click Styling.
The Styling page appears.
Colors
You can use the Colors settings to modify colors for several elements of your event. Choose a color from the color box, a color slider, or use the eye dropper to click a color you want to use. You can also type in a color code if you have specific colors for your brand, either RGB, which stands for red, green, blue, or hex, the six-character code like #00B5A5 that most brand guides list. Hover over the information (i) icon to see a description of each color option.
Change color settings
- In the Color section, click a color to display the color settings options.
- Specify a new color for each event element you want to change.
Color box Click the circle in the top-right corner of the color box and drag it to find the color you want. Dragging the dot around the box is the quickest way to land on the hue and saturation you are after. |
Eye dropper Click the eye dropper icon, then click on a color anywhere on your desktop or an open application or document. |
Color slider Drag the circle in the color slider to change the color. |
RGB values Type the red, green, and blue values in the number boxes. Each one is a number from 0 to 255. |
Hex number Click the up or down arrow in the RGB section twice to display the HEX option. Double-click the current hex code, then type a new one. Make sure to precede it with the pound symbol (#), like #00B5A5. This is usually the easiest option, since a hex code is what most brand guides give you. |
Note: Your changes save automatically.
Text formatting
The Text Formatting settings specify the font for your event header. Currently, only the Proxima Nova font is available, and it is set for your event. More font options will be available in future updates.
Page layout
The Page Layout settings specify content alignment, display orientation (landscape or portrait), and whether progress indicators appear at the top of event pages.
Specify content alignment
The Content Alignment options determine the alignment of content on pages that do not contain questions, such as the Welcome page and the Thank You page.
- In the Content Alignment section, select Left, Center, or Right.
Specify layout (orientation)
The Layout options specify whether questions display on screen in a landscape or portrait orientation.
The Landscape option displays multiple questions per page, in a horizontal format. Landscape is the default setting.
The Portrait option displays one question per page, in a vertical format.
You can change the layout while your event is in draft status, but not after it is active.
- In the Layout section, select Landscape or Portrait.
Specify progress indicators
You can use the Progress options to add either page numbers or a progress bar at the top of the event pages, but not both. You can also choose not to display a progress indicator.
- In the Progress section, click Page Numbers, Progress Bar, or None.
Note: Your changes save automatically.
Images
You can use the Images settings to upload your own images for specific event pages. Hover over the information (i) icon to see a description of each option.
Note: Perceptyx provides default images for several of the pages. You can use the default images or replace them with your own images.
Change image settings
- Click Choose File for an item or page, navigate to the image file, then double-click the file name to upload.
Images can be no larger than 30MB and must be in .png or .jpg format. - If you want to specify alternative text, click the Alternative Text box, then type the text.
- If you want to remove a default image, clear the Enable Default Image checkbox.
Note: Your changes save automatically.
Recommended image handling
The platform will accept an image up to 30MB, but treat that as the ceiling rather than the target. Oversized images slow down page loads for participants and are one of the most common reasons an email launch runs slowly. A few minutes spent compressing an image before you upload it saves everyone that trouble.
File size
|
File type
|
Resolution Save images for the web, not for print. A print-resolution file is many times larger than it needs to be on a screen and will not look any better once it is there. Export at the ideal pixel dimensions listed below rather than uploading the original at full size. |
Composing a background image
An image can hit every number above and still not look right on the page, because two things happen to it once it is up: it gets cropped to fit the screen, and part of it gets covered by your content. Plan for both and you will usually get it right the first time.
1. Expect the edges to be cut off
The image is scaled up to fill the whole page rather than shrunk to fit inside it, so some of it always falls outside the screen. How much, and from which side, depends on the participant's browser window. A wide, short window trims the top and bottom. A narrow or tall one trims the sides. There is no single crop you can design for.
So treat the outer edge of the image as expendable. Leave a margin of roughly 10 percent all the way around with nothing important in it, and keep logos, faces, and text well inside that. If a logo sits tight in a corner, assume it will get clipped for somebody.
2. Work out what your content will cover
On the Welcome, Language, Thank You, and PIN pages (the PIN page is where participants enter a personal identification number, if your event uses one), your content sits in a container on top of the image, and whatever it covers, nobody sees. You decide where it lands with the Content Alignment setting in Page Layout, so pick the two together rather than one and then the other.
- Center, the default, covers roughly the middle half and leaves both sides showing. Keep the focal point out toward one side rather than dead center.
- Right covers the right side, so keep the focal point on the left.
- Left covers the left side, so keep the focal point on the right.
If you already have an image you want to use, the setting is the easier of the two to change. Preview the page after you pick, since that is the quickest way to see what is actually showing.
If Perceptyx builds your event for you: content usually sits on the right, so send a left-oriented image unless your project manager tells you otherwise.
3. Go quieter than you think you need to
A calm image works better than a striking one here, because text has to sit on top of it and stay readable. A faded image, sometimes called reduced opacity, or one with softer light and dark areas, is a better background than a bold photograph, and readability matters more on these pages than the picture does.
Avoid baking words into the image, too. Text inside a graphic cannot be translated for a multi-language event, screen readers cannot read it, and it is the first thing to get clipped or covered. Put wording in the page content instead, where you can edit it.
Perceptyx graphics requirements
Perceptyx can handle many types of logos and images, and we can generally work with your team to adjust as needed. To create the best experience, here are the optimal specifications.
Logos
|
Background and page images
|
Banners for survey invite and reminder emails
|
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article