Creative CTA

In this article, we're going to discuss the Creative CTA Element and its settings. The Creative CTA Element can be used to add a call to action in pages created in either Cornerstone or Pro's Content Builder (can also be used in Footer and Header as well). So let's dive in!

  1. Setup
  2. Design Settings
  3. Text Setup
  4. Graphic Setup
  5. Interactive Content Setup
  6. Particle Setup
  7. Customize
  8. Summary

The Creative CTA element adds a call to action on the page. To add the Creative CTA Element, simply search for "Creative CTA" and drag "Creative CTA" to the canvas.

Creative CTA Add

CTA stands for Call to Action.

Creative CTA Front

Setup

The setup control group contains the option to set up the Creative CTA element initially.

Creative CTA Setup
  • Base Font Size - Use this option to set the base font of the element.
  • Width & Height - Use these options to set the width and height of the element.
  • Min Width & Height - Use these options to set the minimum width and height of the element.
  • Background - Use this option to set the background of the element in normal and hover mode.

The Link Setup consists of necessary controls to have an anchor on the Creative CTA element. There are three kinds of anchor links possible to setup:

  • URL: Use this anchor type to link to a website or another page of the current website.
  • Email: Use this anchor type to open up the mail client of the user and set the proper email and subject.
  • Phone: Use this anchor type to add a phone number. If the device that the visitor uses has the call capability, the phone screen with the phone number already added will open up.

URL

Creative CTA Link URL

Enabling the URL mode of a link setup is done by clicking the anchor link icon. You will be presented with the URL input which you can add the URL of the website which you want to link to. The Preview input will show how it will be added in the actual HTML code. Check the New Tab checkbox if you want to have the link opened in a new browser tab. Check the nofollow checkbox if you don't want the search engines to sniff the link. The nofollow is used when we link to an external website usually.

Email

Creative CTA Link Email

Enabling the Email mode of a link setup is done by clicking the envelope icon. Add the Email Address into the Email input and the subject of the email into the Subject input. The preview input shows how the link will be added in HTML. Clicking the link with an email setup will open up the Email Client software of the visitor and will fill in the recipient Email Address and Subject of the email.

Phone

Creative CTA Link Email

Enabling the Phone mode of a link setup is done by clicking the phone icon. Add the Phone Number into the Phone input. The preview input shows how the link will be added in HTML. Clicking the link with a phone setup will open up the phone dialer screen of the user's device if the user owns a device that has that capability.

Flexbox

The Flexbox section contains controls to set the positioning of the Creative CTA using the CSS Flexbox display.

Creative CTA Flexbox
  • Child Placement: Use this option to decide if the items of the Creative CTA element should be laid out vertically (Column) or horizontally (Row).
  • Reverse: Enabling this option will cause the Creative CTA elements to be laid in a reverse manner.
  • Wrap: Enable this option to wrap the Creative CTA elements when there is not enough space in smaller devices.
  • Align Horizontal: Use this option to layout the Creative CTA elements horizontally.
  • Align Vertical: Use this option to layout the Creative CTA elements vertically.

Click here for more information about the Flexbox display.

Design Settings

The design settings in Creative CTA element consists of the control group to fine-tune the element design-wise.

Margin

Use this option to set the margin of the Creative CTA. You can change the settings for all the sides of the Creative CTA or modify them individually.

Creative CTA Element Margin

Padding

Use this option to set the padding of the Creative CTA. You can change the settings for all the sides of the Creative CTA or modify them individually.

Creative CTA Element Padding

Border

Use this option to set the border of the Creative CTA. You can set the style, width and color of the border on all sides or each side individually.

Creative CTA Element Setup Border

Border Radius

Use this option to set a border-radius for the Creative CTA. You can set the curve on all sides or set them individually.

Creative CTA Element Setup Border Radius

Box Shadow

You can set a shadow over the Creative CTA using the box-shadow control group.

  • X-Offset - Use this option to set the X offset of the shadow in the Creative CTA.
  • Y-Offset - Use this option to set the Y offset of the shadow in the Creative CTA.
  • Blur - Use this option to set the intensity of the blur effect in the Creative CTA.
  • Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the Creative CTA.
  • Color - Use this option to set the color of the Creative CTA shadow.
Creative CTA Element Setup Box Shadow

Text Setup

You can have text next to the icon inside the Creative CTA element by enabling the Text Setup option.

Creative CTA Text Setup
  • Enable - Use this option to enable or disable the text section of the Creative CTA element.
  • Primary Text - Use this option to add the primary text of the Creative CTA element which shows with a larger font.
  • Secondary Text - Use this option to add the secondary text of the Creative CTA element which shows with a smaller font.
  • Spacing & Order - Use this option to set the spacing between the primary and secondary text. In the standard mode, primary text is above the secondary text, but if you check the Reverse checkbox the order will be reversed, and secondary text will sit above the primary text.
  • Interaction - Use this option to set an animation while hovering over the Creative CTA element. The animation options are:
  • None
  • Slide Top
  • Slide Left
  • Slide Right
  • Slide Bottom
  • Scale Up
  • Scale Down
  • Flip X
  • Flip Y
  • Overflow - Check the Hidden checkbox if you want to hide the text if it goes beyond the limits of the Creative CTA element.

