Add a call to action block (or advert)

Prerequisites

• Open an existing page or create a new one. For example, see our knowledge base article, Add a new page.

Procedures

Add a call to action content block to your page

1. On your page, select ADD CONTENT, and in the Content dialog box, select the Call to action block.
2. Scroll down, and in the Title box, give your call to action advert a meaningful name, and then select SAVE.

Background

Background color

To set the Background color of your block, select the color of your choice. The color picker lists pre-configured colors with 100% opacity or fully opaque.

1. Brand level colors
   Your brand's colors are configured at the brand level for quick selection to stay on brand.
2. Color gradient panel
   A mixture of two linear color gradients. Once you select a color from the palette, you can use this panel to pick the color you want.
3. Sample color
   Shows the color you've chosen, and that will be applied.
4. Hue slider
   A linear gradient of colors. You can choose the primary hue you want.
5. Opacity slider
   Controls the transparency of the color. Use it to brighten or darken your chosen color.

6. Color mode
   If you know the HEX (Hexadecimal) code you want to use, you can enter it here. You also have the option to toggle to two other formats.
   RGBA - (red, green, blue, alpha) decimal values.

   

   HSLA - (hue, saturation, lightness, alpha) values.

   

Background image

To use an image for your advert's background, select UPLOAD and find the image you want. When you upload a picture, the advert is your picture's size to the page's full width. Therefore, you might want to ensure the image you use is the size you want for your advert. You can also upload a GIF in your advert.

The file size limit for images and GIFs is 2MB.

Icon

To use an icon from the Icon list, choose the icon you want to use.

When you use an icon, your call to action title won't appear, and the text color is white by default.

Configure your Text box attributes

1. Under the Text box section, from the Text color picker, choose a color for your text.
2. From the Text box color picker, choose a color for your text box.
3. Under the Text box width section, move the slider to set the width for your text box. For example, 10% or 100% of the width of the advert. This image shows the text box with 10% set to the width and the start set to 50%.
4. Under the Text box horizontal start section, move the slider to set how far across your text box you want your text to start. For example, to place the start of the text box halfway across, select 50%.
5. From the Text box vertical alignment list, select where you want your text box to appear within your advert.
6. From the Content alignment list, select how you want your text aligned in the text box.

Add text Content to your advert and choose if you want to show a button

1. In the Title box, type in a title for your advert.
2. In the Sub title box, type in the subtitle for your advert.
3. If you want to add a button to your advert instead of just selecting the entire advert, select the Show button option, and then in the Button label box, type in the text you want to appear on your button.
4. Decide what happens when your users select the button or advert:
   

   If you selected the Show button option, the page you select here opens when the user selects the button. However, if you don't select the Show button option, the page opens when the user selects the advert itself.

Decide what happens when a user selects the advert

Under the Primary action section, under the Type of action options, select if you want to open a:

• Link to Applaud Cloud page
  1. From the Page list, select the page you want to open.
  2. If you want to open the page in a dialog box, select the Open in a modal window option.
• Link to an external URL
  1. In the External URL box, type in the website address of the page you want to open.
  2. If you want to open the page in a dialog box, select the Open in a modal window option.

Additional settings

Preferred width

To configure how wide you want your block, from the Preferred width list, select an option:

• Automatic - Spans the width of the column on the page depending on what page layout option you have selected.
• Full-width - Spans the width of all columns but doesn't go beyond the margins on either side of the page unless you select the Edge-to-edge option.
• Two-third - If you have a three-column page layout, this spans across two of the columns. If you have a two-column page layout set, this spans just beyond the first column, but further blocks won't appear above the advert in the second column, only below it.
• Half-width - If you have the three-column page layout, this spans across a column and a half. If you have a two-column page layout, this spans one column.

• To remove any space under your advert, so there is no space between this advert block and the next content block, select the Remove padding underneath advert option.
• To have your advert text appear in the center of your advert when on a small device, select the Center text on small devices option.
• If you have selected "Full-width" from the Preferred width list options, you can make the advert's background image span the page's entire width without leaving any margins on the left or right of the image by selecting the Edge-to-edge option.
  • • • Once you select the Edge-to-edge option from the Image alignment list, select the direction you want the background image to align to.
• To add an overlay color gradient to your advert, select the Show overlay option. This image shows a red color gradient at the top of the advert. The Remove padding underneath advert option is selected, and you can see a calendar block underneath.
  1. 1. From the Overlay position list, select the edge where you want to place your overlay color gradient.
     2. From the Overlay color picker, select the color of your color gradient.

Visibility

Hide block on certain screen sizes

If you want to prevent this block from being displayed on specific devices from the Hide on list, select those conditions where you want to hide this block.

Hide or show this block using filters

Show or hide this content block when certain conditions are met. For example, show to a manager but hide from a non-manager. You can base these filters on anything, such as job role, department, or location.

1. Select the Hide or show this block using filters option.
2. Under the Conditions section:
   • Hide when ALL of the following conditions are met (and) - If you want to hide this block when the selected data meets every condition you add, add a condition under this section.
   • Hide when ANY of the following conditions are met (or) - If you want to hide the block when the selected data meets just one of several conditions, add your conditions under this section.
3. From the Property list, select the model's property.
4. From the Criteria list, select the condition you want the property value to meet for the block to be hidden.
5. In the Value box, enter the property's value you want the condition to meet for the block to be hidden.

Allow anonymous

To let users who don't sign in to your Applaud tenant view this advert, select the Allow anonymous option.

Finish

Once you have chosen your options, select UPDATE.

See more:

• About the call to action block

Reference:

• Content dialog box
• Settings: (Call to action)