Make Divi More Responsive

Make Divi More Responsive

Divi is responsive by default, but with a bit of code, it can become much much better. Learn to customize the responsive behavior of Divi while learning to code CSS layouts to get a truly mobile optimized website!

IS THIS YOU?
You find yourself duplicating a section to make a separate mobile layout (and now you can’t use # anchor links)
You get frustrated with wonky text sizes, image sizes, image backgrounds, spacing, margins, and.. yeah.. ugh.
You are at the mercy of Divi’s responsiveness, and sometimes it’s not what you want.
You want to use the default menu on desktop, but you like the slide in menu for mobile.
If you are frustrated with settling for convoluted methods of building responsive websites because you weren’t confident in CSS to do it, then this course is for you.

IS THIS YOU?
You find yourself duplicating a section to make a separate mobile layout (and now you can’t use # anchor links)
You get frustrated with wonky text sizes, image sizes, image backgrounds, spacing, margins, and.. yeah.. ugh.
You are at the mercy of Divi’s responsiveness, and sometimes it’s not what you want.
You want to use the default menu on desktop, but you like the slide in menu for mobile.
If you are frustrated with settling for convoluted methods of building responsive websites because you weren’t confident in CSS to do it, then this course is for you.

CURRICULUM
01 Introduction
It’s not just stacking
02 CSS
01 The Basics (CSS Crash Course)
02 Media Queries
03 Text
01 Responsive Text Sizes
02 Line Breaks
03 Alignments
04 Flex
01 Introduction
02 When to Flex
03 Changing Layouts
04 Contact Forms
05 Buttons
06 Call to Actions
07 Banners
08 Blurbs
09 Person
10 Portfolio Grids
11 Woocommerce
05 Building
01 Introduction
02 Building Responsively
03 Header
04 Footer
06 Conclusion
01 Extra Tips on Mobile
02 Conclusion, Downloads

YOU WILL LEARN TO…
Use CSS properly for expert building (this applies to some parts on desktop too).
Arrange grids to be multiple columns on mobile for Woocommerce products and/or portfolio items.
Use the default menu on desktop and slide in menu on mobile.
Make your own headers and footers that look great on mobile.
Make a button for driving directions to the destination on mobile.
Make new layouts that use the mobile screen more efficiently.
Rearrange elements and control the stack like a boss.
Center elements easily on desktop and mobile.
And more!

WHAT’S INCLUDED?
All the videos (over 8 hours) explaining every detail on how to code your own custom Divi responsive layouts.
A child theme specifically made to include responsive sections to ensure easy and responsive builds.
A child theme cheat sheet – A PDF file of the instructions on how to use the child theme easily.
Access to both direct comments on the lessons and a course-specific forum where you can ask questions, share results, and read other people’s solutions.

WHAT ABOUT UPDATES?
Of course there are going to be updates to Divi and WordPress, and that could sometimes mean changes to some files and some modules’ behaviors. In that case, there will be a new video added to the course for you to check. Also, new videos can sometimes be added if there are a lot of people asking similar questions.

So, no worries, anything concerning updates will be added.

This includes Divi updates, WordPress updates, and anything/everything else that happens to come along.

WHAT CHILD THEME?
You’ll be getting a child theme that:

is unlimited in its usage, so no worries about licensing. If you took the course, it’s yours.
is updated whenever there’s a major update to its dependencies (WP, Divi)
has two stylesheet files properly enqueued for Divi, one for extra responsive behavior, and one for your own edits.
allows the Divi builder on all post types
includes extra snippets you might find useful – svg support, no more Open Sans default, extra Divi library shortcodes

Get Breakdance

Breakdance is, in my opinion, the best page/site builder on the market, which is why all my tutorials use Breakdance. It's also why I have an affiliate link. You don't pay extra, but I get a little commission, so it helps support the site. Thanks!

Get ACF Pro

Another essential plugin for site building. This isn't an affiliate link, it's just for convenience.

Get WP Codebox Pro

If you'd like an easier to use, and more advanced code management plugin (instead of just editing and making files yourself) then WP codebox pro is for you. Adding php, js, and even SCSS. Pretty nice! Affiliate link below.

Blank Plugin

Sort of blank. It's made to be easy to use with the tutorials. Download and edit any way you see fit.
    Leave a Reply

    Your email address will not be published. Required fields are marked *

    New tutorials

    Designing Beyond the Brief
    Disable Gutenberg Editor on some ACF pages
    ACF flexible content fields in Breakdance 2.4
    Making a lightbox from a CPT Loop

    Got a question? ask!

    If you have any question about the content on this page, feel free to send me an email by clicking the button below.

    newsletter? sign up!

    Sign up to the newsletter for updates on tutorials, news, and offers.

    Join the cypher!

    An awesome membership program for Breakdance Builder users coupled with an inclusive, friendly community.

    Got a question?

    If you have a question about something on this page, send me an email, and hopefully I can answer, and we can solve it!