Hello everyone,

I have a blurb on my page that contains a long article. At some point in the text, I would like to shorten the visible portion and direct readers to continue reading the full article on another page. The goal is to reduce the space the blurb takes up on the screen.

I'm considering adding a "Read more" button that links to the rest of the article.

Is it possible to link directly to a specific section or module on another page? Or would it be better to dedicate an entire separate page to the full article?

What are your thoughts or recommendations?

Thank you!

Great morning, Divi fam! I was wondering if it is possible to create alternating layouts within a loop, such as the first row with two columns: an image on the left and text on the right, followed by the second row with two columns: an image on the left and the data on the right.

Watch how I redesign one of our Divi University member's page 😀

Most Divi premade layouts look stunning in the preview, but when you actually go to production, they feel rigid, clunky, and fail the accessibility test. Therefore, you need a system that unlocks Divi’s true power by automating your scales.

I’ve spent 15 years in the UI trenches, and I see the same mistake every day: designers manually tweaking font sizes for every single breakpoint.

It’s low-leverage work that leads to inconsistent, "jittery" websites. In this video, I take a standard Divi layout and "gut" its static values.

I’ll show you how to inject a fluid design system so your typography and spacing breathe naturally across every screen size automatically.

What You’ll Learn:

• The Static Trap: Why hard-coded pixels are killing your UX.
• Fluidity 101: How to use mathematical scales for Font size and Spacing.
• System Over Manual: Applying a global system to a premade layout without breaking the design.
• The Accessibility Edge: Making your site readable for everyone, on everything.

In Divi 5 I can‘t store pages when I inserted links to YouTube videos. In Divi 4 it works. Does someone have an idea what I should change?

You've been building in Divi 5 the hard way — and you didn't even know it. Composable Settings is one of the most powerful new features in Divi 5, and in this video I'm breaking it down from scratch so you can start using it today — even if you're brand new to Divi.

-- Get The Divi 5 Mastery Course For ONLY $37

-- [Buy Divi 5](<https://diviuniversity.com/divi >)

-- [Buy Divi 5 Design System](<https://diviuniversity.com/Krafterpro >)

In this tutorial you'll learn:

✅ What Composable Settings actually are (and why they matter)

✅ How they work inside the Divi 5 builder

✅ How to use them to build faster and smarter

✅ Real examples so you can follow along immediately

If you're just getting started with Divi 5, this is one feature you need to understand before you build another page.

On the 19th Mak did a video showing image sizes eg square, portrait, as a preset that would be in the next Krafter update. I have downloaded Krafter Pro again but the image presets are not showing. Is anyone else seeing this issue ?

Most Divi 5 websites have the same problem.

Flat backgrounds. Static sections. Zero visual depth.

And the frustrating part? It's not a skill problem.

In this tutorial, I'm showing you exactly how to use gradient backgrounds + transparency in Divi 5 to create sections that actually stop the scroll.

This is the kind of design detail that separates a £500 website from a £5,000 one — and it takes less than 10 minutes to set up.

Inspired by Mak’s great tutorial on stackable cards, I decided to put a little twist on it! I used his visual guide for the card layout in Divi 5, but handled the sticky effects and spacing purely through CSS. It was a fun way to practice using Divi 5’s custom CSS options versus the standard property panel. Definitely a solid exercise if you’re looking to sharpen your CSS skills within the new Divi 5 environment!

I’m using the KrafterPRO preset system — and honestly, I find myself constantly referring back to his excellent, updated Divi5 - Mastery II

A friendly guide for non-coders. You'll copy two snippets of CSS, type a few class names in Divi, and have a beautiful scroll effect live in under 10 minutes.

Beginner-friendly·No JavaScript·Divi 5 · with or without Divi5-Child Theme

As visitors scroll down, each card slides over the previous one — leaving a small peeking strip of the card behind it. The effect is popular on modern landing pages, feature sections, and storytelling layouts. Best of all: it's just CSS.

How it works in one sentence: Every card gets position: sticky — it "sticks" to the top of the viewport when scrolled past. Each card gets a slightly bigger top offset, so the ones behind it peek out. That's the entire trick.

Step 1 — Build the Structure in Divi 5

Mak's workflow: design one Row with a Group inside it (image left, content right). Then duplicate that Row 3, 4, or 5 times — one duplicate per card. The Row itself is the card. The CSS class goes directly on each Row.

Divi structure

CSS Class field (Advanced tab) -> Attributes ->Section ->no class needed

Row -> Attributes -> Add Atributes -> Attribut value

Row 1 ← this is Card 1 Attribut value: stack-card stack-card-1

Row 2 ← Card 2 — (duplicate of Row 1) Attribut value: stack-card stack-card-2

Row 3 ← Card 3 — duplicate again Attribut value: stack-card stack-card-3

Row 4 ← Card 4 — and so on… Attribut value stack-card stack-card-4

The smart workflow: Build Row 1 completely — design the Group with image, text, and buttons exactly how you want it. Then right-click the Row → Duplicate. Do this 3–5 times. Only then assign the CSS classes and swap out the content per card.

Inside the Row — why a Group?

A Group inside the Row acts as a flexible layout container. Set the Group to Flexbox (row direction) so the image Group and the content Group sit side by side. Inside the content Group, a Button-Group set to Flexbox lets you arrange buttons next to each other, stacked, left- or right-aligned — all by clicking, no code needed.

Where exactly does the class name go?

The path in Divi 5: Row → Advanced → Attributes → Add Attribute → select "class". A small panel opens with four fields. Only one needs input:

1) Click on the Row → open its settings → click the Advanced tab.

2) Find the Attributes section, click Add Attribute, and from the dropdown select class.

