The Callout Module

The callout module is one of the most useful modules in Beaver Builder.

The callout module can contain a headline, text and an icon or photo as well as a link or button. The icon or photo can be placed above or below the headline. Or to the left or right of the headline and text.

You'll use the callout module time and again so it's worth experimenting and getting to know just how it works.

 

Icons look great in callout modules

Icon above the headline

I built this layout using the callout module. I put the icon above the headline.

Icon below the headline

I built this layout using the callout module. I put the icon below the headline.

Icon left of headline

I built this layout using the callout module. I put the icon to the left of the headline.

Photos look great, if they're above or below the headline

Icon left of headline & text

I built this layout using the callout module. I put the icon to the left of the headline AND text.

You can add a button or text link via the callout module.

Photo by Oliver Thomas Klein via Unsplash

Photo above headline

I put this photo above the headline in a callout module. Photo is by Oliver Thomas Klein. I found it on Unsplash

Photo below headline

Photo by Oliver Thomas Klein via Unsplash

I put this photo below the headline in a callout module. Photo is by Oliver Thomas Klein. I found it on Unsplash

Beware of extra whitespace if you position a photo to the left of the text in a callout module

Photo to left of headline and text

Beware of  placing photos to the left of the headline and text. You might find a big gap between the photo and the text. If you do this with an icon to the left of the text, the icon sits just to the left of the text. I'm not sure why the photo has so much space around it.

Callout module with a background color behind the icon

Call to action with icon background

The icon used in this call to action module has a colored background.

Callout with two borders and a gradient button

Callout with border

This callout module has a border on the right hand side and at the bottom. The icon is above the heading and content and the call to action is set to button.

Callout with border

This callout module has a border on the right hand side and at the bottom. The icon is above the heading and content and the call to action is set to button.

3 Callout modules with icon backgrounds

Callout module 1

This callout module has an icon with a background color applied. It also has a button with a gradient.

Callout module 2

This callout module has an icon with a background color applied. It also has a button with a gradient.

Callout module 3

This callout module has an icon with a background color applied. It also has a button with a gradient.

Callout icons with no background and flat square buttons

Callout icon no bg

This callout module has an icon but no icon background color. The button is styled with the flat option. The heading, icon and button are all the same color.

Callout icon no bg

This callout module has an icon but no icon background color. The button is styled with the flat option. The heading, icon and button are all the same color.

Small icons can draw attention...

icon to left of headline

This icon sits to the left of the headline. I didn't use a button, I've used a plain text link in this example.

Read More

icon to left of headline

This icon sits to the left of the headline. I didn't use a button, I've used a plain text link in this example.

Read More

icon to left of headline

This icon sits to the left of the headline. I didn't use a button, I've used a plain text link in this example.

Read More

You can add photos or images to the callout module

Photo in callout module

This photo displays above the headline and text. However, you could put the headline above the photo if you wished.

Read More

Photo in callout module

This photo displays above the headline and text. However, you could put the headline above the photo if you wished.

Read More

Photo in callout module

This photo displays above the headline and text. However, you could put the headline above the photo if you wished.

Read More

You could just have a big icon and headline...

Look

Listen

Learn

The callout module works just as well with images or icons

THE HEADLINE GOES HERE

This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from.

This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.

This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.

THE HEADLINE GOES HERE

This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from.

This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.

This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.

Photo and heading

Photo by: Carissa Gan

Photo One

Photo by: David Nuescheler

Photo Two

Photo by: Alexandra Gorn

Photo Three

Photo and heading

Photo by: Carissa Gan

Photo One

Photo by: David Nuescheler

Photo Two

Photo by: Alexandra Gorn

Photo Three