Card
Present a service or item as a tidy clickable card.
An image card with a badge, eyebrow, title, text and button — five image positions per device, image and card hover effects, offsets and whole-card links.
Elementor widget
Requirements
- Elementor 3.5 or newer
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Licence: free — installs straight from Moduly
Add it to a page
- Edit the page with Elementor.
- In the widget panel, search for Card. Our widgets sit in the Moduly category and carry the Moduly badge.
- Drag it onto the page.
- Set it up in the Content tab, style it in the Style tab, and use Advanced for spacing, motion and visibility.
Settings
Image & Badge
| Setting | What you can set |
|---|---|
| Image | Image |
| Image Resolution | any registered image size |
| Image Dimension | You can crop the original image size to any custom size. You can also set a single value for height or width in order to keep the original size ratio. |
| Alt Text | Leave empty to use the alt text from the media library. |
| Image Position | Left, Top, Right, Bottom or Behind the text |
| Content Vertical Alignment | Top, Middle or Bottom · For the left, right and behind-the-text layouts. |
| Badge Text | Leave empty for no badge. Position and style are in the Style tab. |
| Badge Icon | Icon picker |
Title & Description
| Setting | What you can set |
|---|---|
| Eyebrow | A small label above the title — a category, date or price. |
| Title | Text |
| Description | Text |
| Title HTML Tag | H1, H2, H3, H4, H5, H6, div, span, … (9 in all) |
| Alignment | Left, Center, Right or Justified |
Button
| Setting | What you can set |
|---|---|
| Text | Leave empty for no button. |
| Link | Link |
| Style | Solid button, Outline button or Text link |
| Icon | Icon picker |
| Icon Position | Before or After |
| Icon Spacing | 0–40 |
| Icon Nudge on Hover | -20–20 · How far the icon slides when the button is hovered. |
| Button Alignment | Left, Center, Right or Stretch |
| Pin to Bottom | Push the button to the bottom of the card, so buttons line up across a row of cards. Ignored behind the text and with middle or bottom vertical alignment. |
| Link the Title Too | On / off |
| Link the Image Too | On / off |
Link & Hover
| Setting | What you can set |
|---|---|
| Link the Whole Card | Makes the entire card clickable. The button keeps its own link. |
| Card Hover Effect | None, Lift, Grow, Sink, Shine sweep or Accent line |
| Image Hover Effect | None, Zoom in, Zoom out, Slow pan, Zoom and rotate, Grayscale to colour or Blur to sharp |
Style tab: design controls for Card, Image, Badge, Title & Description or Button — colours, typography, spacing, borders and hover states.
Tips
- Start with the Style choice — it changes the overall look the most; fine-tune the rest afterwards.
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
Troubleshooting
- Aspect ratio is meant for stacked layouts; in the behind-the-text layout it is ignored by design (the card's minimum height sizes the image there).
- The demo's grid rows are the Elementor container's, so on phones short cards take the tallest card's row height in some sections (demo layout, not the widget).
- Changes not showing on the live page? Regenerate CSS in Elementor → Tools → Regenerate CSS & Data and clear any page cache.
Related
- Also available for Gutenberg (Card).
- Works well with: Advanced Accordion, Advanced Toggle, Content Switcher.