Styling a Link CTA

October 15, 2014 Uberflip Customer Success

Designing and styling your  Link CTAs is a great way to ensure they fit in with the content of your Hub and are consistent with your company's brand standards.

There are 5 basics options you can configure when designing and styling your Link CTAs. They include: (1) Font Color, (2) Button Font Color, (3) Background Color, (4) Button Background Color, and (5) Tagline/Copy Font Size.  Each is outlined in more detail following the screenshot below.

As you work, you can also preview your Link CTA in the preview screen to the right of the options.

(1) Font Color 

You can easily customize the color of the main font on your Link CTAs by choosing a color using our pick tool or by entering a Hex color code. Just click the drop down arrow to get started. 

(2) Button Font Color 

The second default design option allows you to easily customize the color of the "submit" button on your Link CTA by choosing a color using our pick tool or entering a Hex color code. Just click the drop down arrow to get started. 

(3) Background Color 

The third default design option allows you to easily customize the color of the background of your Link CTA by choosing a color using our pick tool or entering a Hex color code. Just click the drop down arrow to get started. 

(4) Button Background Color 

The fourth default design option allows you to easily customize the color of the background of your Link CTA by choosing a color using our pick tool or entering a Hex color code. Just click the drop down arrow to get started. 

(5) Tagline/Copy Font Size

Last but not least, the fifth default design option allows you to easily re-size the size of the text on your Link CTA by dragging the re-size button along the sliding scale to the left or right.

Using Custom CSS to Design Your Link CTAs

If you wish to have more control over the look and feel of your Link CTAs, you can use our Custom Code portal to add Custom CSS. Using Custom CSS, you can: 

  • Change the font on your CTAs;
  • Add background images to your CTAs; 
  • Add icons to your CTAs' buttons; and
  • Change the size and/or shape of your CTAs.

Please note that this section is for developers only and we provide limited support for any Custom CSS modifications you may make to your Hub's Link CTAs.

To add Custom CSS, first click on Appearance in the left menu and then click Custom Code in the top menu of the Appearance page. 

Scroll down past the HTML section to locate the Custom CSS section. The below screenshot, as well as this article, explains in more detail how you can use Custom CSS to integrate images into the background of your Link CTAs.

That's it! 

Ready to start placing your Link CTAs across your Hub?

Click here to learn how to place your Link CTAs.

Previous Article
Configuring a Link CTA
Configuring a Link CTA

Configuring a Link CTA allows you to customize the fields that appear, tailor your messaging, and set a num...

Next Article
Placing a Link CTA
Placing a Link CTA

How to customize the placement of your Link CTAs across your Hub streams and beside your Hub items.

Want to become an Uberflip expert?

Watch a Launch Zone training video!

Watch now