Getting StartedTheme Options Page OptionsPost TypesElementorWPBakeryTemplates BuilderExtrasDynamic Content How To
TheGem Documentation
General Elements
Diagrams

Diagrams

Use this shortcode to insert diagrams in your content:

Summary: defines the summary text for your diagram

Type: choose the type of diagram to be displayed – lines/bars or circles.

Content: here you can edit the conten of your diagram by editing its shortcode

{"title":"Skill1","amount":"70","color":"#ff0000"}

{"title":"Skill2","amount":"70","color":"#ffff00"}

{"title":"Skill3","amount":"70","color":"#ff00ff"}

{"title":"Skill4","amount":"70","color":"#f0f0f0"}

  • tag  {gem_skill}  defines one parameter/value/skill to be displayed in diagram. You can add as much values/skills as you wish
  • attribute “title” inside of tag [skill] defines the label/title of this parameter/skill
  • attribute “color” defines the color whioch should be used in diagram to represent this parameter/skill
  • attribute “amount” defines the value in percent of this parameter/skill

Style: choose one of three pre-made styles of displaying horizontal (line) diagrams


Useful CSS

Circle

Legend colors and font-size:

.diagram-circle .diagram-legend .legend-element .title {

font-size: 14px !important;

font-weight: 300;

color: #ccc;

line-height: 2;

}

Line

Legend colors and font-size:

.digram-line-box .skill-title {

font-size: 15px;

font-weight: 100;

color: #ccc;

}

Style-1 background color:

.digram-line-box {

background-color: #eee;

}

Skill – line background color:

.diagram-wrapper .digram-line-box .skill-line {

background-color: #ccc !important;

}

You can modify this css and insert it in Theme Options -> Custom CSS to apply on all diagrams:

To apply this custom CSS on a single content element only, use the "Extra class name" field in this element in WPBakery:

The example of the css selector for the "custom-diagram" class name in this case:

.custom-diagram .digram-line-box .skill-title {

font-size: 15px;

font-weight: 100;

color: #ccc;

}