How to Apply Code Snippets to Your Website

CSS Code Snippets

There are several ways to apply CSS, whether directly to an Elementor widget or from a centralized location like WPCodeBox. I recommend using WPCodeBox to create and manage code snippets from a centralized location.

Applying Code Snippets Centrally With WPCodeBox

Site Wide Design

In the example below, we apply a red background color to every Elementor button on the website.

.elementor-button {
    background: red;
}
.elementor-button:hover {
    opacity: .9;
}

Element-Specific Design

Example 1 – Button ID

Elementor Button Widget > Content Tab > Button ID

In the example below, we apply a red background color to every Elementor button on the website with a particular button ID assigned.

.yourbuttonID {
    background: red;
}
.yourbuttonID:hover {
    opacity: .9;
}

Example 2 – Button CSS ID

Elementor Button Widget > Advanced Tab > CSS ID

In the example below, we apply a red background color to every Elementor button on the website with a particular CSS ID assigned.

#yourbuttonCSSID {
    background: red;
}
#yourbuttonCSSID:hover {
    opacity: .9;
}

Example 3 – Button CSS Class

Elementor Button Widget > Advanced Tab > CSS Classes

In the example below, we apply a red background color to every Elementor button on the website with a particular CSS Class assigned.

.yourbuttonCSSClass {
    background: red;
}
.yourbuttonCSSClass:hover {
    opacity: .9;
}

Applying Directly to the Elementor Widget

Elementor Widget > Advanced Tab > Custom CSS

When applying CSS this way, you want to use a ‘selector’ declaration, which says, “Hey, let’s only apply this CSS to this specific Elementor widget. In the example below, we apply a red background color to a specific Elementor button widget on the website.

selector .elementor-button {
    background: red;
}
selector .elementor-button:hover {
    opacity: .9;
}