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.

I have been attending to several business matters, so I have not checked in for about a week. When I logged in in yesterday, I noticed that my Status was changed to "member" from lifetime member and I cannot access any of the resources Ito which I usually have access.

Has anyone else noticed a sudden change in status? Mak, have you updated the site that inadvertently changed something in the membership area. I would appreciate it if you would look into this as a situation that might be affecting other members as well as myself. I await your reply.

I was thinking of finding a Branding Guide. Krafter is so close. Consider adding other elements, such as a logo area. Just a suggestion.

Hi Again
More advice needed.

I notice on Mak's tutorial videos that when he switches to 'Preview on front end' that all his pictures show up. Yet when I try it a lot of my images don't show. Strangely it's the larger images that do 🤷‍♂️

The site is not live yet I and I have no image optimisation except for what Sitegrounds Speed Optimizer does. I have disabled this, cleared caches etc tried deleting the images and reinstating them, changing them from jpeg to webp and png but to no avail. And it's always the same pics that don't show. I have changed the image from a pupil next to the car with the one of the girl on a computer and again it doesn't show.

I'm going mad trying to work out why, if anyone can shed any light on it I would be most grateful.

Thanks.
Mark

A Post from Randal Birkey about the Social Media Mudul Link

https://diviuniversity.com/portal/space/divi-community/post/social-media-module-links

It really got me thinking, and to be honest, I almost couldn't believe that something which worked perfectly in Divi 4 is now missing. So, I did some research...

Thank you so much for this post! Personally, I usually handle social media links at the very end of a project when the website is nearly finished. That’s exactly when I would have searched everywhere for this setting, eventually doubting myself and wondering if I was just too blind to find it. It would have cost a massive amount of time only to realize: this setting was simply overlooked.

Let’s be honest: Divi 5 was completely rebuilt on React, which was absolutely necessary and something we’ve all been waiting for. In such a massive transition, it’s understandable that these "little things" might get missed. This makes it even more important for all of us who need this feature to reach out to Elegant Themes via their support channel or chat. The more people mention it, the faster it will be implemented!

Until then, I’ve summarized the technical background and a working solution for you:

Why doesn't this work with CSS or Presets?

• CSS: Is only for design (colors, spacing). CSS cannot technically control a link's behavior (opening in a new tab).
• Presets: In Divi 5, presets store design attributes. Since the "Link Target" option is currently missing from the module’s core code, a preset cannot "force" this property.
• The Solution: We use a small snippet of JavaScript (jQuery) to tell the browser to open a new tab after the page has loaded.

Solution 1: Global for the entire Website

Use this code if you want all social media icons across your site to always open in a new tab.

Where: Divi > Theme Options > Integration > Add code to the < head >

html

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Adds the target="_blank" attribute to all Social Media Module links
    $(".et_pb_social_media_follow_network a").attr('target', '_blank');
});
</script>

Even though this code is easy to understand and not complicated, you know what I always preach: Always create a backup and test in a staging environment first.

Solution 2: For a specific Module only

If you want to maintain control over which specific module opens in a new tab:

1. Assign a Class: Open the Module > Advanced > Attributes. Add an attribute: Name: class | Value: custom-social-tab.
2. Insert Code: (Either in Global Theme Options or a Code Module on the page):

html

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Only affects modules with the class "custom-social-tab"
    $(".custom-social-tab .et_pb_social_media_follow_network a").attr('target', '_blank');
});
</script>

Even though this code is easy to understand and not complicated, you know what I always preach: Always create a backup and test in a staging environment first.

What happens if a user has JavaScript disabled?

In this rare case (approx. 1-2% of users), the link will still function perfectly, but it will open in the same tab. To inform these users, you can use this notice tag (only visible when JS is off):

html

<noscript>
  <div style="background-color: #ffcccc; color: #cc0000; padding: 15px; text-align: center; border: 1px solid #cc0000;">
    <strong>Note:</strong> JavaScript is disabled. To open links in new tabs automatically, please enable JavaScript in your browser settings.
  </div>
</noscript>

Even though this code is easy to understand and not complicated, you know what I always preach: Always create a backup and test in a staging environment first.

I hope this helps a few people until Elegant Themes officially brings this feature back!

Most Divi websites look flat. Generic. Forgettable. This one scroll effect changes that instantly.

In this tutorial, I'll show you exactly how to build a stacking row/card scroll effect in Divi 5 — where each section layers on top of the last as you scroll, like a premium, high-end site.

Here's what we're covering:

→ How to set up stackable rows in Divi 5

→ The exact settings that make it work smoothly

→ How I built this using KrafterPRO (my Divi 5 design system)

This effect alone can transform how professional your site looks — without hiring a developer.

-- Get The Course For ONLY $37

-- Buy Divi 5 Design System.

Is it really the case that we can't direct the DIVI 5 social media network links in the Social Media Module to open in a new tab/window? That seems like a huge mistake and oversight. Am I missing something?