Dimensions

This control creates an interface to set vertical and horizontal dimensions.

<Control type="dimensions" name="dimensions_name" label="Dimensions control">
  <List units>
    <Item>px</Item>          
    <Item>vw</Item>          
    <Item>vh</Item>          
  </List>
</Control>

Attributes

• default - Defines the default value of the control.
  Type: string
  Default: 0,0,0,0 (if multiple_values is false, the default is 0)
• default_unit - Defines the default unit used in the control.
  Type: string
  Default: px
  
• label - Defines the label of the control which will be displayed in the page builder.
  Type: string
  
• multiple_values - If true, the control has four dimension values instead of one
  Type: boolean
  Default: true
  
• name - Defines the name of the control which will be referenced to render the control value.
  Type: string
  
• units - Defines the type of units available in the control
  Type: string
  Default: px
  

Rendering the control value

The value can be rendered in a template, style, or script.

In a template, use Get or Loop to render the control value.

<Get control=dimensions_name />

<Loop control=dimensions_name>
  <ul class="card">
    <li>Full: <Field value /></li>
    <li>Top: <Field top /><Field unit /></li>
    <li>Right: <Field right /><Field unit /></li>
    <li>Bottom: <Field bottom /><Field unit /></li>
    <li>Left: <Field left /><Field unit /></li>
  </ul>
</Loop>

In a style, use the standard syntax to refer to SASS variables.

$dimensions_name_unit: map_get($dimensions_name-map, 'unit');

.card {
  padding: $dimensions_name;
  margin-top: map_get($dimensions_name-map, 'top')#{$dimensions_name_unit};
  margin-bottom: map_get($dimensions_name-map, 'bottom')#{$dimensions_name_unit};
}

In a script, use the standard syntax to refer to JS variables.

console.log(dimensions_name);

Preview

In Gutenberg

In Elementor

In Beaver Builder