{"id":24071,"date":"2019-04-01T09:43:08","date_gmt":"2019-04-01T09:43:08","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=24071"},"modified":"2025-12-30T10:25:40","modified_gmt":"2025-12-30T08:25:40","slug":"the-ultimate-guideline-to-flexible-layout","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/","title":{"rendered":"The Ultimate Guideline to Flexible Website Layout"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"24071\" class=\"elementor elementor-24071\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-11cf3d9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"11cf3d9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fc6222c\" data-id=\"fc6222c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-520ba97 elementor-widget elementor-widget-text-editor\" data-id=\"520ba97\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Elementor v 2.5 introduced Flexible Layout, which offered new ways to position elements inside and outside the grid and <a href=\"https:\/\/elementor.com\/blog\/website-layout-ideas\/\">layout of websites<\/a>. This set of advanced website position capabilities makes it easier and faster to create custom layouts.<\/p><p>The new layout options include advanced flexbox column alignment settings, Inline and Custom Widget Width, as well as Absolute and Fixed positioning.<\/p><p>In this article, you\u2019ll learn how to harness the power of Elementor\u2019s new <em>custom positioning <\/em>to\u00a0<a href=\"https:\/\/bit.ly\/2wvj1o0\" target=\"_blank\" rel=\"noopener\">build amazing WordPress websites<\/a><em>. It<\/em>\u00a0covers every aspect designers dream of, including Inline; Absolute &amp; Fixed; Horizontal &amp; Vertical positioning. We\u2019ll also delve into best practices for the Column Alignment and Text Editor Columns features. Custom positioning offers increased flexibility and control when building your layout.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-63fc19b elementor-align-center elementor-widget elementor-widget-button\" data-id=\"63fc19b\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/layout-optimization-best-practices\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">See How To Optimize Your Website Layout With Elementor<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9a79e2e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9a79e2e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b4872dd\" data-id=\"b4872dd\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c9d2a4b elementor-widget elementor-widget-heading\" data-id=\"c9d2a4b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What is Flexible Layout?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28e354b elementor-widget elementor-widget-text-editor\" data-id=\"28e354b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><a href=\"#width\">Widget Width<\/a><ul><li>Full width<\/li><li>Inline Positioning<\/li><li>Custom<\/li><\/ul><\/li><\/ul><ul><li><a href=\"#column\">Column Alignment<\/a><ul><li>Vertical Alignment<\/li><li>Horizontal Alignment<\/li><\/ul><\/li><\/ul><ul><li><a href=\"#position\">Website Positioning<\/a><ul><li>Default<\/li><li>Absolute Positioning<\/li><li>Fixed Positioning<\/li><\/ul><\/li><\/ul><p>Ready to design faster and better than ever before? Grab a coffee and settle in for an extensive overview of all the exciting new features. Let\u2019s dive in!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7c658d0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7c658d0\" data-element_type=\"section\" id=\"width\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-af16373\" data-id=\"af16373\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a1a9bae elementor-widget elementor-widget-heading\" data-id=\"a1a9bae\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Widget Width<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-331f871 elementor-widget elementor-widget-text-editor\" data-id=\"331f871\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>How you choose to define your widget width is related to your overall design concept and needs. Elementor offers three options: Full-Width, Inline, and Custom. Full-width is the default, so we will start off with Inline.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-84fde70 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"84fde70\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8bed50e\" data-id=\"8bed50e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-81c28b1 elementor-widget elementor-widget-heading\" data-id=\"81c28b1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Inline Positioning<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c3b9119 elementor-widget elementor-widget-text-editor\" data-id=\"c3b9119\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Inline positioning saves you loads of time and simplifies your workflow. Since it only takes up the minimum amount of size of a widget itself, Inline allows you to place several widgets inside the column, and design better layouts.<\/p><p>These are a few cool ways to apply this feature:<\/p><ul><li>align elements side-by-side in the same column<\/li><li>control an element position<\/li><li>and use custom width to align your inline elements<\/li><\/ul><p>Want to place two buttons side by side in the same column? Now you can!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f399a8b elementor-widget elementor-widget-image\" data-id=\"f399a8b\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Flexible-layout-img-1-r4q73453679y3q0z0qzt3z0yims41rornh1j4c3zrm.png\" title=\"Flexible layout img 1\" alt=\"Flexible layout img 1\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d604a25 elementor-widget elementor-widget-text-editor\" data-id=\"d604a25\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the above pre-designed section, there are two buttons in the same column, let&#8217;s align them side-by-side. Click the button, and under Advanced &gt; Custom Positioning, click the \u2018width&#8217; dropdown and choose \u2018Inline&#8217;. Then do the same to the second button.<\/p><p>Here&#8217;s another useful way to use it:<\/p><p>Below you see 4 columns hosting 2 inline widgets &#8211; a heading widget and a text editor widget. With \u2018vertical align&#8217; you can control the position of our widgets to the center, start, and end.<\/p><p>\u2018End&#8217; is perfect for this design, so just right click and copy-paste-style for the rest of the widgets.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a09751 elementor-widget elementor-widget-image\" data-id=\"2a09751\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Flexible-layout-img-2-r4q6y3o2q0ew6lb4akzft8kggnhmzvsaynsaz7jky0.png\" title=\"Flexible layout img 2\" alt=\"Flexible layout img 2\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab477f6 elementor-widget elementor-widget-text-editor\" data-id=\"ab477f6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Next, add a services features here, and just below the text, drag in an image box widget, <br \/>change the image, remove the title, and paste in your text.<\/p><p>Then, in the Style tab, change the image width to 40%, and under content &#8211; align it to the left.<\/p><p>In Advanced, custom positioning &#8211; change the width to custom and set it to 30% of the column width.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f82edd elementor-widget elementor-widget-image\" data-id=\"1f82edd\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Flexible-layout-img-3-r4q72erg1ob7e91u4y0vqnfih8979xw0jzff5v5mfc.png\" title=\"Flexible layout img 3\" alt=\"Flexible layout img 3\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e5bf24 elementor-widget elementor-widget-text-editor\" data-id=\"1e5bf24\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>All that\u2019s left to do is to right-click and duplicate twice and alter your images and text.<\/p><p>Watch the full tutorial video on Inline Positioning <a href=\"https:\/\/www.youtube.com\/watch?v=FtHXk2e6OF8&amp;t=3s\">here (video link)<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1777a81 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1777a81\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-de1efc4\" data-id=\"de1efc4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bed046e elementor-widget elementor-widget-heading\" data-id=\"bed046e\" data-element_type=\"widget\" id=\"column\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Column Alignment<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47bb1da elementor-widget elementor-widget-text-editor\" data-id=\"47bb1da\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here we\u2019ll go over all the new options for Vertical and Horizontal Alignment.<\/p><p>For vertical alignment, you\u2019ll learn how to use <strong>Space Between, Space Around, <\/strong>and<strong> Space Evenly <\/strong>options. For horizontal alignment, we\u2019ll check out <strong>Start, Center, End, <\/strong>as well as the <strong>Space Between, Space Around, <\/strong>and<strong> Space Evenly <\/strong>options.<\/p><p>In this pre-made design below, each column contains an image, text editor, and star rating widget &#8211; but you can see that the content in the columns is not aligned correctly. The older settings in Layout &gt; <em>Vertical Align<\/em> \u2018top\u2019, \u2018middle\u2019 and \u2018bottom\u2019 cannot fix this.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4919f78 elementor-widget elementor-widget-image\" data-id=\"4919f78\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Flexible-layout-img-5-r4q709ooh9doy85sn0ph26vprmt3qre0xdxlt6bwlk.png\" title=\"Flexible layout img 5\" alt=\"Flexible layout img 5\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa5636f elementor-widget elementor-widget-text-editor\" data-id=\"fa5636f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This is why we added three new Vertical options for easier and more precise customization:<\/p><p>Space Between, Space Around &amp; Space Evenly.<\/p><p>Here\u2019s how each of the three new <strong>Vertical Alignment <\/strong>functions works:<\/p><p><strong>1. Space Between<\/strong> &#8211; places the icons at the start and end near the edge of the column, with equal space between them.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f96bbd0 elementor-widget elementor-widget-image\" data-id=\"f96bbd0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"386\" height=\"675\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=386,h=675\/blog\/wp-content\/uploads\/2019\/04\/Flexible-layout-img-6.png\" class=\"attachment-large size-large wp-image-24091\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=386\/blog\/wp-content\/uploads\/2019\/04\/Flexible-layout-img-6.png 386w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=172\/blog\/wp-content\/uploads\/2019\/04\/Flexible-layout-img-6-172x300.png 172w\" sizes=\"(max-width: 386px) 100vw, 386px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-792ab36 elementor-widget elementor-widget-text-editor\" data-id=\"792ab36\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>2. Space Around<\/strong> &#8211; here the Widgets are spaced equally, and the edges are half the size of the space between widgets.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc68b0e elementor-widget elementor-widget-image\" data-id=\"bc68b0e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"386\" height=\"675\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=386,h=675\/blog\/wp-content\/uploads\/2019\/04\/Flexible-layout-img-7.png\" class=\"attachment-large size-large wp-image-24092\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=386\/blog\/wp-content\/uploads\/2019\/04\/Flexible-layout-img-7.png 386w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=172\/blog\/wp-content\/uploads\/2019\/04\/Flexible-layout-img-7-172x300.png 172w\" sizes=\"(max-width: 386px) 100vw, 386px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e9a359 elementor-widget elementor-widget-text-editor\" data-id=\"6e9a359\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>3. Space Evenly<\/strong> &#8211; sets the Widgets to have equal space between, before, and after them.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-186cae1 elementor-widget elementor-widget-image\" data-id=\"186cae1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"386\" height=\"675\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=386,h=675\/blog\/wp-content\/uploads\/2019\/04\/Flexible-layout-img-8.png\" class=\"attachment-large size-large wp-image-24094\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=386\/blog\/wp-content\/uploads\/2019\/04\/Flexible-layout-img-8.png 386w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=172\/blog\/wp-content\/uploads\/2019\/04\/Flexible-layout-img-8-172x300.png 172w\" sizes=\"(max-width: 386px) 100vw, 386px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-594bd36 elementor-widget elementor-widget-text-editor\" data-id=\"594bd36\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Let\u2019s move on to the updates in the <strong>Horizontal Alignment<\/strong>.<\/p><p>This feature extends the ability of the inline positioning and lets you horizontally align the inline widgets that are placed in the same row.<\/p><p>As you can see we have added 5 Icon Widgets to this column on the right. They are set to inline, making them appear next to each other all in the same column. We\u2019ll set the columns vertical alignment to Bottom, so they are positioned next to the Top List ideas.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f051b30 elementor-widget elementor-widget-image\" data-id=\"f051b30\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Flexible-layout-img-9-r4q742x472lk1amgdo106890hw0oykiu496hvkofd4.png\" title=\"Flexible layout img 9\" alt=\"Flexible layout img 9\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2194e6 elementor-widget elementor-widget-text-editor\" data-id=\"a2194e6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>1. <strong>Start<\/strong> &#8211; aligns all of the icons to the left.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-67b3c2e elementor-widget elementor-widget-image\" data-id=\"67b3c2e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Flexible-layout-img-10-r4q71ni4jh9w1k5fk48p8cb591zk2pvss8ic8ua1fs.png\" title=\"Flexible layout img 10\" alt=\"Flexible layout img 10\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78f42f7 elementor-widget elementor-widget-text-editor\" data-id=\"78f42f7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>2. <strong>Center<\/strong><span style=\"font-weight: 400\"> &#8211; to the middle of the column.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-726e66f elementor-widget elementor-widget-image\" data-id=\"726e66f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"449\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=449\/blog\/wp-content\/uploads\/2019\/04\/Flexible-layout-img-11-1024x575.png\" class=\"attachment-large size-large wp-image-24099\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2019\/04\/Flexible-layout-img-11-1024x575.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/04\/Flexible-layout-img-11-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2019\/04\/Flexible-layout-img-11-768x431.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1200\/blog\/wp-content\/uploads\/2019\/04\/Flexible-layout-img-11.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba5c5bb elementor-widget elementor-widget-text-editor\" data-id=\"ba5c5bb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>3. <strong>End <\/strong><span style=\"font-weight: 400\">positions it to the right.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0270e63 elementor-widget elementor-widget-image\" data-id=\"0270e63\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Flexible-layout-img-12-r4q76fila5td277knolfemwhykfq7buofvw72h6zt4.png\" title=\"Flexible layout img 12\" alt=\"Flexible layout img 12\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4397f52 elementor-widget elementor-widget-text-editor\" data-id=\"4397f52\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now you know how to use the vertical and horizontal alignment options inside columns in Elementor 2.5.<\/p><p>Watch the full video tutorial on column alignment <a href=\"https:\/\/www.youtube.com\/watch?v=htUvG2Y5vaY\">here (video link)<\/a>.<\/p><p>Next up: Widget Width.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7088ba3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7088ba3\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-972cac7\" data-id=\"972cac7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6827243 elementor-widget elementor-widget-heading\" data-id=\"6827243\" data-element_type=\"widget\" id=\"position\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Website Positioning \u2013 Do\u2019s &amp; Don\u2019ts<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-31fcf9c elementor-widget elementor-widget-text-editor\" data-id=\"31fcf9c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Designers just gotta love this one. Absolute Positioning provides the independence to design freehand in WordPress. Finally!<\/p><p>So, if you are looking for greater control and precision over the placement of your elements on the canvas, try out the absolute and fixed settings. Absolute positioning enables you to place elements without the restrictions of the column it is in, or the surrounding widgets.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a78b1b0 elementor-widget elementor-widget-heading\" data-id=\"a78b1b0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Website Absolute Position<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e273954 elementor-widget elementor-widget-text-editor\" data-id=\"e273954\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>At first Absolute positioning can be kind of tricky, so here is an overview of the basics you will need to start using it.<\/p><p>To try it out, go to any widget, choose \u2018Position: Absolute&#8217;, and drag the widget to any location on the page, regardless of the grid. Point anywhere on the screen, and simply drag the widget there.<\/p><p>An absolute object is relative to the column. Below the pink square box is our absolute object.<\/p><p>Go to Advanced, custom position, and choose position absolute. Change the position by clicking the horizontal and vertical orientation, the box is inside the column, and also by moving it around on the screen. (The square will be relative to the column.) You will notice the text jumps up and the cube appears above it. Why? It&#8217;s because the moment the cube is set to absolute, it&#8217;s removed from the flow of elements on the page.<\/p><p>Keep in mind that the default width of an absolute element is automatically inherited from the column it&#8217;s in.So be sure that you are in the right spot relative to the area that you want to position it, that it refers to the correct edges, especially for <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"How To Create A Responsive Website: Step-By-Step 2025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"31999\">responsive<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-067927b elementor-widget elementor-widget-video\" data-id=\"067927b\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2019\/04\/Absolute.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2fe557c elementor-widget elementor-widget-text-editor\" data-id=\"2fe557c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Let&#8217;s put the square <em>outside<\/em> of the column. It seems like it is in the right bottom corner of the screen, but if you close the panel and scroll, you\u2019ll see that the square moves with the column and keeps the exact position that was previously set. You can move it anywhere and it will stay at the same point <strong>relative to the column<\/strong>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-569f23d elementor-widget elementor-widget-text-editor\" data-id=\"569f23d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The thing is, Absolute position usually clashes with responsive design. Fortunately, Elementor enables you to set a separate custom position for mobile, tablet and desktop devices using percentage, VH, VW or pixel units.<\/p><p>With Absolute position, you run the risk of getting a horizontal scroll when the element exceeds the limits of the page. Luckily, we added an Overflow Hidden control, which condenses all of the section widgets inside and removes any unwanted scrolls.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f09305 elementor-widget elementor-widget-heading\" data-id=\"1f09305\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Website Fixed Position<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d56d1d1 elementor-widget elementor-widget-text-editor\" data-id=\"d56d1d1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>So, does this all also apply to Fixed position? Change the pink cube\u2019s position from absolute to fixed and let\u2019s check it out.<\/p><p>What happened? Did it disappear? Don\u2019t panic. You can easily get it back by setting the offset to zero. It disappeared because the Horizontal and Vertical Orientation and offset settings are still the same as they were for absolute positioning. BUT, a fixed position element is positioned relative to the viewport, the browser window itself, and not relative to the column it is in. So in this case, the pink cube is just hiding 200 pixels below the viewport, due to the negative horizontal offset value. I\u2019ll go ahead and bring it back into view with the slider. Remember, you can easily get the cube back by setting the offsets to zero.<\/p><p>When the cube\u2019s orientations are set to the bottom and right and its offsets are both zero, the cube is positioned exactly on the bottom right corner of the viewport, this is its starting position.<\/p><p>Just as with the absolute position, the orientation settings determine this.<\/p><p>Let\u2019s say we want the cube to be positioned near the bottom on the left, then set the Horizontal Orientation to the\u00a0<strong>Left<\/strong>\u00a0and the Vertical Orientation to\u00a0<strong>Bottom<\/strong>.<\/p><p>As you can see, there are still some previously set offsets. We can drag it to the left bottom corner, but I want it to be positioned exactly on the edge. All I need to do is enter zero for both the horizontal and vertical offsets.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a50a1d elementor-widget elementor-widget-video\" data-id=\"6a50a1d\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2019\/04\/Fixed.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb1b31a elementor-widget elementor-widget-text-editor\" data-id=\"eb1b31a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>With the Fixed position, any content or column width changes as already demonstrated doesn\u2019t affect the cube\u2019s position because it is positioned relative to the viewport and not relative to the column it is in. This means that the default width of a fixed element is automatically inherited from the viewport.<\/p><p><strong>TIP:<\/strong> Be aware that using the correct Vertical and Horizontal Orientation settings for absolute and fixed objects is vital for maintaining better responsive behavior. Designing your page with this in mind will save you a lot of time when making adjustments for mobile and tablet.<\/p><p>Watch the full video tutorial on Absolute &amp; Fixed positioning <a href=\"https:\/\/www.youtube.com\/watch?v=RA0T52VB2Os&amp;t=4s\" data-wplink-edit=\"true\">here (video link)<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-355ab2f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"355ab2f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a03f267\" data-id=\"a03f267\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c70718a elementor-widget elementor-widget-heading\" data-id=\"c70718a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5586700 elementor-widget elementor-widget-text-editor\" data-id=\"5586700\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The new Elementor Core 2.5 version gives web designers freehand design capabilities that were never before possible on WordPress. These options are extremely useful for both designers and marketers and expand your freedom to create beautiful layouts however you imagine them. Take advantage of the new flexible layout today. <strong>Flexible Layout<\/strong> is an amazing toolset that will completely revolutionize your design process.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Want to know how to harness the power of Elementor&#8217;s custom positioning? In this article, we will cover every aspect of our Flexible Layout release, including Inline, Absolute &amp; Fixed, Horizontal &amp; Vertical positioning.\u200b<\/p>\n","protected":false},"author":4,"featured_media":24077,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[79],"marketing_persona":[],"marketing_intent":[],"class_list":["post-24071","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The Ultimate Guideline to Flexible Website Layout<\/title>\n<meta name=\"description\" content=\"Here you can find the ultimate guideline to Elementor\u2019s 2.5 flexible layout with brand new features, helping you to increase engagement and conversions.\" \/>\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\/the-ultimate-guideline-to-flexible-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Ultimate Guideline to Flexible Website Layout\" \/>\n<meta property=\"og:description\" content=\"Here you can find the ultimate guideline to Elementor\u2019s 2.5 flexible layout with brand new features, helping you to increase engagement and conversions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/\" \/>\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=\"2019-04-01T09:43:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-30T08:25:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/04\/cover1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"536\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ben Pines\" \/>\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=\"Ben Pines\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/\"},\"author\":{\"name\":\"Ben Pines\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\"},\"headline\":\"The Ultimate Guideline to Flexible Website Layout\",\"datePublished\":\"2019-04-01T09:43:08+00:00\",\"dateModified\":\"2025-12-30T08:25:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/\"},\"wordCount\":1719,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/04\/cover1.jpg\",\"keywords\":[\"Build\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/\",\"url\":\"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/\",\"name\":\"The Ultimate Guideline to Flexible Website Layout\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/04\/cover1.jpg\",\"datePublished\":\"2019-04-01T09:43:08+00:00\",\"dateModified\":\"2025-12-30T08:25:40+00:00\",\"description\":\"Here you can find the ultimate guideline to Elementor\u2019s 2.5 flexible layout with brand new features, helping you to increase engagement and conversions.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/04\/cover1.jpg\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/04\/cover1.jpg\",\"width\":1024,\"height\":536},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"The Ultimate Guideline to Flexible Website Layout\"}]},{\"@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\/c772e5251f765dce36a2b4989bad900a\",\"name\":\"Ben Pines\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"caption\":\"Ben Pines\"},\"description\":\"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.\",\"sameAs\":[\"https:\/\/elementor.com\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/ben-pines\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Ultimate Guideline to Flexible Website Layout","description":"Here you can find the ultimate guideline to Elementor\u2019s 2.5 flexible layout with brand new features, helping you to increase engagement and conversions.","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\/the-ultimate-guideline-to-flexible-layout\/","og_locale":"en_US","og_type":"article","og_title":"The Ultimate Guideline to Flexible Website Layout","og_description":"Here you can find the ultimate guideline to Elementor\u2019s 2.5 flexible layout with brand new features, helping you to increase engagement and conversions.","og_url":"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2019-04-01T09:43:08+00:00","article_modified_time":"2025-12-30T08:25:40+00:00","og_image":[{"width":1024,"height":536,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/04\/cover1.jpg","type":"image\/jpeg"}],"author":"Ben Pines","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Ben Pines","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/"},"author":{"name":"Ben Pines","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a"},"headline":"The Ultimate Guideline to Flexible Website Layout","datePublished":"2019-04-01T09:43:08+00:00","dateModified":"2025-12-30T08:25:40+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/"},"wordCount":1719,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/04\/cover1.jpg","keywords":["Build"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/","url":"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/","name":"The Ultimate Guideline to Flexible Website Layout","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/04\/cover1.jpg","datePublished":"2019-04-01T09:43:08+00:00","dateModified":"2025-12-30T08:25:40+00:00","description":"Here you can find the ultimate guideline to Elementor\u2019s 2.5 flexible layout with brand new features, helping you to increase engagement and conversions.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/04\/cover1.jpg","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/04\/cover1.jpg","width":1024,"height":536},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/the-ultimate-guideline-to-flexible-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"The Ultimate Guideline to Flexible Website Layout"}]},{"@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\/c772e5251f765dce36a2b4989bad900a","name":"Ben Pines","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","caption":"Ben Pines"},"description":"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.","sameAs":["https:\/\/elementor.com"],"url":"https:\/\/elementor.com\/blog\/author\/ben-pines\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/24071","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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=24071"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/24071\/revisions"}],"predecessor-version":[{"id":149194,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/24071\/revisions\/149194"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/24077"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=24071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=24071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=24071"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=24071"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=24071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}