Elementor Mastery: 50 CSS Snippets to Copy-Paste

In this comprehensive guide, we will explore common challenges faced by Elementor users and provide ready-to-use CSS code snippets to overcome them. Whether you’re a web designer, developer, or someone new to Elementor, this article will equip you with useful CSS Snippets to enhance your design workflow and create stunning websites with ease.

If you’re currently using Elementor’s free page-builder, it might be worth noting that a lot of the CSS below is easily achieved with Elementor Pro, without custom CSS.

Elementor Pro is just $59 a year, see for yourself – Elementor Pro Pricing

Not sure how CSS works? We’ve provided a short crash-course at the bottom of this page, scroll down or click here and you’ll be taken down magically automatically.

.elementor-section {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.elementor-widget-heading h1 {
  font-size: 24px;
}

.elementor-section {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.elementor-widget ul {
  list-style: none;
}

.elementor-section {
  background-color: #f2f2f2;
}

.elementor-widget-image img {
  border: 1px solid #000000;
}

.elementor-widget-text p {
  color: #ff0000;
}

.elementor-section .elementor-column-gap-default > .elementor-row > .elementor-column {
  padding-left: 15px;
  padding-right: 15px;
}

@media (max-width: 768px) {
  .elementor-nav-menu {
    display: none;
  }
}

.elementor-widget-social-icons .elementor-icon {
  font-size: 24px;
}

.elementor-nav-menu {
  background-color: #333333;
}

.elementor-column {
  background-attachment: fixed;
}

.elementor-widget-image {
  margin: 0;
  padding: 0;
}

.elementor-widget-text a {
  color: #ff0000;
}

.elementor-section {
  min-height: 500px;
}

@media (max-width: 768px) {
  .elementor-section .elementor-row {
    flex-direction: column;
  }
}

.elementor-widget-button .elementor-button-wrapper:hover {
  background-color: #ff0000;
  color: #ffffff;
}

.elementor-widget-video iframe {
  width: 100%;
  height: 400px;
}

@media (max-width: 768px) {
  .elementor-section {
    display: none;
  }
}

.elementor-column {
  background-color: #f2f2f2;
}

.elementor-widget-heading h1 {
  text-align: right;
}

.elementor-widget-button .elementor-button-wrapper {
  color: #ff0000;
}

.elementor-widget-image img {
  border: none;
}

.elementor-section {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.elementor-nav-menu a {
  color: #ff0000;
}

.elementor-widget ul li {
  margin-bottom: 10px;
}

.elementor-widget-text p {
  text-align: center;
}

.elementor-widget-heading h1 {
  font-family: Arial, sans-serif;
  font-style: italic;
}

.elementor-column {
  padding: 0;
}

.elementor-widget-icon .elementor-icon i {
  color: #ff0000;
}

.elementor-section {
  max-width: 100%;
}

.elementor-widget-image img {
  border-radius: 50%;
}

.elementor-widget-text p {
  line-height: 1.5;
}

.elementor-page-title {
  display: none;
}

.elementor-form label {
  color: #ff0000;
}

.elementor-widget-social-icons .elementor-icon {
  margin-right: 10px;
}

.elementor-widget-text p {
  font-weight: bold;
}

.elementor-section {
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

.elementor-form .elementor-field-type-submit .elementor-button {
  background-color: #ff0000;
  color: #ffffff;
}

.elementor-section {
  border: 1px solid #000000;
}

.elementor-section .elementor-container {
  max-width: 1200px;
}

.elementor-widget-heading h1 {
  color: #ff0000;
}

.elementor-widget-text p {
  text-transform: uppercase;
}

.elementor-column {
  background-color: #f2f2f2;
}

.elementor-widget-button .elementor-button-wrapper {
  text-align: right;
}

.elementor-form label {
  font-size: 16px;
}

.elementor-nav-menu a:hover {
  background-color: #ff0000;
}

.elementor-column {
  text-align: right;
}

.elementor-widget {
  background-color: #f2f2f2;
}

.elementor-nav-menu {
  font-family: Arial, sans-serif;
  font-style: italic;
}

A Beginner’s Guide to CSS

Our guide is below, but it might be worth starting with this video, it explains it in great detail.

Understanding Selectors, Classes, and IDs

CSS (Cascading Style Sheets) is a fundamental technology for styling and formatting web pages. It allows you to control the appearance of HTML elements, giving you the power to create visually appealing and consistent designs across your website.

With Elementor, it essentially creates the HTML and CSS for you when you drag and drop various widgets or import templates. However, custom CSS can be a great way to extend the functionality of the plugin further.

In this short guide, we’ll cover the basics of CSS, including how selectors, classes, and IDs work.

Introduction to CSS

CSS is a language that describes how thing written in HTML appear visually.

It works by applying rules to HTML elements. In this section, we’ll explain the purpose of CSS and how it is used to style HTML elements.

CSS Selectors

CSS selectors allow you to target specific HTML elements for styling. There are several types of selectors:

1. Element Selectors: These target elements based on their HTML tag names. For example, the selector “p” targets all paragraphs in the document.
2. Class Selectors: Classes are used to group elements that share a common style. To apply a class to an HTML element, you define a class name and use the class attribute. The selector “.classname” targets elements with a specific class. For example, “.highlight” targets all elements with the class “highlight”. In Elementor for example, you can add the class of any widget or block yourself, then the CSS you add with that class will apply to it.
3. ID Selectors: IDs are used to uniquely identify specific elements. To apply an ID to an HTML element, you define an ID name and use the id attribute. The selector “#idname” targets the element with a specific ID. For example, “#header” targets the element with the ID “header”.
4. Attribute Selectors: These selectors target elements based on their attribute values. For example, the selector “input[type=’text’]” targets all input elements with the attribute type set to “text”.

CSS Classes

CSS classes allow you to apply styles to multiple elements with a single declaration. To define a class, you create a CSS rule that starts with a dot followed by the class name. To apply a class to an HTML element, you add the class name as the value of the class attribute. For example:

.myclass {
  color: red;
}

<p class="myclass">This paragraph will be red.</p>

You can apply the same class to multiple elements, making it easy to maintain consistent styles throughout your website.

With Elementor, you can use Google Dev tools to find out the CSS Class and ID of anything on a webpage.

CSS IDs

Similar to classes, IDs are used to target specific elements for styling. However, IDs are unique within a page and should only be used for elements that appear once.

To define an ID, you create a CSS rule that starts with a hash followed by the ID name. To apply an ID to an HTML element, you add the ID name as the value of the id attribute. For example:

#myid {
  font-weight: bold;
}

<h1 id="myid">This heading will be bold.</h1>

IDs are typically used when you need to style a single unique element on a page.

That’s it! We could go all day on this, but at least you now know the basics. We advise heading to YouTube for more!