When rendering attributes, the following parameters will be replaced with the saved value.
{{ELEMENT}}
{{ELEMENT}} will register the style options for the wrapper
For example, when adding css_style, {{ELEMENT}} will be replaced by the generated ID :
$options->add_option(
'title_border_color',
[
'type' => 'colorpicker',
'width' => 50,
'title' => __( 'Title border color', 'zionbuilder' ),
'css_style' => [
[
'selector' => '{{ELEMENT}} .zb-el-alert__title',
'value' => 'border-color: {{VALUE}}',
],
],
]
);
This code will compile the following css:
#uid680420617611 .zb-el-alert__title {
border-color: hsl(53, 99%, 65%);
}
{{VALUE}}
{{VALUE}} will add the saved option value to the tag id
{{INDEX}}
{{INDEX}} will render the index of the saved value in a repeater option
{{RESPONSIVE_DEVICE_CSS}}
{{RESPONSIVE_DEVICE_CSS}} will render the corresponding device values:
default: '', laptop: '--lg', tablet: '--md', mobile: '--sm'
In example, if responsive options are set to true the following code
public function options( $options ) {
$options->add_option(
'button_position',
[
'type' => 'custom_selector',
'title' => __( 'Button position', 'zionbuilder' ),
'description' => __( 'Choose button position.' ),
'columns' => 3,
'options' => [
[
'id' => 'left',
'icon' => 'align--left',
],
[
'id' => 'center',
'icon' => 'align--center',
],
[
'id' => __( 'right', 'zionbuilder' ),
'icon' => 'align--right',
],
],
'responsive_options' => true,
'render_attribute' => [
[
'tag_id' => 'wrapper',
'attribute' => 'class',
'value' => 'zb-el-zionButton{{RESPONSIVE_DEVICE_CSS}}--align--{{VALUE}}',
],
],
]
);
}
will render:
<div class="znpb-element__wrapper zb-element zb-el-zionButton--md--align--center"></div>
