In This video, I use the new Divi 5 flexbox feature and the new SiteKrater Pro Framework to design a basic hereo section.
In this video, I share a huge Divi 5 framework upddate. This update includes a style guide and autocomplete on classes.
- Check out SiteKrafter here https://sitekrafter.com
Can anyone help me figure out how I can access my Divi Cloud through the Divi 5 interface? I can access it if I want to save or import something, but can't seem to figure out how to get into it so I can edit and manage it.
Complete Changelog v6.2.2
Overview
Here is the reference https://diviuniversity.com/reference
This changelog documents the complete transformation of the original SiteKrafter Pro CSS framework into a modern, Divi 5-compatible, Tailwind-inspired utility-first framework with enhanced typography, accessibility, keyboard navigation, and comprehensive utility classes.
MAJOR STRUCTURAL CHANGES
1. CSS Reset & Base Styles**
❌ REMOVED
- Universal CSS reset (`, ::before, *::after`) that conflicted with Divi 5
- Global body font-size override that broke Divi's typography system
- Aggressive global styles that interfered with Divi components
✅ ADDED
- Scoped reset system (`.sk-reset`) for safe usage without conflicts
- Conservative base styles that preserve Divi 5 functionality
- Optional typography classes (`.sk-typography`, `.sk-custom-typography`)
- Divi-specific integration overrides
2. Typography System Complete Overhaul
🔄 COMPLETELY REDESIGNED
- Font Sizes:Updated from oversized values to modern UI/UX best practices
- Body text: Now 16-18px (was much larger and conflicting)
- H1: Now 28-36px (was 40px+ and too large)
- H2-H6: Realistic heading hierarchy (24-30px down to 14-16px)
- All sizes now use responsive `clamp()` functions
✅ ADDED
- Comprehensive line-height system for all text sizes
- Text-specific line heights (`.text-xs` through `.text-4xl`)
- Heading-specific line heights (`.sk-heading-9xl` through `.sk-heading-s`)
- Modern responsive typography using `clamp()` functions
- Letter-spacing optimization for better readability
- `text-wrap: balance` for improved typography
✅ ADDED
Complete Line Height System
Heading-specific line heights
Enhanced spacing variables
--sec-padding-s: clamp(3.8rem, 7vw, 6.2rem) clamp(2.4rem, 5vw, 4rem);
--sec-padding-m: clamp(6.2rem, 9vw, 10rem) clamp(4rem, 6.5vw, 6.5rem);
--sec-padding-l: clamp(10rem, 11vw, 16.2rem) clamp(6.5rem, 7.5vw, 10.5rem);
--sec-padding-hero: clamp(16.2rem, 13vw, 26.2rem) clamp(10.5rem, 9vw, 16.8rem);
🔄 UPDATED
- Font size variables now use realistic UI/UX measurements
- Added heading aliases for backward compatibility
- Enhanced color system with semantic meanings
- Improved spacing scale with responsive values
✅ ADDED
- Complete `.sk-heading-*` class system (9xl through s)
- Enhanced heading classes with proper letter-spacing
- `text-wrap: balance` for better typography
- Modern font-feature settings for rich text
- Comprehensive font-weight utilities (100-900)
- Text transformation utilities (uppercase, lowercase, capitalize)
- Letter-spacing utilities (tight, wide, wider)
Sizing & Positioning System
✅ COMPLETELY NEW
Width utilities
.w-auto, .w-full, .w-screen, .w-fit
.w-1/2, .w-1/3, .w-2/3, .w-1/4, .w-3/4
Height utilities
.h-auto, .h-full, .h-screen, .h-fit
Max-width scale
.max-w-xs through .max-w-7xl
.max-w-full, .max-w-screen, .max-w-none
Position utilities
.static, .fixed, .absolute, .relative, .sticky
Z-index scale
.z-0, .z-10, .z-20, .z-30, .z-40, .z-50, .z-auto
Container & Layout System
✅ ADDED
Responsive container
.container {
width: 100%;
max-width: var(--container-max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
Section spacing classes
.sec-s { padding: var(--sec-padding-s) !important; }
.sec-m { padding: var(--sec-padding-m) !important; }
.sec-l { padding: var(--sec-padding-l) !important; }
.sec-hero { padding: var(--sec-padding-hero) !important; }
Responsive Design
❌ REMOVED:
- Conflicting responsive overrides with high specificity
- `.et_pb_text_inner .sk-heading-*` rules that broke base classes
- Media query conflicts that prevented classes from working
✅ SIMPLIFIED
- Mobile-first approach maintained
- Cleaner media queries without conflicts
- Better grid responsiveness
- Responsive container system
DIVI 5 INTEGRATION
✅ ADDED
/ Divi Integration & Overrides /
.et_pb_module { width: 100%; height: 100%; }
.et_pb_text { margin: 0 !important; }
button, .et_pb_button { margin-top: 0 !important; margin-bottom: 0 !important; }
/ Editor overrides for better builder experience /
.et-db #et-boc .et-l .et-fb-modal--with-header-dropdown .et-fb-font-icon-filter,
.et-db #et-boc .et-l .et-fb-modal--with-header-dropdown .et-fb-options-filter {
top: 0; margin-top: 0;
}
CRITICAL FIXES
❌ REMOVED CONFLICTS
- **Duplicate CSS Rules
- Fixed duplicate `.dropdown-menu a:focus` rules
- Consolidated conflicting focus styles
- Removed redundant declarations
- Specificity Issues:
- Removed `.et_pb_text_inner .sk-heading-*` overrides
- Fixed CSS cascade conflicts
- Resolved class application issues
- JavaScript Errors:
- Simplified footer.php JavaScript to prevent critical errors
- Enhanced arrow key navigation with better browser support
- Added comprehensive menu selector support
VISUAL IMPROVEMENTS
✅ ENHANCED
- Modern shadow system with multiple levels
- Improved border radius scale
- Better transition timing functions
- Enhanced color system with transparency variants
- Glass effect components
- Button hover states
- Notice component styling
- Form element styling
🔄 UPDATED
- Comprehensive utility class system
- Better browser compatibility
- Optimized responsive queries
- Cleaner cascade with fewer overrides
PERFORMANCE OPTIMIZATIONS
✅ IMPROVED
- Reduced CSS specificity conflicts
- Cleaner cascade with fewer overrides
- Better browser compatibility
- Optimized responsive queries
- Eliminated redundant CSS rules
- Streamlined JavaScript for better performance
❌ REMOVED
- Redundant CSS rules
- Conflicting media queries
- Unnecessary !important declarations where possible
- Duplicate focus styles
In this video, I show you how to create and sell online courses using WordPress. I'll demonstrate the exact steps you need to follow. I Use SureCart and TutorLMS for course creation. This guide will walk you through important settings and tools to help you succeed in selling online courses.
- Get SureCart here https://diviuniversity.com/SureCart
- Get TutorLMS here https://diviuniversity.com/tutorlms
- Get Divi here https://diviuniversity.com/divi
Your chance to master how Divi 5 works. Offer ends today!
One Time OFFER Today normal price $47 get it today for $27
