Custom CSS I Add to EVERY Elementor Website

⬇️ COPY AND PASTE THE CSS SNIPPETS BELOW!

In this video I share three custom CSS snippets I add to pretty much all of my Elementor websites. I show you what they do, how to implement them yourself, and how to customise them to take your own websites to the next level.

0:41 Remove annoying padding/margin at bottom of Elementor text widget
2:35 Multiple button styles in Elementor
7:44 Multiple text styles in a single widget

1) Removing the annoying gap at the bottom of the Text Editor

p:last-child {
margin-bottom: 0;
}

2) Multiple button styles using classes (make sure you give your buttons a class name under the 'Button / Advanced' tab)

.button2 .elementor-button {
font-size: 12px;
padding: 10px;
border: 2px solid var(--e-global-color-primary);
background-color: transparent;
color: var(--e-global-color-primary);
}

.button2 .elementor-button:hover {
color: white;
background-color: var(--e-global-color-primary);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.button3 .elementor-button {
background-color: #FAAF3F;
padding: 10px 15px;
border-radius: 50px;
text-transform: uppercase;
font-family: Times;
}

.button3 .elementor-button:hover {
background-color: #FAAF3F;

}

3) Multiple styles in one text/header using span tags (wrap each word you want to change in a span tag, and give it a class (e.g. '.fancy'))

.bold {
font-weight:900;
}
.fancy {
font-family: var( --e-global-typography-accent-font-family ), Sans-serif;
background: -webkit-linear-gradient(0deg, #B100EF, #FFC178);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
font-style: italic;
}

For the button styles and text styles, you can change the CSS styling to anything you want. This tutorial focusses on HOW to actually implement this, but it is up to you to style the components. Use ChatGPT and Google for help.

License code: NVUXPNHFYFFX3AY8