Call to Action

Call to Action is a special text box with icon and buttons, aiming to attract user’s attention on something and force him to take an action (for example, click a button). CTAs are widely used on landing pages and shop pages to increase visitors involvement and conversions.

Check this demo page showing different call to action style presets available in TheGem:

https://codex-themes.com/thegem-elementor/elements/alert-boxes-2/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Call to Action” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Skin: choose between 4 design presets for call to action boxes.

Title & Description

As content source you can select between “Editor” for title text input and TinyMCE editor for description or choose template from Template Library . For titles you have multiple H-heading presets with two weight variants (bold and thin), as well as an option to disable H-Tag in source code, which can be useful for SEO.

Icon / Image

Here you can select, whether to use an icon for your call to action box, or image or disable both icon and image.

Button

There could be one or two CTA buttons in your CTA box. Or you can disable button and it will not appear in CTA box.

Style Tab

Container Style

In this section you can style the main container of the CTA box. Using “Top Shape” and “Bottom Shape” select boxes you can add some fancy shapes to your CTA box. Please note: if you change the background color of the main container, the colors of the shapes should be changed separately using “Top Shape Color” and “Bottom Shape Color”.

Title & Description Style

Specify styles for your CTAs title and description

Icon/Image Style

Depending on whether you have decided to use icon or image in your CTA box, here you can specify different style settings for your image or icon. For icons, you can choose between presets for shape, size and color split of the icon. For image, you can select size and padding- Also you can specify vertical and horizontal position of icon/image inside the CTA box. For “left” and “right” horizontal positions, you can additionally choose text wrapping options:

• No wrapping
• Inline without wrapping (text will not wrap the icon)
• Wrap text (text will wrap the icon)

Button Style

Specify style of the button used in CTA box. You can select button position, choose between TheGem button size and style presets and customize with additional styling options.