Card-based layouts dominate fashionable internet design, from weblog archives and group directories to product catalogs and portfolio grids. Engines like google and assistive applied sciences interpret those layouts thru HTML construction, no longer visible look. A grid of weblog submit playing cards that appears arranged to sighted customers would possibly seem as disconnected fragments to display screen readers if the underlying markup lacks semantic that means.
Divi 5’s Loop Builder generates dynamic card layouts from WordPress content material and allows you to observe semantic markup thru Divi 5’s Customized Attributes gadget and Component Sort controls, developing available, Search engine optimization-friendly card grids. Right kind semantic construction can give a boost to display screen reader navigation, make content material relationships clearer to serps, and make your markup more uncomplicated to deal with.
The methodology applies the
and
development to dynamic content material whilst layering further semantic components, equivalent to ,
, and
, inside of each and every card. Since the Loop Builder duplicates your configured column for each and every merchandise within the question, you simplest wish to arrange the HTML construction as soon as. The loop handles the remainder, producing constant checklist markup without reference to what number of posts exist.
Looped semantic lists are preferrred on every occasion you show a repeating choice of identical content material generated dynamically from a question. For WordPress web pages, this often contains weblog posts, merchandise, portfolio pieces, group contributors, testimonials, occasions, or provider listings. As a result of each and every merchandise within the loop represents the similar form of content material, structuring the output as a semantic checklist is helping browsers, serps, and assistive applied sciences perceive the connection between the ones pieces.
The use of a
with repeated
components communicates that the pieces belong to a unmarried grouped assortment. This improves navigation for display screen reader customers, who can briefly transfer thru checklist pieces or pay attention what number of pieces exist within the assortment. It additionally offers serps clearer indicators about how comparable items of content material are arranged inside of a web page.
Looped semantic lists paintings particularly neatly for card-based layouts generated via Divi’s Loop Builder. Each and every card turns into an inventory merchandise, and the loop routinely repeats that construction for each end result within the question. As soon as the semantic construction is outlined for the primary merchandise, Divi replicates it persistently throughout all pieces, making sure each generated card follows the similar available markup development.
Construction The Semantic Record Construction
This implementation makes use of a Phase containing a Row configured because the checklist container. The Row holds a looped Column that turns into each and every checklist merchandise. Within each and every Column, a Module Workforce wraps the cardboard content material as an editorial. The featured picture, identify, metadata, and a Button Module for the learn extra hyperlink all sit down throughout the article.
Get started via including a brand new Phase on your web page within the Visible Builder. Click on the Phase to open its settings. Navigate to Complicated > HTML and open the Component Sort dropdown. Make a choice phase. This guarantees the Phase renders as a semantic
component relatively than a generic
.
Within the Phase, upload a single-column flex row. Within this row, position a Heading Module with textual content that describes the loop pieces beneath it. When the usage of a
component, together with a visual heading is most often the most productive way, because it supplies the phase with an available identify. An aria-label is healthier used as a fallback when a visual heading isn’t possible for the design.
Configure The Loop Row Structure And Semantics
Upload some other Row the usage of the Flex 3 Equivalent Columns predefined construction. This Row will function each the format container and the semantic checklist wrapper.
Transfer to Design > Structure to regulate the remainder flex homes. Allow Wrap so pieces float to new strains after they exceed the container width. Flexbox, mixed with predefined column widths, creates a responsive format that adapts naturally to other display screen sizes and numbers of kid components.
Nonetheless within the Row settings, navigate to Complicated > HTML. From the Component Sort dropdown, make a selection
to create an unordered checklist.
Understand how the column outlines have an more room to their left; we’ll care for that beneath.
If you need an extra fallback for assistive era, you’ll upload a customized characteristic of function=”checklist” within the Attributes choice workforce. In same old HTML, a local
already exposes checklist semantics, so this function is most often non-compulsory. Some groups nonetheless select so as to add it as a defensive accessibility measure, particularly when closely customizing checklist presentation.
Subsequent, navigate to Complicated > CSS, then upload nolist to the CSS Magnificence box.
Then, upload the next CSS on your website online, both within the Divi Theme Choices CSS house or page-level CSS. You’ll additionally create a CSS Choice Preset in case you plan to make use of it steadily.
This CSS gets rid of bullet markers and the default spacing browsers observe to a
, bringing the format again in keeping with the visible design.
Set The First Column As A Loop Merchandise
Delete all columns on this row aside from one.
Click on the lone Column on your Row, then navigate to Content material > Loop and permit the loop. Set the content material supply to Posts and configure any filtering parameters you wish to have, equivalent to class restrictions or submit depend limits. The Column now serves because the template that the Loop Builder duplicates for each and every submit matching your question. Any settings you observe right here, together with HTML attributes, propagate to each generated example.
Navigate to the Column’s Complicated > HTML choice workforce. Open the Component Sort dropdown and make a selection li. This adjustments the Column’s rendered component from a
to a
, making each and every looped card a correct checklist merchandise inside the guardian
.
You’ll additionally upload function=”listitem” as a customized characteristic in case your group prefers the similar defensive way used at the guardian Row, however local
semantics already duvet this in same old HTML.
Now, make all of the card clickable. To do this, navigate to Content material > Hyperlink and use the dynamic content material icon to assign the Loop Hyperlink. Each and every card may have its personal hyperlink in accordance with the Loop settings.
Including this to the Hyperlink choice workforce makes the cardboard itself clickable, increasing the interactive house past the connected components you upload within it.
Upload The Article Module Workforce
Each and every checklist merchandise wishes an
wrapper if the cardboard represents self-contained, standalone content material. Each and every looped merchandise might be each an inventory merchandise and include an
. Module Teams supply a handy container for grouping all of a card’s modules right into a unmarried semantic component.
Within the Column, upload a Module Workforce. All different modules for this card — the picture, heading, metadata, and button — will move within this workforce. Click on the Module Workforce to get right of entry to its settings, then navigate to Complicated > HTML. Open the Component Sort dropdown and make a selection article.
Upload The Featured Symbol
Within the Module Workforce, upload an Symbol Module. This module pulls the submit’s featured picture dynamically thru Divi’s dynamic content material gadget. Click on the dynamic content material icon within the Symbol box and make a selection Featured Symbol. The featured picture steadily purposes as a determine inside the article, so navigate to the Symbol Module’s Complicated > HTML choice workforce and make a selection determine from the Component Sort dropdown.
The
component identifies self-contained content material, most often visible in nature, that pertains to the encircling article. Featured pictures steadily match that function neatly.
This can be a freebie and unrelated to semantics: in image-based loops, atmosphere a constant ingredient ratio makes each card really feel extra uniform. To do that, upload a customized characteristic equivalent to elegance=”looped-image-aspect” to the picture after which upload some customized CSS.
Underneath the Symbol Module, nonetheless throughout the Module Workforce, upload a Heading Module. Click on the dynamic content material icon and assign it to the Publish Name. Then navigate to Complicated > HTML and open the Component Sort dropdown. Make a choice header. This wraps the heading in a semantic
component, indicating the thing’s introductory content material.
Within the Content material > Heading choice workforce, set the heading point to H3 or H4. The H2 point is reserved for primary web page sections, and each and every card identify purposes as a subsection heading inside the checklist. Because the instance above makes use of an H2 heading for the phase, H3 works neatly for the cardboard titles.
You’ll realize I’m the usage of types from my design gadget and gained’t be masking them on this article. We’ve already revealed an in depth submit about making a design gadget with Design Variables and nested or stacked presets, which you’ll reference for styling.
Configure The Publish Meta
Underneath the Heading Module, nonetheless throughout the Module Workforce, upload Textual content Modules for each and every piece of metadata you need to show. Commonplace choices come with class, date, and writer. For each and every Textual content Module, click on the dynamic content material icon and assign the correct box. For the class, make a selection the way to hyperlink to class archive pages.
At this level, set some Flex settings at the Workforce to position the 2 Textual content Modules aspect via aspect when there may be enough space. To do this, set the Flex Route to Row, Justify Content material to Area Between, and permit Wrapping.
Upload The Learn Extra Button
Underneath the Heading Module and Textual content Modules, upload a Button Module. Set the button textual content to Learn Extra or your most well-liked name to motion. Navigate to Content material > Hyperlink and use the dynamic content material icon to assign the Loop Hyperlink. Each and every looped card will now have a button linking to its corresponding submit.
Semantically, we’re achieved. The general rendered HTML on your semantic checklist follows this hierarchy, with a couple of further wrapper components relying to your Divi configuration
Each and every component serves a particular semantic function. That is numerous paintings, particularly the primary time, however it’s price it for loops. While you get the construction proper, Divi repeats it for each merchandise within the question, so you’re successfully designing more than one semantically right kind playing cards immediately.
I’ll finish with many of the completing design touches, although no longer they all, as a result of this submit is targeted at the semantics of this card construction.
The place And When To Use Semantic Lists
The
and
development applies on every occasion you show a choice of identical pieces with out inherent ordering. Weblog submit archives, group member directories, product catalogs, portfolio galleries, testimonial collections, navigation menus, and repair listings all qualify as unordered lists. If the collection issues, equivalent to step by step directions or ranked effects, use
as a substitute.
When To Use Different Semantic HTML Parts
We’ve lined a number of semantic HTML components above, so here’s a fast reference for each and every one:
The
component belongs within checklist pieces when each and every merchandise represents standalone content material. Weblog posts, merchandise, group bios, and case research can all be regarded as articles, particularly if they have got their very own standalone URLs. Navigation hyperlinks, social icons, and easy labels don’t seem to be articles. Reserve article markup for content material that would meaningfully exist impartial of its surrounding context.
The
component introduces content material inside of a bit or article. It most often contains headings, however might also come with navigation, emblems, or introductory textual content. Each and every
will have its personal
, distinct from the page-level header. In card layouts, wrapping the identify in a
indicators that it introduces the thing content material that follows.