3) A small panel opens — type your class names into Attribute Value only. Leave all other fields as they are.

Divi 5 · Row → Advanced → Attributes → Add Attribute → class

Attribute · class×

Admin Label

 Leave empty — or optional label just for your own reference in the builder.

Target Element

Module▾

Leave on "Module" — this targets the Row itself. Don't change it.

Attribute Name

class

Already filled in as "class" — leave it exactly as is.

Attribute Value ← type here

stack-card stack-card-1

This is the only field you fill in.
Two names separated by exactly one space — no dots, no commas.
Use stack-card-2 for Row 2, stack-card-3 for Row 3, etc.

Two class names — why? stack-card is shared by all Rows and activates position: sticky. stack-card-1, stack-card-2 etc. sets the individual sticky offset for that specific card. Both go into Attribute Value, separated by one space — no dots.

stack-card stack-card-2

.stack-card .stack-card-2

The CSS

Step 2 — Add the CSS

You have two options. Use Option A if you want the quickest setup. Use Option B if you already have a Child Theme set up (recommended for the long run).

Option A — Divi Theme Options (quickest)

1

WordPress Dashboard → Divi → Theme Options

2

Stay on the General tab and scroll all the way to the bottom — you'll find the Custom CSS box there

3

Paste the code and click Save Changes

Good to know: Divi's Custom CSS box (Theme Options) and WordPress's own Additional CSS field (Appearance → Customize) are synced — they show the same content. Both apply the CSS globally to your entire site. The Divi path is just more direct.

Don't confuse this with the per-element CSS fields! Inside the Divi Builder, every Section, Row and Module has an Advanced tab with CSS fields called Before, Main Element, and After. Those are for styling that one specific element only — and they correspond to CSS pseudo-elements (::before / ::after). They are not the right place for our global stacking card rules.

Option B — Child Theme style.css (recommended)

1) WordPress Dashboard → Appearance → Theme File Editor

2) Select your Child Theme in the top-right dropdown

3) Click style.css in the file list and paste the code at the bottom of the file

--> or use a FTP-Client (like FileZilla) and an Editor (like vsCode or else) for the style.css

Why a Child Theme? A Child Theme keeps your CSS safe when Divi updates. Without one, an update can erase everything in Theme Options. If you don't have one yet — search for "Divi Child Theme" — setup takes about 5 minutes.

The CSS — copy this entire block

/* =============================================
   STACKING CARDS — Divi 5  (final, tested)

   Row → Advanced → Attributes → Add Attribute → class
   Attribute Value:
   Row 1  →  stack-card stack-card-1
   Row 2  →  stack-card stack-card-2
   Row 3  →  stack-card stack-card-3
   (and so on — no class needed on the Section)
   ============================================= */

/* ── SETTINGS — only change these three values ────────────────
   --navbar:   height of your fixed navigation bar in px.
               Card 1 stops this far from the top edge.
               No fixed navbar? → set to 0px
   --peek:     visible strip of each card below the active one.
               40px–60px works well for most designs.
   --scroll:   how much scroll room each card gets before the
               next one slides over it. Use vh (viewport height)
               so it adapts to every screen size automatically.
   ──────────────────────────────────────────────────────────── */
:root {
  --navbar: 80px;   /* ← your navbar height                  */
  --peek:   40px;   /* ← visible strip per card              */
  --scroll: 60vh;   /* ← scroll room per card (see below)    */
}

/* All Rows — Divi's own class combined with ours so our
   rules win against Divi's built-in styles               */
.et_pb_row.stack-card {
  position: sticky !important;
  border-radius: 16px;
  margin-bottom: var(--scroll) !important; /* scroll room */
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12); /* card depth */
}

/* Each card sticks at: navbar + (card index × peek gap)
   Formula: top = var(--navbar) + (n-1) × var(--peek)    */
