{"id":7112,"date":"2021-08-01T11:12:41","date_gmt":"2021-08-01T09:12:41","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/sections-et-colonnes-dans-elementor\/"},"modified":"2026-09-02T23:04:04","modified_gmt":"2026-09-02T21:04:04","slug":"sections-et-colonnes-dans-elementor","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/fr\/sections-et-colonnes-dans-elementor\/","title":{"rendered":"Sections et colonnes dans Elementor"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Ce contenu utilise une ancienne structure d&rsquo;Elementor bas\u00e9e sur des <strong>sections et des colonnes<\/strong>. Actuellement, Elementor a adopt\u00e9 un syst\u00e8me de <strong>conteneurs<\/strong>, ce qui am\u00e9liore la flexibilit\u00e9 et l&rsquo;organisation de la mise en page. <\/p>\n<\/blockquote>\n\n<h2 class=\"wp-block-heading\">Vid\u00e9o \u00e9tape par \u00e9tape<\/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\">Qu&rsquo;est-ce qu&rsquo;une section ?<\/h2>\n\n<p class=\"wp-block-paragraph\">Les sections dans Elementor sont des blocs de construction de type conteneur ; \u00e0 l&rsquo;int\u00e9rieur des sections se trouvent les colonnes, o\u00f9 nous placerons finalement nos widgets de conception. Une section poss\u00e8de toujours au moins une colonne.<\/p>\n\n<p class=\"wp-block-paragraph\">Les sections peuvent \u00eatre manipul\u00e9es et con\u00e7ues via les options du panneau Elementor \u00e0 gauche ou en faisant un clic droit sur la poign\u00e9e de la section et en choisissant dans le menu contextuel qui appara\u00eet. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"opciones-de-clic-derecho-af2f14cb-c339-46e5-90a4-9fc3a8bd5696\">Options du clic droit<\/h3>\n\n<p class=\"wp-block-paragraph\">Si vous souhaitez dupliquer une section, <em>faites un clic droit sur sa poign\u00e9e de 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=\"S&#xE9;lecteur de section Elementor\"\/> et cliquez sur <strong>Dupliquer<\/strong> dans le menu contextuel. Vous pouvez \u00e9galement copier et coller une section ailleurs dans le m\u00eame document que vous \u00e9ditez, et m\u00eame dans un autre document (page, mod\u00e8le, &#8230;) \u00e0 condition qu&rsquo;il s&rsquo;agisse du m\u00eame site web, en utilisant les options <strong>Copier<\/strong> et <strong>Coller<\/strong>. Vous pouvez aussi copier et coller uniquement le <strong>style<\/strong> (sans le contenu) d&rsquo;une section \u00e0 une autre. Cliquez sur <strong>Enregistrer comme mod\u00e8le<\/strong> pour sauvegarder la section en tant que mod\u00e8le pouvant \u00eatre ins\u00e9r\u00e9 n&rsquo;importe o\u00f9 ult\u00e9rieurement. En cliquant sur <strong>Navigateur<\/strong> ici, vous ouvrirez le Navigateur d\u00e9j\u00e0 configur\u00e9 pour cette section particuli\u00e8re. Et, bien s\u00fbr, en cliquant sur <strong>Effacer<\/strong> ici, vous supprimerez la section.     <\/p>\n<div class=\"wp-block-image is-resized\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a99560407557&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a99560407557\" 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=\"Menu contextuel Section Elementor\" 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\">Si vous cliquez sur <strong>Modifier la section<\/strong>, les options de la colonne s&rsquo;afficheront dans le panneau Elementor \u00e0 gauche avec toutes les options suivantes \u00e0 votre disposition.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"pestana-disposicion-1da82fb7-a137-4344-ab10-263cd9fdaf65\">Onglet Mise en page<\/h3>\n<div class=\"wp-block-image is-resized\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a99560407e68&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a99560407e68\" 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=\"Onglet Mise en page d'une section Elementor\" 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\">Si vous cliquez sur <strong>Modifier la section<\/strong>, les options de la colonne s&rsquo;afficheront dans le panneau Elementor \u00e0 gauche avec toutes les options suivantes disponibles.<\/p>\n\n<ol id=\"alto\" class=\"wp-block-list\">\n<li><strong>Largeur du contenu<\/strong> : d\u00e9finit la largeur du contenu sur <em>Encadr\u00e9<\/em> ou <em>Pleine largeur<\/em>. Si vous s\u00e9lectionnez Encadr\u00e9, la largeur par d\u00e9faut du contenu sera de 1140 px (cela peut \u00eatre modifi\u00e9 depuis le menu \u00ab hamburger \u00bb en haut \u00e0 gauche).  <figure><img decoding=\"async\" class=\"wp-image-16386\" style=\"width: 25px\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2021\/08\/menu-hamburguesa.jpg\" alt=\"Menu hamburger de l'&#xE9;diteur Elementor\"\/><\/figure>  &gt; <em>R\u00e9glages du site<\/em> &gt; <em>Mise en page<\/em>), bien que vous puissiez utiliser le curseur pour d\u00e9finir votre largeur pr\u00e9f\u00e9r\u00e9e.<\/li>\n\n\n\n<li><strong>\u00c9cart entre les colonnes<\/strong> : l&rsquo;espace par d\u00e9faut entre les colonnes est de 20 px, mais vous pouvez le modifier depuis ce s\u00e9lecteur (Sans \u00e9cart, \u00c9troit, \u00c9tendu, Large, Plus large et Personnalis\u00e9).<\/li>\n\n\n\n<li><strong>Hauteur<\/strong> : Par d\u00e9faut, la section ajuste sa hauteur au contenu, mais elle dispose de deux options suppl\u00e9mentaires :\n<ul class=\"wp-block-list\">\n<li><strong>Adapter \u00e0 l&rsquo;\u00e9cran<\/strong> : la section s&rsquo;ajuste pour remplir tout l&rsquo;\u00e9cran.\n<ul class=\"wp-block-list\">\n<li><strong>Position de la colonne<\/strong> : si vous s\u00e9lectionnez \u00ab Adapter \u00e0 l&rsquo;\u00e9cran \u00bb, cette autre option s&rsquo;affichera pour vous permettre d&rsquo;aligner verticalement la position de la colonne (\u00e9tirer, haut, milieu, bas).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Hauteur minimale<\/strong> : cette option vous permet de d\u00e9finir une hauteur minimale via le curseur, mais gardez \u00e0 l&rsquo;esprit que si vous indiquez une valeur inf\u00e9rieure \u00e0 la hauteur d\u00e9j\u00e0 occup\u00e9e par le contenu, elle n&rsquo;aura aucun effet.\n<ul class=\"wp-block-list\">\n<li><strong>Position de la colonne<\/strong> : si vous s\u00e9lectionnez \u00ab Adapter \u00e0 l&rsquo;\u00e9cran \u00bb, cette autre option s&rsquo;affichera pour vous permettre d&rsquo;aligner verticalement la position de la colonne (\u00e9tirer, haut, milieu, bas).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Alignement vertical<\/strong> : vous permet de d\u00e9finir l&rsquo;alignement vertical des widgets que vous ajoutez, mais pour que cela soit pertinent, la hauteur de la section doit \u00eatre r\u00e9gl\u00e9e sur \u00ab Adapter \u00e0 l&rsquo;\u00e9cran \u00bb ou sur une hauteur minimale sup\u00e9rieure \u00e0 celle occup\u00e9e par le contenu existant. Quoi qu&rsquo;il en soit, la colonne poss\u00e8de un autre contr\u00f4le identique d&rsquo;alignement vertical qui prime sur celui-ci ; ma recommandation pour l&rsquo;alignement vertical est donc d&rsquo;utiliser le contr\u00f4le d&rsquo;alignement vertical de la colonne. <\/li>\n\n\n\n<li><strong>D\u00e9bordement<\/strong> : s\u00e9lectionnez la mani\u00e8re de g\u00e9rer le contenu qui d\u00e9passe de votre conteneur. <em>La valeur par d\u00e9faut<\/em> autorise le d\u00e9bordement. S\u00e9lectionnez <em>Masqu\u00e9<\/em> pour cacher le contenu qui d\u00e9passe. Par exemple, lors de l&rsquo;utilisation des effets de mouvement de l&rsquo;onglet Avanc\u00e9, le contenu peut entrer depuis l&rsquo;ext\u00e9rieur de la colonne via une animation ; si ce contr\u00f4le est r\u00e9gl\u00e9 sur <em>Par d\u00e9faut<\/em>, l&rsquo;\u00e9l\u00e9ment anim\u00e9 sera visible sur tout son parcours, tandis qu&rsquo;avec \u00ab Masqu\u00e9 \u00bb, nous ne verrons l&rsquo;\u00e9l\u00e9ment anim\u00e9 que dans la zone d\u00e9limit\u00e9e par la colonne. Cela est beaucoup plus clair dans le tutoriel vid\u00e9o sur ce sujet.   <\/li>\n\n\n\n<li><strong>\u00c9tirer la section<\/strong> : force la section \u00e0 s&rsquo;\u00e9tirer sur toute la largeur de la page via JavaScript. Nous n&rsquo;utiliserons cette option que si nous avons r\u00e9gl\u00e9 le contr\u00f4le au d\u00e9but de cette bo\u00eete <em>Largeur du contenu<\/em> sur <em>Pleine largeur<\/em> et que cela n&rsquo;a pas d&rsquo;effet. <\/li>\n\n\n\n<li><strong>Balise HTML<\/strong> : d\u00e9finit une balise HTML pour votre section ; ce point est d\u00e9velopp\u00e9 ci-dessous.<\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"html\">Comment ajouter des balises HTML \u00e0 ma section et \u00e0 ma colonne<\/h3>\n\n<p class=\"wp-block-paragraph\"><strong>Les balises HTML<\/strong> sont essentielles pour le SEO de votre site. Les utiliser correctement aura un impact positif sur le trafic de votre site web. <\/p>\n\n<p class=\"wp-block-paragraph\">Si vous \u00e9ditez l&rsquo;en-t\u00eate, utilisez la balise header<\/p>\n\n<ol class=\"wp-block-list\">\n<li>Allez dans les r\u00e9glages de votre <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=\"S&#xE9;lecteur de section Elementor\"\/> ou <em>colonne<\/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=\"Colonne Elementor\"\/>.<\/li>\n\n\n\n<li>Dans <em>Mise en page<\/em>, cliquez sur le menu d\u00e9roulant <strong>Balise HTML<\/strong>.<\/li>\n\n\n\n<li>Choisissez la balise que vous souhaitez utiliser.<\/li>\n<\/ol>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a99560408a24&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a99560408a24\" 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=\"Balise HTML Elementor\" 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\">Voici les diff\u00e9rents types de <em>balises HTML<\/em> que vous pouvez choisir :<\/p>\n\n<ol class=\"wp-block-list\">\n<li><em><strong>&lt;div&gt;<\/strong><\/em> : d\u00e9finit une division. Cette balise permet de regrouper plusieurs \u00e9l\u00e9ments de bloc (paragraphes, titres, listes, tableaux, divisions, etc.). <\/li>\n\n\n\n<li><em><strong>&lt;header&gt;<\/strong><\/em> : d\u00e9finit un en-t\u00eate pour un document ou une section. C&rsquo;est utile lorsque vous cr\u00e9ez un mod\u00e8le d&rsquo;en-t\u00eate. Il peut contenir les \u00e9l\u00e9ments li\u00e9s \u00e0 l&rsquo;en-t\u00eate d&rsquo;un site web comme le logo, un menu de navigation, un formulaire de recherche, &#8230;  <\/li>\n\n\n\n<li><em><strong>&lt;footer&gt;<\/strong><\/em> : d\u00e9finit un pied de page pour un document ou une section. C&rsquo;est utile lorsque vous cr\u00e9ez un mod\u00e8le de pied de page. Il repr\u00e9sente un pied de page qui contient typiquement des informations sur l&rsquo;auteur du site web, des liens vers les textes l\u00e9gaux et le copyright.  <\/li>\n\n\n\n<li><strong>&lt;main&gt;<\/strong> : Repr\u00e9sente le contenu principal d&rsquo;un document. Ce contenu doit \u00eatre unique au document, excluant tout contenu r\u00e9p\u00e9t\u00e9 sur d&rsquo;autres documents comme les barres lat\u00e9rales, les liens de navigation, les informations de droits d&rsquo;auteur, les logos du site et les formulaires de recherche (\u00e0 moins, bien s\u00fbr, que la fonction principale du document soit un formulaire de recherche). <\/li>\n\n\n\n<li><em><strong>&lt;article&gt;<\/strong><\/em> : repr\u00e9sente une composition ind\u00e9pendante et compl\u00e9mentaire du contenu principal du document ; il pourrait s&rsquo;agir par exemple d&rsquo;un message sur un forum, d&rsquo;un article de magazine ou de journal, d&rsquo;un article de blog, d&rsquo;un commentaire d&rsquo;utilisateur, d&rsquo;un widget interactif ou gadget, ou de tout autre \u00e9l\u00e9ment ind\u00e9pendant du contenu.<\/li>\n\n\n\n<li><em><strong>&lt;section&gt;<\/strong><\/em> : con\u00e7u pour contenir une partie d&rsquo;un document th\u00e9matiquement d\u00e9finie. Les contenus d&rsquo;un \u00e9l\u00e9ment section sont g\u00e9n\u00e9ralement pr\u00e9c\u00e9d\u00e9s d&rsquo;un titre. Les auteurs utilisent habituellement l&rsquo;\u00e9l\u00e9ment section pour diviser un document \u00e9tendu en chapitres, pour s\u00e9parer les diff\u00e9rents onglets d&rsquo;une application ou pour diviser th\u00e9matiquement les sections d&rsquo;un document (section d&rsquo;annonces, section des derniers articles publi\u00e9s, section de liens connexes, etc.).  <\/li>\n\n\n\n<li><em><strong>&lt;aside&gt;<\/strong><\/em> : repr\u00e9sente une section d&rsquo;une page consistant en un contenu indirectement li\u00e9 au contenu principal du document. Ces sections sont souvent repr\u00e9sent\u00e9es comme des barres lat\u00e9rales ou des encadr\u00e9s et contiennent une explication en marge comme une d\u00e9finition de glossaire ou des \u00e9l\u00e9ments li\u00e9s indirectement, comme de la publicit\u00e9. <\/li>\n\n\n\n<li><em><strong>&lt;nav&gt;<\/strong><\/em> : repr\u00e9sente une partie d&rsquo;une page dont le but est de fournir des liens de navigation, que ce soit \u00e0 l&rsquo;int\u00e9rieur du document actuel ou vers d&rsquo;autres documents. Les exemples courants de sections de navigation sont les menus, les tables des mati\u00e8res et les index. <\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"estructura\">Onglet Structure<\/h3>\n\n<p class=\"wp-block-paragraph\">Lorsqu&rsquo;une section poss\u00e8de plus d&rsquo;une colonne, nous pouvons utiliser ces configurations de distribution de colonnes pr\u00e9d\u00e9finies ; les chiffres indiquent le pourcentage de largeur de chaque colonne par rapport au total de 100. <\/p>\n\n<p class=\"wp-block-paragraph\">Ind\u00e9pendamment de la structure que nous s\u00e9lectionnons, qui est par d\u00e9faut des colonnes de largeur \u00e9gale, nous pouvons d\u00e9finir la largeur des colonnes \u00e0 notre guise, soit en faisant glisser l&rsquo;espace interm\u00e9diaire entre les colonnes, soit via un chiffre dans le champ de texte \u00ab Largeur de colonne \u00bb situ\u00e9 dans les options de l&rsquo;onglet Mise en page d&rsquo;une colonne.<\/p>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a995604092ac&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a995604092ac\" 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=\"Structure d'une section Elementor\" 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\">Qu&rsquo;est-ce qu&rsquo;une colonne ?<\/h2>\n\n<p class=\"wp-block-paragraph\">Une colonne dans Elementor est une division verticale d&rsquo;une section. Comme nous l&rsquo;avons dit pr\u00e9c\u00e9demment, les colonnes sont les enfants des sections, et une section peut contenir d&rsquo;une \u00e0 plusieurs colonnes. Les colonnes sont le conteneur final des widgets qui composeront la conception d&rsquo;un document dans Elementor. <\/p>\n\n<p class=\"wp-block-paragraph\">Si un document poss\u00e8de plus d&rsquo;une colonne, celles-ci peuvent avoir une largeur \u00e9gale ou des largeurs diff\u00e9rentes. Dans la bo\u00eete de configuration d&rsquo;une <strong>section<\/strong> se trouve l&rsquo;onglet <strong><a href=\"#estructura\">Structure<\/a><\/strong> o\u00f9 nous pouvons choisir parmi plusieurs options pr\u00e9d\u00e9finies, mais nous pouvons \u00e9galement \u00e9tablir des largeurs personnalis\u00e9es pour chaque colonne exprim\u00e9es en pourcentages d&rsquo;un total de 100 %. Par exemple, nous avons trois colonnes et nous en r\u00e9glons une \u00e0 22,5 %, une autre \u00e0 27,5 % et la derni\u00e8re \u00e0 50 %.  <\/p>\n\n<p class=\"wp-block-paragraph\">La hauteur d&rsquo;une colonne est d\u00e9termin\u00e9e par la taille de la section ; pour qu&rsquo;une colonne ait une hauteur sup\u00e9rieure \u00e0 son contenu, nous devons d\u00e9finir dans la section une hauteur minimale ou un  <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"-opciones-de-clic-derecho-6b0667a1-91cf-4379-b9f0-3f16490efafc\"> Options du clic droit<\/h3>\n\n<p class=\"wp-block-paragraph\">Si vous souhaitez ajouter une nouvelle colonne ou dupliquer une colonne, <em>faites un clic droit sur une poign\u00e9e de colonne<\/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=\"Ic&#xF4;ne Colonne Elementor\"\/> et choisissez <strong>+ Ajouter une nouvelle colonne<\/strong> ou <strong>Dupliquer<\/strong> dans le menu contextuel. Vous pouvez \u00e9galement copier et coller une colonne dans une autre section en utilisant les options <strong>Copier<\/strong> et <strong>Coller<\/strong>, ou copier et coller uniquement le <strong>style<\/strong> (sans le contenu) d&rsquo;une colonne \u00e0 une autre.  <\/p>\n\n<p class=\"wp-block-paragraph\">En cliquant sur <strong>Navigateur<\/strong>, vous ouvrirez le Navigateur d\u00e9j\u00e0 configur\u00e9 pour cette colonne particuli\u00e8re. Et, bien s\u00fbr, en cliquant sur <strong>Effacer<\/strong> ici, vous supprimerez la colonne. Si la section ne poss\u00e8de qu&rsquo;une seule colonne et que vous la supprimez, elle sera supprim\u00e9e mais remplac\u00e9e par une autre colonne vide.  <\/p>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a995604099bc&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a995604099bc\" 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=\"Menu contextuel Colonne Elementor\" 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\">Si vous cliquez sur <strong>Modifier la colonne<\/strong>, les options de la colonne s&rsquo;afficheront dans le panneau Elementor \u00e0 gauche avec les options suivantes disponibles.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"-pestana-disposicion-b0f643c8-62bd-4129-9109-036a2ae0a4dd\"> Onglet Mise en page<\/h3>\n\n<ol class=\"wp-block-list\">\n<li><strong>Largeur de colonne (%)<\/strong> : d\u00e9finit la largeur de vos colonnes, en tenant compte du fait qu&rsquo;il s&rsquo;agit d&rsquo;un pourcentage du total de 100 % ; en augmentant la taille d&rsquo;une colonne, celle de la colonne adjacente sera r\u00e9duite.<\/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>Par d\u00e9faut<\/strong> : les widgets sont align\u00e9s en haut.<\/li>\n\n\n\n<li><strong>Haut<\/strong> : les widgets sont align\u00e9s en haut.<\/li>\n\n\n\n<li><strong>Milieu<\/strong> : les widgets sont align\u00e9s au milieu.<\/li>\n\n\n\n<li><strong>Bas<\/strong> : les widgets sont align\u00e9s en bas.<\/li>\n\n\n\n<li><strong>Espace interm\u00e9diaire<\/strong> : les widgets commencent et se terminent au bord de la colonne, avec le m\u00eame espace entre eux.<\/li>\n\n\n\n<li><strong>Espace autour<\/strong> : les widgets ont le m\u00eame espace et les bords ont la moiti\u00e9 de la taille de l&rsquo;espace entre les widgets.<\/li>\n\n\n\n<li><strong>Espace uniforme<\/strong> : les widgets ont le m\u00eame espace entre, avant et apr\u00e8s eux.<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=\"Alignement vertical colonnes\" 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>Alignement horizontal<\/strong> : cela \u00e9tend la capacit\u00e9 du positionnement en ligne et vous permet d&rsquo;aligner horizontalement les widgets en ligne plac\u00e9s sur la m\u00eame ligne. Pour que cet alignement soit possible, il est n\u00e9cessaire que les widgets que nous souhaitons aligner aient, dans l&rsquo;onglet <em>Avanc\u00e9<\/em> &gt; <em>Positionnement<\/em> &gt; <em>Largeur : En ligne (auto)<\/em>, afin que les widgets n&rsquo;occupent pas toute la largeur de l&rsquo;\u00e9cran et puissent \u00eatre align\u00e9s horizontalement. <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=\"Alignement horizontal colonnes\" 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>Balise HTML<\/strong> : d\u00e9finit une balise HTML pour votre colonne. <a href=\"#html\">En savoir plus sur les balises HTML<\/a>.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Ce contenu utilise une ancienne structure d&rsquo;Elementor bas\u00e9e sur des sections et des colonnes. Actuellement, Elementor a adopt\u00e9 un syst\u00e8me de conteneurs, ce qui am\u00e9liore la flexibilit\u00e9 et l&rsquo;organisation de la mise en page. Vid\u00e9o \u00e9tape par \u00e9tape Qu&rsquo;est-ce qu&rsquo;une section ? Les sections dans Elementor sont des blocs de construction de type conteneur ; [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":7113,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Sections et colonnes dans Elementor : guide pratique","_seopress_titles_desc":"Ce contenu utilise une ancienne structure d'Elementor bas\u00e9e sur des sections et des colonnes. Actuellement, Elementor a adopt\u00e9 un syst\u00e8me de conteneurs, ce qui\u2026","_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":[400],"tags":[431,428],"class_list":["post-7112","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-conception-web","tag-personnalisation-de-wordpress"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/7112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/comments?post=7112"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/7112\/revisions"}],"predecessor-version":[{"id":7114,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/7112\/revisions\/7114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/7113"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=7112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/categories?post=7112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/tags?post=7112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}