{"id":85162,"date":"2023-05-17T12:02:28","date_gmt":"2023-05-17T12:02:28","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=85162"},"modified":"2025-12-01T15:17:39","modified_gmt":"2025-12-01T13:17:39","slug":"introducing-313-new-css-grid-and-more","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/","title":{"rendered":"Introducing Elementor 3.13 \u2013 Build Lean, and Flexible Website Layouts with CSS Grid"},"content":{"rendered":"\n<p>Enhance your design capabilities and enjoy new ways to style your website with Elementor 3.13 so you can achieve unique designs that keep your website visitors engaged. This version includes a new layout option in Containers &#8211; <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\" title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"24874\">CSS<\/a> Grid, a great way to design sophisticated and lightweight website layouts, while maintaining a high level of consistency. In addition, this update introduces more styling options in the Menu Widget, and adds new capabilities to the new Top Bar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"2401\" height=\"1261\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/Container-CSS-Grid.png\" alt=\"\" class=\"wp-image-85167\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>New &#8211; CSS Grid Container &#8211; Design Lightweight, Responsive and Professional Layouts<\/strong><\/h2>\n\n\n\n<p>Now, when you add a Container, you can choose between Flexbox or Grid Containers. Using Grid Containers is ideal for grid-like layouts, helps you maintain the alignment of elements in the Container, and reduces the learning curve associated with the transition from the section-column layout to the container layout.&nbsp;<\/p>\n\n\n\n<p>With Grid Containers, you can choose the number of rows and columns you want to compose your grid, determine the distance between your columns and rows using the Gaps control, and choose whether you want Auto-Flow to go based on column or row. You can also justify and align content and items, similar to how you would a Flexbox Container.&nbsp;<\/p>\n\n\n\n<p>Each cell in the Grid can accept one element, that can be styled and edited as you normally would. To achieve a higher level of sophistication, you can place a Flexbox Container inside the cell of a Grid, and place as many elements as you\u2019d like to, within the Flexbox Container.&nbsp;<\/p>\n\n\n\n<p>To use the Container Grid, make sure to enable the Flexbox Container and the Grid Container features from WordPress Dashboard \u2192 Elementor \u2192 Settings \u2192 Features.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2401\" height=\"1261\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-4.png\" alt=\"\" class=\"wp-image-85169\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>[Pro] New Styling Capabilities in the Menu Widget<\/strong><\/h2>\n\n\n\n<p>In the previous version, Elementor introduced a new Menu widget, which allows you to create&nbsp; simple, single-level menus and sophisticated dropdown content menus, with nestable content. This widget is a game-changer for website creation, empowering you to design beautiful and functional menus for your websites.<\/p>\n\n\n\n<p>Elementor Pro 3.13 introduces two new capabilities that are now available in the Menu widget:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Icons in the Menu top level <\/strong>&#8211; this new styling capability allows you to enhance the design of your menus by adding eye-catching icons that draw visitors&#8217; attention. With a variety of icons to choose from in the icon library, or the ability to upload any SVG, you can customize your menus to match the style of your website and make them stand out.<\/li><\/ul>\n\n\n\n<p><strong>Active state for anchor links<\/strong> &#8211; indicate to website visitors what part of the page they have scrolled, or clicked to when your menu includes anchor links. That way, you can improve the visitor experience by helping navigate them through your website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2401\" height=\"1261\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/Editor-UI-Revamp-Next-Steps.png\" alt=\"\" class=\"wp-image-85170\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Top Bar Enhancements &#8211; Elementor\u2019s UI Revamp Continued<\/h2>\n\n\n\n<p>In Elementor 3.12, we began the gradual roll out of upcoming changes to the Elementor interface. These changes are written in React, which improves performance and allows for future product growth and scale. Additionally, these changes promote Elementor best-practices, resulting in better and more streamlined user experience.&nbsp;<\/p>\n\n\n\n<p>One of the biggest changes is the new Top Bar, introduced as an experiment that you can activate from the Elementor feature page in WordPress (Elementor \u2192 Settings \u2192 Features \u2192 Editor Top Bar). In this version, the Top Bar includes two updates:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Save Options in the Publish Button<\/strong> &#8211; while not a new capability, this feature was not available in the first version of the Top Bar. Now, you have access to all the save options available in the Editor &#8211; Save as a Draft, Save as a <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/library\/all-categories\/\" title=\"Alle categorie\u00ebn\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"24873\">Template<\/a>, and DIsplay Conditions (when applicable). This also means that the Top Bar now includes all the capabilities previously available in the Editor\u2019s legacy UI.&nbsp;<\/li><li><strong>Page Navigation<\/strong> &#8211; a new feature that will streamline your workflow and make the transition between different pages and theme parts smoother. Clicking the page indication at the center of the Top Bar will open a dropdown that includes the five latest pages \/ posts \/ theme parts you worked on, and allow you to redirect to any of them in a single-click, without having to navigate back to the WordPress Dashboard.&nbsp;<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2401\" height=\"1261\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/Automatically-Populate-The-Post-Excerpt-from-Your-Posts-Content.png\" alt=\"\" class=\"wp-image-85171\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>[Pro] Dynamically Populate Your Post Excerpt, with Your Post\u2019s Content<\/strong><\/h2>\n\n\n\n<p>Previously, using the Post Excerpt widget or dynamic tag in WordPress meant that the content would automatically populate from the Custom Excerpt you manually inserted, in WordPress. However, with Elementor 3.13, , you now have the option to choose whether you want the content to automatically populate from the first few characters of your post or from the Custom Excerpt in WordPress. This update resolves one of the top requests since the introduction of the Loop Builder, and specifically since being able to add the Post Excerpt widget within your loop item.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2401\" height=\"1261\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/Performance-Improvements-2.png\" alt=\"\" class=\"wp-image-85180\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>New: Leverage Elementor AI, Perfectly Tailored for Elementor&nbsp;<\/strong><\/h2>\n\n\n\n<p>Elementor 3.13 also includes Elementor AI, that is natively integrated within the Editor, and will transform the way you create websites. This version introduces the first phase of Elementor AI, which empowers you to create text and code with the power of AI. You can use it to create content from scratch, enhance existing content on your website, translate it to any website, and more. Additionally, you can use Elementor AI to write Code for Custom CSS or Custom Code (requires Elementor Pro or Hosting), or HTML snippets. You can read more about what you can do with Elementor AI <a href=\"https:\/\/elementor.com\/blog\/introducing-elementor-ai\/\">here<\/a>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2401\" height=\"1261\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/Performance-Improvements-1.png\" alt=\"\" class=\"wp-image-85173\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Performance Improvements<\/strong><\/h2>\n\n\n\n<p>In previous versions performance improvements focused on the most common widgets on the main pages. With Elementor 3.13, the focus was shifted to widgets used mainly on inner pages, where site visitors often spend most of their time.<\/p>\n\n\n\n<p>The Author Box, Post Info and Price List widgets display images and user profile pictures, these images now have a lazy load applied to them. This change should improve the initial page load of your inner pages.<\/p>\n\n\n\n<p>In addition, since the Header appears above the fold, it should always load immediately upon page load. Therefore, lazy load was removed from headers to improve the visitor experience when using the Lazy Load Background Images experiment.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2401\" height=\"1261\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/Accessibility.png\" alt=\"\" class=\"wp-image-85174\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Accessibility Improvements<\/strong><\/h2>\n\n\n\n<p>Elementor 3.13 is full of tweaks and fixes that improve your website\u2019s accessibility, as well as the Editor. In this version, we focused on keyboard navigation, implementing additional ARIA tags, fixing existing ARIA compliance issues, and applying semantic markup.&nbsp;<\/p>\n\n\n\n<p>You can read more about these accessibility improvements in the<a href=\"https:\/\/developers.elementor.com\/elementor-3-13-developers-update\/\"> Developers Blog<\/a>.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Enjoy More Styling and Design Options For Highly Branded and Engaging Website Experiences&nbsp;<\/strong><\/h2>\n\n\n\n<p>Elevate your website\u2019s design and unlock new styling possibilities for customizing your website using Elementor 3.13. With CSS Grid Containers you can create lightweight, flexible, grid-like layouts seamlessly, and with the new styling capabilities in the menu widget you can create distinctive designs that captivate and keep your website visitors engaged.&nbsp;&nbsp;<\/p>\n\n\n\n<p>This version also includes new capabilities in the Top Bar feature, which means that all the capabilities previously available in the Editor are now available when using the Top Bar experiment.&nbsp;<\/p>\n\n\n\n<p>Elementor 3.13 also includes a free trial of Elementor AI, which will transform the way you build websites by empowering you to instantly create original text, enhance existing text, and code to enhance your website and its design.&nbsp;<\/p>\n\n\n\n<p>Try out the new features in Elementor 3.13 and let us know what you think about them in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Elementor 3.13 includes CSS Grid Containers, a new styling and customization options in the Menu widget, extends the Top Bar experiment, and provides you with additional Dynamic Content options for Post Excerpts. <\/p>\n","protected":false},"author":2024207,"featured_media":85164,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,44,15],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-85162","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-elementor","category-new-features"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducing Elementor 3.13 \u2013 Build Lean, and Flexible Website Layouts with CSS Grid<\/title>\n<meta name=\"description\" content=\"Elementor 3.13 includes CSS Grid Containers, a new styling and customization options in the Menu widget, extends the Top Bar experiment, and provides you with additional Dynamic Content options for Post Excerpts.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Elementor 3.13 \u2013 Build Lean, and Flexible Website Layouts with CSS Grid\" \/>\n<meta property=\"og:description\" content=\"Elementor 3.13 includes CSS Grid Containers, a new styling and customization options in the Menu widget, extends the Top Bar experiment, and provides you with additional Dynamic Content options for Post Excerpts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-17T12:02:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-01T13:17:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2401\" \/>\n\t<meta property=\"og:image:height\" content=\"1260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Gabriella Laster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gabriella Laster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/\"},\"author\":{\"name\":\"Gabriella Laster\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a\"},\"headline\":\"Introducing Elementor 3.13 \u2013 Build Lean, and Flexible Website Layouts with CSS Grid\",\"datePublished\":\"2023-05-17T12:02:28+00:00\",\"dateModified\":\"2025-12-01T13:17:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/\"},\"wordCount\":1237,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png\",\"articleSection\":[\"Blog\",\"Elementor\",\"New Features\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/\",\"url\":\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/\",\"name\":\"Introducing Elementor 3.13 \u2013 Build Lean, and Flexible Website Layouts with CSS Grid\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png\",\"datePublished\":\"2023-05-17T12:02:28+00:00\",\"dateModified\":\"2025-12-01T13:17:39+00:00\",\"description\":\"Elementor 3.13 includes CSS Grid Containers, a new styling and customization options in the Menu widget, extends the Top Bar experiment, and provides you with additional Dynamic Content options for Post Excerpts.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png\",\"width\":2401,\"height\":1260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/category\/blog\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Introducing Elementor 3.13 \u2013 Build Lean, and Flexible Website Layouts with CSS Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a\",\"name\":\"Gabriella Laster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g\",\"caption\":\"Gabriella Laster\"},\"description\":\"Gabriella is a Product Marketing Director at Elementor, where she helps bridge the gap between complex web technology and seamless user experiences. With a decade of experience in marketing and entrepreneurship, she\u2019s passionate about empowering creators to build their digital dreams.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/gabriellal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introducing Elementor 3.13 \u2013 Build Lean, and Flexible Website Layouts with CSS Grid","description":"Elementor 3.13 includes CSS Grid Containers, a new styling and customization options in the Menu widget, extends the Top Bar experiment, and provides you with additional Dynamic Content options for Post Excerpts.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/","og_locale":"en_US","og_type":"article","og_title":"Introducing Elementor 3.13 \u2013 Build Lean, and Flexible Website Layouts with CSS Grid","og_description":"Elementor 3.13 includes CSS Grid Containers, a new styling and customization options in the Menu widget, extends the Top Bar experiment, and provides you with additional Dynamic Content options for Post Excerpts.","og_url":"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2023-05-17T12:02:28+00:00","article_modified_time":"2025-12-01T13:17:39+00:00","og_image":[{"width":2401,"height":1260,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png","type":"image\/png"}],"author":"Gabriella Laster","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Gabriella Laster","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/"},"author":{"name":"Gabriella Laster","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a"},"headline":"Introducing Elementor 3.13 \u2013 Build Lean, and Flexible Website Layouts with CSS Grid","datePublished":"2023-05-17T12:02:28+00:00","dateModified":"2025-12-01T13:17:39+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/"},"wordCount":1237,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png","articleSection":["Blog","Elementor","New Features"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/","url":"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/","name":"Introducing Elementor 3.13 \u2013 Build Lean, and Flexible Website Layouts with CSS Grid","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png","datePublished":"2023-05-17T12:02:28+00:00","dateModified":"2025-12-01T13:17:39+00:00","description":"Elementor 3.13 includes CSS Grid Containers, a new styling and customization options in the Menu widget, extends the Top Bar experiment, and provides you with additional Dynamic Content options for Post Excerpts.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png","width":2401,"height":1260},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/introducing-313-new-css-grid-and-more\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/elementor.com\/blog\/category\/blog\/"},{"@type":"ListItem","position":3,"name":"Introducing Elementor 3.13 \u2013 Build Lean, and Flexible Website Layouts with CSS Grid"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a","name":"Gabriella Laster","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g","caption":"Gabriella Laster"},"description":"Gabriella is a Product Marketing Director at Elementor, where she helps bridge the gap between complex web technology and seamless user experiences. With a decade of experience in marketing and entrepreneurship, she\u2019s passionate about empowering creators to build their digital dreams.","url":"https:\/\/elementor.com\/blog\/author\/gabriellal\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/85162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/2024207"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=85162"}],"version-history":[{"count":9,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/85162\/revisions"}],"predecessor-version":[{"id":146188,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/85162\/revisions\/146188"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/85164"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=85162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=85162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=85162"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=85162"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=85162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}