{"id":118061,"date":"2024-09-09T14:12:48","date_gmt":"2024-09-09T11:12:48","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=118061"},"modified":"2025-11-22T05:08:42","modified_gmt":"2025-11-22T03:08:42","slug":"elementor-324-floating-bars-variable-fonts-enhanced-css","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/","title":{"rendered":"Introducing Elementor 3.24: Floating Bars, Variable Fonts, Enhanced CSS Loading &amp; More!"},"content":{"rendered":"\n<p>We\u2019re thrilled to introduce Elementor 3.24, an update that takes your site-building experience to the next level with a focus on performance, conversion, design flexibility, and visitor experience. In this update, we\u2019ve added several powerful features, including Floating Bars, Variable Fonts, and Enhanced <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=\"21757\">CSS<\/a> Loading\u2014each offering unique benefits to help you create faster, more dynamic websites.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Floating Bars: Sticky Messages that Are Always Visible Even as Visitors Scroll<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Enhance User Engagement with Constant Visibility<\/h3>\n\n\n\n<p>In today\u2019s fast-paced digital world, keeping important information front and center is crucial. That\u2019s where our new Floating Bars come in. This feature allows you to create fixed bars that stay visible as users scroll through your page, ensuring that your key messages\u2014whether it\u2019s a promotional offer, an important notice, or a call to action\u2014are always in sight.<\/p>\n\n\n\n<p>Elementor 3.24 includes <strong>over 30 pre-designed templates<\/strong> and 3 main Floating Bar types:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Call To Action (CTA) Bar &#8211; For highlighting important call to action buttons at the top or bottom of your page. Available for all Elementor users.<\/li>\n\n\n\n<li>Ticker Bar &#8211; For engaging visitors with ongoing updates and promotions in a loop. Available with Elementor Pro only.<\/li>\n\n\n\n<li>Coupon Bar &#8211; For promoting coupon codes that can be copied with a single click. Available with Elementor Pro only.<\/li>\n<\/ul>\n\n\n\n<p>The persistent visibility of Floating Bars is designed to enhance visitor engagement by ensuring that your most critical messages never get lost. This feature is especially valuable for <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/ecommerce\/\" title=\"eCommerce\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"21758\">Ecommerce<\/a> sites running sales promotions, blogs encouraging newsletter sign-ups, or any site where user interaction is key to success.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Flexible Positioning for Optimal Impact<\/h3>\n\n\n\n<p>But Floating Bars aren\u2019t just about visibility\u2014they\u2019re also about flexibility. You can position these bars at the top or bottom of the screen, customize their appearance to align perfectly with your site\u2019s design, and thanks to Display Conditions &#8211; control their behavior, such as when and how they appear. This means you can craft a visitor experience that\u2019s not only engaging but also strategically designed to drive conversion and keep visitors informed.<\/p>\n\n\n\n<p>For example, if you\u2019re running a limited-time offer, placing a Floating Bar at the top of your page can keep the promotion front and center, urging users to take immediate action. Conversely, a bottom-positioned Floating Bar can serve as a subtle reminder to sign up for a newsletter or check out a featured product.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Seamless Setup and Customization<\/h3>\n\n\n\n<p>Setting up your Floating Bars is effortless. First, ensure the &#8220;Flexbox Container&#8221; feature is activated by navigating to the WP Dashboard &gt; Elementor &gt; Settings &gt; Features. Upon adding a new Floating Element (WP Dashboard &gt; Templates), you\u2019ll be prompted to choose between a Floating Bar or Floating Button. Choose one of the 30+ templates available and then make the Floating Bar your own by customizing the design, icons, text content, CTA links, and more. Elementor Pro users can also leverage Display Conditions to specify where, when, and to whom the Floating Bars will appear, enhancing targeting and effectiveness.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2024\/09\/Floating-Bar-1-1024x538.png\" alt=\"\" class=\"wp-image-118075\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2024\/09\/Floating-Bar-1-1024x538.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2024\/09\/Floating-Bar-1-300x158.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2024\/09\/Floating-Bar-1-768x403.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2024\/09\/Floating-Bar-1-1536x806.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2024\/09\/Floating-Bar-1-2048x1075.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">[Pro] Variable Fonts: Unlock Creative Freedom with Precision Typography Control<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Revolutionize Your Design with Dynamic Typography<\/h3>\n\n\n\n<p><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\" title=\"26 Best Fonts For Websites &amp; Web Design (2025)\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"21761\">Typography<\/a> is a cornerstone of any great design, and with Elementor 3.24, we\u2019re giving you more control than ever before with the introduction of Variable Fonts. This feature is a game-changer for designers who want to fine-tune every aspect of their site\u2019s text.<\/p>\n\n\n\n<p>Variable Fonts allow you to adjust weight and width attributes in single increments, using intuitive sliders, ensuring full control over text customization, enabling more dynamic and engaging designs that enhance visual storytelling and viewer engagement. With Static Fonts, for comparison, you are confined to adjusting text weight and width in rigid increments of 100 pixels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Enhance Brand Consistency with Versatile Font Control<\/h3>\n\n\n\n<p>If you\u2019re building a brand identity, you can easily experiment with different font weights and widths to find the perfect match. Whether you need <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/text-bold\/\" title=\"How to Make Text Bold in HTML &#038; CSS\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"21760\">bold<\/a>, eye-catching headlines or subtle, elegant body text, Variable Fonts give you the flexibility to get it just right. And because you\u2019re working with a single font file that can do it all, your website remains lightweight and speedy.<\/p>\n\n\n\n<p>This versatility in typography control also means that maintaining brand consistency across your site is easier than ever. You can ensure that your headings, body text, and other typographic elements are perfectly aligned with your brand\u2019s visual identity without the need for multiple font variations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Get Started with Variable Fonts<\/h3>\n\n\n\n<p>To set up Variable Fonts, first download a Variable Font TTF file from your preferred platform, such as Google Fonts. Then, go to WP Dashboard &gt; Elementor &gt; Custom Fonts &gt; Add New &gt; Add Variable Font, name the new font, upload your TTF file, select the desired weight and width checkboxes, set the values based on the font\u2019s properties, and publish. When editing text and navigating to the Typography control, you can see the new fonts at the top of the Font Family selection, under &#8216;Variable Fonts&#8217;.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"read-more-link show-core\"><a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Elementor <\/a><a href=\"https:\/\/elementor.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pro<\/a><\/p>\n\n\n\n<p class=\"read-more-link show-free\"><a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Elementor <\/a><a href=\"https:\/\/elementor.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pro<\/a><\/p>\n\n\n\n<p class=\"read-more-link show-essential_legacy show-essential\"><a href=\"https:\/\/my.elementor.com\/upgrade-subscription\/\" target=\"_blank\" rel=\"noreferrer noopener\">Upgrade Your Pro Subscription<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2024\/09\/Variable-Fonts-1-1024x538.png\" alt=\"\" class=\"wp-image-118081\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2024\/09\/Variable-Fonts-1-1024x538.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2024\/09\/Variable-Fonts-1-300x158.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2024\/09\/Variable-Fonts-1-768x403.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2024\/09\/Variable-Fonts-1-1536x806.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2024\/09\/Variable-Fonts-1-2048x1075.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Enhanced CSS Loading: Smarter, Faster &amp; More Efficient<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Optimize Site Performance with Conditional CSS Loading<\/h3>\n\n\n\n<p>Every second counts when it comes to page load times, and with Elementor 3.24, we\u2019ve taken a significant step toward optimizing your site\u2019s performance with Conditional CSS Loading. This feature is designed to load only the CSS that\u2019s necessary for the elements on your page, dramatically reducing the amount of unused code that can slow down your site.<\/p>\n\n\n\n<p>Conditional CSS Loading works by analyzing the specific widgets and elements you\u2019re using and loading only the CSS required for those components. This means that if you\u2019re not using a particular feature, its CSS won\u2019t be loaded, resulting in a leaner, faster site. In fact, this enhancement can lead to a reduction of <strong>up to 668KB in CSS size!<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Boost Visitor Experience with Faster Loading Pages<\/h3>\n\n\n\n<p>If your homepage features, for example, a hero section with a single call-to-action button, only the CSS needed for that layout and button will now be loaded. All other unnecessary CSS files are kept out of the equation, ensuring that your page loads as quickly as possible. This is particularly beneficial for complex sites with a variety of widgets and elements, where minimizing CSS bloat can lead to significant performance gains.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Minimize Cumulative Layout Shifts with Improved Style Caching<\/h3>\n\n\n\n<p>Faster loading times not only improve visitor satisfaction but also positively impact SEO, helping your site rank higher in search engine results. In line with our commitment to significantly enhancing site performance, we&#8217;ve optimized the way CSS assets are loaded for Elementor widgets in this release, reducing Cumulative Layout Shifts (CLS). With our new &#8216;style dependencies caching&#8217; system, widget styles are cached on the first visit and then loaded from the cache into the &lt;head&gt; on subsequent visits. This minimizes CLS by ensuring styles are applied earlier in the page load process, resulting in a smoother, more stable user experience.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2024\/09\/CSS-Loading-1-1024x538.png\" alt=\"\" class=\"wp-image-118087\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2024\/09\/CSS-Loading-1-1024x538.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2024\/09\/CSS-Loading-1-300x158.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2024\/09\/CSS-Loading-1-768x403.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2024\/09\/CSS-Loading-1-1536x806.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2024\/09\/CSS-Loading-1-2048x1075.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Next-Level Workflow Improvements&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">[Pro] Fine-Tuned Display Conditions for Greater Control<\/h3>\n\n\n\n<p>Elementor 3.24 enhances your workflow by improving how you manage Display Conditions. Now, when a Display Condition is set to an element, a vertical line and icon will appear in the Structure Panel, clearly indicating active Display Conditions. Clicking the icon takes you directly to the Display Condition settings, making adjustments quick and intuitive.<\/p>\n\n\n\n<p>Additionally, you can now copy and paste Display Conditions across elements and pages, or clear them instantly, all by simply right-clicking the element, further streamlining your design process and saving valuable time.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"read-more-link show-core\"><a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Elementor <\/a><a href=\"https:\/\/elementor.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pro<\/a><\/p>\n\n\n\n<p class=\"read-more-link show-free\"><a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Elementor <\/a><a href=\"https:\/\/elementor.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pro<\/a><\/p>\n\n\n\n<p class=\"read-more-link show-essential_legacy show-essential\"><a href=\"https:\/\/my.elementor.com\/upgrade-subscription\/\" target=\"_blank\" rel=\"noreferrer noopener\">Upgrade Your Pro Subscription<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">AI-Generated Container Names in the Structure Panel with Elementor AI<\/h3>\n\n\n\n<p>Each page on your website may have dozens of Containers and widgets within it, and when adding new Containers to a page, they will be named in the Structure Panel (formerly: Navigator) as simply \u201cContainer\u201d. This can be a challenge, as the more Containers there are, the more difficult it is to keep things organized and have a proper overview of the page structure. Up until now, in order to have better structure, you would need to look into each Container, come up with a relevant name and then type it in the Structure Panel one by one.<\/p>\n\n\n\n<p>With the power of AI, this is a problem of the past. Elementor AI streamlines your workflow and speeds up website delivery, all while keeping your professional guidance front and center. Elementor 3.24 includes a major update to Elementor AI, with a new feature: AI-Generated Container Names. It takes care of the details, so you can stay focused on the bigger picture. By just clicking one single button in the Structure Panel, within seconds all your Containers are automatically renamed according to the content they include.<\/p>\n\n\n\n<p class=\"read-more-link\"><a href=\"https:\/\/elementor.com\/products\/ai\/\">Discover Elementor AI<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2024\/09\/Rename-Containers-with-AI-1-1024x538.png\" alt=\"\" class=\"wp-image-118093\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2024\/09\/Rename-Containers-with-AI-1-1024x538.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2024\/09\/Rename-Containers-with-AI-1-300x158.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2024\/09\/Rename-Containers-with-AI-1-768x403.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2024\/09\/Rename-Containers-with-AI-1-1536x806.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2024\/09\/Rename-Containers-with-AI-1-2048x1075.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Additional Features &amp; Updates<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">[Pro] Streamlined Search Experience<\/h3>\n\n\n\n<p>In version 3.24, Elementor builds on the Search widget introduced in 3.23, incorporating user feedback to enhance its functionality. New updates to the Search Widget include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Significantly shorter result page URLs for a streamlined visitor experience.<\/li>\n\n\n\n<li>A direct button to the Theme Builder for easier loop <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=\"21759\">template<\/a> creation.<\/li>\n\n\n\n<li>Greater control over the result dropdown\u2019s width and the search loader\u2019s visibility and design.<\/li>\n\n\n\n<li>The Search widget is a native part of the Editor, no longer requiring manual activation.<\/li>\n<\/ul>\n\n\n\n<p class=\"read-more-link show-core\"><a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Elementor <\/a><a href=\"https:\/\/elementor.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pro<\/a><\/p>\n\n\n\n<p class=\"read-more-link show-free\"><a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Elementor <\/a><a href=\"https:\/\/elementor.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pro<\/a><\/p>\n\n\n\n<p class=\"read-more-link show-essential_legacy show-essential\"><a href=\"https:\/\/my.elementor.com\/upgrade-subscription\/\" target=\"_blank\" rel=\"noreferrer noopener\">Upgrade Your Pro Subscription<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2024\/09\/Additional-Updates-1-1024x538.png\" alt=\"\" class=\"wp-image-118099\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2024\/09\/Additional-Updates-1-1024x538.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2024\/09\/Additional-Updates-1-300x158.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2024\/09\/Additional-Updates-1-768x403.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2024\/09\/Additional-Updates-1-1536x806.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2024\/09\/Additional-Updates-1-2048x1075.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Opt Out Option for Elementor AI<\/h3>\n\n\n\n<p>Elementor AI tools streamline your workflow and speed up website delivery, all while keeping your professional guidance front and center. You can now easily turn off AI features when handing over the website to clients, ensuring they only see the final, polished product without any AI elements. The ability to disable AI notices is also useful for anyone who is not interested in using Elementor AI and wants to clean up their workspace. To turn off Elementor AI go to the WP Dashboard &gt; Users &gt; Profile and uncheck the box for \u201cEnable AI Functionality\u201d.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Further Updates<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Taxonomy Filter, Link in Bio and Floating Contact Buttons are now a native part of the Editor and no longer in the Features page.<\/li>\n\n\n\n<li>Nested Elements are now active by default for new websites.<\/li>\n\n\n\n<li>Lazy Load Background Images are merged and moved to the Performance Settings.<\/li>\n\n\n\n<li>Accessibility &#8211; New ability to name your Off-Canvas widgets.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Unlock New Possibilities with Elementor 3.24<\/h2>\n\n\n\n<p>Elementor 3.24 is packed with features and enhancements that make it easier than ever to create stunning, high-performing websites. Whether you\u2019re excited about the design possibilities with Variable Fonts, the strategic potential of Floating Bars, or the performance boosts from Conditional CSS Loading, this update has something for everyone. We encourage you to upgrade to Elementor 3.24 today and explore all the new possibilities it offers.<\/p>\n\n\n\n<p class=\"read-more-link show-core\"><a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Elementor <\/a><a href=\"https:\/\/elementor.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pro<\/a><\/p>\n\n\n\n<p class=\"read-more-link show-free\"><a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Elementor <\/a><a href=\"https:\/\/elementor.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pro<\/a><\/p>\n\n\n\n<p class=\"read-more-link show-essential_legacy show-essential\"><a href=\"https:\/\/my.elementor.com\/upgrade-subscription\/\" target=\"_blank\" rel=\"noreferrer noopener\">Upgrade Your Pro Subscription<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Elevate Your Websites with Floating Bars and Variable Fonts, Improve Performance with Enhanced CSS Loading and More!<\/p>\n","protected":false},"author":2024242,"featured_media":118063,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[44,15],"tags":[173],"marketing_persona":[],"marketing_intent":[],"class_list":["post-118061","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-new-features","tag-video"],"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.24: Floating Bars, Variable Fonts, Enhanced CSS Loading &amp; More!<\/title>\n<meta name=\"description\" content=\"Elevate Your Websites with Floating Bars and Variable Fonts, Improve Performance with Enhanced CSS Loading and More!\" \/>\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\/elementor-324-floating-bars-variable-fonts-enhanced-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Elementor 3.24: Floating Bars, Variable Fonts, Enhanced CSS Loading &amp; More!\" \/>\n<meta property=\"og:description\" content=\"Elevate Your Websites with Floating Bars and Variable Fonts, Improve Performance with Enhanced CSS Loading and More!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/\" \/>\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=\"2024-09-09T11:12:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-22T03:08:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/09\/Cover-image-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Roi Tal\" \/>\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=\"Roi Tal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/\"},\"author\":{\"name\":\"Roi Tal\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/09f7425d5f0e4e8ac7764b202c165fc0\"},\"headline\":\"Introducing Elementor 3.24: Floating Bars, Variable Fonts, Enhanced CSS Loading &amp; More!\",\"datePublished\":\"2024-09-09T11:12:48+00:00\",\"dateModified\":\"2025-11-22T03:08:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/\"},\"wordCount\":1809,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/09\/Cover-image-1.png\",\"keywords\":[\"Video\"],\"articleSection\":[\"Elementor\",\"New Features\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/\",\"url\":\"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/\",\"name\":\"Introducing Elementor 3.24: Floating Bars, Variable Fonts, Enhanced CSS Loading &amp; More!\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/09\/Cover-image-1.png\",\"datePublished\":\"2024-09-09T11:12:48+00:00\",\"dateModified\":\"2025-11-22T03:08:42+00:00\",\"description\":\"Elevate Your Websites with Floating Bars and Variable Fonts, Improve Performance with Enhanced CSS Loading and More!\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/09\/Cover-image-1.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/09\/Cover-image-1.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\",\"item\":\"https:\/\/elementor.com\/blog\/category\/elementor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Introducing Elementor 3.24: Floating Bars, Variable Fonts, Enhanced CSS Loading &amp; More!\"}]},{\"@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\/09f7425d5f0e4e8ac7764b202c165fc0\",\"name\":\"Roi Tal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/53a4b8103bf51815f66eec9532fb9ba89fb71bfb887c67660c39f06e73f509a5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/53a4b8103bf51815f66eec9532fb9ba89fb71bfb887c67660c39f06e73f509a5?s=96&d=mm&r=g\",\"caption\":\"Roi Tal\"},\"description\":\"Roi is a Product Marketing Manager at Elementor, working in the Editor Plugin team. He comes from a background of music and experience in content marketing and broadcasting, taking pride in creating meaningful communications that evoke and inspire. In his spare time, Roi enjoys making music, cooking, and watching movies.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/roit\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introducing Elementor 3.24: Floating Bars, Variable Fonts, Enhanced CSS Loading &amp; More!","description":"Elevate Your Websites with Floating Bars and Variable Fonts, Improve Performance with Enhanced CSS Loading and More!","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\/elementor-324-floating-bars-variable-fonts-enhanced-css\/","og_locale":"en_US","og_type":"article","og_title":"Introducing Elementor 3.24: Floating Bars, Variable Fonts, Enhanced CSS Loading &amp; More!","og_description":"Elevate Your Websites with Floating Bars and Variable Fonts, Improve Performance with Enhanced CSS Loading and More!","og_url":"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2024-09-09T11:12:48+00:00","article_modified_time":"2025-11-22T03:08:42+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/09\/Cover-image-1.png","type":"image\/png"}],"author":"Roi Tal","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Roi Tal","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/"},"author":{"name":"Roi Tal","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/09f7425d5f0e4e8ac7764b202c165fc0"},"headline":"Introducing Elementor 3.24: Floating Bars, Variable Fonts, Enhanced CSS Loading &amp; More!","datePublished":"2024-09-09T11:12:48+00:00","dateModified":"2025-11-22T03:08:42+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/"},"wordCount":1809,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/09\/Cover-image-1.png","keywords":["Video"],"articleSection":["Elementor","New Features"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/","url":"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/","name":"Introducing Elementor 3.24: Floating Bars, Variable Fonts, Enhanced CSS Loading &amp; More!","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/09\/Cover-image-1.png","datePublished":"2024-09-09T11:12:48+00:00","dateModified":"2025-11-22T03:08:42+00:00","description":"Elevate Your Websites with Floating Bars and Variable Fonts, Improve Performance with Enhanced CSS Loading and More!","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/09\/Cover-image-1.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/09\/Cover-image-1.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/elementor-324-floating-bars-variable-fonts-enhanced-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Elementor","item":"https:\/\/elementor.com\/blog\/category\/elementor\/"},{"@type":"ListItem","position":3,"name":"Introducing Elementor 3.24: Floating Bars, Variable Fonts, Enhanced CSS Loading &amp; More!"}]},{"@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\/09f7425d5f0e4e8ac7764b202c165fc0","name":"Roi Tal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/53a4b8103bf51815f66eec9532fb9ba89fb71bfb887c67660c39f06e73f509a5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/53a4b8103bf51815f66eec9532fb9ba89fb71bfb887c67660c39f06e73f509a5?s=96&d=mm&r=g","caption":"Roi Tal"},"description":"Roi is a Product Marketing Manager at Elementor, working in the Editor Plugin team. He comes from a background of music and experience in content marketing and broadcasting, taking pride in creating meaningful communications that evoke and inspire. In his spare time, Roi enjoys making music, cooking, and watching movies.","url":"https:\/\/elementor.com\/blog\/author\/roit\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/118061","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\/2024242"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=118061"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/118061\/revisions"}],"predecessor-version":[{"id":144625,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/118061\/revisions\/144625"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/118063"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=118061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=118061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=118061"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=118061"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=118061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}