Use this skill when the user is writing CSS for Divi 5, creating styles for WordPress/Divi, working with Divi modules, or mentions Divi theme development. Provides CSS patterns, class naming conventions, selector specificity guidance, and Divi-specific best practices.
/plugin marketplace add cjsimon2/Divi5-ToolKit/plugin install cjsimon2-divi5-toolkit@cjsimon2/Divi5-ToolKitThis skill inherits all available tools. When active, it can use any tool Claude has access to.
examples/button-variants.cssexamples/design-tokens.cssreferences/divi-selectors.mdDivi 5 is a complete architecture overhaul featuring:
Location: Divi -> Theme Options -> Custom CSS
Format: Raw CSS without <style> tags
/* Paste directly - no tags needed */
:root {
--custom-color: #2ea3f2;
}
Location: Add Code Module to page
Format: CSS wrapped in <style></style> tags
<style>
.page-specific-style {
background-color: var(--custom-color);
}
</style>
Location: child-theme/style.css Format: Standard CSS file
Location: Module -> Advanced -> Custom CSS -> Free-Form CSS
Format: Use selector keyword to target element
selector {
background-color: #1d1f22;
}
selector h2 {
color: gold;
}
Divi uses inline styles and !important extensively. To override:
/* May not work - too low specificity */
.et_pb_button {
background-color: black;
}
/* Better - higher specificity */
body .et_pb_button {
background-color: black !important;
}
/* Best - with custom class */
body .et_pb_button.custom-btn {
background-color: black !important;
}
body .et_pb_button {
background-color: #000000 !important;
border-radius: 0 !important;
letter-spacing: 4px !important;
text-transform: uppercase !important;
font-family: 'Lato', sans-serif !important;
font-weight: 400 !important;
border: 1px solid #000000 !important;
}
body .et_pb_button:hover {
background-color: #222222 !important;
border-color: #222222 !important;
}
/* Dark section */
.et_pb_section.custom-dark-section {
background-color: #1d1f22 !important;
}
.et_pb_section.custom-dark-section h1,
.et_pb_section.custom-dark-section h2,
.et_pb_section.custom-dark-section p {
color: #ffffff !important;
}
/* Gray section */
.et_pb_section.custom-gray-section {
background-color: rgba(150, 150, 150, 0.47) !important;
}
Use a unique prefix to avoid conflicts with Divi's classes:
| Pattern | Example | Purpose |
|---|---|---|
{prefix}-btn | cjs-btn | Button base |
{prefix}-btn--variant | cjs-btn--primary | Button variant |
{prefix}-section--modifier | cjs-section--dark | Section modifier |
{prefix}-card | cjs-card | Component |
class| Module | Selector | Notes |
|---|---|---|
| Button | .et_pb_button | Needs body prefix and !important |
| Text | .et_pb_text, .et_pb_text_inner | Inner for paragraphs |
| Blurb | .et_pb_blurb | Card-like modules |
| Section | .et_pb_section | Outer containers |
| Row | .et_pb_row | Inner containers |
| Column | .et_pb_column | Grid columns |
| Heading | .et_pb_module h1/h2/h3 | Use module prefix |
| Image | .et_pb_image | Image modules |
| CTA | .et_pb_promo | Call-to-action |
:root {
--font-body: 'Fira Sans', system-ui, sans-serif;
--font-title: 'Josefin Sans', sans-serif;
--font-heading: 'Playfair Display', Georgia, serif;
--font-button: 'Lato', Helvetica, Arial, sans-serif;
}
body .et_pb_module h1 {
font-family: var(--font-title) !important;
text-transform: uppercase;
letter-spacing: 3px;
}
body .et_pb_module h2 {
font-family: var(--font-heading) !important;
color: #3f445e !important;
}
/* Limit text width for optimal readability */
.et_pb_text_inner p,
.et_pb_text_inner li {
max-width: 60rem; /* ~960px, replaces 75ch */
}
/* Center when in centered modules */
.et_pb_text_align_center .et_pb_text_inner p {
margin-left: auto;
margin-right: auto;
}
Divi 5 supports 7 breakpoints. Key ones:
/* Tablet landscape */
@media (max-width: 1024px) { }
/* Tablet portrait */
@media (max-width: 980px) { }
/* Phone landscape */
@media (max-width: 767px) { }
/* Phone portrait */
@media (max-width: 479px) { }
/* Ultrawide monitors */
@media (min-width: 2560px) {
:root { font-size: 17px; }
.et_pb_row { max-width: 1500px !important; }
}
@media (min-width: 3440px) {
:root { font-size: 18px; }
.et_pb_row { max-width: 1600px !important; }
}
@media (min-width: 3840px) {
:root { font-size: 19px; }
.et_pb_row { max-width: 1800px !important; }
}
.et_pb_blurb.custom-card,
.et_pb_column.custom-card {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 2rem;
transition: all 0.3s ease;
}
.et_pb_blurb.custom-card:hover,
.et_pb_column.custom-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.et_pb_text.custom-quote {
border-left: 4px solid #b2a065;
padding-left: 2rem;
font-family: var(--font-title);
font-size: 1.375rem;
font-style: italic;
}
.custom-info-box {
background-color: #f5f5f5;
border-left: 4px solid #b2a065;
padding: 2rem;
border-radius: 0 8px 8px 0;
}
:root {
/* Brand Colors */
--color-primary: #2ea3f2;
--color-primary-hover: #1a8fd4;
--color-secondary: #b2a065;
--color-secondary-hover: #9a8a57;
/* Dark Theme */
--color-dark-section: #1d1f22;
--color-dark-overlay: rgba(29, 31, 34, 0.95);
--color-gray-section: rgba(150, 150, 150, 0.47);
/* Text Colors */
--color-white: #ffffff;
--color-body-text: #222222;
--color-body-text-light: #666666;
--color-heading-text: #333333;
--color-heading-accent: #3f445e;
/* Backgrounds */
--color-light-gray: #f5f5f5;
--color-footer: #1d1f22;
/* Typography */
--font-body: 'Fira Sans', system-ui, sans-serif;
--font-title: 'Josefin Sans', sans-serif;
--font-heading: 'Playfair Display', Georgia, serif;
--font-button: 'Lato', Helvetica, Arial, sans-serif;
/* Sizing */
--max-width: 1400px;
--max-width-text: 60rem;
--radius-card: 8px;
}
body .et_pb_button<style></style> tagsFor complete examples, see:
${CLAUDE_PLUGIN_ROOT}/skills/divi5-css-patterns/examples/${CLAUDE_PLUGIN_ROOT}/skills/divi5-css-patterns/references/This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.