Call to Action Widget (Pro)

The Call to Action Widget is a tool for creating beautiful boxes that combine an image, some text, and a button. The widget uses animations and CSS effects to create user interactions, that appear when the user hovers over the box.


Content

Image

  1. Skin: Choose either the Classic skin or the Cover skin
  2. Layout: (Only shown for Classic skin) Align the image to the left, right or on top of the image

If Classic Skin is chosen the following options are available:

Content

  1. Graphic Element: Choose between None, Image or Icon to display a graphical Element above the Call to Action title
  2. If Image is selected as the Graphic Element:
    Choose Image: Select or upload an image
    Image Size: Set the size of the image, from thumbnail to full, or set a custom size.
  3. If Icon is selected as the Graphic Element:
    Icon: Select an icon from the FontAwesome library
    View: Choose the default icon view, or select Stacked or Framed.
  4. Title & Description: Choose the title and description that appears in the front of the flip box
  5. Title HTML Tag: Set the title’s HTML tag to H1- H6, Div, or Span
  6. Button Text: Enter the text to be displayed on the button
  7. Link: Enter the URL for the button’s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.

Ribbon

Title: Enter the text to be displayed on the ribbon.


Style

Box

  1. Min. Height – Set the minimum height of the whole box
  2. Alignment – Align the content to the left, center or right of the box
  3. Vertical Position – Align the content to the top, center or bottom of the box
  4. Padding – Set the padding for the content

Image

  1. Min. Width: Set the minimum width for the image
  2. Min. Height: Set the minimum height for the image

Content

Title

  1. Typography: Set the typography options for the title
  2. Spacing: Set the amount of space between the title and description

Description

  1. Typography: Set the typography options for the title
  2. Spacing: Set the amount of space between the description and the button

Colors

  1. Background Color: Choose the background color
  2. Title Color: Choose the title color
  3. Description Color: Choose the description color
  4. Button Color: Choose the button color

Button

  1. Size: Select the button size, from Extra Small to Extra Large
  2. Text Color: Choose the color for the button’s text
  3. Background Color: Choose the color for the button’s background
  4. Border Color: Choose the color for the button’s border
  5. Border Width: Set the border width
  6. Border Radius: Set the border radius to control corner roundness

Ribbon

  1. Background Color: Choose the color for the ribbon’s background
  2. Text Color: Choose the color for the ribbon’s text
  3. Distance: Move the slider between 0-50 to set the distance for the ribbon.
  4. Typography: Set the typography options for the ribbon’s title
  5. Box Shadow: Set the box shadow settings for the ribbon

Hover effects

  1. Sequenced Animation: Choose if the animation for the text elements appears sequenced or all at once
  2. Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or down

The following items can be set independently for both the Normal and Hover states

  1. Overlay Color: Choose the overlay color for the image
  2. CSS Filters: Set blur, brightness, contrast and saturation for the image
  3. Blend Mode: (For Normal state) Set a blend mode
  4. Transition Duration (ms): (For Hover state) Set the duration for the hover effect

If Cover Skin is chosen, the following options are available:

Content

  1. Graphic Element: Choose between None, Image or Icon to display a graphical Element above the Call to Action title
  2. If Image is selected as the Graphic Element:
    Choose Image: Select or upload an image
    Image Size: Set the size of the image, from thumbnail to full, or set a custom size.
  3. If Icon is selected as the Graphic Element:
    Icon: Select an icon from the FontAwesome library
    View: Choose the default icon view, or select Stacked or Framed.
  4. Title & Description: Choose the title and description that appears in the front of the flip box
  5. Title HTML Tag: Set the title’s HTML tag to H1- H6, Div, or Span
  6. Button Text: Enter the text to be displayed on the button
  7. Link: Enter the URL for the button’s link. Click the Link Options cog  to either add rel=nofollow to the link or to open the link in a new window.

Ribbon

Title: Enter the text to be displayed on the ribbon.

Style

Box

  1. Min. Height: Set the minimum height of the whole box
  2. Alignment: Align the content to the left, center or right of the box
  3. Vertical Position: Align the content to the top, center or bottom of the box
  4. Padding: Set the padding for the content

Content

Title

  1. Typography: Set the typography options for the title
  2. Spacing: Set the amount of space between the title and description

Colors

  1. Title Color: Choose the title color
  2. Button Color: Choose the button color

Button

  1. Size: Select the button size, from Extra Small to Extra Large
  2. Typography: Set the typography options for the button text
  3. Text Color: Choose the color for the button’s text
  4. Background Color: Choose the color for the button’s background
  5. Border Color: Choose the color for the button’s border
  6. Border Width: Set the border width
  7. Border Radius: Set the border radius to control corner roundness

Ribbon

  1. Background Color: Choose the color for the ribbon’s background
  2. Text Color: Choose the color for the ribbon’s text
  3. Distance: Move the slider between 0-50 to set the distance for the ribbon.
  4. Typography: Set the typography options for the ribbon’s title
  5. Box Shadow: Set the 

    box shadow
     settings for the ribbon

Hover Effects

Content

  1. Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or down
  2. Animation Duration: Set the amount of time the animation takes to complete
  3. Sequenced Animation: Choose if the animation for the text elements appears sequenced or all at once

Background

  1. Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or down
  2. Overlay Color: Choose the overlay color for normal and hover
  3. CSS Filters: Set blur, brightness, contrast and saturation for the image
  4. Blend Mode: (For Normal state) Set a blend mode for the image
  5. Transition Duration (ms): (For Hover state) Set the duration for the hover effect 

Advanced

Set the Advanced options that are applicable to this widget

Share it on social networks

Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page