Guide: How to design a sign-up unit (legacy)

Use the sign-up unit designer to control how your sign-up unit looks and what it says — background, logo, fonts, colors, headlines, buttons, and legal language — and to add optional elements like a countdown timer or a hidden offer.

What is the sign-up unit designer?

Every sign-up unit is built from the same set of components: content, buttons, colors, and fonts. The designer is where you style those components, and the steps for changing them are the same across all sign-up units.

Options are organized in two groups:

• Brand-level styles — background, logo, and fonts. These affect every page in the unit.
• Page-level styles — copy and settings that apply to a single page, such as the email page or the SMS page.

New sign-up units are pre-designed with your brand's logo, fonts, and color palette, so you can publish one without changing anything. To change those defaults for all future units, see Set up your Brand Kit.

Why design your sign-up unit?

• Match your sign-up unit to your site, so it reads as part of your brand rather than an ad.
• Put your offer front and center — the headline and button copy do most of the work in converting a visitor.
• Design with accessibility in mind. The designer checks your color choices as you work and tells you where to fix problems.
• Keep every page in the flow consistent, from the first screen through the success page.

Before you begin

• Create a sign-up unit, or open an existing one you want to restyle.
• Set up your Brand Kit first if you haven't. Your Brand Kit supplies the defaults the designer starts from.
• Check Specifications for sign-up units for the recommended image dimensions.

Open the sign-up unit designer

Every procedure in this article starts here.

1. Go to Sign-up units in your Attentive account.
2. Create a new sign-up unit, or hover over an existing unit.
3. Click Edit Design.
4. Select the page you want to edit — for example the email page or the SMS page.

As you work, the preview on the right updates with your changes. Click any element in the preview to open its styling options in the left panel.

When you finish a change, click Save changes. When the whole unit is ready, click Schedule and activate.

Find your way around the designer

Most templates include several pages: the email page, and the SMS page. Select a page to edit its copy and page-level styles. 

Why email comes before SMS

Sign-up units collect email addresses before phone numbers. This order uses Attentive's patented two-tap mobile technology to create the smoothest possible sign-up flow and to maximize both email and SMS opt-ins.

Add and remove page elements

To add a page:

1. Open the sign-up unit designer.
2. Click + Add element above the sign-up unit, then choose the element you want.
   • This includes pre-engagement pages
3. Click Save changes.

To remove a page:

1. Open the sign-up unit designer.
2. Click the X next to the page element you want to remove.
3. Click Save changes.

You can also remove and re-add the bubble, SMS, and email parts of the unit. Click the x to remove one and the + to add it back.

Add/edit/remove design elements

Use the left-side menu to add and edit elements

Example - Add a headline:

1. In the left-side menu, click Headlines
2. Edit each headline using the menu that appears.
3. To add a new headline, scroll to the bottom of the menu and click +Add headline
4. To remove, click Remove next to the individual headline 

5. Click Save changes
6. Repeat this process for other elements in the left-side menu

Change the background

1. Open the sign-up unit designer.
2. Go to the Brand styles section.

3. Choose your background.
   • For a solid background, click the Background color field and select a color.
   • For an image background, click Upload in the Image Upload section and choose your image.
4. If you uploaded an image, set the Overlay color and Overlay opacity, then set the Image alignment, Image position, and Layout type.
5. Click Save changes.

Change the logo

1. Open the sign-up unit designer.
2. Go to Brand styles, find the Logo section, and click Upload.
3. Select a .PNG file with a transparent background. Your logo should be 24–48 px tall.
4. (Optional) Change the value in the Height field. The width adjusts automatically to keep the logo in proportion.
5. Click Save changes.

Edit text

1. Open the sign-up unit designer.
2. Find the text you want to change and click it.
3. Enter your new copy in the Text field.
4. Set the size in the Size field.
5. Click Save changes.

Edit the email field and its placeholder text

You can change both the placeholder text that tells visitors what to enter and the alignment of what they type.

1. Open the sign-up unit designer and select the email field.
2. Set Text alignment to Left or Center.
3. In the Placeholder section, enter your placeholder copy.
4. Click Save changes.

Change fonts

1. Open the sign-up unit designer.
2. Find the text whose font you want to change and click it.
3. Find the font option and select a new font from the drop-down. You can preview your change to the right of your screen.
4. Click Save changes.

To upload a custom font or change the fonts all new sign-up units start with, see Set up your Brand Kit.

Change colors

Which areas of color you can change depends on the unit you're editing, but the process is the same for all of them — background, button and border color, and text.

1. Open the sign-up unit designer.
2. Find the Color field you want to change.
3. Enter a hexadecimal code directly in the field, or use the color picker to choose a color.
4. Click Save changes.

To change the default colors all new sign-up units start with, see Set up your Brand Kit.

Style the continue button

1. Open the sign-up unit designer and go to the email page.
2. Select the continue button.
3. Change any of the following:
   • Color — the button fill and its text color.
   • Text — the button copy.
   • Font family and size.
   • Letter spacing — increases or decreases the space between characters in the button copy.
   • Border — adds a border around the edge of the button.
   • Edges (border radius) — rounds the corners of the button instead of leaving them square.
4. Click Save changes.

Show and style the dismiss button

The dismiss button lets a visitor close the sign-up unit. You can show or hide it on your email page and SMS page.

1. Open the sign-up unit designer.
2. Click the Dismiss button section to expand it, then turn the show/hide toggle on.
3. In the Styling section, choose Fill, Outline, Underline, or Custom, then set the matching style options. Background opacity is available only for the Fill and Custom styles.
4. Change the button's text and formatting as needed.
5. Click Save changes.

Show or hide legal language

You can show or hide legal language on an email sign-up unit. This isn't available on an SMS sign-up unit.

1. Open the sign-up unit designer and go to the email page.
2. Click the Legal language section to expand it, then turn the show/hide toggle on.
3. Edit the copy and formatting as needed.
4. Click Save changes.

Check your design before you publish

1. Review the preview on the right for each page in the unit.
2. Fix any accessibility errors. Attentive checks for certain accessibility issues as you design, and displays error numbers showing you where to make corrections. See Override an issue with accessibility.
3. Click Save changes, then click Schedule and activate.

Things to know

• Email-only sign-up units can only collect email addresses from visitors outside the US, or outside any other country where you currently send text messages.
• A pre-engagement page can't be combined with Spin to Win, a countdown timer, or a hidden offer.
• Some styling options, including the background and the close button, aren't clickable in the preview. Edit those from the left panel.
• To apply viewing age restrictions to a sign-up unit, contact Support. If all or most of your content is age restricted, Support can classify your current and future sign-up units as age restricted.