Units Pro

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

Control Settings

• Units (units) - the units offered in the control's dropdown. The default list is px, %, em, rem, vw and vh

The field is a tag input. Type a unit and press Enter to add it. Whatever tags the field holds replace the default list outright rather than adding to it, and emptying the field leaves the control with no units at all.

Usage Examples

CSS Inline Styles

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

<div style="padding: {{control_name}}">
  Content with custom padding
</div>

Dynamic Margins

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

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>';
}
?>