The Challenge

This demo was spawned by a question in a different builder’s Facebook group on how to add the large numbers that appear cutoff. The solutions given by members of the group all contained pseudo classes and positioning, so my challenge was to do as much as possible with just Avada elements. Not only does this mean anybody can implement it, it is also easily updated or tied to dynamic data. Custom CSS was only added for the hover effect.

The recipe

Fortunately, this is quite simple*:

  • Add a column and set the overflow to hidden (design tab) to cutoff the large text
    • Set padding to 0 top and left, and 2 rem bottom and right
  • Add a title element with the size set to div since this is visual and not meant to interfere with the page hierarchy. Set the top and left margins to negative values (see image for details).
  • Add an actual title (use the appropriate level to maintain hierarchy). Set the left margin to 2rem.
  • Add text with left margin set to 4rem

*This can actually be done a couple of ways especially if using dynamic values, but this is the most straight forward.

screenshot of the text settings

Text Settings

01

01. Fringilla luctus

Ducimus commodo fames taciti. Occaecati. Vitae mi, consectetur dictumst corporis. Cras rerum mi, porro fusce? Deleniti atque.

02

02. Fringilla luctus

Ducimus commodo fames taciti. Occaecati. Vitae mi, consectetur dictumst corporis. Cras rerum mi, porro fusce? Deleniti atque.

Bonus

Bonus Variation

Using nested columns and negative margins gives you additional visual options. CSS has to be modified slightly (see — alt variation)

Custom CSS

As I mentioned at the beginning, the custom CSS is not required but does add a very nice effect. Just add this at either the page or global level and then add the class bg-box to each column.

Copy to Clipboard