{"id":40990,"date":"2021-08-01T11:12:41","date_gmt":"2021-08-01T09:12:41","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/sections-and-columns-in-elementor-part-1-2\/"},"modified":"2023-08-29T14:17:44","modified_gmt":"2023-08-29T12:17:44","slug":"sections-and-columns-in-elementor-part-1-2","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/en\/elementor-academy-temas\/sections-and-columns-in-elementor-part-1-2\/","title":{"rendered":"Sections and columns in Elementor &#8211; Part 1\/2"},"content":{"rendered":"\n<p>In this first part we will look at the <strong>Layout<\/strong> tab for both sections and columns, leaving the Editor <strong>Style<\/strong> tab for the second part.<\/p>\n\n<ul class=\"wp-block-advgb-summary advgb-toc alignnone\"><li class=\"toc-level-1\"><a href=\"#que-es-una-seccion-95d914c5-44ee-40c3-857e-705875903212\">What is a section?<\/a><\/li><li class=\"toc-level-2\"><a href=\"#opciones-de-clic-derecho-af2f14cb-c339-46e5-90a4-9fc3a8bd5696\">Right-click options<\/a><\/li><li class=\"toc-level-2\"><a href=\"#pestana-disposicion-1da82fb7-a137-4344-ab10-263cd9fdaf65\">Layout tab<\/a><\/li><li class=\"toc-level-2\"><a href=\"#html\">How to add HTML tags to my section and column<\/a><\/li><li class=\"toc-level-2\"><a href=\"#estructura\">Structure tab<\/a><\/li><li class=\"toc-level-1\"><a href=\"#que-es-una-columna-9d71ac7e-9106-43d6-b0d7-1938a079b928\">What is a column?<\/a><\/li><li class=\"toc-level-2\"><a href=\"#-opciones-de-clic-derecho-6b0667a1-91cf-4379-b9f0-3f16490efafc\"> Right-click options<\/a><\/li><li class=\"toc-level-2\"><a href=\"#-pestana-disposicion-b0f643c8-62bd-4129-9109-036a2ae0a4dd\">  Layout tab<\/a><\/li><\/ul>\n<h2 class=\"wp-block-heading\" id=\"que-es-una-seccion-95d914c5-44ee-40c3-857e-705875903212\">What is a section?<\/h2>\n\n<p>The sections in Elementor are container type building blocks, inside the sections are the columns which is where we will finally place our layout widgets, a section always has at least one column.<\/p>\n\n<p>Sections can be manipulated and designed through the options in the Elementor Panel on the left or by right-clicking on the Section controller and choosing from the context menu that appears.  <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"opciones-de-clic-derecho-af2f14cb-c339-46e5-90a4-9fc3a8bd5696\">Right-click options<\/h3>\n\n<p>If you want to duplicate a section, <em>right-click on its section identifier<\/em> <img decoding=\"async\" width=\"110\" height=\"26\" class=\"wp-image-16379\" style=\"width: 110px;\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/selector-de-seccion-elementor.png?strip=all&quality=92&webp=92&avif=92&resize=110%2C26\" alt=\"Elementor section selector\"\/> and click <strong>Duplicate<\/strong> from the context menu. You can also copy and paste a section elsewhere in the same document you are editing and even in another document (page, template, &#8230;) as long as it is from the same website, using the <strong>Copy<\/strong> and <strong>Paste<\/strong> options. You can also copy and paste just the <strong>style<\/strong> (without the content) from one section to another. Click <strong>Save as template<\/strong> to save the section as a template that can be inserted anywhere later. Clicking on <strong>Navigator<\/strong> here will open the Navigator already configured for that particular section. And, of course, clicking <strong>Delete<\/strong> here will delete the section.<\/p>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/menu-contextual-seccion-elementor.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/menu-contextual-seccion-elementor.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Context menu Elementor section\" class=\"wp-image-16381\" width=\"250\" height=\"299\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/menu-contextual-seccion-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 326w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/menu-contextual-seccion-elementor-252x300.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 252w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/menu-contextual-seccion-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=65 65w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/menu-contextual-seccion-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=130 130w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/menu-contextual-seccion-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=195 195w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/><\/a><\/figure><\/div>\n\n<p>If you click on <strong>Edit Section<\/strong>, the column options will be displayed in the Elementor Panel on the left with all the following options available to you.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"pestana-disposicion-1da82fb7-a137-4344-ab10-263cd9fdaf65\">Layout tab<\/h3>\n\n<div class=\"wp-block-image\"><figure class=\"alignright size-full is-resized\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/pestana-disposicion-seccion-elementor.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/pestana-disposicion-seccion-elementor.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Layout tab of an Elementor section\" class=\"wp-image-16384\" width=\"284\" height=\"540\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/pestana-disposicion-seccion-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 356w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/pestana-disposicion-seccion-elementor-158x300.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 158w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/pestana-disposicion-seccion-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=71 71w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/pestana-disposicion-seccion-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=213 213w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/pestana-disposicion-seccion-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=284 284w\" sizes=\"(max-width: 284px) 100vw, 284px\" \/><\/a><\/figure><\/div>\n\n<p>If you click on <strong>Edit Section<\/strong>, the column options will be displayed in the Elementor Panel on the left with all the following options available.<\/p>\n\n<ol class=\"wp-block-list\" id=\"alto\"><li><strong>Content Width<\/strong>: sets the content width to <em>Box<\/em> or <em>Full Width<\/em>. If you select Box, the default width for the content will be 1140px (this can be changed from the hamburger menu (top left) <img loading=\"lazy\" decoding=\"async\" width=\"25\" height=\"18\" class=\"wp-image-16386\" style=\"width: 25px;\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/menu-hamburguesa.jpg?strip=all&quality=92&webp=92&avif=92&resize=25%2C18\" alt=\"Elementor Editor hamburger menu\"\/>  &gt; <em>Site settings<\/em> &gt; <em>Layout<\/em>), although you can use the slider to set your preferred width.<\/li><li><strong>Column sp<\/strong>acing: the default column spacing is 20px, but you can change it from this selector (No spacing, Narrow, Extended, Wide, Widest and Custom).<\/li><li><strong>Height<\/strong>: By default the section adjusts its height to the content, but you have two more options:<ul><li><strong>Fit to screen<\/strong>: the section is adjusted to completely fill the screen.<ul><li><strong>Column position<\/strong>: if you select Fit to screen, this other option will be displayed, allowing you to vertically align the column position (stretch, top, middle, bottom).<\/li><\/ul><\/li><li><strong>Minimum height<\/strong>: this option allows you to set a minimum height through the slider, but you have to take into account that if you set a value lower than the height of the content it will have no effect.<ul><li><strong>Column position<\/strong>: if you select Fit to screen, this other option will be displayed, allowing you to vertically align the column position (stretch, top, middle, bottom).<\/li><\/ul><\/li><\/ul><\/li><li><strong>Vertical alignment<\/strong>: allows you to set the vertical alignment of the widgets you add, but for this to make sense the height of the section must be set to Fit to screen or a minimum height greater than the height occupied by the existing content on the screen. Anyway the Column has another control equal to this one for vertical alignment that takes precedence over this one, so my recommendation for vertical alignment is to use the vertical alignment control of the column.<\/li><li><strong>Overflow<\/strong>: select how to handle content that overflows your container. <em>The default value<\/em> allows overflow. Select <em>Hidden<\/em> to hide the overflowing content. For example, using Motion Effects from the Advanced tab, content can enter from outside the column through an animation, if this control is set.  <em>Default<\/em>  the animated element will be displayed in its entire path, however with Hidden Overflow, we will only see the animated element in the area bounded by the column. This is shown much more clearly in the video tutorial on this topic.<\/li><li><strong>Stretch section<\/strong>: forces the section to stretch to the full width of the page using JavaScript. We will use this option only in case we have set the control at the beginning of this <em>Content Width <\/em>box to<em> Full Width<\/em> and it has no effect.<\/li><li><strong>HTML tag<\/strong>: set an HTML tag for your section, this point is developed below.<\/li><\/ol>\n<h3 class=\"wp-block-heading\" id=\"html\">How to add HTML tags to my section and column<\/h3>\n\n<p><strong>HTML tags<\/strong> are essential for the SEO of your site. Using them correctly will have a positive impact on your website traffic.<\/p>\n\n<p>If you are editing the header, use the header<\/p>\n\n<ol class=\"wp-block-list\"><li>Go to the settings of your <img loading=\"lazy\" decoding=\"async\" width=\"100\" height=\"23\" class=\"wp-image-16379\" style=\"width: 100px;\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/selector-de-seccion-elementor.png?strip=all&quality=92&webp=92&avif=92&resize=100%2C23\" alt=\"Elementor section selector\"\/><em>section<\/em> or<img loading=\"lazy\" decoding=\"async\" width=\"25\" height=\"27\" class=\"wp-image-16401\" style=\"width: 25px;\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/columna-elementor.jpg?strip=all&quality=92&webp=92&avif=92&resize=25%2C27\" alt=\"Elementor Column\"\/><em>column <\/em>.<\/li><li>Under <em>Layout<\/em>, click the <strong>HTML Tag<\/strong> drop-down menu.<\/li><li>Choose the label you want to use.<\/li><\/ol>\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/etiqueta-html-elementor.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"359\" height=\"233\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/etiqueta-html-elementor.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Elementor HTML tag\" class=\"wp-image-16403\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/etiqueta-html-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 359w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/etiqueta-html-elementor-300x195.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/etiqueta-html-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=71 71w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/etiqueta-html-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=143 143w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/etiqueta-html-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=215 215w\" sizes=\"(max-width: 359px) 100vw, 359px\" \/><\/a><\/figure>\n<p>These are the different types of <em>HTML tags<\/em> you can choose from:<\/p>\n\n<ol class=\"wp-block-list\"><li><em>\n  <strong>&lt;div&gt;<\/strong>\n<\/em>: defines a division. This tag allows you to group several block elements (paragraphs, headings, lists, tables, divisions, etc).<\/li><li><em>\n  <strong>&lt;header&gt;<\/strong>\n<\/em>defines a header for a document or section. This is useful when you are creating a header template. It can contain the elements related to the header of a website such as the logo, a navigation menu, a search form, &#8230;<\/li><li><em>\n  <strong>&lt;footer&gt;<\/strong>\n<\/em>defines a footer for a document or section. This is useful when you are creating a footer template. Represents a footer that typically contains information about the author of the website, links to legal texts and copyright.<\/li><li><strong>&lt;main&gt;<\/strong>: Represents the main content of a document. This content should be unique to the document, excluding any content that is repeated in other documents such as sidebars, navigation links, copyright information, site logos and search forms (unless, of course, the primary function of the document is a search form).<\/li><li><em><strong>&lt;article&gt;<\/strong><\/em>represents an independent and complementary composition to the main content of the document, for example it could be a message in a forum, a magazine or newspaper article, a blog entry, a user comment, an interactive widget or gadget, or any other element independent of the content.<\/li><li><em>\n  <strong>&lt;section&gt;<\/strong>\n<\/em>: designed to contain a thematically defined part of a document. The contents of a section element are usually preceded by a heading. Authors usually use the section element to divide a large document into chapters, to separate the different tabs in an application or to thematically divide the sections of a document (announcements section, latest published articles section, related links section, etc.).<\/li><li><em>\n  <strong>&lt;aside&gt;<\/strong>\n<\/em>represents a section of a page consisting of content that is indirectly related to the main content of the document. These sections are often represented as sidebars or as inserts and contain an explanation in the margin such as a glossary definition, indirectly related elements such as advertising.<\/li><li><em>\n  <strong>&lt;nav&gt;<\/strong>\n<\/em>represents a part of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents and indexes.<\/li><\/ol>\n<h3 class=\"wp-block-heading\" id=\"estructura\">Structure tab<\/h3>\n\n<p>When a section has more than one column we can use these default column layout settings, the numbers indicate the percentage of width of each column with respect to the total 100.  <\/p>\n\n<p>Regardless of the structure we select, which by default is columns of equal width, we can define the width of columns as we wish, either by dragging in the intermediate space between columns or by entering a number from the Column Width text box in the options of the Column Layout tab.<\/p>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/estructura-seccion-elementor.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"407\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/estructura-seccion-elementor.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Structure of an elementor section\" class=\"wp-image-16410\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/estructura-seccion-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 356w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/estructura-seccion-elementor-262x300.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 262w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/estructura-seccion-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=71 71w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/estructura-seccion-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=142 142w\" sizes=\"(max-width: 356px) 100vw, 356px\" \/><\/a><\/figure><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"que-es-una-columna-9d71ac7e-9106-43d6-b0d7-1938a079b928\">What is a column?<\/h2>\n\n<p>A column in Elementor is a vertical division of a section, as we have said before the columns are children of the sections, and in a section there can be from one to several columns. Columns are the final container for the widgets that will compose the layout of a document in Elementor.<\/p>\n\n<p>If a document has more than one column, they can have equal or different widths. In the configuration box of a <strong>section<\/strong>, there is the tab <strong>\n  <a href=\"#estructura\">Structure<\/a>\n<\/strong> where we can select from several default options, but we can also set default widths for each column expressed in percentages of 100%. For example, we have three columns and set one at 22.5%, another at 27.5% and the last at 50%.<\/p>\n\n<p>The height of a column is determined by the size of the section, for a column to have a height greater than its content, we must establish a minimum height or a minimum height in the section.  <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"-opciones-de-clic-derecho-6b0667a1-91cf-4379-b9f0-3f16490efafc\"> Right-click options<\/h3>\n\n<p>If you want to add a new column or duplicate a column, <em>right-click on a column identifier<\/em> <img loading=\"lazy\" decoding=\"async\" width=\"25\" height=\"27\" class=\"wp-image-16414\" style=\"width: 25px;\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/columna-elementor-1.jpg?strip=all&quality=92&webp=92&avif=92&resize=25%2C27\" alt=\"Elementor Column Icon\"\/> and choose <strong>+Add New Column<\/strong> or <strong>Duplicate<\/strong> from the context menu. You can also copy and paste a column into another section using the <strong>Copy<\/strong> and <strong>Paste<\/strong> options, or you can copy and paste just the <strong>style<\/strong> (without the content) from one column to another.  <\/p>\n\n<p>Clicking on <strong>Navigator<\/strong> will open the Navigator already configured for that particular column. And, of course, clicking <strong>Delete<\/strong> here will delete the column. If the section has only one column and you delete it, it will be deleted but replaced by another empty column.<\/p>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/menu-contextual-columna-elementor.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"395\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/menu-contextual-columna-elementor.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Context menu Elementor Column\" class=\"wp-image-16415\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/menu-contextual-columna-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 278w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/menu-contextual-columna-elementor-211x300.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 211w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/menu-contextual-columna-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=55 55w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/menu-contextual-columna-elementor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=111 111w\" sizes=\"(max-width: 278px) 100vw, 278px\" \/><\/a><\/figure><\/div>\n\n<p>If you click <strong>Edit Column<\/strong>, the column options will be displayed in the Elementor Panel on the left with the following options available.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"-pestana-disposicion-b0f643c8-62bd-4129-9109-036a2ae0a4dd\">  Layout tab<\/h3>\n\n<ol class=\"wp-block-list\"><li><strong>Column width (%)<\/strong>: set the width of your columns, taking into account that it is a percentage of the total which is 100%, increasing the size of a column will subtract it from the adjacent column.<\/li><li><strong>Vertical alignment<\/strong>: set the vertical alignment of the widgets contained in the column. For this alignment to make sense, two things have to happen. One that the height of the section is greater than the space occupied by the content and this is done by setting the <a href=\"#alto\">height of the section<\/a> to a size greater than that occupied by the content, either by selecting the <em>Fit to Screen<\/em> or <em>Minimum Height<\/em> option. And another one that after setting <em>Fit to screen<\/em> or <em>Minimum height<\/em> we set the <em>Column position<\/em> option to <em>Stretch<\/em>.<ul><li><strong>Default<\/strong>: widgets are aligned at the top.<\/li><li><strong>Top<\/strong>: widgets are aligned at the top.<\/li><li><strong>Medium<\/strong>: widgets are aligned in the middle.<\/li><li><strong>Bottom<\/strong>: widgets are aligned at the bottom.<\/li><li><strong>Middle Ingter Space<\/strong>: widgets start and end at the edge of the column, with equal spacing between them.<\/li><li><strong>Spacing around<\/strong>: widgets are equally spaced and borders are half the size of the space between widgets.<\/li><li><strong>Uniform spacing<\/strong>: widgets have the same spacing between, before and after them.<img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"528\" class=\"wp-image-16457\" style=\"width: 1200px;\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-vertical-columnas.png?strip=all&quality=92&webp=92&avif=92\" alt=\"Vertical column alignment\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-vertical-columnas.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 1250w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-vertical-columnas-300x132.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-vertical-columnas-768x338.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 768w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-vertical-columnas-400x176.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 400w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-vertical-columnas.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=250 250w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-vertical-columnas.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=500 500w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-vertical-columnas.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=1000 1000w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-vertical-columnas.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=450 450w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/li><\/ul><\/li><li><strong>Horizontal alignment<\/strong>: this extends the inline positioning capability and allows you to horizontally align inline widgets that are placed in the same row. So that this alignment can be done it is necessary that the widgets that we want to align have established in <em>Advanced<\/em> tab &gt; <em>Positioning<\/em> &gt; <em>Width: Integrated (auto)<\/em> so that the widgets do not occupy the whole width of the screen and can be aligned horizontally.<img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"528\" class=\"wp-image-16497\" style=\"width: 1200px;\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-horizontal-columnas.png?strip=all&quality=92&webp=92&avif=92\" alt=\"Horizontal alignment columns\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-horizontal-columnas.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 1250w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-horizontal-columnas-300x132.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-horizontal-columnas-768x338.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 768w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-horizontal-columnas-400x176.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 400w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-horizontal-columnas.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=250 250w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-horizontal-columnas.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=500 500w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-horizontal-columnas.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=1000 1000w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/alineacion-horizontal-columnas.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=450 450w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/li><li><strong>HTML tag<\/strong>: sets an HTML tag for your column. <a href=\"#html\">Learn more about HTML tags<\/a>.<\/li><\/ol>\n<p><\/p>\n","protected":false},"featured_media":31008,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"class_list":["post-40990","elementor-adedemy","type-elementor-adedemy","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/secciones-y-columnas-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,false],"thumbnail":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/secciones-y-columnas-elementor-150x150.jpg?strip=all&quality=92&webp=92&avif=92",150,150,true],"medium":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/secciones-y-columnas-elementor-300x150.jpg?strip=all&quality=92&webp=92&avif=92",300,150,true],"medium_large":["https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2021\/08\/secciones-y-columnas-elementor-768x383.jpg",768,383,true],"large":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/secciones-y-columnas-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true],"1536x1536":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/secciones-y-columnas-elementor-1536x766.jpg?strip=all&quality=92&webp=92&avif=92",1536,766,true],"2048x2048":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/secciones-y-columnas-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true]},"uagb_author_info":{"display_name":"La Colmena Tecnol\u00f3gica","author_link":"https:\/\/lacolmenatecnologica.com\/en\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"In this first part we will look at the Layout tab for both sections and columns, leaving the Editor Style tab for the second part. What is a section? The sections in Elementor are container type building blocks, inside the sections are the columns which is where we will finally place our layout widgets, a&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy\/40990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/31008"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=40990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}