A custom Blurb module with a 'Read More' feature:
This setup allows you to show a short snippet first, expand it via a 'Read More' button, and reset it using a 'Collapse' button. The best part? This approach is purely visual—no JS or CSS required.

The Setup:
First, build your own Blurb structure: Section > Row > Heading + Image + Text (short) + Text (long) + Group (with 2 buttons). If you like, you can also group the Heading/Image and the two Text modules for better organization.

The Logic: Divi 5 Interactions
The magic happens entirely within the Divi 5 Interactions. To avoid a 'trial and error' nightmare, it’s essential to name your elements in the Layers View.

• I named my text fields text_short and text_long.
• The buttons are labeled button_more and button_less (collapsed).

The Configuration:
To ensure the correct initial state, go to the Section settings and assign two 'Load' interactions:

1. On Load > Hide Element: Target text_long.
2. On Load > Hide Element: Target button_less.

Now for the 'click' functionality: You’ll need to create four click interactions for each button (Toggle Show/Hide for the respective text and button elements). Again, naming these interactions will help you keep track of everything.

It’s a bit of 'busy work,' but the result is a clean, no-code solution. Have fun rebuilding it! You can find a link to my demo Blurb here for a limited time—it might not win any beauty contests, but it perfectly demonstrates the functionality.

Check out the link here (available for a limited time)

https://discover.schlatter-waldshut.de/testmyblurb/

One could certainly improve this by using anchor links (jump marks), so that with longer texts, the browser focuses on the start of the content rather than the image. This prevents users from having to manually scroll or adjust with their fingers.

It’s also worth noting that using two text fields and two buttons per module does increase the amount of code. Divi 5 isn't exactly known for producing less bloat than previous versions, partly due to backward compatibility. If you're planning to use many of these 'Blurbs' or text blocks on one page, a custom JS/CSS solution would be more efficient.

However, this experiment shows that Divi 5 is capable of quite a lot. There are many more events to explore for creating great effects without the need for custom scripts or CSS code.

Interactions in button read more...

You will find the right action for the colapse button...

This got me thinking: Can this be solved purely visually in Divi, or would it turn into endless klicking solution in Divi5 Modul-Design depending on how many Blurb modules are used side-by-side?

It then occurred to me that with responsive and fluid design, these modules are stacked vertically on mobile devices. In that context, it actually prevents an endless scrolling; users can simply expand the specific content they’re interested in.

So, I dove straight into the research, and here is the first overview I’ve put together to share with the community.

Here you'll find KC Farmers Post: https://diviuniversity.com/portal/space/divi-community/post/formatting-question

What Divi 5 Can Do Visually — And Where CSS or JavaScript Still Come In

What Divi 5 Handles Entirely on Its Own, No Code Needed

Starting with the good news: the visual editor in Divi 5 is genuinely impressive. For the vast majority of design decisions, you will never need to open a code editor.

Spacing, typography, colours, hover effects, responsive breakpoints, entrance animations, background options, filters, and transforms — all of this lives natively in the builder. You can save any combination of these settings as a Preset and apply it to other modules across your site in one click. Divi 5 also introduced Design Variables, which let you define global values for colours, fonts, and spacing, so a single change updates your entire site at once.

The Big News: Divi 5 Interactions

In June 2025, Elegant Themes released the Interactions system for Divi 5 — a visual, no-code tool built directly into the Advanced tab of every module, row, column, and section. With it, you can wire up genuine interactivity without writing a single line of JavaScript.

Every interaction is built from three pieces: a Trigger (what starts it), an Effect (what happens), and a Target (which element on the page is affected).

Triggers you can choose from:

•       A visitor clicking an element

•       A visitor hovering over or moving away from an element

•       An element entering or leaving the visible screen area as the user scrolls

•       The page finishing loading, with an optional time delay

Effects you can apply:

•       Toggling an element between visible and hidden

•       Showing or hiding an element

•       Toggling, adding, or removing a Preset from an element

•       Toggling, adding, or removing an HTML attribute such as a CSS class

•       Setting or removing a browser cookie

•       Smoothly scrolling the page to a specific element

•       Making an element follow the visitor’s mouse movement

The target can be any element on the page — not just the element the visitor clicked.

What Interactions Can Now Do — Without Code

Showing and hiding a text block on click is now entirely visual. Set the text module to hidden by default, add an Interaction to your button with a Click trigger and a Toggle Visibility effect, and point it at the text module.

Multiple independent text blocks side by side also work without code. Because each Interaction targets a specific element, clicking the button on one blurb only affects that blurb. The others stay exactly as they are.

