Best SEO Agencies in Arlington, VA

Divi 5 Workshop | Lesson 1 | Beginner | 15–20 Minutes

One of the things I enjoy most about working with WordPress is discovering ways to make website design simpler, more flexible, and easier to maintain.

For our first Divi 5 Workshop, we're building something almost every small-business website can use: a set of attractive service cards that automatically adapt to different screen sizes.

Think of a home remodeler displaying kitchen, bathroom, and basement renovations. Or a consultant presenting three coaching services. Instead of creating separate layouts for desktop and mobile, we'll design the section once and fine-tune how it looks on each device.

And we'll do it without writing CSS.

What You'll Learn

• How to build a three-column service section in Divi 5.
• How to style individual columns as cards.
• How to adjust layouts for desktop, tablet, and phone.
• How Divi 5's responsive settings inherit values.
• How to save your design as a reusable layout.

What you'll create: A responsive, three-card service section that you can reuse elsewhere on your website.

Step 1: Build Your Three Service Cards

[Insert screenshot: Completed three-card desktop layout]

Let's start with a simple example using three services from J Browning Studio:

WordPress Coaching

Learn to confidently manage your WordPress website with practical, one-to-one guidance.

Button: Explore Coaching

Divi Website Design

Create flexible, attractive pages that are easier to update and maintain.

Button: Explore Design

AI Workflow Coaching

Discover how simple automations can save time and improve customer communication.

Button: Explore AI

Build the Section

1. Open a draft page in the Divi 5 Visual Builder.
2. Add a new regular Section.
3. Insert a Row with three equal columns.
4. In the first Column, add a Text module with the service name formatted as an H3 heading and a short description.
5. Add a Button module beneath the description.
6. Repeat for the remaining two Columns, updating the content and buttons.

You now have three services displayed side by side.

Workshop tip: Keep your descriptions relatively short and consistent in length. This helps create visually balanced cards, particularly in a three-column layout.

Step 2: Style Your Columns as Cards

Here's a small but useful discovery: in Divi 5, you don't need a separate card module to create a service card.

You can style the Column itself.

Open the first Column's settings and apply the following design choices:

These colors are from the J Browning Studio palette, but you can substitute your own brand colors.

Apply the same settings to the other two Columns.

The result is a clean, consistent set of service cards.

Why Style the Column Instead of the Row?

Because each Column represents an individual card.

Styling the Column gives you control over its background, spacing, border, and appearance independently of the surrounding layout.

The Row controls how those cards are arranged.

That's an important distinction to understand as your Divi designs become more complex.

Step 3: Make the Cards Responsive

[Insert screenshot: Desktop and mobile views of the service cards]

Now for the interesting part.

Our three cards look great across a wide desktop screen, but three narrow columns can be difficult to read on a phone.

Let's adjust the layout so the cards stack vertically on smaller devices.

Adjust the Row

1. Open the Row settings.
2. Under Design → Layout, confirm you're using a Flex layout.
3. Enable Layout Wrapping → Wrap if needed.
4. Switch to Tablet view using Divi 5's responsive device controls.
5. In the Row's Content → Elements settings, use Apply Structure Template to select a single-column arrangement.
6. Repeat for Phone if necessary.

Your cards should now display as three columns on Desktop and a vertical stack on Tablet and Phone.

You can also adjust the Row's vertical gap to control the space between the stacked cards.

Why this matters: We're using the same content and design elements. We're simply changing their arrangement based on the available screen width.

Step 4: Understanding the Responsive Editor

[Insert screenshot: Divi 5 Responsive Editor showing Desktop, Tablet, and Phone padding]

This was one of my favorite little discoveries while working on this exercise.

When you open the Responsive Editor in Divi 5, you'll notice that some device-specific fields are blank.

At first, that can seem confusing. Are the values missing? Does blank mean zero?

Usually, neither.

A blank responsive field generally means the value is being inherited from another breakpoint.

For example, let's adjust the padding inside our service cards.

1. Open your first Column's settings.
2. Navigate to Design → Spacing → Padding.
3. Open the Responsive Editor for Padding.
4. Set Desktop padding to 28px on all four sides.
5. Leave Tablet blank.
6. Set Phone padding to 20px on all four sides.

