CSS Course for Elementor Users

Create unique designs and fix styling bugs easily

Avoid purchasing extra addons when some CSS would have sufficed

Made specifically for Elementor users

Benefits you will get from this course

Be CSS independent

By knowing CSS, you won’t have to rely on others anymore for simple adjustments. Neither will you need to add a whole new plugin for something that a few lines of CSS could have achieved. You will have much better control over the look of your projects, and you will be able to give every design a unique, out-of-the-box appeal.

Troubleshoot CSS easily

You will learn about the Cascade and the browser DevTools, which will allow you to quickly troubleshoot and debug custom CSS you have written.

Locate CSS problems easily

You will learn how to find exactly where the CSS “problems” are: whether they're from a plugin, your theme, or if it’s from Elementor, exactly where the setting behind the CSS is, or where the custom CSS lies.

Understand CSS well

Get a deeper understanding of CSS, its interactions with the HTML, pseudo classes, pseudo elements, positioning, flexbox… A good understanding will save you a lot of trouble while coding CSS and make the process much smoother.

Learn all about custom CSS & Elementor

Learn the two wrappers system Elementor uses for every element, the “selector” keyword, on which element the class names are added (when you give an element a class name from the Elementor editor) and its implications, the Elementor CSS file system, and how to quickly locate a bit of CSS, be it custom, default, or from a UI setting.

Save Money

Say goodbye to having to hire a CSS developer for every little custom CSS need. You will be able to independently author your own custom CSS with the knowledge that you are doing it right.

Save Time

You will learn how to properly add custom CSS, and how to quickly debug it if it’s not working as expected. Struggling for days on a bit of CSS because it’s just not working will be a thing of the past.

Get to know the Automatic CSS learning path

In this course, not only will you learn all the basics of HTML and CSS, but you will also learn habits and methods that will put your CSS learning on autopilot. The exact same techniques I have used myself, and am still using every day.

A Course For WP Page Builder Users

Universal CSS

While this course is specifically for Elementor users, everything you will learn about CSS in this course will serve you well on any and all WordPress projects, as well as more generally, on any website or mobile app project. CSS is the universal option when it comes to visually styling elements on web pages or mobile apps.

So, even if you plan to switch to another WordPress page builder, or another system entirely, you will bring that very useful knowledge with you.

CSS Course For Elementor Users
Divi

Complete design framework

CSS Course For Elementor Users
ELEMENTOR

The most popular builder

CSS Course For Elementor Users
Oxygen

The page builder for developers

CSS Course For Elementor Users
Brizy

An easy to use WP builder

CSS Course For Elementor Users
Beaver Builder

WP flagship page builder

CSS Course For Elementor Users
Zion Builder

Powerful lightweight builder

CSS Course For Elementor Users
Bricks

A powerful visual builder for WP

CSS Course For Elementor Users
BreakDance

An Elementor alternative

CSS Course For Elementor Users
Cwicly

Page builder for Gutenberg

Become the CSS Ninja you were destined to be.

We’ve demystified the language and unravelled the mysteries that are keeping you away from becoming a true master of the art of CSS.

About the teacher

Maxime Desrosiers

Maxime has done work for several international companies, such as Nikon, Bosch, Bai communications, Azul, Appcast and Forms2. Maxime is running Element.how, one of the most popular Elementor custom code based tutorials repository. Maxime has also created shapedividers.com, a CSS generator tool used to make static and animated SVG shape dividers.

Projects he has contributed to have been featured in GQ magazine, Elementor.com sites of the month and Elementor.com sites of the year. Elementor.com itself uses the CSS-only mega menu technique that Maxime created and published here on Element.how.

THE OUTLINE

What you get

15

HTML lessons

27

CSS lessons

4+

Exclusive Elementor projects

100+

Interactive code playgrounds

The complete course outline

HTML Chapters

CSS Chapters

Elementor Projects

Codeplayground demos

If you believe, like me, that there is no better way to learn than by example, you will be well served with over 100 interactive code playgrounds such as these:

From the CSS Flexbox chapter

.flex-cd7 {
   height:150px;
   background-color: pink;
   display:flex;
}

.flex-cd7 div {
   background-color:#fe6da8;
   color:#fff;
   padding:10px;
   margin:5px;
   width:20%;
}
.flex-cd7 {
   height:150px;
   background-color: pink;
   display:flex;
   align-items:center;
}

.flex-cd7 div {
   background-color:#fe6da8;
   color:#fff;
   padding:10px;
   margin:5px;
   width:20%;
}
.flex-cd7 {
   height:150px;
   background-color: pink;
   display:flex;
   align-items:flex-start;
}

.flex-cd7 div {
   background-color:#fe6da8;
   color:#fff;
   padding:10px;
   margin:5px;
   width:20%;
}
.flex-cd7 {
   height:150px;
   background-color: pink;
   display:flex;
   align-items:flex-end;
}

.flex-cd7 div {
   background-color:#fe6da8;
   color:#fff;
   padding:10px;
   margin:5px;
   width:20%;
}
.flex-cd7 {
   height:150px;
   background-color: pink;
   display:flex;
   align-items:stretch;
}

