{"id":3063,"date":"2021-06-23T08:46:21","date_gmt":"2021-06-23T08:46:21","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=3063"},"modified":"2023-02-21T10:43:01","modified_gmt":"2023-02-21T10:43:01","slug":"build-your-page-layout-on-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/","title":{"rendered":"Build Your Page Layout on Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3063\" class=\"elementor elementor-3063\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-62bc3eb3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"62bc3eb3\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\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-1a9d5cb\" data-id=\"1a9d5cb\" 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-5257ca18 elementor-widget elementor-widget-video\" data-id=\"5257ca18\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=joWTUN77hnA&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&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=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\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-1228c7d5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1228c7d5\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\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-4308f317\" data-id=\"4308f317\" 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-eb1a8d9 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"eb1a8d9\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2461\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2461\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2462\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2462\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2461\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2461\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2461\" tabindex=\"0\" hidden=\"false\"><p>Do you want to build your page layout on WordPress in the easiest possible way<\/p><p>This is a really basic and fundamental tutorial about using Elementor, and is the first part of three tutorials we will publish that concerns with using sections and columns in Elementor to build and control your page layout on WordPress.<\/p><p>Creating a custom page lets you create a wide variety of designs for your website, and leverage how your page design appears.<\/p><p>\u00a0<\/p><p>\u00a0<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2462\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2462\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2462\" tabindex=\"0\" hidden=\"hidden\"><p>Hey guys, this is Noah from Elementor. Today I&#8217;ll be giving you an overview of<br \/>the section layout settings.<br \/>These flexible settings enable you to design<br \/>your page structure creatively. We&#8217;ll go over the parameters, one by one,<br \/>so you could build your website&#8217;s page structures easily and quickly.<br \/>Firstly, what is a section? A section contains the columns and widgets of your page.<br \/>You can add a new section by clicking on the add new section button and choosing the<br \/>structure you&#8217;d like to display it in. Meaning the layout of its columns.<br \/>Once the section is added to the page you can add duplicate or delete columns by clicking<br \/>on the column icon and by clicking on the section icon, you can duplicate, save<br \/>or delete the section itself. Now when you click on the section icon you have the<br \/>layout tab and the style tab. We&#8217;ll be going over the layout tab. So we&#8217;ll be<br \/>working with this section, which contains two columns inside of it.<br \/>First we have the stretch section option. With this option you could stretch out your<br \/>sections background without regards to the theme&#8217;s layout. So if I click here and<br \/>Yes, as you can see the sections background has stretched out completely<br \/>to the width of the screen. Next we have the content width with which you could<br \/>set the width of the content within the section. Here you can choose boxed or<br \/>full width. So for example, if I stretch out the sections backgrounds by clicking<br \/>here and then select for content width &gt; full width, see how the content<br \/>automatically stretches out to the full width of the screen. And if I choose<br \/>boxed, I could set the exact width of the content. You could set the default of the<br \/>min width in the Elementor settings on the dashboard<br \/>Then we have the columns gap option. This is a great setting because it sets the<br \/>width displayed between the columns content inside the section.<br \/>To help you understand I made here a full width section with two columns, each with a<br \/>different background color. If you take a look at the columns here, you will see<br \/>that every column has its gaps surrounding it between the blue border<br \/>of the contents and the dash border of the column itself. As here you can see the<br \/>background of the column like between the edge of this map and the edge of the<br \/>background. Here by default the gap width is set at 10 pixels, meaning every column<br \/>has a 10 pixels gap surrounding it, which in total displays a 20 pixels gap<br \/>between the two columns. You could also choose between no gap, which actually<br \/>displays zero pixels gap width. Which means that the columns are touching<br \/>without any gaps in between or surrounding them. Narrow, which is 5<br \/>pixels gap width around the columns. As you can see it means that you have ten<br \/>pixels between the two columns here. And you have extended which is 15 pixels<br \/>Wide, which is 20 pixels. And wider which is 30 pixels meaning 60 pixels in total<br \/>between these two columns. Then you have height which sets the height of the<br \/>section&#8217;s background. Here you could choose default, fit to screen, which<br \/>displays it at the screens height, or min height where you could set the exact<br \/>height of the sections background. Note that its minimum is at the height of the<br \/>content displayed inside the section. Next we have the column position with<br \/>which you could set the position in which the column inside the section is<br \/>displayed. So if I set the height of the section background to fit the screen and<br \/>the column position is on stretch, as you can see it stretched all the way down to<br \/>fit the section backgrounds. Now if I set the column position as top, it&#8217;s displayed<br \/>only on the top of the section background that is fit to screen. If I<br \/>set it as middle &#8211; it&#8217;s displayed in the middle of the section. And if I set it as<br \/>bottom, it&#8217;s displayed on the bottom. Now say I set it as stretch which brings us<br \/>to the content position with which you could set the position of the content<br \/>inside the columns themselves. So now that the column position is stretched, if<br \/>I set it as top the content is already on the top of the section so it stays<br \/>the same. If I set it as middle as you can see the widgets meaning the content<br \/>is displayed in the middle of the column. And if I set it as bottom it&#8217;s displayed<br \/>on the bottom of the columns. Then you have the structure, I&#8217;ll just move<br \/>this back to min height, okay now you could resize the columns width by<br \/>dragging right here. However, if you want an exact percentage of the columns width<br \/>then you could choose here from these pre-made structures and you could reset<br \/>it to its original structure by clicking right here. Okay, those were the layout<br \/>settings for this section. You can only imagine what amazing pages you can<br \/>create with these flexible parameters. Next video we&#8217;ll be talking about the<br \/>style options for this section. I hope you enjoyed this video. For more videos<br \/>and tutorials subscribe to our YouTube channel or visit us at docs.elementor.com<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\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>Overview Transcript Overview Do you want to build your page layout on WordPress in the easiest possible way This is a really basic and fundamental tutorial about using Elementor, and is the first part of three tutorials we will publish that concerns with using sections and columns in Elementor to build and control your page [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4001,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-3063","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Build Your Page Layout on Elementor - Academy<\/title>\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\/academy\/build-your-page-layout-on-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Your Page Layout on Elementor - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Do you want to build your page layout on WordPress in the easiest possible way This is a really basic and fundamental tutorial about using Elementor, and is the first part of three tutorials we will publish that concerns with using sections and columns in Elementor to build and control your page [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T08:46:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T10:43:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Build-Your-Page-Layout-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build Your Page Layout on Elementor - Academy","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\/academy\/build-your-page-layout-on-elementor\/","og_locale":"en_US","og_type":"article","og_title":"Build Your Page Layout on Elementor - Academy","og_description":"Overview Transcript Overview Do you want to build your page layout on WordPress in the easiest possible way This is a really basic and fundamental tutorial about using Elementor, and is the first part of three tutorials we will publish that concerns with using sections and columns in Elementor to build and control your page [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-23T08:46:21+00:00","article_modified_time":"2023-02-21T10:43:01+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Build-Your-Page-Layout-1.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Build Your Page Layout on Elementor","datePublished":"2021-06-23T08:46:21+00:00","dateModified":"2023-02-21T10:43:01+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/"},"wordCount":1004,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Build-Your-Page-Layout-1.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/","url":"https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/","name":"Build Your Page Layout on Elementor - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Build-Your-Page-Layout-1.jpg","datePublished":"2021-06-23T08:46:21+00:00","dateModified":"2023-02-21T10:43:01+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Build-Your-Page-Layout-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Build-Your-Page-Layout-1.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/build-your-page-layout-on-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Build Your Page Layout on Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=3063"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3063\/revisions"}],"predecessor-version":[{"id":9384,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/3063\/revisions\/9384"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4001"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=3063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=3063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=3063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}