How to Customize the CTA Card Design Element

NOTEThis Design Element is still in development and will be released soon.

This article will demonstrate how to customize the CTA Card Design Element and list its features.

TABLE OF CONTENTS

• Prerequisites
• What Is a CTA Card?
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Insert the CTA Card Design Element
  • Step 3: Edit the Content
  • Step 4: Choose a CTA Card Style
  • Step 5: Customize the Design
  • Step 6: (Optional) Choose a Background
  • Step 7: Save
• CTA Card Features
  • A. Style Tab
  • B. Content Tab
  • C. Design Tab
  • D. Background Tab
  • E. Advanced Tab
  • F. Custom CSS Tab

Prerequisites

• You must have the ShortPoint SPFx version 8.6.0.0 or later installed in your SharePoint environment.
• You must be a ShortPoint Designer with an active license.

What Is a CTA Card?

Got something important you want your users to notice? The CTA Card Design Element is perfect for highlighting key events and messages! Available in ShortPoint SPFx version 8.6.0.0 and later, this handy Design Element makes it easy to guide your users toward taking specific actions.

With it, you can craft a personalized message with two stunning call-to-action buttons. 

You can also mix and match the design to perfectly fit the branding of your organization.

To top it off, you can add background images or videos to create an even more attention-grabbing effect.

Interactive Tutorial

Click Get Started to learn how to customize the Search Box Design Element:

NOTEYou can remove the buttons by leaving the fields blank. To learn more about the features you can customize for CTA Card, check out CTA Card Features.

Step-by-step Tutorial

Follow the detailed guide below to start using CTA Card:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit.

• Close the Toolbox:

• Click the Edit properties icon:

Step 2: Insert the CTA Card Design Element

• Choose where you want to add the CTA Card and click the plus icon:

• Use the search box to look for CTA Card and click it:

Step 3: Edit the Content

• Go to the Content tab.
• Customize the content according to your preferences.

NOTEYou can remove the buttons by leaving the fields blank. To learn more about the features you can customize for CTA Card, check out CTA Card Features.

Step 4: Choose a CTA Card Style

• Go to the Style tab.
• Choose the style of the CTA Card you prefer.

Step 5: Customize the Design

• Go to the Design tab.
• Customize the look of the CTA Card according to your preferences.

NOTETo learn more about the features you can customize for CTA Card, check out CTA Card Features.

Step 6: (Optional) Choose a Background

• Go to the Background tab.
• Add a background image or video.

Step 7: Save

• Click the eye icon to see your page in real-time:

• Save your changes:

That's it! You now have a CTA Card that can encourage your users to take action.

CTA Card Features

Below are the options you can find in the CTA Card Settings window 

A. Style Tab

The Style tab allows you to choose the style of the CTA Card.

B. Content Tab

The Content tab allows you to edit the content of the CTA Card. It has the following options:

	Enable Icon	when enabled, the icon will be shown.
	Icon	allows you to choose the icon inside the CTA Card.
	Title	allows you to add a CTA title.
	Description	allows you to add a description.
	Button 1 Text	allows you to modify the text inside the first button.
	Button 1 Icon	allows you to choose an icon to display inside button 1.
	Button 1 URL	allows you to add a link to the first button. You can leave this blank if you don't want to add a button.
	Button 1 Linking	allows you to modify how the link will be opened.
	Button 2 Text	allows you to modify the text inside the second button. You can leave this blank if you don't want a second button.
	Button 2 Icon	allows you to choose an icon to display inside button 2.
	Button 2 URL	allows you to add a link to the second button.
	Button 2 Linking	allows you to modify how the link will be opened.

C. Design Tab

The Design tab allows you to customize how the CTA Card will look. It has the following options:

	Color	allows you to modify the primary color of the CTA Card. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Title Color	allows you to modify the color of the title. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Title Font Size	allows you to adjust the size of the title.
	Description Color	allows you to modify the color of the description. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Description Font Size	allows you to adjust the size of the description.
	Primary Button Color	allows you to modify the color of the primary button. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Secondary Button Color	allows you to modify the color of the second button. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Icon Color	allows you to modify the color of the icon. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Shadow Enabled	when enabled, a shadow will surround the CTA Text.
	Vertical Distance	allows you to adjust the vertical distance of the shadow in px or em.
	Horizontal Distance	allows you to adjust the vertical distance of the shadow in px or em.
	Shadow Blur	allows you to adjust the blur effect of the shadow in px or em.
	Shadow Color	allows you to modify the shadow color of the CTA Card. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.

BACKGROUND SETTINGS

	Enable Icon Background	when enabled, the icon background will be shown.
	Icon Background Color	allows you to modify the icon background color. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Icon Background Roundness	allows you to adjust the roundness value of the icon background.

D. Background Tab

The Background tab allows you to add a background image or video. It has the following options:

	Image URL	allows you to add a background image. To insert an image, simply paste the URL or click the folder icon.
	Video URL	allows you to add a background video. To insert an image, simply paste the URL or click the folder icon.

E. Advanced Tab

The Advanced tab allows you to customize the margin values around the CTA Card Design Element. It has the following options:

	Margin Top	allows you to adjust the top margin value in px, %, or em.
	Margin Right	allows you to adjust the right margin value in px, %, or em.
	Margin Bottom	allows you to adjust the bottom margin value in px, %, or em.
	Margin Left	allows you to adjust the left margin value in px, %, or em.

F. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and JavaScript code to customize the CTA Card Design Element. 

NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.

NOTEThe Connect and Visibility tabs are currently unavailable in Live Mode.

Related articles:

• How to Customize the Abbreviation Design Element
• How to Customize the Lead Design Element
• How to Customize the Small Design Element
• How to Customize the Icon Boxes Design Element