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.
Divi
Complete design framework
Elementor
The most popular builder
Oxygen
The page builder for developers
Brizy
An easy to use WP builder
Beaver Builder
WP flagship page builder
Zion Builder
Powerful lightweight builder
Bricks
A powerful visual builder for WP
BreakDance
An Elementor alternative
Cwickly
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
Who is this course for?
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.
How long is the course?
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!
Will I have access to the entire course?
Absolutely! Everything will be unlocked out of the gate. You will have complete freedom to explore any chapter or project at your convenience.
Do I have access to the course for life?
Yes, along will all future updates.
Will the course be extended?
Yes, it is my plan to add to this course, based on the feedback I get from students.
Will there be quizzes?
Instead of quizzes, I made the lessons interactive. I believe that’s a much better way to learn.
How is the course formatted?
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.
Can I get a refund if I don't like the course?
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.
Includes
- 14 HTML ChaptersNot yet caught up on HTML? No worries, the course includes everything needed to get you up and running with HTML5!
- 30 CSS ChaptersLearn all there is to know to take you from a newbie or beginner all the way to an advanced CSS programmer.
- 7 Elementor ProjectsPractice with actual, real world projects, where we integrate Elementor and Custom CSS!
- One month money back
- One time purchaseBuy the course and get lifetime access to it and all its updates
Includes
- Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
Preview premium tutorials - Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
- Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
- free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
- 30 day money backNo questions asked money back. Not what you expected? Get a refund.
- One-time payment of only $299No hidden fees or subscriptions.
Sales taxes added where applicable. - Great supportGet help when you need it. Support includes getting things working as intended.
Support excludes customization work. - Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.
I will say that it is definitely my intention to keep adding tutorials to Element.how.
Hi, love this! I just have one issue. I'm left with a lot of blank space at the bottom of the form if the user doesn't click an option. Any way to fix this?
Greetings Alistair!
Replace this CSS:
#fancyForm .elementor-field-group:nth-child(1):has(input) ~ .elementor-field-group { opacity:0; pointer-events:none; transform: translateY(20px); display: none; transition: opacity 0.6s, transform 0.6s; } #fancyForm .elementor-field-group:nth-child(1):has(input:checked) + .elementor-field-group { opacity:1; transform:translateY(0); pointer-events:all; display: flex; } #fancyForm .elementor-field-group:nth-child(2):has(input:checked), #fancyForm .elementor-field-group:nth-child(2):has(input:checked) ~ .elementor-field-group { opacity:1; transform:translateY(0); pointer-events:all; }With this:
#fancyForm .elementor-field-group:nth-child(1):has(input)~.elementor-field-group { display: none; } #fancyForm .elementor-field-group:nth-child(1):has(input:checked)+.elementor-field-group { display: flex; animation: formFieldReveal 0.6s ease-in-out; } #fancyForm .elementor-field-group:nth-child(2):has(input:checked), #fancyForm .elementor-field-group:nth-child(2):has(input:checked)~.elementor-field-group { display: flex; animation: formFieldReveal 0.6s ease-in-out; } @keyframes formFieldReveal { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }Having an animation instead of a transition allows us to animate elements that go from display:none to display:flex. However as you will see, in that case, they won't animate in reverse (when going from display:flex to display:none).
Still that should be a satisfactory solution!
Cheers!