The Tech Zone

Divi 5 already gives you useful ways to work with icons, SVGs, masks, and background design. The native SVG module lets you add SVG markup and style it with Divi controls, while Divi’s mask and background tools give you more ways to shape images and sections. But some projects need more variety than the default tools provide. Client sites, brand-heavy landing pages, 404 templates, service cards, feature grids, and editorial layouts often need icons and shapes that feel more specific. That is where two Divi Marketplace extensions from Divi Den can help: Divi Icon Library and Divi Mask Library . Divi Icon Library adds a searchable library of 14,000+ SVG icons directly inside the Visual Builder. Divi Mask Library adds 4,500+ hand-drawn SVG shapes you can save and apply as masks. Both are built for Divi 5, and both are designed to give you more visual options without leaving the builder. In this Product Highlight, we will look at what each extension does, how they work, and a f...

Scalable Vector Graphics, or SVGs, work differently from regular image files. A PNG or JPEG stores pixels. An SVG stores vector instructions, which is why a logo, icon, or illustration can stay sharp on a phone screen, a desktop monitor, or a large display. That flexibility makes SVGs useful for more than crisp image quality. Since SVGs are built from paths and shapes, you can often adjust their fill, stroke, size, and animation without opening a design tool. Divi 5 ‘s new SVG Module brings that workflow into the Visual Builder. You can paste SVG markup directly, upload an SVG file when your WordPress site supports it, and style the graphic with Divi’s design controls. What Is Divi 5’s SVG Module? The SVG Module is a dedicated Divi 5 module for adding scalable vector graphics to a page. Divi has long included an Image module, but SVGs are not quite the same as standard image files. They are vector-based graphics made from markup, paths, and shapes. That means they...

Divi 5’s new menu tools let you build navigation from smaller, more flexible pieces instead of relying on one all-in-one menu module. That matters most on responsive sites. A desktop header, dropdown menu, and mobile overlay do not always need the same structure. With the Link module, Dropdown module, Menu Loops, Canvases, and Interactions, you can build each version of the menu in the way that fits the screen. In this post, we will build a responsive Divi 5 menu from start to finish. The desktop version uses looped menu links and optional dropdowns. The mobile version uses a separate Canvas that opens and closes with Interactions. Divi 5’s New Menu Building Features Responsive menus in Divi 5 are built from a set of focused tools. Each one handles a different part of the navigation workflow. The Link module handles individual menu items. The Dropdown module handles flyouts and mega-menu panels. Menu Loops keep links connected to WordPress menus. Canvases hold off-can...