Skip to main content

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​