Text Margin

Use this option to set the margin of the Creative CTA element text area. You can change the settings for all the sides of the Creative CTA element or modify them individually.

Creative CTA Text Margin

Primary Text Format

You can use this control group to set the format of the primary text in the Creative CTA element.

Creative CTA Primary Text Format
  • Font Family - Use this option to set the font of the Creative CTA element primary text.
  • Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
  • Font Size - Use this option to set the size of the font.
  • Letter Spacing - Use this option to set the spacing between letters.
  • Line Height - Use this option to set the spacing between each line.
  • Font Style - Use this option to decide if you want to have a normal or italic style.
  • Text Align - Use this option to set the alignment of the text. Possible values are left, center, right, and justify.
  • Text Decoration - Use this option to force an underline or linethrough style.
  • Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
  • Text Color - Use this option to set the color of the text.
Creative CTA Primary Text Format 2

Primary Text Shadow

The primary text-shadow control group contains settings to set a text-shadow for the Creative CTA element primary text.

Creative CTA Primary Text Shadow
  • X-Offset - Use this option to set the X offset of the text-shadow.
  • Y-Offset - Use this option to set the Y offset of the text-shadow.
  • Blur - Use this option to set the intensity of the blur effect in the text-shadow.
  • Color - Use this option to set the color of the text-shadow.

Secondary Text Format

You can use this control group to set the format of the secondary text in the Creative CTA element.

  • Font Family - Use this option to set the font of the Creative CTA element secondary text.
  • Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
  • Font Size - Use this option to set the size of the font.
  • Letter Spacing - Use this option to set the spacing between letters.
  • Line Height - Use this option to set the spacing between each line.
  • Font Style - Use this option to decide if you want to have a normal or italic style.
  • Text Align - Use this option to set the alignment of the text. Possible values are left, center, right, and justify.
  • Text Decoration - Use this option to force an underline or linethrough style.
  • Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
  • Text Color - Use this option to set the color of the text.

Secondary Text Shadow

The secondary text-shadow control group contains settings to set a text-shadow for the Creative CTA element secondary text.

  • X-Offset - Use this option to set the X offset of the text-shadow.
  • Y-Offset - Use this option to set the Y offset of the text-shadow.
  • Blur - Use this option to set the intensity of the blur effect in the text-shadow.
  • Color - Use this option to set the color of the text-shadow.

Graphic Setup

The graphics setup control group gives you options to enable and set up the graphic icon of the Creative CTA element.

Creative CTA Graphic Setup
  • Enable - Use this option to enable or disable the icon of the Creative CTA element.
  • Type - Use this option to decide if the Creative CTA element graphic type should be Icon, Image, or Burger. There will be different control groups depending on the graphic type selection.
  • Icon & Img Interaction - Use this option to set up an animation for the Creative CTA element graphic on mouse hover. Available options are:
  • None
  • Scale Up
  • Scale Down
  • Flip X
  • Flip Y

Graphic Margin

Use this option to set the margin of the Creative CTA element graphic. You can change the settings for all the sides of the Creative CTA element graphic or modify them individually.

Creative CTA Graphic Margin

Graphic Icon

Use this option to fine-tune the graphics icon of the Creative CTA element. This option will show if you set the graphics type of the Creative CTA element to the icon.

Creative CTA Graphic Icon
  • Font Size & Secondary - Use this option to set the base font for the graphic icon of the Creative CTA element, and check the Secondary checkbox if you want to change the icon to another one while hovering the mouse over the Creative CTA element.
  • Width & Height - Use these options to set the width and height of the Creative CTA element graphic icon.
  • Primary & Secondary - Use this option to select the primary and secondary icon of the Creative CTA element graphic. The secondary option will be available if you check the secondary checkbox in the Font Size & Secondary option.
  • Color - Use this option to set the color of the Creative CTA element icon in normal and hover mode.
  • Background - Use this option to set the background of the Creative CTA element icon in normal and hover mode.

Graphic Icon Border

Use this option to set the border of the Creative CTA element graphic icon. You can set the style, width and color of the border on all sides or each side individually.

Creative CTA Graphic Icon Border

Graphic Icon Border Radius

Use this option to set a border-radius for the Creative CTA element graphic icon. You can set the curve on all sides or set them individually.

Creative CTA Graphic Icon Border Radius

Graphic Icon Box Shadow

You can set a shadow over the Creative CTA element graphic icon using the box-shadow control group.

Creative CTA Graphic Icon Box Shadow
  • X-Offset - Use this option to set the X offset of the shadow in the Creative CTA element.
  • Y-Offset - Use this option to set the Y offset of the shadow in the Creative CTA element.
  • Blur - Use this option to set the intensity of the blur effect in the Creative CTA element.
  • Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the Creative CTA element.
  • Color - Use this option to set the color of the Creative CTA element shadow.

