Colorful and animated Pricing Table easy to customize with modular css classes.
Colorful Pricing Table suitable among others for Web Agencies, Developers and Designers. You can customize it very easily just adding or removing specific ‘Modular’ Css Classes.
Layout Sample Image
The layout is a Pricing section made of 4 rows plus a Code one:
Row 1 : Text module with the Title;
Row 2 : Text module with the Subheading;
Row 3 : Pricing module for Desktop and Tablet;
Row 4 : Pricing module for Mobile;
CSS Row: A Code Module in which is stored all the advanced css to make the design properly work.
You can obviously modify all of these rows and module settings as you prefer but some explanations may be useful about the first row and the third one.
TITLE ROW (1st): An exlamation point is added beside the title as a pseudo element (:after) of the column. You will find the code in the Advanced section of the row settings while a css class ‘title_exlamation’ is added to the column in order to apply some css media queries adjustments.
DESKTOP PRICING ROW (3rd): The design of the pricing module for desktop and tablet screens is designed as a basic design to which you can add (or remove) modular elements simply by adding (or removing) css classes in the Advanced section of the module’s settings. The classes (by default all active) we are talking about are:
– ‘animating‘ -> This class activates all the planned animations for Desktop and Tablet screen, like zooming of each tab on hovering, bringing it to the foreground and accentuating/changing the background colors of heading and top border; or even changing the top and side (left for the first tab, right for the third one) border width. – ‘heading_icon‘ -> Toggling this class the heading icon will be shown or not. It has been designed as a background icon so as not to be too invasive in the overall design but you can edit both the icon (we use ETModules font family for ET Icons) and the design in the ‘:after’ custom css of each single tab. – ‘labelled‘ -> Toggling this class you can make visible or not the labels of each tab (by default ‘Most Popular’, ‘To Begin’ and ‘For Professionals’). You can customize the text and background color directly in the ‘:before’ custom css of each single tab (obiously if you want to show just one label you have to activate this class for the pricing module, then you will remove the ‘content’ property in the ‘:before’ of the tabs for which you don’t want to show the label). – ‘custom_bullet‘ -> This class if active will transform the default list bullets in ET Icons.
By toggling these classes you will have good margins of customizations without having to touch the css code; however if you need to customize further you can modify the css both in the Row/Module Advanced Settings and in the Code Module in which is stored all the advanced css.