{"id":4271,"date":"2026-10-21T08:09:53","date_gmt":"2026-10-21T08:09:53","guid":{"rendered":"http:\/\/eventful-elementor.local\/?post_type=docs&#038;p=4271"},"modified":"2026-10-21T08:09:53","modified_gmt":"2026-10-21T08:09:53","password":"","slug":"grid-widget","status":"publish","type":"docs","link":"https:\/\/wpeventful.com\/elementor\/docs\/grid-widget\/","title":{"rendered":"1. Grid"},"content":{"rendered":"<p class=\"efe-doc-summary wp-block-paragraph\">The Eventful Grid widget shows your events as cards in 1 to 4 columns.<\/p>\n\n<p class=\"wp-block-paragraph\">Grid is in the free version. Options marked (Pro) need Eventful Pro.<\/p>\n\n<h2 class=\"wp-block-heading\">Set the columns<\/h2>\n\n<ol class=\"wp-block-list efe-doc-steps\"><li>Add <strong>Eventful Grid<\/strong> to the page and open <strong>Content &gt; Display Options<\/strong>.\n<figure class=\"wp-block-image size-full efe-shot efe-doc-shot\"><a href=\"https:\/\/wpeventful.com\/elementor\/wp-content\/uploads\/2026\/10\/editor-grid-display-options-tight@2x-2.webp\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wpeventful.com\/elementor\/wp-content\/uploads\/2026\/10\/editor-grid-display-options-tight@2x-2.webp\" alt=\"Eventful Grid widget Display Options in Elementor: columns, gaps and same height\" width=\"820\" height=\"430\" class=\"wp-image-4439\" loading=\"lazy\" srcset=\"https:\/\/wpeventful.com\/elementor\/wp-content\/uploads\/2026\/10\/editor-grid-display-options-tight@2x-2.webp 1640w, https:\/\/wpeventful.com\/elementor\/wp-content\/uploads\/2026\/10\/editor-grid-display-options-tight@2x-2-300x157.webp 300w, https:\/\/wpeventful.com\/elementor\/wp-content\/uploads\/2026\/10\/editor-grid-display-options-tight@2x-2-1024x537.webp 1024w, https:\/\/wpeventful.com\/elementor\/wp-content\/uploads\/2026\/10\/editor-grid-display-options-tight@2x-2-768x403.webp 768w, https:\/\/wpeventful.com\/elementor\/wp-content\/uploads\/2026\/10\/editor-grid-display-options-tight@2x-2-1536x805.webp 1536w\" sizes=\"auto, (max-width: 820px) 100vw, 820px\" \/><\/a><figcaption class=\"wp-element-caption\">Content &gt; Display Options.<\/figcaption><\/figure>\n<\/li><li>Choose the number of <strong>Columns<\/strong> (1 to 4). Click the device icon next to it to set a different number for tablet and mobile, for example 3, 2 and 1.<\/li><li>Set the space between cards with <strong>Columns margin<\/strong> and <strong>Rows margin<\/strong>.<\/li><li>Turn on <strong>Same Height<\/strong> (Pro) so every card in a row is as tall as the tallest one.<\/li><\/ol>\n\n<h2 class=\"wp-block-heading\">Images<\/h2>\n\n<ul class=\"wp-block-list\"><li><strong>Image<\/strong>: show or hide the event image.<\/li><li><strong>Image Resolution<\/strong>: pick a registered size, or <strong>Custom<\/strong> and set the width and height. All cards then use the same crop.<\/li><li><strong>Load 2x Resolution Image in Retina Display<\/strong>: sharper images on high-density screens.<\/li><li><strong>Zoom Effect<\/strong> (Pro): zoom in or out on hover. <strong>Image Mode<\/strong> (Pro): grayscale, or grayscale with colour on hover.<\/li><li><strong>Replace With<\/strong> (Pro): show the event&#8217;s video or audio instead of the image, when there is no featured image or always.<\/li><li><strong>Lazy Load<\/strong> (Pro): load images as they scroll into view.<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\">Where the text goes<\/h2>\n\n<p class=\"wp-block-paragraph\">In <strong>Content &gt; Template Styles<\/strong>, <strong>Event Content Position<\/strong> places the title and details below the image (<strong>Default<\/strong>), beside it on the left or right (Pro), or over the image (<strong>Overlay<\/strong>, Pro).<\/p>\n\n<h2 class=\"wp-block-heading\">Start from a design<\/h2>\n\n<p class=\"wp-block-paragraph\">Set <strong>Template Type<\/strong> to <strong>Pre-made Templates<\/strong> and pick Template One, Two or Three. See <a href=\"https:\/\/wpeventful.com\/elementor\/docs\/pre-made-templates\/\">Pre-made Templates<\/a>.<\/p>\n\n<h2 class=\"wp-block-heading\">More options<\/h2>\n\n<ul class=\"wp-block-list\"><li>Which events appear: <a href=\"https:\/\/wpeventful.com\/elementor\/docs\/filter-events\/\">Filter Events<\/a>.<\/li><li>What each card shows: <a href=\"https:\/\/wpeventful.com\/elementor\/docs\/content-fields\/\">Content Fields and Element Order<\/a>.<\/li><li>Long lists: <a href=\"https:\/\/wpeventful.com\/elementor\/docs\/pagination-types\/\">Pagination Types<\/a>.<\/li><\/ul>\n\n<h2 class=\"wp-block-heading efe-doc-related-title\">Related articles<\/h2>\n\n<ul class=\"wp-block-list efe-doc-related\"><li><a href=\"https:\/\/wpeventful.com\/elementor\/docs\/masonry-widget\/\">Masonry<\/a><\/li><li><a href=\"https:\/\/wpeventful.com\/elementor\/docs\/display-options\/\">Layout and Display Options<\/a><\/li><li><a href=\"https:\/\/wpeventful.com\/elementor\/docs\/style-tab\/\">Style Tab Overview<\/a><\/li><\/ul>\n\n<p class=\"efe-doc-demo wp-block-paragraph\"><a href=\"https:\/\/wpeventful.com\/elementor\/events-grid\/\">See the Eventful Grid demo \u2192<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>How to set up the Eventful Grid widget in Elementor: columns per device, gaps, same-height cards, image size and effects, and content position.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[29],"doc_tag":[],"class_list":["post-4271","docs","type-docs","status-publish","hentry","doc_category-widgets"],"year_month":"2026-10","word_count":276,"total_views":"2","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"ThemeAtelier","author_nicename":"foysal","author_url":"https:\/\/wpeventful.com\/elementor\/author\/foysal\/"},"doc_category_info":[{"term_name":"3. Widgets","term_url":"https:\/\/wpeventful.com\/elementor\/docs-category\/widgets\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/wpeventful.com\/elementor\/wp-json\/wp\/v2\/docs\/4271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpeventful.com\/elementor\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/wpeventful.com\/elementor\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/wpeventful.com\/elementor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpeventful.com\/elementor\/wp-json\/wp\/v2\/comments?post=4271"}],"version-history":[{"count":8,"href":"https:\/\/wpeventful.com\/elementor\/wp-json\/wp\/v2\/docs\/4271\/revisions"}],"predecessor-version":[{"id":4848,"href":"https:\/\/wpeventful.com\/elementor\/wp-json\/wp\/v2\/docs\/4271\/revisions\/4848"}],"wp:attachment":[{"href":"https:\/\/wpeventful.com\/elementor\/wp-json\/wp\/v2\/media?parent=4271"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/wpeventful.com\/elementor\/wp-json\/wp\/v2\/doc_category?post=4271"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/wpeventful.com\/elementor\/wp-json\/wp\/v2\/doc_tag?post=4271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}