Now you can change the element type of each module and use semantic tags such as nav, section, header and button to give inherent meaning to each module. It’s important for accessibility and SEO because it allows screen readers and bots to understand the structure of a page. You can build your own menu using Divi elements and then change the semantic tag to ‘nav’ to inform screen readers of its purpose.
We’ve also added the ability to add custom HTML before and after each element, giving you more freedom to create custom wrappers and inject code into specific parts of the page that a code module can’t access.
Watch the following video to see the new feature in action. 👇
Semantic elements
You may be familiar with several HTML tags, such as various And span. Each tag has a specific purpose; the A tag is for creating links, the P tag is for holding a paragraph of text, and so on.
HTML5 introduced new tags, including many semantic structural tags such as section, article, headerAnd footer. Placing content within these tags gives your HTML inherent meaning, meaning screen readers can identify where your page’s content begins and where a block of content begins and ends. Furthermore, elements such as buttons tells screen readers that something is clickable.
With Divi 5 you can build anything, with infinitely nested elements, custom interactions and more. You can turn an icon into a button, or even develop your own navigation using text modules and custom off-canvas mega menus.
Now you can build those custom elements using the appropriate semantic tags; change the icon to a knoband turn your custom menu into a navigation. If you’re building a one-page website and aren’t using the Theme Builder, you can group the content into semantic sections, such as header, articleAnd footeramong others.
Each element comes with a new HTML options group in the Advanced tab of the settings panels. Select the desired tag from the Element Type menu.
Custom HTML wrappers
Within the new HTML options group you will also find two new code settings for injecting HTML before and after each element.
It works as two built-in code modules, allowing you to add code directly to an element, which is not possible with the code module due to the way Divi elements are separated.
Try Divi 5 today
Semantic elements and custom HTML wrappers are now available for Divi 5. Give them a try and let us know your thoughts.
We rebuilt Divi from the ground up and packed it with dozens of the most requested features. Forget everything you thought you knew about Divi, because Divi 5 is a completely different beast.
Have you tried Canvases for Divi 5?
In case you missed it, we recently released Canvases for Divi 5.
A canvas is a workspace that is separate from the content of your main post. You can use them as a staging area for design updates, as a place to store and organize off-canvas components, or simply as a safe space to experiment with new ideas. You can create global canvases to build off-canvas menus and popups at the website level, as well as local canvases for specific posts.
Watch this video for all the details. 👇
More Divi 5 updates are on the way
2025 is the year of Divi 5. The tedious work is behind us. We’ve laid the super-fast foundation and now it’s time for Divi to make its comeback.
If you’re here for Divi’s comeback, do us a huge favor and let us know at like this video and leave a comment. It means a lot to us to see you cheering on Divi, and it’s essential to fuel the algorithm and spread the message.
Don’t forget that follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise is just around the corner. 😁
#Semtantic #elements #custom #HTML #wrappers #Divi