Skip to content
Controls

Units

Units control combines a numeric input with unit selection (px, %, em, etc.), perfect for spacing, sizes, and other CSS measurements.

Units Control

Control Settings

  • Units - Define available units (e.g., px, %, em, rem, vh, vw)

Usage Examples

CSS Inline Styles

PHP
<div style="padding: <?php echo esc_attr( $attributes['control_name'] ); ?>">
    Content with custom padding
</div>
Handlebars
<div style="padding: {{control_name}}">
  Content with custom padding
</div>

Dynamic Margins

PHP
<div style="margin-top: <?php echo esc_attr( $attributes['control_name'] ); ?>">
    Content with custom top margin
</div>

Post Meta

Post Meta
<?php
$spacing = get_lzb_meta( 'control_meta_name' );
if ( $spacing ) {
    echo '<div style="gap: ' . esc_attr( $spacing ) . '">';
    echo '    Content with custom gap';
    echo '</div>';
}
?>

Common uses for Units control:

  • Padding and margins
  • Width and height
  • Font sizes
  • Border widths
  • Gap spacing

Was this article helpful?