Controls
Units
Units control combines a numeric input with unit selection (px, %, em, etc.), perfect for spacing, sizes, and other CSS measurements.
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