Posts

How To Build A Horizontal Blog Loop In Divi 5

Image
WordPress can show posts on a blog page automatically, but the default output rarely gives you full control over the actual card structure. The image position, meta layout, excerpt placement, and read more link all follow a preset pattern unless you start customizing the theme or working around the module. The Loop Builder in Divi 5 takes a different approach. You design one post card with normal Divi elements, connect each part of that card to live post data, and Divi repeats it automatically for every item in your query. In this tutorial, we’ll build a horizontal blog loop with one post card per row. Each card will have a featured image on the left, post content on the right, dynamic title, publish date, excerpt, and a linked arrow, plus pagination so visitors can move through the rest of your posts. Why Build A Horizontal Blog Loop With The Loop Builder? The Blog Module is useful when you need a blog feed quickly. For many sites, that is enough. But when you want to decide exa...
Post a Comment
Read more

Part 10: Mastering Flexbox In Divi 5

Image
Welcome back to the Divi 5 Mastery Course. In Part 9 , we built the core inner pages of the coworking website. Now, it’s time to dig deeper into the Flexbox Layout System that helped make those pages possible. Divi 5 brings Flexbox controls directly into the Visual Builder, so you can manage spacing, alignment, wrapping, and distribution without writing custom CSS. In this post, you’ll learn how Flexbox works in Divi 5, what each major layout setting does, and how to build a simple responsive layout using those settings. By the end, you’ll understand the main Flexbox settings and know how to use them to create cleaner, better-aligned sections across breakpoints. Let’s dive in. The Power Of Flexbox In Divi 5 Flexbox is best for one-dimensional layouts. That means it arranges items primarily in a row or a column while giving you control over alignment, spacing, distribution, wrapping, and order. Throughout the coworking website, Flexbox helps power navigation bars, feature rows...
Post a Comment
Read more

Part 9: Building The Core Inner Pages Of Your Divi 5 Website

Image
In Part 5 , we built the homepage for our coworking space website. Then, in Part 6 and Part 7 , we added a global header and footer using the Theme Builder. In Part 8 , we created global templates for posts, archives, search results, and 404 pages. Now, we’re ready to build the core inner pages of the site. For this coworking website, that means creating a Contact page and an Events page. By this point, the design system is doing most of the work. The header and footer load globally from the Theme Builder . Headings, text, buttons, containers, forms, and layout elements all have presets. The Design Variables from Part 3 are used throughout the presets that control color, typography, spacing, and borders. As a result, this part is mostly structural assembly. We’ll reuse the system we already built, add a few new module presets where needed, and use Divi 5 workflow features like Page Manager, Command Center, and Extend Attributes to move faster. Building The Contact Page Create a...
Post a Comment
Read more