Skip to content

Callouts & Creatives

It can be difficult to remember all the modules Beaver Builder has that can be used to place content. The WDS Demo Site has a comprehensive overview of all the main modules available with tool tips on any outstanding pointers to keep in mind when choosing the module. Knowing which modules to use and how to properly style them can drastically improve efficiency while also bringing a dull or text-heavy site to life. Read through this page to learn how to find the best modules for callouts, how to make callouts yourself, and to learn about the content limitations of creative modules.

Modules for Callouts

  • Making your own (see DIY Below):

    Use Columns with margins/padding/shadow
    Add heading/text, button and image or icon module within it as needed
    Add other modules within it as needed for design/functionality

  • UABB Info box:

    Heading, subheading, text, image/icon and link options
    Alignment option for stacked or inline layout
    Min height option and custom styling
infobox in columns
infobox in columns
infobox in columns
infobox in columns

Making Callouts DIY

Use Cases

This option is great for creating your own custom callout layout by styling columns to look like a callout. Once styled, you can choose what functionality it will hold by deciding what modules you want to put in it. It is great for making use of creative modules with limitations (discussed in the section below) such as Hover Cards or iHovers that provide the interactive hover action the customer may have requested, but placing any extra text that cant fit in the creative module above or below in within the column.

Pull a new empty row of 3 or 4 columns depending on how many callouts you need for your layout.

Then, In the column settings:
  • 1 Equalize column heights
  • 2 Align vertically to top if you have uneven items in it, align to center if all contents of each callout will be even in number, or bottom as needed
  • 3 Set a min height if needed
  • 4 Change the background of the column to a color, gradient or an image as needed
  • 5 Add a border, a border radius or shadow if you'd like
  • 6 In the column setting's advanced tab, add a margin to the column to separate it from the other callouts
  • 7 Then assign the column a custom class for good practice
Once the column is styled:
  • 1 Add an image/icon module, a heading module and a button module - or any module you'd like to include in your callout
  • 2 Style each of these modules within the callout as seen fit
then...

Once you're happy with how the callout column you created looks, how the contents fit within it and everything is styled properly:

  • 1 Delete the 3 empty columns
  • 2 Then duplicate your styled column until you have 4 of them in a row altogether
  • 3 Once you have your layout done, replace the images, text and links of the modules in the three other columns and you're done

You can also save this column for reuse or save the callouts row you created for use on other pages. Follow the guidelines for saving and naming under Beaver Builder Best Practices.

In the example:
  • Column contents - vertical align bottom, margin of 10px on all sides
  • Box shadow to make the callout stand out and border radius of 20px
  • Image column background with a gradient overlay from bottom to top starting halfway up the column
  • Smart heading styled white with separator and Standard Button with border and custom border-radius to match the bottom of the column

Creative Module Limitations

Using them as Accents for Callouts

These creative modules for callouts have limits on the amount of content you can put in them. Don’t try to pack a lot of content into them. They are creative / decorative and should be used to accent a site, not hold all the content you'd like to put in them. 

UABB Flip Box

These modules are great for creating callouts that have only a short blurb of text in them, but the text for each callout is uneven in character length when compared to one another, causing the callouts to look off-balance.

In the billiards flip boxes example below, the flip box modules are being used as the callouts themselves. However, notice the flip boxes for menu callouts and stats in the gallery to the right. In addition to content being placed in a styled column, these layouts employ the flip box module as a creative addon to the callout, as opposed to simply placing the text in the column.

  • Place a single word in the title or an even number of characters in each front-ward facing callout's description so that they are the same height - Its probably a better idea to just choose an icon and have a singular line of text in the heading if possible
  • Place the remainder of text that's uneven in length on the module's back side in its description (you can leave the heading space blank), which is set to display when a site-visitor hovers on the module
  • Place a link in a button by activating it on the back side if needed
  • Assign the same min height to all flip box module callouts - or style one, and duplicate then replace the info in it with the info needed in the second callout
Flipbox for menu callouts
Flipbox for menu callouts - flipped
Flipbox for stat callouts - flipped
Flipbox for stat callouts with cta
  • Don’t place more than a small blurb of text in the module altogether
  • If you place too much text in the flip box, it will cause the height to not stay even or it will force the text beyond the edges of the flip box which may break it

UABB Slide Box

These modules are great for creating callouts that have a lot of text in them and are uneven in character length when compared to the text placed in the other callouts. Slide boxes can be a good alternative to flip boxes if there's around a paragraph of content to be placed in the callout - which is too much for a flip box but is appropriate for a slide box module.

  • Place an even number of characters in each front-ward facing callout so that they are the same height
  • Place the remainder of text that's uneven in length on the module's back side, which is set to display when a site-visitor clicks the drop down icon
  • Don’t place more than a brief, singular paragraph of text in the module altogether
  • If you place too much text in the slide box, it will cause the bottom portion to slide down below the page (even below the footer at times) and it will break - you will not be able to scroll down to read all of it

PowerPack Hover Cards

Hover cards are great modules for a stylish callout setting but they must be properly styled to look good, otherwise it can get messy.

In the example to the right, the hover card modules are used as the callouts themselves. There is a single line of text for the heading, a very small blurb of description text, and the hover card link is a link when clicked.

  • If this module is used, the images placed in it should not be busy enough to wash out the heading text - descriptions on hover get an overlay, but the headings don't get one
  • A certain portion of the images used as the background shouldn't be expected to show - avoid using images with faces or important focus points
  • This module is very sensitive to the title and description length, if too much content is placed in it, it will run off the module and look bad
  • We cannot control how the background images will appear or where they will get covered by the title or description text when viewed on different screen sizes

PowerPack Image Panels

Image panels are a creative way to display categories, collections or callouts with only a single line of text needed.

  • Option to link the entire panel, the title, or nothing at all
  • Option to position image filling the panel and declare a min height
  • There's no option for description text, so this module is only good for minimal text that when clicked, takes you to a relevant section, page or product/archive
Image Panels
Image Panels - hover

UABB iHover Module

This module has many styles and hover effects to choose from, but as with image panels, is quite limited in what it can/should be used for.

The iHovers shown to the right are being used as callouts themselves. These are limited in functionality by the iHover module's settings. However, as shown below, iHovers are great accents to an existing callout made with a custom styled column.

In the case that a customer requests the use of an iHover but the content they give us falls beyond the the module's limits, or if they are concerned about link clicks by mobile users, compromise with the request by using the module as an accent instead, still incorporating the content they want. See an example of how to use the iHover as an accent to a custom column below.
Regular iHover as callout
Regular iHover as callout - hover
  • Column border radius for top right and left are set to 100px
  • iHover module is used singularly with all margins around it removed, and top margin set to -80px (if you do this, remember to set the top margin to 0 on smaller screens when it stacks)
  • iHover module is not linked, its only used as a creative accent to the already existing callout made with a custom styled column
  • The link and text beyond the iHover module's limit are set in a heading module and button below it - this solves the link click issue for mobile users as well
iHover added to Custom styled column
iHover added to Custom styled column - hover
  • Images MUST be square-cropped before using them in iHovers - if images are not square, they will appear skewed or stretched in the iHover
  • Do not use an iHover if text is needed on the front of the module, iHovers do not support this
  • Do not use iHovers if there is a lot of content needed to be placed on the back
  • On smaller screens, "touch" will activate the iHover - if the iHover is set to be a link, touching it will take you to the link instead of flipping the hover, so if important information is included on the back, perhaps repeat this information above/below the iHover, and display it on small screens only
Table of Contents
    Add a header to begin generating the table of contents
    Standard Modules
    Scroll To Top