Info banner
shortcode

Allows you to present the image banners with content. Attract the visitors and show the necessary information.
Read documentation
Usage frequency
65%
Preset amount
75%
Customizability
94%

Available options

Default code: [dfd_info_banner style="style-1" img_width="500" img_height="500"

Style – Choose between 11 preset styles;

Content alignment – This option allows you to set the horizontal alignment for the banner’s content;

Animation – Select among 14 appear effects;

Custom CSS Class – Type your own unique class name for the item – this is a useful option for those who want to create a specific style.
For example, you can type custom-style class and then go to Theme options -> General Options -> Custom CSS / JS -> Custom CSS and write your own CSS code with this class to get your own style;

Image – Select the image for your info banner;

Image on hover – Select the hover image for your info banner. This option is available for the “Hover image changing” style;

Image width and height – Specify the width and height for the image to set the size you need;

Content – Allows you to add title, subtitle and content to your info banner;

Link URL – Go to the external link or definite page by adding the link to the info banner;

Apply link to – Choose where the link should be applied. You can apply it to the whole info banner, only to the title or to the read more button;

Read more button – Show the read more button under the content;

Button visibility – Allows you to show the button permanently or only on hover;

Read more style – Choose between 6 preset styles for the read more button;

Typography – Select letter spacing, font size, line height and text color. You can also choose the custom font family for the title and the subtitle;

Image effect – Choose the hover effect for the info banner. You can also set the border radius for the image;

Number at image – This option allows you to add the number to the image;

Number style – Choose the number background size, border radius and background color;

Overlay gradient  Choose the start and end colors for the overlay gradient;

Shadow  Allows you to add the shadow to the info banner;

Shadow visibility – This option allows you to set the visibility options for the info banner shadow.

Default styles

Samples of preset styles without custom changes
classic style
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
top title style
Info banner heading
Info banner subheading
Banner image
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Info banner heading
Info banner subheading
Banner image
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Info banner heading
Info banner subheading
Banner image
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
bottom content style
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
centered title style
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Content on image style
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Left content style
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
right content style
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
hovered title bottom style
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
hovered title center style
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
hovered content style
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
Banner image
Info banner heading
Info banner subheading
Proin vehicula neque ut purus consequat iaculis. Maecenas pellentesque viverra egestas.
hover image changing style
Banner imageBanner image
Banner imageBanner image
Banner imageBanner image