Gradation shortcode

Allows you to present information as ordered blocks in a simple and stylish way.
Read documentation
Usage frequency
63%
Preset amount
77%
Customizability
91%

Available options

Default code: [dfd_gradation icon_size="30" border_radius="50" main_style="style-1"]

Style – Choose between 3 preset styles;

Animation – Choose between 14 preset animation effects;

Custom CSS Class – Type your own unique class name for the item – this is a useful option for those who want to create a specific style.
For example, you can type custom-style class and then go to Theme options -> General Options -> Custom CSS / JS -> Custom CSS and write your own CSS code with this class to get your own style;

Element width – Select width of the elements according to the width of the container;

Content – Allows you to add the icon, image or text, add title, subtitle and the description for the single gradation;

Style – Allows you to customize the icon size, color, hover color and its background. You can also change the delimiter color;

Typography – Select letter spacing, font size and element tag. You can also choose the custom font family.

Default styles

Samples of preset styles without custom changes
Simple style
right align style
  • Gradation title
    Gradation subtitle
    Underprivileged, network forward-thinking opportunity fight against oppression change movements.
  • Gradation title
    Gradation subtitle
    Underprivileged, network forward-thinking opportunity fight against oppression change movements.
  • Gradation title
    Gradation subtitle
    Underprivileged, network forward-thinking opportunity fight against oppression change movements.
left align style
  • Gradation title
    Gradation subtitle
    Underprivileged, network forward-thinking opportunity fight against oppression change movements.
  • Gradation title
    Gradation subtitle
    Underprivileged, network forward-thinking opportunity fight against oppression change movements.
  • Gradation title
    Gradation subtitle
    Underprivileged, network forward-thinking opportunity fight against oppression change movements.

Customized styles

Some variations of style customizations of the shortcode
text instead of icon
1/4 width of container
  • Gradation title
    Gradation subtitle
    Underprivileged, network forward-thinking opportunity fight against oppression change movements.
  • Gradation title
    Gradation subtitle
    Underprivileged, network forward-thinking opportunity fight against oppression change movements.
  • Gradation title
    Gradation subtitle
    Underprivileged, network forward-thinking opportunity fight against oppression change movements.
  • Gradation title
    Gradation subtitle
    Underprivileged, network forward-thinking opportunity fight against oppression change movements.