{"id":6489,"date":"2021-08-01T11:12:41","date_gmt":"2021-08-01T09:12:41","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/sections-and-columns-in-elementor\/"},"modified":"2026-09-02T19:36:16","modified_gmt":"2026-09-02T17:36:16","slug":"sections-and-columns-in-elementor","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/en\/sections-and-columns-in-elementor\/","title":{"rendered":"Sections and Columns in Elementor"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">This content uses an older Elementor structure based on <strong>sections and columns<\/strong>. Elementor has now adopted a <strong>container<\/strong> system, which improves design flexibility and organization. <\/p>\n<\/blockquote>\n\n<h2 class=\"wp-block-heading\">Step-by-step video<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Secciones y Columnas de Elementor \u00a1\ud83d\ude80\u00a0a Fondo! - Parte 1 de 2\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/dtVjlwPDxcw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"que-es-una-seccion-95d914c5-44ee-40c3-857e-705875903212\">What is a Section?<\/h2>\n\n<p class=\"wp-block-paragraph\">Sections in Elementor are container-type building blocks. Within sections are columns, where we finally place our design widgets. A section always has at least one column.<\/p>\n\n<p class=\"wp-block-paragraph\">Sections can be manipulated and designed using the options in the Elementor Panel on the left or by right-clicking the Section handle and choosing from the contextual 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 class=\"wp-block-paragraph\">If you want to duplicate a section, <em>right-click its section handle<\/em> <img loading=\"lazy\" decoding=\"async\" width=\"110\" height=\"26\" class=\"wp-image-4904\" style=\"width: 110px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-seccion-elementor.png\" alt=\"Elementor Section Selector\"\/> and click <strong>Duplicate<\/strong> from the contextual menu. You can also copy and paste a section elsewhere in the same document you are editing, or even into another document (page, template, &#8230;) as long as it&#8217;s from the same website, using the <strong>Copy<\/strong> and <strong>Paste<\/strong> options. You can also copy and paste only 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 <strong>Navigator<\/strong> here will open the Navigator already configured for that particular section. And, of course, clicking <strong>Delete<\/strong> here will remove the section.     <\/p>\n<div class=\"wp-block-image is-resized\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a995623bb11d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a995623bb11d\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"326\" height=\"388\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/menu-contextual-seccion-elementor.jpg\" alt=\"Elementor Section Context Menu\" class=\"wp-image-4997\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">If you click <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<div class=\"wp-block-image is-resized\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a995623bb5f6&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a995623bb5f6\" class=\"alignright size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"677\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/pestana-disposicion-seccion-elementor.jpg\" alt=\"Elementor Section Layout Tab\" class=\"wp-image-4998\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/pestana-disposicion-seccion-elementor.jpg 356w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/pestana-disposicion-seccion-elementor-263x500.jpg 263w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">If you click <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 id=\"alto\" class=\"wp-block-list\">\n<li><strong>Content Width<\/strong>: Set the Content Width to <em>Boxed<\/em> or <em>Full Width<\/em>. If you select Boxed, the default content width will be 1140px (this can be changed from the hamburger menu (top left)   <figure><img decoding=\"async\" class=\"wp-image-16386\" style=\"width: 25px\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2021\/08\/menu-hamburguesa.jpg\" alt=\"Elementor Editor Hamburger Menu\"\/><\/figure>  &gt; <em>Site Settings<\/em> &gt; <em>Layout<\/em>), although you can use the slider to set your preferred width.<\/li>\n\n\n\n<li><strong>Columns Gap<\/strong>: The default gap between columns is 20px, but you can change it from this selector (No Gap, Narrow, Extended, Wide, Wider, and Custom).<\/li>\n\n\n\n<li><strong>Height<\/strong>: By default, the section adjusts its height to the content, but it has two more options:\n<ul class=\"wp-block-list\">\n<li><strong>Fit to Screen<\/strong>: The section adjusts to fill the entire screen.\n<ul class=\"wp-block-list\">\n<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>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Minimum Height<\/strong>: This option allows you to set a minimum height using the slider, but keep in mind that if you set a value smaller than the height already occupied by the content, it will have no effect.\n<ul class=\"wp-block-list\">\n<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>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Vertical Align<\/strong>: Allows you to set the vertical alignment of the widgets you add, but for this to make sense, the section height must be set to Fit to Screen or a minimum height greater than the height occupied by the existing content within it. In any case, the Column has another control identical to this vertical alignment that takes precedence over this one, so my recommendation for vertical alignment is to use the column&#8217;s vertical alignment control. <\/li>\n\n\n\n<li><strong>Overflow<\/strong>: Select how to handle content that overflows your container. <em>Default<\/em> allows overflow. Select <em>Hidden<\/em> to hide overflowing content. For example, when using Motion Effects from the Advanced tab, content can enter from outside the column via an animation. If this control is set to <em>Default<\/em>, the animated element will be shown throughout its path. However, with Hidden Overflow, we will only see the animated element within the delimited area of the column. This is shown much more clearly in the video tutorial for this topic.   <\/li>\n\n\n\n<li><strong>Stretch Section<\/strong>: Forces the section to stretch to the full page width using JavaScript. We will only use this option if we have set the control at the beginning of this box <em>Content Width<\/em> to <em>Full Width<\/em> and it has no effect. <\/li>\n\n\n\n<li><strong>HTML Tag<\/strong>: Sets an HTML tag for your section. This point is further developed below.<\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"html\">How to Add HTML Tags to My Section and Column<\/h3>\n\n<p class=\"wp-block-paragraph\"><strong>HTML tags<\/strong> are essential for your site&#8217;s SEO. Using them correctly will have a positive impact on your website&#8217;s traffic. <\/p>\n\n<p class=\"wp-block-paragraph\">If you are editing the header, use the header<\/p>\n\n<ol class=\"wp-block-list\">\n<li>Go to your <em>section<\/em> <img loading=\"lazy\" decoding=\"async\" width=\"110\" height=\"26\" class=\"wp-image-4904\" style=\"width: 110px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-seccion-elementor.png\" alt=\"Elementor Section Selector\"\/> or <em>column<\/em> <img loading=\"lazy\" decoding=\"async\" width=\"25\" height=\"27\" class=\"wp-image-4999\" style=\"width: 25px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/columna-elementor.jpg\" alt=\"Elementor Column\"\/> settings.<\/li>\n\n\n\n<li>Under <em>Layout<\/em>, click the <strong>HTML Tag<\/strong> dropdown menu.<\/li>\n\n\n\n<li>Choose the tag you want to use.<\/li>\n<\/ol>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a995623bc078&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a995623bc078\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"359\" height=\"233\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/etiqueta-html-elementor.jpg\" alt=\"Elementor HTML Tag\" class=\"wp-image-5000\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">These are the different types of <em>HTML tags<\/em> you can choose from:<\/p>\n\n<ol class=\"wp-block-list\">\n<li><em><strong>&lt;div&gt;<\/strong><\/em>: Defines a division. This tag allows grouping several block elements (paragraphs, headings, lists, tables, divisions, etc.). <\/li>\n\n\n\n<li><em><strong>&lt;header&gt;<\/strong><\/em>: Defines a header for a document or section. This is useful when you are creating a header template. It can contain elements related to a website&#8217;s header such as the logo, a navigation menu, a search form, &#8230;  <\/li>\n\n\n\n<li><em><strong>&lt;footer&gt;<\/strong><\/em>: Defines a footer for a document or section. This is useful when you are creating a footer template. It represents a footer that typically contains information about the website author, links to legal texts, and copyright.  <\/li>\n\n\n\n<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 across other documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless, of course, the main function of the document is a search form). <\/li>\n\n\n\n<li><em><strong>&lt;article&gt;<\/strong><\/em>: Represents an independent and self-contained composition of content, for example, it could be a forum post, a magazine or newspaper article, a blog entry, a user comment, an interactive widget or gadget, or any other independent content item.<\/li>\n\n\n\n<li><em><strong>&lt;section&gt;<\/strong><\/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 long document into chapters, to separate different tabs in an application, or to thematically divide sections of a document (ads section, latest articles section, related links section, etc.).  <\/li>\n\n\n\n<li><em><strong>&lt;aside&gt;<\/strong><\/em>: Represents a section of a page that consists of content indirectly related to the main content of the document. These sections are often represented as sidebars or as inserts and contain a marginal explanation such as a glossary definition, indirectly related items, or advertising. <\/li>\n\n\n\n<li><em><strong>&lt;nav&gt;<\/strong><\/em>: Represents a portion 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>\n<\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"estructura\">Structure Tab<\/h3>\n\n<p class=\"wp-block-paragraph\">When a section has more than one column, we can use these predefined column distribution settings. The numbers indicate the percentage width of each column relative to the total of 100. <\/p>\n\n<p class=\"wp-block-paragraph\">Regardless of the structure we select, which by default is equal-width columns, we can define the column width to our liking, either by dragging in the intermediate space between columns or by entering a number in the Column Width text box within the options of a Column&#8217;s Layout tab.<\/p>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a995623bc8ba&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a995623bc8ba\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"407\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/estructura-seccion-elementor.jpg\" alt=\"Elementor Section Structure\" class=\"wp-image-5001\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\" id=\"que-es-una-columna-9d71ac7e-9106-43d6-b0d7-1938a079b928\">What is a Column?<\/h2>\n\n<p class=\"wp-block-paragraph\">A column in Elementor is a vertical division of a section. As we mentioned earlier, columns are children of sections, and a section can have from one to several columns. Columns are the final container for the widgets that will make up the design of a document in Elementor. <\/p>\n\n<p class=\"wp-block-paragraph\">If a document has more than one column, these can have equal or different widths. In the configuration box of a <strong>section<\/strong>, there is the <strong><a href=\"#estructura\">Structure<\/a><\/strong> tab where we can select from several predefined options, but we can also set predefined widths for each column expressed as percentages of 100%. For example, we have three columns and set one to 22.5%, another to 27.5%, and the last to 50%.  <\/p>\n\n<p class=\"wp-block-paragraph\">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 set a minimum height for the section or a  <\/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 class=\"wp-block-paragraph\">If you want to add a new column or duplicate a column, <em>right-click a column handle<\/em> <img loading=\"lazy\" decoding=\"async\" width=\"25\" height=\"27\" class=\"wp-image-4999\" style=\"width: 25px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/columna-elementor.jpg\" alt=\"Elementor Column Icon\"\/> and choose <strong>+Add New Column<\/strong> or <strong>Duplicate<\/strong> from the contextual 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 only the <strong>style<\/strong> (without the content) from one column to another.  <\/p>\n\n<p class=\"wp-block-paragraph\">Clicking <strong>Navigator<\/strong> will open the Navigator already configured for that particular column. And, of course, clicking <strong>Delete<\/strong> here will remove the column. If the section only has one column and you delete it, it will be removed but replaced by another empty column.  <\/p>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a995623bd0c9&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a995623bd0c9\" class=\"aligncenter size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"395\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/menu-contextual-columna-elementor.jpg\" alt=\"Elementor Column Context Menu\" class=\"wp-image-5002\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">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\">\n<li><strong>Column Width (%)<\/strong>: Set the width of your columns, keeping in mind that it is a percentage of the total 100%. Increasing the size of one column will reduce the adjacent column.<\/li>\n\n\n\n<li><strong>Alineaci\u00f3n vertical<\/strong>: establezca la alineaci\u00f3n vertical de los widgets que contenga la columna.&nbsp;Para que esta alineaci\u00f3n tenga sentido se tienen que pasar dos cosas. Una que el alto de la secci\u00f3n sea mayor que el espacio que ocupa el contenido y esto se estableciendo el <a href=\"#alto\">alto de la secci\u00f3n<\/a> a un tama\u00f1o mayor que el que ocupa el contenido, ya sea seleccionando la opci\u00f3n <em>Ajustar a pantalla<\/em> o <em>Altura m\u00ednima<\/em>. Y otra que tras establer <em>Ajustar a pantalla<\/em> o <em>Altura m\u00ednima<\/em> establezcamos la opci\u00f3n <em>Posici\u00f3n de la columna<\/em> en <em>Estirar<\/em>.\n<ul class=\"wp-block-list\">\n<li><strong>Default<\/strong>: Widgets are aligned to the top.<\/li>\n\n\n\n<li><strong>Top<\/strong>: Widgets are aligned to the top.<\/li>\n\n\n\n<li><strong>Middle<\/strong>: Widgets are aligned to the middle.<\/li>\n\n\n\n<li><strong>Bottom<\/strong>: Widgets are aligned to the bottom.<\/li>\n\n\n\n<li><strong>Space Between<\/strong>: Widgets start and end at the column edge, with equal space between them.<\/li>\n\n\n\n<li><strong>Space Around<\/strong>: Widgets have equal space, and the edges have half the size of the space between widgets.<\/li>\n\n\n\n<li><strong>Space Evenly<\/strong>: Widgets have equal space between, before, and after them.<img loading=\"lazy\" decoding=\"async\" width=\"1100\" height=\"484\" class=\"wp-image-5003\" style=\"width: 1100px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/alineacion-vertical-columnas.png\" alt=\"Vertical Column Alignment\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/alineacion-vertical-columnas.png 1250w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/alineacion-vertical-columnas-500x220.png 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/alineacion-vertical-columnas-1024x451.png 1024w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/alineacion-vertical-columnas-768x338.png 768w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/alineacion-vertical-columnas-600x264.png 600w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Horizontal Align<\/strong>: This extends the inline positioning capability and allows you to horizontally align inline widgets placed in the same row. For this alignment to be possible, the widgets you want to align must have <em>Width: Inline (auto)<\/em> set in the <em>Advanced<\/em> &gt; <em>Positioning<\/em> &gt; tab so that the widgets do not occupy the entire screen width and can be aligned horizontally. <img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"528\" class=\"wp-image-5004\" style=\"width: 1200px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/alineacion-horizontal-columnas.png\" alt=\"Horizontal Column Alignment\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/alineacion-horizontal-columnas.png 1250w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/alineacion-horizontal-columnas-500x220.png 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/alineacion-horizontal-columnas-1024x451.png 1024w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/alineacion-horizontal-columnas-768x338.png 768w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/alineacion-horizontal-columnas-600x264.png 600w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/li>\n\n\n\n<li><strong>HTML Tag<\/strong>: Sets an HTML tag for your column. <a href=\"#html\">More information about HTML tags<\/a>.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>This content uses an older Elementor structure based on sections and columns. Elementor has now adopted a container system, which improves design flexibility and organization. Step-by-step video What is a Section? Sections in Elementor are container-type building blocks. Within sections are columns, where we finally place our design widgets. A section always has at least [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6490,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"How to Use Sections and Columns in Elementor","_seopress_titles_desc":"This content uses an older Elementor structure based on sections and columns. Elementor has now adopted a container system, which...","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[374],"tags":[385,386],"class_list":["post-6489","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-web-design","tag-wordpress-customization"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/comments?post=6489"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6489\/revisions"}],"predecessor-version":[{"id":6491,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6489\/revisions\/6491"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/6490"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=6489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/categories?post=6489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/tags?post=6489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}