Design Event Cards

Design one event-day layout inside Kleis Events Template. WordPress repeats it with real Planning Center data.

A practical card layout

1. Select the Events Template and open its inner blocks in List View.
2. Add a Group and apply your theme’s card background, border, padding, and spacing.
3. Add Kleis Event Image near the top or in the first column.
4. Add a date row containing Event Weekday, Event Day, and Event Month Year.
5. Add Event Title and Event Time.
6. Add Event Registration URL when your events use registration.
7. Use a Stack for narrow screens or Columns that collapse cleanly on mobile.

Configure Event Image

Select the image and open Image Settings:

• Link image to event makes the image open the public event URL.
• Width accepts a valid CSS width such as 320px, 24rem, or 100%.
• Aspect ratio offers original, square, landscape, wide, and portrait options.
• Scale controls how the image fills a chosen ratio: Cover crops, Contain preserves the whole image, and Fill may distort it.

Use Cover for consistent cards and Contain when artwork must never be cropped.

Editor preview

The editor requests a real matching event so the child blocks can preview title, time, image, date, and registration details. The public page remains the authoritative result because theme CSS and live event data apply there.

Preview filtered layouts

Set tag and featured filters before judging the preview. The sample event follows the current Events Template filters.

Responsive check

Preview at desktop, tablet, and mobile widths. Confirm that the longest title wraps, the image does not stretch, and the registration link remains easy to select.

You should now see: a consistent repeated event design using real preview data, with readable text, intentional image cropping, and a clean mobile layout.

Next: Handle Multi-Event Days.