-
Hello,
I’d like to create an attractive table for comparing two products. I’d like icons (green and red) in the individual cells to show whether a particular feature is present or not. The table grid should have a light grey background.
How can I do this? -
Hi there,
You can build this nicely using GenerateBlocks. Here’s one approach:
Structure:
Use a Container block set to Layout > Grid. Set the number of columns to match your needs (e.g., 3 columns: one for feature names, one for each product). Give it a light grey background (e.g.,
#F5F5F5).Inside each grid cell, use a Container block. For the feature name cells, add a Text block with the feature label. For the yes/no cells, use a Text block and apply an SVG icon via the block’s Icon settings — pick a checkmark from the General Icons and set its color to green (
#22C55E) for “included,” or use an X icon set to red (#EF4444) for “not included.” You can remove the text content and just display the icon on its own if you prefer.Styling tips:
- Add a bit of padding to each Container (e.g., 15px) so the content doesn’t sit right at the edges.
- You can add a bottom border (
1px solid #E0E0E0) to each row’s containers to create visual row separation. - Center the icons horizontally and vertically within their cells for a clean look.
Header row:
For the top row (column headers / product names), you could use a slightly darker background or bold text to distinguish it from the feature rows.
All of this can be done in the editor without any custom code.
-
Hello,
Unfortunate, I cannot set a Container to grid. I think I have the old version still.
What’s more, I’d need about 20–30 lines, so using this method would probably be very time-consuming.
Hence my question: Can I insert icons into a standard WordPress table block using GPB? -
Hello,
No, this will not be possible.
- You must be logged in to reply to this topic.