title: "Rendering Style" post_status: publish comment_status: open taxonomy: category: - elementor-developers-docs post_tag: - Widgets - Src - Repos

Rendering Style

A common widget rendering use case is using the control value to style different HTML elements. Usually used by controls from the content tab.

Styling Elements

Let's say you have a widget with two controls in which users can set a title, and control the element "color".

```php {34-44}

    <h3>
        <?php echo $settings['title']; ?>
    </h3>
    <?php
}

protected function content_template(): void {
    ?>
    <#
    if ( '' === settings.title ) {
        return;
    }
    #>
    <h3>
        {{{ settings.title }}}
    </h3>
    <?php
}

} ```

Note that each element on the page includes a set of style settings that are printed as CSS rules under a unique element selector. The widget can easily use the returned control value as a design rule.

Our test widget will add custom CSS rules to the page's CSS file. Those rules will only affect this widget as the { { WRAPPER } } prefix means that only this instance of the widget will use this color.

Selector Tokens

When you select which category to assign your widget to, you can select one of the default categories: