Halloween Is an Event: up to 70% off every Pro plan

Time left: 00d00h00m00s Ends Oct 31, 23:59 GMT

Grab your treat
View Categories

7. Masonry

The Eventful Masonry widget packs event cards of different heights into columns, without gaps.

Masonry is part of Eventful Pro. It has the same settings as the Grid; the difference is the layout. Cards keep their natural height and each one moves up into the nearest space.

  1. Add Eventful Masonry to the page and open Content > Display Options.
    Eventful Masonry widget settings in Elementor: columns, margins and image resolution
    Content > Display Options for the Masonry widget.
  2. Choose the number of Columns for each device.
  3. Set the gaps with Columns margin and Rows margin.
  4. Let the content vary: show the excerpt in Content Fields, so cards have different heights.

Load more events #

Turn on Pagination and choose Load More Button (Ajax). New cards are added to the columns where there is space. See Pagination Types.

See the Masonry demo →