Black Friday Sale

Upto 40% OFF

Discount Auto Applied

Call To Action(CTA)

The “Call To Action” Element is a tool that offers a group of features to enhance the user experience.

The hover animation feature adds a touch of interactivity to the Element, allowing users to highlight and interact with the content and box dynamically. Additionally, this element’s ribbon feature provides an eye-catching way to display important information or promotions.

The Call To Action Element features the following controls:

Content

Image

  • Layout: Choose from Split or Cover.
    • Position: Select from Vertical, horizontal, and reverse layout options(for Split layout only).
  • Choose Image: Select the image and set the size.
  • Hide Image: Enable the option to hide the image if needed.
Call To Action: Split Layout Settings
Call To Action: Split Layout Settings

Content

  • Graphic Element: Choose from a list of options, from Image, icon, or none.
  • Image
    • Image: Select an image for the content section, and set its size.
  • Icon
    • Primary Icon: Choose from the given options.
  • Title: Enter the title.
  • Tag: Select the HTML tag for title.
  • Sub Title: Set the subtitle.
  • Tag: Select the HTML tag for subtitle.
  • Description: Enter the description.
Call To Action: Content Settings
Call To Action: Content Settings

Button

  • Primary Button: Enter the text for the primary button.
  • Primary Icon: Choose from the given options.
  • Link: Select from a range of choices to associate with the button.
  • Position: Select the position of the icon, either right or left.
  • Gap: Set the gap between the icon and the button text.
Call to Action: Primary Button Settings
Call to Action: Primary Button Settings
  • Secondary Button: Enter the text for the secondary button.
  • Secondary Icon: Choose from a list of Fontawesome – Brands, Fontawesome – Regular, or Fontawesome – Solid, Themify, and Ionicons.
  • Link: Select from a range of choices to associate with the button.
  • Position: Select the position of the icon, either right or left.
  • Gap: Set the gap between the icon and the button text.
Call To Action: Secondary Button Settings
Call To Action: Secondary Button Settings

Ribbon

  • Show: Enable the option if desired.
    • Text: Enter the text for the ribbon.
    • Position: Select either left or right.
Call To action: Ribbon Settings
Call To Action: Ribbon Settings

Box Style

Box

  • Width: Set the width in %.
  • Height: Set the height in px.
  • Box Alignment: Select from Start, Center, or end.
  • Border: Set the border of the box.
  • Box Shadow: Add a shadow around the box.

Image

  • Height: Set the height of the image in px(applicable for split layout only).
  • Width: Set the width of the image in %(applicable for split layout only).
  • Image Alignment: Set the alignment of the image(applicable for split layout only).
  • Image padding: Set the padding of the image.
  • Image background: Set the background of the image.
Call To Action: Box Style(Image) Settings
Call To Action: Box Style(Image) Settings

Hover

  • Hover Animation: Select the hover animation for the box.
  • Transition Duration: Set the duration of the transition.

Graphic Element Style

  • Hover Animation: Select the hover animation for the graphic element.
  • Duration: Set the duration to animate.
  • Spacing: Set the spacing of the graphic element to the content.
  • Border: Set the border.
  • Padding: Set the padding.
  • Size: Set the size of the element.
  • Primary Color: Set the color(applicable on the icon only).
Call To Action: Graphic Element Style Settings
Call To Action: Graphic Element Style Settings

Content Style

  • Background Color: Choose the background color for the content.
Call To Action: Content Style(Background) Settings
Call To Action: Content Style(Background) Settings
  • Border: Set the boder properties for content box.
  • Box Shadow: Set the box shadow.
  • Alignment: Set the alignment of content(applicable for split layout).
  • Vertical Alignment: Enter the vertical position of the content(applicable for split layout).
  • Vertical Position: Enter the vertical position of the content(applicable for cover layout).
  • Horizontal Position: Enter the horizontal position of the content(applicable for cover layout).
  • Content Padding: Set the padding.
  • Content Gap: Set the gap between content using this format:(10px).
  • Content Margin: Set the margin of content.
Call To Action: Content Style Settings
Call To Action: Content Style Settings

Title

  • Typography: Set the typography of the title.
  • Spacing: Set the spacing of the title.
  • Padding: Set the padding of the title.

Sub Title

  • Typography: Set the typography of the sub-title.
  • Spacing: Set the spacing of the subtitle.
  • Padding: Set the padding of the subtitle.

Description

  • Typography: Set the typography of the description.
  • Spacing: Set the spacing of the description.
  • Padding: Set the padding of the description.

Hover Effects (Only applicable on Default layout)

  • Hover Animation: Select the hover animation.
  • Transition Duration: Set the duration of the transition.

Button Style

  • Icon Size: Set the size of the icon.
  • Icon alignment: Select from Start, center, or end alignment.
  • Padding: Set the padding of a button.
  • Position: Select from Vertical, horizontal, and reverse options.
  • Spacing: Set the spacing between the buttons.
Call To Action: Button Style Settings
Call To Action: Button Style Settings

Primary

  • Typography: Set the typography of the button.
  • Color: Select the color for Primary button.
  • Background Color: Set the background color for the primary button.
  • Border: Set the border properties for the button.
  • Box Shadow: Set the box shadow for primary button.
Call To Action: Primary Button Style Settings
Call To Action: Primary Button Style Settings

Secondary

  • Typography: Set the typography of the button.
  • Color: Select the color for Secondary button.
  • Background Color: Set the background color for the secondary button.
  • Border: Set the border properties for the button.
  • Box Shadow: Set the box shadow for secondary button.
Call To Action: Secondary Button Style Settings
Call To Action: Secondary Button Style Settings

Ribbon Style

  • Background Color: Set the background color for the ribbon.
  • Typography: Set the typography.
  • Distance: Set the distance of the ribbon(Max Value is 50).
  • Box Shadow: Add a shadow around the box.
Call To Action: Ribbon Style Settings
Call To Action: Ribbon Style Settings

Overlay Effects

  • Overlay: Set the overlay.
  • CSS filter: Set the CSS filter.
  • Blend mode: Choose the blend mode.
Call To Action: Overlay Effects Settings
Call To Action: Overlay Effects Settings

Hover

Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the box.

Note: In the default layout, the overlay effects will be applied to the entire box, while in the split layout, it will only be applied to the image.

Call To Action: Hover Overlay Effects Settings
Call To Action: Hover Overlay Effects Settings

Click here to check out a demo page of the Call To Action element.