Event List Widget

Why Should You Use the Event List Widget?

Beautiful Event Card Display

Showcase your events with elegant, professional event cards that capture attention and communicate essential information at a glance. Each event card features a prominent image, clear title, comprehensive event details, and optional call-to-action buttons. The cards display event dates with calendar icons, times with clock icons, and locations with location pins, making it easy for visitors to quickly understand when and where events are happening. Rich descriptions provide context and details about each event. This visual presentation creates excitement and helps visitors make informed decisions about attending your events.

Flexible Layout Options

Choose between two distinct layout modes to match your design preferences and content needs. The List layout displays events vertically with images positioned on the left side of each card, perfect for detailed event listings where you want to maximize information density. The Grid layout arranges events in a responsive multi-column grid with images on top, ideal for showcasing multiple events in a compact, visually appealing format. Switch between layouts instantly to see which style works best for your content. Both layouts automatically adapt to different screen sizes, ensuring your events look great on any device.

Comprehensive Event Management

Add, edit, delete, and reorder events with an intuitive drag-and-drop interface. Each event supports rich content including titles, descriptions, images, locations, start and end dates, start and end times, and custom button links. Upload event images directly via drag-and-drop file uploads or use image URLs for quick integration. The system automatically validates image formats (JPG, PNG, WEBP, SVG) and enforces file size limits to ensure optimal performance. Reorder events by simply dragging and dropping them into your preferred sequence. All changes save instantly and are reflected immediately in your preview.

Rich Image Support

Enhance your event listings with high-quality images that grab attention and convey the atmosphere of your events. Upload images directly from your computer using drag-and-drop functionality or paste image URLs for instant integration. Images automatically resize and optimize for display while maintaining aspect ratios. The system supports multiple image formats including JPEG, PNG, WEBP, and SVG. Image validation ensures only appropriate file types and sizes are accepted. Images display with smooth hover effects that add interactivity to your event cards. In list layout, images appear as compact thumbnails, while grid layout showcases images prominently at the top of each card.

Customizable Styling and Branding

Control every visual aspect of your event widget to match your brand identity perfectly. Customize card background colors, border radius, and layout spacing. Fine-tune typography with independent controls for text colors, heading colors, and description colors. Adjust card title and description colors separately to create visual hierarchy. Control overall text color and heading color for consistent branding across all events.

Button Customization and Call-to-Actions

Add custom call-to-action buttons to each event card to drive visitor engagement and conversions. Configure button text and destination links for each event individually. Toggle button visibility globally to show or hide buttons across all events. Customize button appearance with independent controls for background color, hover color, and text color. Buttons automatically open links in new tabs with proper security attributes. Style buttons to match your brand with custom colors and hover effects. This flexibility allows you to create compelling calls-to-action that encourage event registrations, ticket purchases, or additional information requests.

Responsive Mobile Design

The event widget adapts beautifully to all screen sizes with intelligent responsive breakpoints. On mobile devices, the grid layout automatically switches to a single-column display, ensuring optimal readability. List layout maintains its structure while adjusting image sizes and spacing for smaller screens. Typography scales appropriately for mobile viewing. Event meta information (dates, times, locations) reorganizes to stack vertically on mobile for better readability. Images resize dynamically to maintain visual balance. The layout maintains its professional appearance across phones, tablets, and desktops without requiring separate mobile configurations.

Smooth Animations and Visual Feedback

Enhance user experience with elegant animations that draw attention to your events. Cards animate in with smooth slide-in effects that create visual interest without being distracting. Animation delays are staggered across different card elements (title, description, button) to create a polished, professional appearance. The system respects user preferences for reduced motion, automatically disabling animations when requested. Hover effects on images and buttons provide immediate visual feedback. All animations are optimized for performance and won't impact page load times.

Real-Time Preview and Updates

See your changes instantly with a live preview that updates in real-time as you make modifications. Add new events and watch them appear immediately in the preview. Edit existing events and see updates reflected instantly. Adjust styling options and observe changes applied immediately without page reloads. Reorder events and watch them rearrange in real-time. Toggle button visibility and see the impact immediately. This instant feedback allows you to perfect your event listings before publishing, ensuring everything looks exactly as you envision.