Graphic Icon Text Shadow

The primary text-shadow control group contains settings to set a text-shadow for the Creative CTA element graphic icon.

Creative CTA Graphic Icon Text Shadow
  • X-Offset - Use this option to set the X offset of the text-shadow.
  • Y-Offset - Use this option to set the Y offset of the text-shadow.
  • Blur - Use this option to set the intensity of the blur effect in the text-shadow.
  • Color - Use this option to set the color of the text-shadow.

Graphic Image

This option will appear if you select the image as the graphic type.

  • Max Width - Use this option to set the maximum width of the Creative CTA element graphic image.

Primary Graphic Image

The Primary Graphic Image control group is to set the image for the Creative CTA element graphic.

  • Retina & Dimensions - Retina support is enabled out the box. Click the Eye to disable the Retina support. Also supports options to set the width and height of the image.
  • Source - The image to be used. Click to select an image from the WordPress media library or upload a new one.
  • Alt Text - The alternative text for your image. Make sure to set this for screen readers!

Secondary Graphic Image

The Secondary Graphic Image control group is to set the image for the Creative CTA element graphic on hover. The control group has the same options as the Primary Graphic Image except the enable/ or disable checkbox.

Interactive Content Setup

The Creative CTA element changes it's content and the graphic while the use hovers over the element. The following options are to fine-tune the element in the hovered mode.

Creative CTA Interactive Content Setup
  • Enable - Use this option to enable or disable the interactive text section of the Creative CTA element.
  • Primary Text - Use this option to add the interactive primary text of the Creative CTA element which shows with a larger font.
  • Secondary Text - Use this option to add the interactive secondary text of the Creative CTA element which shows with a smaller font.
  • Spacing & Order - Use this option to set the spacing between the interactive primary and interactive secondary text. In the standard mode, interactive primary text is above the interactive secondary text, but if you check the Reverse checkbox the order will be reversed, and interactive secondary text will sit above the interactive primary text.
  • Interaction - Use this option to set an animation while hovering over the Creative CTA element.

Interactive Primary Graphic Image

The Interactive Primary Graphic Image control group is to set the image for the Creative CTA element graphic on hover.

  • Retina & Dimensions - Retina support is enabled out the box. Click the Eye to disable the Retina support. Also supports options to set the width and height of the image.
  • Source - The image to be used. Click to select an image from the WordPress media library or upload a new one.
  • Alt Text - The alternative text for your image. Make sure to set this for screen readers!

Interactive Secondary Graphic Image

The Secondary Graphic Image control group is to set the image for the Creative CTA element graphic on hover. The control group has the same options as the Primary Graphic Image except the enable/ or disable checkbox.

Particle Setup

Particle setup group contains the controls to the initial setup of the interaction effects. Following is the detailed information for each setting:

Creative CTA Particle Setup
  • Enable - Use this option to enable the interaction particle.
  • Location - Use this option to set the position of the particle in respect with the element that it is applied to. Available options are:
  • Center
  • Top
  • Left
  • Right
  • Bottom
  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right
  • Placement - Use this option to decide if you want to have the particles overlap with the element or limited inside the element.
  • Scale - The scale option will determine how the particle will expand or shrink in transition. The available options are:
  • None - Use this option if you do not want the particle to scale in transition.
  • Scale All - Use this option to scale the particle both vertically and horizontally in transition.
  • Scale X - Use this option to scale the particle horizontally in transition.
  • Scale Y - Use this option to scale the particle vertically in transition.
  • Delay - The delay option will determine how long will it take the transition to complete. The value of this option in seconds or milliseconds depends on the selection of the value unit.
  • Transform Starts From - Use this option to set where the transition of the particle should start. Available options are:
  • Center
  • Top
  • Left
  • Right
  • Bottom
  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right

Particle Style

Particle style group contains the controls to fine-tune the interaction effects. Following is the detailed information for each setting:

Creative CTA Particle Style
  • Width & Height - Use this option to set the width and the height of the particle. The value unit can be Calc, PX, REM, EM, and %.
  • Radius - Use this option to set the radius of the particle. The same units can be used for this option values as the width/height options.
  • Color - Use this option to set the color of the particle.
  • Inline CSS - Use this option to add custom CSS which will be applied to the article. This option is for the advanced users that want an extra layer of customization which they can not find in the styling options of the particles.

Primary and Secondary Particles

The same setup and style options which we described are available for primary and secondary particles. You basically have two sets of particle options to get innovative and create stylish interactions.

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

  • ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.
Custom Attributes

Summary

To sum up, we've discussed the Creative CTA Element. We've discussed that a Creative CTA Element is an easy tool for adding a call to action on a page and we've learned how to change it's content and design and delved into details of the Creative CTA Element settings.

See something inaccurate? Let us know