Builder Css Classes

With our plugin you can create a custom css class with many property. Easy and fast.

Some example:

Content with custom class created
Waring! Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Success! Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Info! Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Alert! Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

How to Works:

Step 4: Creating Classes

  1. Open AD CSS Classes
  2. Click on the button “Add New”
  3. Fill the title field with the name you want (it is only for you)
  4. Choose a class name (this is needed so if you leave it blank plugin will create a random name for you).
    If you don’t use “Don’t Normalize Name” option please start the name with an [a-z] char without symbols, spaces or number.
  5. If you check “Don’t Normalize Name” plugin will not sanitize the name into a correct class name, so use it carefully. It’s usefull to target element with CSS logic
    (for example #tag-id .class-name div > span)
  6. Select the css property you want to add to the class and the attribute fields will appear
  7. Press Insert and save the Class

Step 4.1: Using Classes

How to use the Class Shortcode

  1. Go to post or page editor and you will find a 3 new icon in dashboard in both visual and html mode.

  2. Click on the button “ADD CLASS” and icon panel will pop up.
  3. Choose the Class Name from the list of your custom classes
  4. Check the result with our live class viewer
  5. Select an HTML Tag
  6. Press Insert with TAG to insert in the editor the html tag you selected
  7. Press Insert as CLASS to insert in the editor only the class name