Here's what happens:

An Important Distinction

• Blank: Generally means an inherited value.
• 0px: Explicitly removes the padding.
• 20px: Applies a specific value to that breakpoint.

This is a subtle feature, but understanding it can save a surprising amount of troubleshooting.

Instead of setting values for every device, you only need to override the settings that actually need to change.

Try this: Temporarily change your Phone padding from 20px to 40px. Notice how the card changes without affecting the Desktop design. Then restore the Phone padding to 20px.

Repeat the responsive padding settings for your other two cards.

Step 5: Test Your Design

Before we call our first workshop complete, let's check that everything works.

• ☐ All three cards appear side by side on Desktop.
• ☐ Cards stack vertically on Tablet and Phone.
• ☐ Cards have consistent backgrounds, borders, and spacing.
• ☐ No text is cut off on smaller screens.
• ☐ Buttons link to the correct pages.
• ☐ Changing Phone padding does not unexpectedly change Desktop padding.

A Practical Troubleshooting Tip

Suppose one card has noticeably different spacing on mobile.

Before rebuilding the Row, inspect the affected Column's responsive padding settings.

It's surprisingly easy to introduce a device-specific value and forget about it.

The Responsive Editor makes those differences easier to locate.

My general rule is to investigate the individual setting before changing the entire layout.

Step 6: Save Your Design for Future Use

Here's where our exercise becomes more than a one-time design project.

Divi 5 allows you to save Sections, Rows, and Modules to the Divi Library so they can be reused on other pages.

To save your completed service card section:

1. Right-click the Section in the Visual Builder.
2. Select Save to Library.
3. Give it a descriptive name, such as Responsive Service Cards.
4. Save it as a regular Library item.
5. Open another page and insert the saved Section from your Divi Library whenever you need it.

This is particularly useful for small businesses that want a consistent visual style across several pages.

Bonus: Export Your Design as JSON

You can also export your saved layout for use on another Divi website.

Navigate to WordPress Dashboard → Divi → Divi Library.

Select your service card item, click Import & Export, and choose the Export tab. Enter a descriptive file name and enable the option to export only the selected item.

Divi will generate a JSON file that can be imported into another Divi installation.

Before sharing the file, test it on another Divi 5 website to make sure the layout and responsive settings transfer correctly.

This makes a simple service card section a potentially useful resource for clients, students, or other WordPress users.

What We Learned

In just one short exercise, we've explored several important Divi 5 concepts:

1. Columns can serve as design containers. You don't necessarily need additional modules to create attractive service cards.
2. Responsive design doesn't require duplicate pages. One section can adapt to multiple screen sizes.
3. Blank responsive values aren't necessarily missing values. Understanding inheritance helps you make more intentional design decisions.
4. Reusable layouts save time. A design you build today can become a starting point for future projects.

And perhaps most importantly, we've created something practical rather than simply learning a collection of settings.

Next Workshop: From Static Cards to Dynamic Content

Our service cards work well, but there's one limitation: we have to edit the content of each card individually.

What if we wanted to manage ten or twenty services?

Or update service information in WordPress without opening the Divi Visual Builder every time?

That's where dynamic content becomes especially interesting.

In our next Divi 5 Workshop, we'll explore how Advanced Custom Fields (ACF) can help separate website content from its design.

We'll build on today's example and discover how the same card design can become the foundation for a more flexible, content-driven website.

Want to Learn Divi 5 at Your Own Pace?

I believe the best way to learn WordPress is to work on real problems and discover how the tools can make your website easier to manage.

Through my one-on-one WordPress coaching sessions at J Browning Studio, I help business owners and creative professionals build confidence with WordPress, Divi, and practical digital tools.

Whether you're building your first website or trying to make an existing one work better, we can explore the solutions together.

Explore WordPress Coaching at J Browning Studio →

The Divi 5 Workshop is an ongoing series of practical WordPress lessons focused on learning through experimentation, solving everyday design challenges, and creating useful resources along the way.