Live demo · Styling
Style Event Cards in Elementor, No Code Needed
Design your own event cards with the Content and Style tabs: pick which details to show and in what order, set the date format, and style every element with Elementor typography and colours. The three widgets below show the same events, styled three ways.
01
Dark cards with a button
How to set it: Style tab > Box: background #0F1031, radius 20. Title and Event Meta colours set to light tones. Content Fields > Read More Type: Button, then Style > Read More: brand background, pill radius.
Live widget · Style tab only
02
Content beside the image, meta first
How to set it: Template Styles > Event Content Position: Right (Pro). Sortable Event Elements: Thumbnail, Event Meta, Title, Content, so the date sits above the title.
Live widget · content on the right (Pro)
Future Leaders Business Summit
Outdoor Team Building Retreat
03
Your own date format and meta
How to set it: Content Fields > Event Meta: Event Time, Organizer, Price. Date Format: Custom, “l, F j”, so dates read “Monday, October 19”.
Options
What you can customise
Everything below is a control in the Elementor panel. No code needed.
- Drag to reorder or hide the image, title, meta, content and share buttons
- Content below, beside or over the image (beside and over are Pro)
- Event meta: category or tag, venue details, organizer, price, time, series
- 12 date formats or your own PHP date format
- Title and content length in words, characters or lines
- Read More as a button or a text link, with your own text
- Share buttons: 5 networks free, 13 in Pro, in 4 icon shapes
- Typography, colours, borders, radius, shadow and spacing for every element
- Normal and hover states for the card, title, category and Read More
- Elementor Global Colors and Fonts on content and Read More
- Margins and padding set per device
Do I need CSS to style the event cards?
No. Every part of the card has its own section in the Style tab, with Elementor typography, colours, borders and spacing.
Can I change the order of the details on a card?
Yes. With Template Type set to Custom, drag the image, title, meta, content and share buttons into any order, or remove the ones you don’t need.
Can I use my own date format?
Yes. Pick one of 12 formats, or choose Custom and type any PHP date format, such as “l, F j” for “Monday, October 19”.
Last updated:
Give your events the layout they deserve
Nine Elementor widgets, AJAX filters and full style control. Try the free version or go Pro today.