{"id":4277,"date":"2026-10-21T08:09:54","date_gmt":"2026-10-21T08:09:54","guid":{"rendered":"http:\/\/eventful-elementor.local\/?post_type=docs&p=4277"},"modified":"2026-10-21T08:09:54","modified_gmt":"2026-10-21T08:09:54","password":"","slug":"masonry-widget","status":"publish","type":"docs","link":"https:\/\/wpeventful.com\/elementor\/docs\/masonry-widget\/","title":{"rendered":"7. Masonry"},"content":{"rendered":"

The Eventful Masonry widget packs event cards of different heights into columns, without gaps.<\/p>\n\n

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

  1. Add Eventful Masonry<\/strong> to the page and open Content > Display Options<\/strong>.\n
    \"Eventful<\/a>
    Content > Display Options for the Masonry widget.<\/figcaption><\/figure>\n<\/li>
  2. Choose the number of Columns<\/strong> for each device.<\/li>
  3. Set the gaps with Columns margin<\/strong> and Rows margin<\/strong>.<\/li>
  4. Let the content vary: show the excerpt in Content Fields<\/strong>, so cards have different heights.<\/li><\/ol>\n\n

    Load more events<\/h2>\n\n

    Turn on Pagination<\/strong> and choose Load More Button (Ajax)<\/strong>. New cards are added to the columns where there is space. See Pagination Types<\/a>.<\/p>\n\n

    Related articles<\/h2>\n\n