Alert Box / CTA
To insert an CTA / alert box in your content use Alert Box / CTA Shortcode:
Icon pack: if you wish to use icon in your CTA block, here you can define the icon pack, where you wish to choose your icon from. Pls note: if you wish to use an image instead of an icon, choose „Image“ from this select box and select imahe from the media library:
Icon: select the icon you wish to use in your CTA by clicking on Show Icon Codes. The overview of all available icons will open. Select the code of the icon you wish to insert, copy it, close the overview and paste it in this field “Icon”.
Icon Shape: select the shape of the icon. Note, that this shape will also apply to your CTA image, if you have decided to use an image instead of an icon
Icon Style: in TheGem you can use bicolored icons. In this field “Style” you can select the angle of color splitting in bicolored icon. By default only one color will be applied.
Icon Color: select the main font color of your icon using the colorpicker or typing the hex value
Icon Color 2: select the second font color of your icon, if you wish to use bicolored icon. Your icon will then appear in two colors (color / color 2), splitted by the angle you have selected in Style field above
Icon Background Color: choose the color of icon’s background using the colorpicker or typing the hex value
Icon Border Color: choose the color of icon’s border using the colorpicker or typing the hex value
Icon Size: select the size of your icon
Text color: select the color of your CTA’s text
Background color: you can use background color for your CTA’s background
Background image: if you wish to use an image as background of your CTA, here you can select this image from your media library
Background Style: choose a style of displaying background image
Background horizontal position: choose the horizontal position of your background image
Background vertical position: choose the vertical position of your background image
Border color: color of your CTA’s borderBorder Width (px): width of the CTA’s border
Border Radius (px): radius for the rounded corners of the CTA’s border
Rectangle Corner: if you wish, you can select corners of the CTA’s border, which should stay non-rounded, like here
Top & Bottom Arеa Style: choose, which fancy style would you like to use for the top or for the bottom of your CTA. Be default fancy styles are disabled
Centered: Choose if you wish to center your icon / image / buttons inside the CTA container
For inserting buttons in your CTA / Alert Box, use „Button 1“ and „Button 2“ tabs in Alert Box / CTA shortcode.
NOTE: here you have all the same button options as in „Button“ shortcode – description see above in section „Button“