In this article you will find the unique information about Callout Box shortcode. If you want to learn about some more general issues like using a shortcode etc. See the list bellow or browse the general section.
This shortcode integrates Button. Thanks to that, you can use Button presets inside.
Examples Of Use
You can see a beautiful use of Callout Box on one of our pre-made templates: Avocado, Babaco, Banana, Coconut, Duku, Fig, Huito, Illama, Kiwi, Papaya, Purple, Wildberry, Yew.
How to create a fullwidth Callout with centered content?
Go to the Visual Composer Backend editor , insert new row. Click the edit button (Pencil Icon) to edit row settings. Inside row settings go to the Row Stretch and choose Stretch Row . Scroll down to Content Position and choose Middle (if you want your call out box to be centered). Now click the Design Options tab here you should set the Background property equal to the background of your Callout box.
If you want to create more advanced background instead of using Design Options go to Background tab and use the Overlays to create your background.
Detailed shortcode description
Bellow you will find a table with all of the shortcodes features and fields. On the right you will find a description for each field/section. All of this settings are available in shortcodes popup, it will be displayed once you create a new shortcode or hit the edit (pencil icon) button.
GeneralContentIconButtonButton: AnimationsDividerRibbonAnimations
| Option | Description |
|---|---|
| Main Preset | Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button. Learn More » |
| Layout Select | Layout styles let you choose the target layout after you define the shortcode options. |
| Background | Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More » |
| Border | In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Padding | It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Margin | It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Custom Class | Add your custom class to the element. Mostly used for custom CSS/JS. |
| Option | Description |
|---|---|
| Title – Typography | Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More » |
| Title | Define title. |
| Title – Margin | It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Width | Choose description width. If you choose width smaller then 100% it will be centered by default. |
| Link Color | Choose description links color. |
| Link Hover Color | If you want to change the link color after hover choose a different one from the color picker below. |
| Description – Typography | Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More » |
| Description | Define content. Thanks to default WordPress WYSIWYG editor you can easily format the content. |
| Description – Margin | It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Option | Description |
|---|---|
| Icon | Check to disable icon. |
| Icon Alignment | Choose icon alignment. |
| Icon | Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More » |
| Icon – Background | Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More » |
| Icon – Border | In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Icon – Padding | It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Icon – Margin | It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Option | Description |
|---|---|
| Button | Check to disable button. |
| Button Alignment | Choose button alignment. |
| Main Preset | Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button. Learn More » |
| Full Width | Check to stretch button to 100% width of its container. |
| Link | Choose target link for button. |
| Typography | Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More » |
| Text | Define button text. |
| Icon | Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More » |
| Display Effect | Select icon display style: None: hide the icon; Stay: display icon on selected side; Slide In: slide icon in from selected side; Push Out: push out button text with icon from selected side. |
| Custom Gap | Define gap between icon and text. |
| Background | Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More » |
| Border | In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Padding | It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Margin | It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Title Color | If you want to change the title color after hover choose a different one from the color picker below. |
| Icon Color | If you want to change the icon color after hover choose a different one from the color picker below. |
| Hover – Background | Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More » |
| Hover Effect | Select background hover animation style: Fade: simple fade in effect; Slide In: slide background in from selected side; Expand: expand background from selected position. |
| Custom Offset | Define custom offset for expanded background size. Offset might be different dependent on the button size. |
| Hover – Border | In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Custom Class | Add your custom class to the element. Mostly used for custom CSS/JS. |
| Option | Description |
|---|---|
| Loop Animation | Loop Animation is enabled only for selected shortcodes/elements. This animation will be played in an endless loop. Learn More » |
| Option | Description |
|---|---|
| Divider | Check to disable divider. |
| Main Preset | Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button. Learn More » |
| Width | Choose divider width. It will take the specified value of its container width. |
| Alignment | Choose divider alignment. |
| Content Type | Choose divider content type. |
| Content Position | Choose horizontal divider content position. |
| Content – Border | In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Content – Padding | It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Title – Typography | Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More » |
| Text | Define content text. |
| Icon | Icon field from Massive Addons allow you to choose from 8 different icons fonts like: Font Awesome, Elegant Icons, Elegant Line Icons, Elusive Icons, Material Icons, Massive Icons, TypeIcons, Dashicons. What’s more, our Icon Field provide a possibility to use a character or image instead of icon from icons fonts. Learn More » |
| Number | Select number of divider lines. |
| Style | Select lines style. Learn more about line styles here. |
| Color | Choose lines color. |
| Gap | Choose vertical gap between lines. Small lines Gap and large lines Weight may lead to lines overlap. |
| Weight | Choose lines thickness. |
| Padding | It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Margin | It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Custom Class | Add your custom class to the element. Mostly used for custom CSS/JS. |
| Option | Description |
|---|---|
| Ribbon | Check to disable ribbon. |
| Main Preset | Presets are used to easily configure your shortcode. You can choose one of the premade presets or create your own. You can preview the available presets with Preview & Load Preset button. Learn More » |
| Style | Choose ribbon style: Classic: ribbon displays at one of its container corners; Corner: ribbon wraps one of its container corners at 45° angle; Full Width: ribbon spans from left to right side of its container. |
| Position | Select ribbon position. |
| Size | Select ribbon size. |
| Folds | Check to disable folds. Disabling them will removing ribbon 3D effect. |
| Folds Color | Choose folds color. |
| Typography | Typography field gives you a control over almost all font settings. It also incorporate a Typography Preset functionality. Learn More » |
| Text | Define ribbon text. |
| Background | Background field contains options needed to create an awesome background inside our shortcodes. You can choose from color (with opacity/alpha channel), radial and linear gradient or custom image. Each background type have some additional options for best outcome control. Learn More » |
| Border | In simple mode, this field offer a settings for width (for all edges), style, color and radius. Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Padding | It is one of most common field across our shortcodes. The simple mode, contain options for padding size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Margin | It is one of most common field across our shortcodes. The simple mode, contain options for margin size (for all edges) and unit (px, em or %). Advanced Settings give an additional control for width of each edge (top, bottom, left and right). Learn More » |
| Custom Class | Add your custom class to the element. Mostly used for custom CSS/JS. |
| Option | Description |
|---|---|
| Enter Animation | Enter Animation allow to specify an appear effect for shortcode. Learn More » |
| Loop Animation | Loop Animation is enabled only for selected shortcodes/elements. This animation will be played in an endless loop. Learn More » |
This shortcode comes with a lots of features. Check the list below for more details (click on each feature to learn more):
