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.
You will learn about the Cascade and the browser DevTools, which will allow you to quickly troubleshoot and debug custom CSS you have written.
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.
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 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.
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.
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.
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.
Complete design framework
The most popular builder
The page builder for developers
An easy to use WP builder
WP flagship page builder
Powerful lightweight builder
A powerful visual builder for WP
An Elementor alternative
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 #1Item #2Item #3Item #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
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:
- Stop struggling with custom CSS
- Have a deeper understanding of CSS
- Understand CSS positioning well
- Know everything about adding CSS in Elementor
- Create unique designs that stand out from other Elementor sites
- Avoid buying extra plugins when a line of CSS could have sufficed
- Be set on an independent path to forward your learning of CSS
The Elementor Projects
The following Elementor + CSS designs are included as part of the course.
Elementor.com-like Mega Menu
Large Icons Step Reveal Elementor Pro Form
Uber.com-like accordion background images switcher
Fancy navigation arrows
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.