.et_pb_row.stack-card-1 { top: calc(var(--navbar) + 0 * var(--peek)); z-index: 1; }
.et_pb_row.stack-card-2 { top: calc(var(--navbar) + 1 * var(--peek)); z-index: 2; }
.et_pb_row.stack-card-3 { top: calc(var(--navbar) + 2 * var(--peek)); z-index: 3; }
.et_pb_row.stack-card-4 { top: calc(var(--navbar) + 3 * var(--peek)); z-index: 4; }
.et_pb_row.stack-card-5 { top: calc(var(--navbar) + 4 * var(--peek)); z-index: 5; }
/* More cards? top = calc(var(--navbar) + (n-1) * var(--peek)), z-index = n */


/* Overflow fix — prevents Divi from clipping sticky cards */
.et_pb_section:has(.stack-card) {
  overflow: visible !important;
}

/* Mobile: disable stacking on small screens */
<a data-user_name="media" class="fcom_mention fcom_route" href="https://diviuniversity.com/portal/u/media/">mitchell royster</a> (max-width: 768px) {
  .et_pb_row.stack-card {
    position: relative !important;
    top: auto !important;
    margin-bottom: 20px !important;
  }
}

♫ "...it's only CSS code, but I like it..." ♩♪ 👄

So far, so good. But remember what I preach: Always use a functional backup strategy and test first in a staging environment—otherwise, you're playing with fire!"

What is calc()? CSS can do simple math. `calc(80px + 2 40px) gives 160px. Combined with the variables at the top, you only ever change the three numbers in :root` — all card positions adjust automatically.*

No fixed navbar? Set --navbar: 0px. Card 1 will then stick right at the top of the browser window. ( 0px is not the ideal solution if you're using a menu bar. A sticky or fixed navbar needs an offset here exp.: 40 px)

How much scroll room?

The --scroll value: how long each card stays visible

The --scroll value controls how much the visitor has to scroll before the next card slides over the current one. Think of it as the reading time you give each card.

Using vh (viewport height) instead of fixed pixels means it automatically adapts — on a large desktop monitor the card gets more scroll room, on a small phone less. A card set to 60vh always feels about the same regardless of screen size.

How the stacking plays out end-to-end: Cards stack up one by one as you scroll down — each new card slides over the previous one, leaving a visible --peek strip. Once all cards are stacked, the visitor sees the complete fan of cards. When they continue scrolling, the entire stack leaves the screen together as one unit. This is correct behaviour — position: sticky holds each card only while its parent Section is still on screen.

Troubleshooting

If the effect is not working

The CSS above uses .et_pb_row.stack-card — Divi's own class name combined with yours. This is important: without it, Divi's own styles have higher priority and silently override position: sticky. If you copied an earlier version of this CSS that only used .stack-card (without .et_pb_row in front), replace it with the final version above.

Check with the Browser Inspector

1) Press F12 to open the Inspector. Click the cursor icon, then click your Row on the page.

2) Check the class="..." on the Row div — you should see stack-card stack-card-1 in there. If not, the class was not saved correctly.

3) In the Styles panel (right side), look for position. If sticky is crossed out, a Divi rule is winning. The fix: make sure your CSS uses .et_pb_row.stack-card, not just .stack-card.

4) Look for overflow: hidden on any parent element. The :has() rule in the CSS above handles this automatically — but only if your browser supports it (all modern browsers since 2023 do).

In my test setup— didn't encounter any issues with overflow: hidden. However, during my research, I came across a note regarding overflow: hidden and wanted to mention it.

Child Theme Tip - if you use the style.css in a Divi5 - Child Theme

I’d like to show how to manage organized CSS code within a style.css file instead of using the Divi 5 CSS options. This clarifies why a Divi 5 child theme is far from outdated.

Keeping your style.css tidy

As your site grows, your style.css will grow too. A Table of Contents at the top makes it easy to navigate:

/*
 Theme Name:   My Divi Child Theme
 Template:     Divi
*/

/* =============================================
   TABLE OF CONTENTS

   1. Global Styles
   2. Header & Navigation
   3. Homepage
   4. Stacking Cards          ← your new section
   5. Blog
   6. Footer
   7. Mobile / Responsive
   ============================================= */


/* ─── 4. STACKING CARDS ───────────────────────
   Last updated: [your date here]
   ─────────────────────────────────────────── */

/* paste the stacking cards CSS here */

Add a "Last updated" note inside the comment block each time you change something. Three months from now, you'll thank yourself for it.

Quick Reference — Class Names at a Glance

Three settings control everything:
--navbar = fixed nav height · --peek = strip between cards · --scroll = reading time per card (40–100vh)

The key to making it work in Divi 5: always use .et_pb_row.stack-card as the CSS selector — not just .stack-card alone. Divi's own styles would otherwise silently win. Everything else is just three numbers at the top of the CSS: navbar height, peek gap, and scroll room. Happy building.

In this video, I show how to change button colors.