(As Mak has already shown in his YouTube videos, I don't necessarily use the standard Blurb module. Instead, I build my own by using a Heading module, Image module, Text module, Button module, and Group modules where they make sense. And Yes, I always use the KrafterPRO Presets for the consistend, fluid and responsive design.)

Popup overlays, content reveals, anchor scrolling — all covered natively by Interactions, including controlling visibility with a close button inside the popup itself.

The Semantic Elements Route: Toggles Without Anything Extra

Divi 5 also introduced support for Semantic Elements, which allows you to change the HTML tag that any Divi container or module outputs. This unlocks a very clean approach to expand/collapse toggles.

Modern browsers support two native HTML elements — details and summary — that handle expand and collapse behaviour completely on their own, with no JavaScript and no CSS required for the basic functionality. Keyboard accessibility is built in. Screen readers understand the open and closed states automatically.

In Divi 5, you assign these element types directly in the builder’s Advanced tab. A small amount of CSS makes the animation smooth and the styling match your design — but the fundamental open/close behaviour needs nothing extra at all. An excellent option for FAQ sections and product detail toggles.

Where Divi 5 Interactions Currently Has Limits

The Interactions system is powerful, but it is still a first iteration and has some genuine gaps worth knowing about.

Smooth animation on show/hide transitions is the most noticeable current limitation. When you toggle an element’s visibility using Interactions, it currently snaps rather than animating smoothly. Elegant Themes has confirmed that more animation control is coming, but for now, a soft fade-in or smooth expand still needs a few lines of CSS.

A single button whose text changes between two states — switching from “Read more” to “Read less” — is not directly supported by a single button module. The workaround is two button modules layered on top of each other, each controlling the other’s visibility alongside the text block. This works visually, but a single button with dynamic text still requires JavaScript for the elegant version.

Fading out text at a specific height — where text trails off with a gentle gradient before the “Read more” button — cannot be created through the visual editor. This visual effect requires CSS. The same applies to limiting a text block to an exact height in pixels or rem units.

Which Approach for Which Situation

Now that we have the full picture, here is a clear breakdown of when each approach makes sense.

Use Divi 5 Interactions (purely visual) when you want to show or hide entire sections, modules, or elements on a click or scroll trigger. Covers most toggle use cases, popups, content reveals, and multiple independent collapsible blocks side by side. If you do not need a fade effect, Interactions handles it completely.

Use the Semantic Elements approach (visual + optional CSS) for FAQ-style content where the full text appears and disappears on click. The browser handles the logic natively. A small amount of CSS makes it smooth and styled.

Add CSS on top of Interactions when you want smooth animation instead of a snap, a fade-out gradient at the bottom of truncated text, or precise control over visible text height.

Add JavaScript when you need a single button whose label changes dynamically, or when the interaction logic becomes more complex — for example, when clicking one item should close all other open items simultaneously.

Use CSS and JavaScript together for the most polished result: text visually cropped with a soft fade, expanding smoothly on click, with a button that cleanly switches between “Read more” and “Read less.”

The Bigger Picture

Divi 5 has moved considerably closer to a genuine no-code experience for interactive elements. The Interactions system is a real leap forward, and the addition of Semantic Elements opens up approaches that are cleaner and more accessible than most plugin-based solutions.

That said, CSS and JavaScript still have their place — not as workarounds for a limited tool, but as the right tools for specific jobs. CSS handles visual presentation with precision that no GUI will ever fully match. JavaScript handles dynamic logic and stateful behaviour. Divi 5 handles the architecture, the layout, and a growing portion of the interaction layer.

Understanding where each one fits is what separates a page that works from a page that works beautifully.

In the next part of this series, we will build the “Read more” toggle three different ways — one using only Divi 5 Interactions, one using the Semantic Elements approach, and one using the full CSS and JavaScript combination — with step-by-step instructions and everything you need to copy and paste directly into Divi 5.

This post is part of a series on building smarter, more interactive layouts in Divi 5.

Can't seem to work this one out. Tried following Mark's video comparing Flex and Grid, but don't see any autogrid options anywhere. Mark seemed to use a preset in the video, so wondered how I could do this?

Hi All
I just felt I needed to share my success.

I am no builder / freelancer or coder and I have just finished my website using Divi 5 and Mak's KrafterPro.
It was tricky getting to use to it at first but, I continued and the results are just what I wanted.
It's no fancy site with loads of swirls and sliders etc but it does what I need it to do.

I would just like to thank Mak for the system and everyone that has helped me along the way.

I just have a few pages to finish touching but the main pages I rely on are working great.

Thanks again everyone.

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.