Give one product room to face out, then let the remainder of the gathering fill the grid round it. The use of Divi 5‘s CSS Grid Editor, you’ll construct an out of doors tools format whose first card spans two columns. Huge footage and compact charge badges raise the design from 4 columns on Desktop to 2 on Pill and one on Telephone.
You’ll design one card and use the Loop Builder to copy it for 19 WooCommerce merchandise. Each and every card will get its personal symbol, class, identify, charge, and product hyperlink, so you’ll trade the shared design with out rebuilding each and every card.
Earlier than beginning, replace Divi 5 and turn on WooCommerce. Upload revealed merchandise with names, costs, product classes, and featured photographs. This case makes use of 19 merchandise, however you’ll use a smaller catalog whilst following alongside. Come with a sale-priced product if you wish to test how the current-price box behaves. Fee and delivery setup don’t seem to be had to preview the grid.
Set Up The Product Grid
Use one Row for the gathering heading and a 2d Row for the product grid. Handiest the cardboard Column in the second one Row will repeat.
Get started With The Phase Heading
Create a web page and open the Visible Builder. For a standalone phase with out the theme’s header and footer, make a selection the Clean Web page template within the WordPress web page settings first. With the Insert Row chooser open within the empty Builder, make a selection the one-column format within the clean Phase. This Column will dangle the textual content above the product grid.
Make a selection the Phase and use background #0E1512, then open Design > Spacing for 96px best and backside padding.
The heading Row wishes room above the playing cards. Set its backside Margin to 40px, then be certain that Flex Wrap is No Wrap in its Format controls.
For the header Column make a selection Show Flex and Course Column. A Vertical Hole of 10px separates the eyebrow from the name.
Upload The Header Textual content
Inside of that Column, insert a Textual content module with a brief assortment label, equivalent to Outside tools. This brief line introduces the gathering prior to the bigger heading.
Use 11px textual content at weight 700. Practice Uppercase with Letter Spacing 0.2em, then set the colour to #7F9A8A.
Upload a Heading beneath the Textual content module in the similar Column. Use a heading that introduces your assortment; this situation makes use of Constructed For The Backcountry.
Select H2 at weight 700, coloured #F2F4F1. Set measurement to clamp(30px, 3.4vw, 46px), Line Top to 1.06em, and Textual content Wrap to Beautiful.
Construct The Card Construction
Identify the Phase Product Grid Phase below Meta, then upload a 2d one-column Row beneath the header Row within the similar Phase. In Meta, label the brand new Row Product Grid and its Column Product Card. The Row controls the grid tracks; the Column is the cardboard that may repeat. Stay a unmarried card Column on this Row. The loop will create the rest playing cards out of your merchandise.
Inside of Product Card, upload a Workforce with a Textual content baby for the fee. Take a look at the hierarchy prior to including the following Workforce so the fee stays within its personal container.
Upload a 2d Workforce within Product Card. Make a selection this Workforce and insert a class Textual content module as its first baby.
Whole the identify Workforce with a Heading and a Button, in that order. Set Button Textual content to View product; the Heading will obtain each and every product’s identify from the loop.
Set Up The Grid And Loop
On Product Grid, open Design > Format and make a selection Grid. Use 4 equal-width columns with 18px horizontal and vertical gaps.
Open Content material > Loop on Product Card and allow Loop Part. Set Question Sort to Put up Sort, then choose Merchandise. Scroll throughout the settings panel to set Posts In keeping with Web page to 19, then test Order Through Put up Date and descending order.
The entire card Column now repeats for the question effects. With Put up Date descending, the primary card is the most recent product returned by means of the question. The broader card we create later does no longer rely on WooCommerce’s Featured product flag. If the grid is empty, verify that Merchandise is chosen and your merchandise are revealed.
Design And Attach The Product Playing cards
Taste the shared card and fasten its fields to WooCommerce. Each and every loop repeat will use the similar design with its personal product information.
Give Each and every Card Its Picture
Within the card Column’s Content material > Background controls, use #0E1512 because the fallback colour. Bind the picture to Loop Featured Symbol, make a selection the massive thumbnail, and set symbol measurement to duvet. Use the dynamic-content button beside the picture box to choose the binding.
Each and every product wishes a featured symbol; the fallback colour solely fills the background when one is lacking. Duvet plants the picture to fill the cardboard, so test the crop at the wider first card in addition to the common playing cards.
Permit a linear Background Gradient directed to backside, with Position Gradient Above Background Symbol on. The use of #0C120F, set the higher stops to 0% place at 15% opacity and 38% place at 30% opacity.
Click on the gradient rail close to 50% so as to add a forestall, then drag the brand new forestall to 68% and set #0C120F at 78% opacity. Upload any other forestall close to 50%, drag it to 100%, and use the similar colour at 97% opacity. Exchange each and every new forestall’s interpolated colour so the decrease edge turns into the supposed darkish overlay.
Taste The Card Field
Set card Padding to 20px best, 24px backside, and 22px on each and every aspect. Stay the horizontal pair related and the vertical pair unlinked. Use 3px related corners and a desktop Min Top of 380px, giving playing cards with brief names the similar minimal area as their neighbors.
The cardboard Column makes use of Flex, Course Column, Justify Content material House Between, and a Vertical Hole of 16px. House Between holds the fee close to the highest and the identify Workforce close to the ground.
Stay the fee Workforce’s Flex Row format and explicitly choose Justify Content material Get started and Align Pieces Get started. The identify Workforce makes use of a Flex Column with a 6px vertical hole to stay the identify block stacked.
Bind The Product Knowledge
In the fee Textual content module, use the dynamic-content button beside Frame and choose Loop Product Present Value. This presentations the energetic sale charge when a product is on sale and its common charge differently; it does no longer upload a crossed-out common charge. WooCommerce provides the foreign money formatting, so don’t kind a foreign money image into Earlier than.
For the class Textual content, make a selection Loop Product Phrases and test Product classes, comma-space separation, and hyperlinks Off. Go away Earlier than, After, and Loop Place clean for each bindings; test those choices within the popup reasonably than depending on defaults from a prior binding.
Use Loop Product Identify for the Heading. Bind the Button URL and the cardboard Column’s Hyperlink URL to Loop Product Hyperlink URL, leaving Loop Place clean so each and every repeat hyperlinks to its personal product.
Taste The Value Badge
At the charge Textual content module, use background rgba(12,18,15,0.68). Set padding to 7px best and backside with 15px left and proper, the use of the related pairs to stay the badge even.
Give the badge 999px related corners and a 1px forged border in rgba(242,244,241,0.42). With the primary Field Shadow preset, use offsets 0px horizontal and 2px vertical. Its blur is 14px with 0px unfold; set shadow colour to rgba(12,18,15,0.6).
Set Width to fit-content so the badge follows the fee, holding its background and border on the subject of the textual content on each and every repeated card. Use 13px white textual content at weight 700, with Line Top 1.1em and Letter Spacing 0.03em.
Taste The Identify Block
The class line makes use of 11px textual content at weight 700 and colour #DCE6DF. Practice Uppercase, Letter Spacing 0.18em, and Line Top 1.2em.
Select H3 for the product Heading at weight 700 and colour #FFFFFF. Its fluid measurement is clamp(19px, 1.45vw, 25px), with Line Top 1.16em and Textual content Wrap set to Beautiful.
Taste The Button Hyperlink
Set the Button background to 0% opacity so it’s totally clear, then take away its border with width 0px and magnificence none. Use 0px related corners.
Open the Button’s Sizing controls and set width to fit-content; this assists in keeping the clickable hyperlink on the subject of its textual content. In Design > Spacing, transparent padding on each and every aspect and set best margin to 10px, with each padding hyperlinks enabled.
Use 11px white textual content at weight 700, with Uppercase and Letter Spacing 0.16em. Ascertain that the hyperlink textual content is left-aligned, then observe Underline with an Underline Offset of 5px.
Transfer the worldwide modifying state to Hover, then transparent Underline within the Button’s Font Taste controls. The remainder typography remains the similar. The Responsive Editor comparability displays the 2 states; it isn’t an additional edit.
Make The Hyperlink Reachable
The Column hyperlink makes the cardboard clickable, whilst the Button provides a keyboard-accessible anchor. Stay the Button even if the entire card hyperlinks to the product.
Upload aria-label below Complex > Attributes. Magnify the Characteristic Editor prior to opening its dynamic-content popup so Practice remains visual, then bind the price to Loop Product Identify. Set Earlier than to View with a trailing area; go away After and Loop Place clean.
Save and test the labels at the frontend. In checking out, the Builder displayed the uncooked dynamic-content token within the characteristic whilst the stored frontend accurately resolved labels equivalent to “View Outside First Help Package.”
Form The Format With The Grid Editor
Give the primary product more room, then alter the grid and card heights for smaller displays. Make those format adjustments at the Product Grid Row and Product Card Column.
Function The First Product
On Product Grid, open Design > Format > Grid Editor. Set its preview Grid Pieces to 19, choose the primary merchandise, and drag its proper edge around the subsequent column. The primary merchandise will have to now span two columns. The editor creates a Grid Offset Rule for that placement, so the broader card stays a part of the shared grid. Use both this drag approach or the numerical approach beneath; you solely want one rule.
To go into the similar placement numerically, upload a Grid Offset Rule named First Product Spans Two Columns. Select Customized nth-child Rule, input 1, and set Column Span to 2. This rule selects the primary loop repeat and offers that product two tracks with out converting the width of each and every card.
In case you used the drag approach, check out the guideline it created and label it First Product Spans Two Columns; don’t upload a replica rule. The video above displays the numerical direction. Within the Grid Editor, verify the 4 equivalent tracks, 18px gaps, and primary merchandise spanning two columns.
Grid Pieces controls the editor’s preview, whilst Posts In keeping with Web page controls the true loop question. Converting one does no longer trade the opposite. With all 19 merchandise returned and solely the primary card spanning two columns, the grid makes use of 20 observe areas: 5 rows on Desktop and ten on Pill.
Upload The Hover Reaction
At the card Column, open Change into > Translate within the Hover state and set Y to -4px. Below Complex, set transition length to 220ms and pace curve to Ease. Stay front Animation at None.
Adapt The Grid To Smaller Monitors
Transfer to Pill and set the grid to 2 columns. At the card Column, set Min Top to 320px. The featured product keeps its two-column span and fills the row.
For Telephone, use 1 grid column. Upload a phone-specific Grid Offset Rule named First Product Spans One Column, make a selection Customized nth-child Rule with worth 1, and set Column Span to 1.
The inherited desktop rule is proven as read-only at this breakpoint; its styling nonetheless applies till you provide the phone-specific override. Resetting the span prevents the primary card from developing an additional grid observe on a one-column format. Set card Min Top to 280px so all nineteen merchandise shape complete single-column rows.
Take a look at The Completed Grid
Save the web page and check out the frontend. Ascertain that each and every card displays its personal product identify, class, recent charge, featured symbol, and hyperlink, plus the resolved available identify. Come with a sale-priced product on this test. Open a Button hyperlink and a card hyperlink to make sure their locations, then use Tab and Input to test keyboard operation.
Take a look at 4 columns on Desktop, two on Pill, and one on Telephone. The primary card will have to span two tracks on Desktop and Pill, then one on Telephone. Test the 380px, 320px, and 280px minimal heights, and check out lengthy product names and symbol plants at a slim telephone width. In any case, reload the stored web page so you might be checking continued settings.
Take Your Product Grid Additional
You currently have a product card you’ll restyle as soon as and repeat throughout your catalog, with a much broader first merchandise and layouts for smaller displays. To provide customers extra keep an eye on over that catalog, apply our information to building a filterable WooCommerce product grid. It connects the Loop to look, class, and value controls.
For any other design course, discover 12 Shop Loops For Divi 5. Or construct at the clamp() values used right here with Advanced Units, making spacing and typography scale easily between your software layouts.
The submit How To Build A Product Grid With Divi 5’s CSS Grid Editor gave the impression first on Elegant Themes Blog.
0 Comments