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.
Text Settings
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.
