Transforming Divi with CSS & jQuery

The Divi Space Transforming Divi with CSS and jQuery course will teach you everything you need to know about building a successful website with Divi. Covering all of the bases, the course will show you how to use fundamental web design principles to create beautiful and highly functional websites with Divi. With the knowledge gained in the course, you’ll be able to transform a standard, good looking website into a striking and powerful online solution.

Course Instructor

Stephen James Author

Stephen James is a UK based web developer whose name is synonymous with Divi. An early adopter of ‘Divi as a framework’, his easy to follow tutorials and Divi extensions have saved thousands of designers from hours of pain.

Basics

Getting to know Divi

A deep dive into the standard customisation options available in Divi, including: Theme and Module Customizer, Divi Theme Option (Custom CSS & Integration Tab) and inline editing options (front end editor). Taking a peak at the HTML & CSS buildup of the Divi frontend.

Introduction to CSS

Understanding what CSS is, how it works #selector { property: value }

Introduction to jQuery

What Javascript is, how Jquery makes building javascript solutions easier and how it works.

Browser Toolkit

How to use inspect element, console and other baked in tools to improve development. An intro to must have browser extensions.

CSS

CSS Heirarchy and Placement

How cascading works, how to override CSS and best practises for clean, well written code.

Pseudo Elements

What they are, why they’re awesome and usercases for how to make them work in your designs (icons, separators etc).

Media Queries

How they work, why we use them, best practises for mobile responsiveness. How to utilise Divi’s breakpoints for fluid design.

Animations

How to build your own animation, how to hack into Divi’s animations and where to find new ones.

Troubleshooting

When CSS simply doesn’t work, how do you fix it? Troubleshooting common issues including broken CSS, caching and overriding CSS.

Five real world examples where custom CSS has been used to make Divi better

A tour of five real sites that use CSS well.

JQuery

The jQuery Cheat Sheet

10 prebuilt lines of Jquery that can be used in a function to create stunning effects.

Building a jQuery function

How to build a proper Jquery function including how to specify when and where it runs.

Moving & Replacing with jQuery

Three common issues in modules and static pages, solved with Jquery. How to Move a div somewhere else, how to replace the contents inside a div with something else and how to create a wrapper around content (putting comments box into a toggle for example).

Preparing a child theme for jQuery & CSS

Building a child theme template that correctly adds CSS & Jquery.

Practical (Building Elegant Themes Website in Divi)

A Practical Demonstration of CSS & jQuery

Walkthrough of using what we’ve learned to create the ET home page.

Bonus: Inserting Layouts in Template Pages

Using Jquery & PHP Teaser

Bonus: Editing Modules

Cloning and editing a Divi Module (Teaser to module building course)

What Others Have Said

Traduction des vidéos

By: josian.gaine

Bonjour, Si les vidéos pouvaient être traduites j'aurais réussi à suivre les cours. Dommage je vais devoir faire autrement car je ne peux pas suivre sans traduction.

Really love this course!

By: Kathryn Martyn

This course has helped me understand how to think in code. (Simple code, I'm no coding genius). Solving web design problems seems like magic when you know how to locate what you want to change (the element), and then how to write the code to target that specific element and this happened for me in the very first lesson. SJ is a great instructor; easy to follow, explaining concepts in a way that creates interest and excitement about the possibilities. Whether you completely understand CSS and jQuery or your a newbie like me, you'll quickly learn how easily it is to make changes that up until now you've spent hours searching the web for answers. Want to move a logo? Change a background color? There are hundreds of tutorials and guides, some up-to-date, some not -- and learning to find answers is a big part of learning to design web sites but here you've got the benefit of SJ's expertise, the Facebook group for sharing questions and ideas, and the entire Elegant Themes community. Best decision I ever made.

I am really happy I decided to give this a go

By: George Nicolaou

I am a developer that uses Divi almost exclusively. Sometimes when I come across courses like this they are usually so simple that I get nothing out of them. The reason I like this one so far is that yes the content may be things I know or have used before but the explanation and the way it's taught makes me want to come back and refresh what I know. That's not to say that I haven't learned new things because I have. I usually hang out on the ET support forum and help people with issues and I love doing it in my free time but people that are willing to learn will find that the way SJ teaches them how to use inspect element for example and debugging errors etc will probably lead to even DIYers not needing as much help. My point is either way you can learn a lot. Everyone should just take this course in my humble opinion.

Response from SJ

Hi Stephen, thank you for your feedback and kind comments regarding the content and presentation of the course. We release the course content over a four week period to ensure no one gets left behind. It sounds like week one may not have been as taxing for you as the for some of our other students, but I hope the later content was, and continues to be more beneficial to you :)
Sorry to hear you've had a few technical difficulties, that have required help from our support team. I trust they are now sorted and wanted to let you know we hear you, and it's your feedback that helps us make improvements. Thanks.