.flex-cd7 div {
   background-color:#fe6da8;
   color:#fff;
   padding:10px;
   margin:5px;
   width:20%;
}
.flex-cd7 {
   height:150px;
   background-color: pink;
   display:flex;
   align-items:baseline;
}

.flex-cd7 div {
   background-color:#fe6da8;
   color:#fff;
   padding:10px;
   margin:5px;
   width:20%;
}
.flex-cd7 {
   height:150px;
   background-color: pink;
   display:flex;
   align-items:baseline;
}

.flex-cd7 div {
   background-color:#fe6da8;
   color:#fff;
   padding:10px;
   margin:5px;
   width:20%;
}

.flex-cd7 div:nth-child(2) {
   font-size:36px;
}

.flex-cd7 div:last-child {
   font-size:28px;
}
.flex-cd7 {
   height:150px;
   background-color: pink;
   display:flex;
   align-items:flex-start;
}

.flex-cd7 div {
   background-color:#fe6da8;
   color:#fff;
   padding:10px;
   margin:5px;
   width:20%;
}

.flex-cd7 div:nth-child(2) {
   font-size:36px;
}

.flex-cd7 div:last-child {
   font-size:28px;
}
Item #1
Item #2
Item #3
Item #4

From the CSS Animation chapter

    .animation-multi-percent-cd10 {
       margin-left:50px;
       margin-top:50px;
       height: 100px;
       width: 100px;
       background-color: pink;
       animation: change-percentages 9s forwards infinite;
    }

    @keyframes change-percentages {
       0% { 
          transform: translate(0,0) rotate(0deg);
          background-color: pink;
       }
       30% { 
          transform: translate(0,100px) rotate(360deg) scale(1.3);
          background-color: blue;
       }
       50% {
          transform: translate(100px,100px) rotate(720deg);
          background-color: yellow;
       }
       80% {
          transform: translate(100px,0px) rotate(1080deg) scale(1.5);
          background-color: green;   
       }
       100% {
          transform: translate(0,0) rotate(1440deg) scale(1);
          background-color: pink; 
       }
    }
    .animation-multi-percent-cd10 {
       margin-left:50px;
       margin-top:50px;
       height: 100px;
       width: 100px;
       background-color: pink;
       animation: change-percentages 6s forwards infinite;   
    }
    
    @keyframes change-percentages {
       0% { 
          transform: translate(0,0) rotate(0deg) scale(1) skew(0);
          background-color: pink;
       }
       20% { transform: translate(0,100px) rotate(360deg) scale(1.3) skew(0); }
       30% { background-color: blue;}
       50% {
          transform: translate(50px,100px) rotate(720deg) scale(1.3) skew(0);
          background-color: yellow;
       }
       70% { transform: translate(100px,100px) rotate(1080deg) scale(.5) skew(0); }
       80% { transform: translate(100px,50px) rotate(1440deg) scale(1.5) skew(0); }
       90% { background-color: green; }
       95% { transform: translate(100px,0) rotate(1800deg) scale(1.3) skew(45deg); }
       100% {
          transform: translate(0,0) rotate(2160deg) scale(1) skew(0);
          background-color: pink; 
       }
    }
     
     

I could not find a code demonstration method that was exactly what I wanted, so I developed my own for this course. 

 

Both the CSS and the HTML are editable directly, and clicking on different CSS snippets will automatically apply that CSS to the preview.

CSS course for Elementor Users

Build beautiful websites for your clients

If you’re looking to improve the style and look of your WordPress websites, learning CSS can be the best way forward. This course will teach you the fundamentals of CSS in easy-to-understand language that make it simple for you to use CSS like a pro when building websites on WordPress.

Get this course if you want to:

CSS Course For Elementor Users
30
Days money back if not satisfied

The Elementor Projects

The following Elementor + CSS designs are included as part of the course. Through videos, you will learn each step of the way to get there.

Uber.com-like accordion background images switcher

Fancy navigation arrows

(actually a modified Icon List element)

Tabs with images in their titles

Frequently Asked Questions

This course is for WordPress & Elementor users looking to get from a newbie, beginner or intermediate level CSS understanding all the way to Advanced.

We cover all the basics, so if you have no previous experience at all in HTML and CSS, that course is also for you.

Even if you don’t use Elementor, you will learn a lot from this course, as 90% of it is universal.

There are about 40 chapters of various length. Depending on how “thoroughly” you want to be in each chapter, an overall estimate of 30 hours for the course seems reasonable.

So, about one month at one hour per day!

Absolutely! Everything will be unlocked out of the gate. You will have complete freedom to explore any chapter or project at your convenience.

Yes, along will all future updates.

Yes, it is my plan to add to this course, based on the feedback I get from students.

Instead of quizzes, I made the lessons interactive. I believe that’s a much better way to learn.

The course is presented in three parts. The HTML part, as a basic understanding of HTML is required to truly understand CSS.

Then we have the CSS part of the course, which is the bulk of it. There are 28 Chapters in this section.

Finally, we have the Elementor Projects.

The vast majority of the course is through interactive tutorials format. The Elementor Projects are videos.

You can email me within 30 days of purchase if you’re unhappy with the course for any reason, and I’ll return your money with no questions asked.

Add Your Heading Text Here

Get the course now

LIMITED TIME LAUNCH OFFER: 20% discount with coupon code "launchoffer"

Leave a Reply