Divi Stylist Academy

Are you worried you don’t have an eye for design? Don’t be! While it is helpful, it’s not necessary - all it takes to create beautiful websites is learning a few do’s and don’ts of professional design. And if you have inborn good taste, knowing the rules of good design will help you trust your instincts.

In this module, you will learn the craft secrets to designing stunning - and converting - websites. We will start by asking the necessary questions about goals and branding that must be answered before starting a web design project. Next, we will look at sizing, spacing and alignment, because it’s way more important than people imagine! It’s easy to focus on the elements and neglect the space around them, but it’s crucial.

Having done that, we will move on to colors, and you will find out why gray is the most vital of all colors you’ll ever use in web design. We will also do some advanced color work, focusing on color schemes and gradients. Finally, we will uncover the rules of persuasive typography and text styling - and finish by learning how to combine all these elements to create a consistent, smooth design. You will learn my personal tricks of the trade that I use to make every website beautiful.

The Divi Theme is a powerful tool for building stunning websites. It offers a plethora of options, edits and tweaks, and the possibilities grow with every update. But navigating the abundance of choices may be difficult, even in a tool as accessible as Divi. That is why this module is crucial if you want to optimize your Divi Theme workflow. Also, before we dive in the more advanced topics such as CSS and jQuery, we need to be aware of what exactly Divi can and cannot do - after all, you don’t want to waste time writing custom CSS if you can achieve an effect in the Divi Theme with just a few clicks!

In this module, we will take a closer look at the Divi Theme Options, which allow you to make global changes to your website and blog, including advertising and SEO. Next, we will look at the Divi Theme Customizer, which is another powerful feature with hundreds of options. I will walk you through the Divi Builder and the Divi Library, and we will also create something fun in the Divi Theme Builder. We will modify our modules globally using Divi Presets, and we’ll look at Divi’s options to add custom code. Finally, you will learn how to work with Divi Child Themes.

Note that we aren’t going to be looking at an endless list of every single feature and its description - you can already access that in the Divi Theme Documentation. Instead, we will highlight the most important and useful tools that will help you achieve the best results in the most efficient way.

In Module 2, we learn how to best utilize the incredible possibilities of the Divi Theme. But sometimes, the built-in options are not enough for more complicated projects. That’s when we need custom CSS. In this module, we will start with the basics, setting up Visual Studio Code and looking at HTML. Tutorials you can find online give you code to copy and insert without teaching you why and how it works. And then, when something fails, you can’t fix it on your own if you don’t understand the why’s and how’s. Module 3 will provide you with the knowledge you need to use custom CSS and understand what you’re doing.

We will learn the necessary CSS terminology, including elements, classes and IDs. After learning how to inspect CSS in a browser, we’ll discuss CSS specificity hierarchy to see what trumps what, and then check out how our new, shiny knowledge looks in action! We’ll modify padding and margin in a box model, review display and position types, and style a button with custom CSS. Finally, we’ll look at the best CSS troubleshooting techniques that will help you deal with CSS problems proactively.

After laying the groundwork for using CSS, we can have some fun! In this module, you will see what exactly you can achieve with custom CSS. Hint: it’s a lot!

We will start with pseudo elements, which allow you to modify an element by adding to it other elements in relative positions - very useful when you want an element to be displayed differently on different devices, for example. Next, we’ll look at animations, which can be applied to virtually anything, and then go on to filters, which will allow you to modify an image in a bunch of cool ways. You will also learn CSS transformations, with which you can make your modules scale, rotate or move without affecting the position of other elements. We will learn to use icon fonts, because they are as cool as icons and quick to modify. We’ll devote some time to Flexbox, a most useful layout system which allows you to place items in a box in a flexible way, with many layout options. Finally, we’ll look at the CSS Grid Layout, which is even more powrful.

If this seems like a lot, don’t worry! I will lead you step by step through all these techniques, and you will see that these awesome effects usually are much simpler to achieve than they seem!

After completing modules 1 through 4, you’ll be packing some solid web-design skills. Chances are, you’ll already be implementing them in your projects! But even if you build the sleekest, most awesome website, it will be a failure if it doesn’t look great on mobile devices. Thankfully, this module will teach you all you need to know about Divi mobile responsiveness.

We will start by discussing breakpoints and CSS media queries, which are necessary tools for modifying your website’s appearance on various devices. Divi has its own set of mobile settings, and we will learn what they can do for our mobile responsiveness. Next, we will look at responsive content features and responsive design styles, setting some rules for making your content and design smoothly adaptable. As mobile menu customization can make or break your site’s conversion rates, it deserves a discussion of its own, which I will provide. Some projects may require custom column structure and order, and we will learn how to make complicated designs pixel-perfect. Finally, you will learn easy solutions to the most common mobile issues.

jQuery is a JavaScript shortcut. While JavaScript has limitless potential when it comes to making a website interactive and engaging, it can be quite wordy. ‘Wordy’ as in hundreds of lines of code on a good day. But jQuery, a JavaScript library, makes the problem of wordiness go away. It allows you to achieve amazing JavaScript effects with just a line or two of code!

In module 6, we will learn how to do just that. We will start with a strong base, making a quick overview of JavaScript and jQuery. Next, we will go over jQuery syntax, which is a short and sweet lesson, as jQuery itself is short and sweet. Then, we will learn different methods of selecting elements to modify with jQuery. We will discuss events, i.e. the actions users do on a website, such as clicking or hovering over an element. I will show you how to chain actions or methods into a sequence of effects, and how to hide and show elements on your website. Next, we’ll cover jQuery animations. We’ll look at some nifty ways of changing element data and CSS with jQuery, and to top this module off, I’ll walk you through ways of inserting, replacing, and removing elements.

This is it. The home stretch. The previous six modules teach different methods and techniques, going into detail and preparing you for various challenges. In module 7, we take a step back and look at the process of website design as a whole. In this implementation module, we will get our hands dirty and walk together through the whole process of creating a website.

We will start with the website header and follow by designing our footer layout with a call to action. We will design a beautiful home page and an effective services/portfolio page which will make users smash that CTA button! Next is the about page, and finally, we’ll design a sleek blog for those extra SEO points: a blog post layout and blog archives and categories. We will finish by summarizing the most important points of the course and I’ll direct you to further high-quality resources.

Join the Waitlist!

Read our Privacy Policy to learn how we manage and protect your submitted information.