{"id":40991,"date":"2021-08-01T11:12:41","date_gmt":"2021-08-01T09:12:41","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/sections-et-colonnes-dans-elementor-partie-1-2\/"},"modified":"2023-08-29T14:18:31","modified_gmt":"2023-08-29T12:18:31","slug":"sections-et-colonnes-dans-elementor-partie-1-2","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/fr\/elementor-academy-temas\/sections-et-colonnes-dans-elementor-partie-1-2\/","title":{"rendered":"Sections et colonnes dans Elementor &#8211; Partie 1\/2"},"content":{"rendered":"\n<p>Dans cette premi\u00e8re partie, nous examinerons l&#8217;onglet <strong>Disposition<\/strong> pour les sections et les colonnes, en laissant l&#8217;onglet <strong>Style de<\/strong> l&#8217;\u00e9diteur pour la deuxi\u00e8me partie.<\/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\">Qu&#8217;est-ce qu&#8217;une section ?<\/a><\/li><li class=\"toc-level-2\"><a href=\"#opciones-de-clic-derecho-af2f14cb-c339-46e5-90a4-9fc3a8bd5696\">Options du clic droit<\/a><\/li><li class=\"toc-level-2\"><a href=\"#pestana-disposicion-1da82fb7-a137-4344-ab10-263cd9fdaf65\">Onglet Mise en page<\/a><\/li><li class=\"toc-level-2\"><a href=\"#html\">Comment ajouter des balises HTML \u00e0 ma section et \u00e0 ma colonne ?<\/a><\/li><li class=\"toc-level-2\"><a href=\"#estructura\">Onglet Structure<\/a><\/li><li class=\"toc-level-1\"><a href=\"#que-es-una-columna-9d71ac7e-9106-43d6-b0d7-1938a079b928\">Qu&#8217;est-ce qu&#8217;une colonne ?<\/a><\/li><li class=\"toc-level-2\"><a href=\"#-opciones-de-clic-derecho-6b0667a1-91cf-4379-b9f0-3f16490efafc\">  Options du clic droit<\/a><\/li><li class=\"toc-level-2\"><a href=\"#-pestana-disposicion-b0f643c8-62bd-4129-9109-036a2ae0a4dd\">  Onglet Mise en page<\/a><\/li><\/ul>\n<h2 class=\"wp-block-heading\" id=\"que-es-una-seccion-95d914c5-44ee-40c3-857e-705875903212\">Qu&#8217;est-ce qu&#8217;une section ?<\/h2>\n\n<p>Les sections dans Elementor sont des blocs de construction de type conteneur, \u00e0 l&#8217;int\u00e9rieur des sections se trouvent les colonnes qui sont l&#8217;endroit o\u00f9 nous placerons finalement nos widgets de mise en page, une section a toujours au moins une colonne.<\/p>\n\n<p>Les sections peuvent \u00eatre manipul\u00e9es et con\u00e7ues gr\u00e2ce aux options du panneau Elementor sur la gauche ou en cliquant avec le bouton droit de la souris sur le contr\u00f4leur de section et en choisissant dans le menu contextuel qui s&#8217;affiche.  <\/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>Si vous souhaitez dupliquer une section, <em>cliquez avec le bouton droit de la souris sur son identifiant de section<\/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=\"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 \u00eates en train d&#8217;\u00e9diter et m\u00eame dans un autre document (page, mod\u00e8le, &#8230;) \u00e0 condition qu&#8217;elle provienne du m\u00eame site web, en utilisant les options <strong>Copier<\/strong> et <strong>Coller<\/strong>. Vous pouvez \u00e9galement copier et coller uniquement le <strong>style<\/strong> (sans le contenu) d&#8217;une section \u00e0 l&#8217;autre. Cliquez sur <strong>Enregistrer en tant que mod\u00e8le<\/strong> pour enregistrer la section en tant que mod\u00e8le pouvant \u00eatre ins\u00e9r\u00e9 n&#8217;importe o\u00f9 par la suite. 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>Supprimer<\/strong> ici, vous supprimez la 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=\"Menu contextuel section Elementor\" 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>Si vous cliquez sur <strong>Modifier la section<\/strong>, les options de la colonne seront affich\u00e9es dans le panneau Elementor sur la 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\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=\"Onglet de mise en page d'une section Elementor\" 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>Si vous cliquez sur <strong>Modifier la section<\/strong>, les options de la colonne seront affich\u00e9es dans le panneau Elementor sur la gauche avec toutes les options suivantes disponibles.<\/p>\n\n<ol class=\"wp-block-list\" id=\"alto\"><li><strong>Largeur du contenu<\/strong>: permet de d\u00e9finir la largeur du contenu ( <em>encadr\u00e9<\/em> ou <em>pleine largeur)<\/em>. Si vous s\u00e9lectionnez Box, la largeur par d\u00e9faut du contenu sera de 1140px (elle peut \u00eatre modifi\u00e9e \u00e0 partir du menu hamburger (en haut \u00e0 gauche) <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=\"Menu hamburger de l'&#xE9;diteur Elementor\"\/>  &gt; <em>Site settings<\/em> &gt; <em>Layout<\/em>), bien que vous puissiez utiliser le curseur pour d\u00e9finir votre largeur pr\u00e9f\u00e9r\u00e9e.<\/li><li><strong>Espacement des colonnes<\/strong>: l&#8217;espacement par d\u00e9faut des colonnes est de 20px, mais vous pouvez le modifier \u00e0 l&#8217;aide de ce s\u00e9lecteur (Pas d&#8217;espacement, \u00c9troit, \u00c9tendu, Large, Plus large et Personnalis\u00e9).<\/li><li><strong>Hauteur<\/strong>: par d\u00e9faut, la section adapte sa hauteur au contenu, mais vous disposez de deux options suppl\u00e9mentaires :<ul><li><strong>Adapter \u00e0 l&#8217;\u00e9cran<\/strong>: la section est ajust\u00e9e pour remplir l&#8217;ensemble de l&#8217;\u00e9cran.<ul><li><strong>Position de la colonne<\/strong>: en s\u00e9lectionnant Ajuster \u00e0 l&#8217;\u00e9cran, cette autre option s&#8217;affiche et vous permet d&#8217;aligner verticalement la position de la colonne (\u00e9tirement, haut, milieu, bas).<\/li><\/ul><\/li><li><strong>Hauteur minimale<\/strong>: cette option vous permet de d\u00e9finir une hauteur minimale pour le curseur, mais vous devez tenir compte du fait que si vous d\u00e9finissez une valeur inf\u00e9rieure \u00e0 la hauteur du contenu, cela n&#8217;aura aucun effet.<ul><li><strong>Position de la colonne<\/strong>: en s\u00e9lectionnant Ajuster \u00e0 l&#8217;\u00e9cran, cette autre option s&#8217;affiche et vous permet d&#8217;aligner verticalement la position de la colonne (\u00e9tirement, haut, milieu, bas).<\/li><\/ul><\/li><\/ul><\/li><li><strong>Alignement vertical<\/strong>: permet de d\u00e9finir l&#8217;alignement vertical des widgets que vous ajoutez, mais pour que cela ait un sens, la hauteur de la section doit \u00eatre r\u00e9gl\u00e9e sur Adapter \u00e0 l&#8217;\u00e9cran ou sur une hauteur minimale sup\u00e9rieure \u00e0 la hauteur du contenu existant \u00e0 l&#8217;\u00e9cran. Cependant, la colonne dispose d&#8217;un autre contr\u00f4le semblable \u00e0 ce contr\u00f4le d&#8217;alignement vertical qui a la priorit\u00e9 sur lui, c&#8217;est pourquoi je recommande d&#8217;utiliser le contr\u00f4le d&#8217;alignement vertical de la colonne.<\/li><li><strong>D\u00e9bordement<\/strong>: s\u00e9lectionnez la mani\u00e8re de traiter le contenu qui d\u00e9borde de votre conteneur. <em>La valeur par d\u00e9faut<\/em> autorise le d\u00e9bordement. S\u00e9lectionnez <em>Cach\u00e9<\/em> pour masquer le contenu du d\u00e9bordement. Par exemple, en utilisant les effets de mouvement de l&#8217;onglet Avanc\u00e9, le contenu peut entrer depuis l&#8217;ext\u00e9rieur de la colonne par le biais d&#8217;une animation, si ce contr\u00f4le est activ\u00e9.  <em>D\u00e9faut<\/em>  l&#8217;\u00e9l\u00e9ment anim\u00e9 s&#8217;affichera sur toute la longueur, alors qu&#8217;avec Hidden Overflow, nous ne verrons l&#8217;\u00e9l\u00e9ment anim\u00e9 que dans la zone d\u00e9limit\u00e9e par la colonne. Le tutoriel vid\u00e9o consacr\u00e9 \u00e0 ce sujet l&#8217;explique de mani\u00e8re beaucoup plus claire.<\/li><li><strong>\u00c9tirer la section<\/strong>: force la section \u00e0 s&#8217;\u00e9tirer sur toute la largeur de la page \u00e0 l&#8217;aide de JavaScript. Nous n&#8217;utiliserons cette option que dans le cas o\u00f9 nous avons r\u00e9gl\u00e9 le contr\u00f4le en haut de cette bo\u00eete de <em>largeur de contenu <\/em>sur<em> Pleine largeur<\/em> et que cela n&#8217;a pas d&#8217;effet.<\/li><li><strong>Balise HTML<\/strong>: d\u00e9finir une balise HTML pour votre section, ce point est d\u00e9velopp\u00e9 ci-dessous.<\/li><\/ol>\n<h3 class=\"wp-block-heading\" id=\"html\">Comment ajouter des balises HTML \u00e0 ma section et \u00e0 ma colonne ?<\/h3>\n\n<p>Les <strong>balises HTML<\/strong> sont essentielles pour le r\u00e9f\u00e9rencement de votre site. Leur utilisation correcte aura un impact positif sur le trafic de votre site web.<\/p>\n\n<p>Si vous modifiez l&#8217;en-t\u00eate, utilisez l&#8217;en-t\u00eate<\/p>\n\n<ol class=\"wp-block-list\"><li>Allez dans les param\u00e8tres de votre <em>section<\/em> <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=\"S&#xE9;lecteur de section Elementor\"\/> ou de votre <em>colonne <\/em><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=\"Colonne Elementor\"\/>.<\/li><li>Sous <em>Layout<\/em>, cliquez sur le menu d\u00e9roulant <strong>HTML Tag<\/strong>.<\/li><li>Choisissez l&#8217;\u00e9tiquette que vous souhaitez utiliser.<\/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=\"Balise HTML Elementor\" 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>Voici les diff\u00e9rents types de <em>balises HTML<\/em> que vous pouvez choisir :<\/p>\n\n<ol class=\"wp-block-list\"><li><em>\n  <strong>&lt;div&gt;<\/strong>\n<\/em>: d\u00e9finit une division. Cette balise permet de regrouper plusieurs \u00e9l\u00e9ments du bloc (paragraphes, titres, listes, tableaux, divisions, etc.).<\/li><li><em>\n  <strong>&lt;en-t\u00eate&gt;<\/strong>\n<\/em>d\u00e9finit l&#8217;en-t\u00eate d&#8217;un document ou d&#8217;une section. Cette fonction est utile lorsque vous cr\u00e9ez un mod\u00e8le d&#8217;en-t\u00eate. Il peut contenir les \u00e9l\u00e9ments li\u00e9s \u00e0 l&#8217;en-t\u00eate d&#8217;un site web tels que le logo, un menu de navigation, un formulaire de recherche, &#8230;<\/li><li><em>\n  <strong>&lt;pied de page&gt;<\/strong>\n<\/em>d\u00e9finit un pied de page pour un document ou une section. Cette fonction est utile lorsque vous cr\u00e9ez un mod\u00e8le de pied de page. Repr\u00e9sente un pied de page qui contient g\u00e9n\u00e9ralement des informations sur l&#8217;auteur du site web, des liens vers des textes juridiques et des droits d&#8217;auteur.<\/li><li><strong>&lt;main&gt;<\/strong>: Repr\u00e9sente le contenu principal d&#8217;un document. Ce contenu doit \u00eatre propre au document, \u00e0 l&#8217;exclusion de tout contenu r\u00e9p\u00e9t\u00e9 dans d&#8217;autres documents, comme les barres lat\u00e9rales, les liens de navigation, les informations sur les droits d&#8217;auteur, les logos du site et les formulaires de recherche (sauf, bien s\u00fbr, si la fonction premi\u00e8re du document est un formulaire de recherche).<\/li><li><em><strong>&lt;article&gt;<\/strong><\/em>repr\u00e9sente une composition ind\u00e9pendante et compl\u00e9mentaire du contenu principal du document, par exemple un message de forum, un article de magazine ou de journal, un message de blog, un commentaire d&#8217;utilisateur, un widget ou gadget interactif, ou tout autre \u00e9l\u00e9ment ind\u00e9pendant du contenu.<\/li><li><em>\n  <strong>&lt;section&gt;<\/strong>\n<\/em>La section est la partie d&#8217;un document qui est con\u00e7ue pour contenir une partie th\u00e9matiquement d\u00e9finie du document. Le contenu d&#8217;un \u00e9l\u00e9ment de section est g\u00e9n\u00e9ralement pr\u00e9c\u00e9d\u00e9 d&#8217;un titre. Les auteurs utilisent souvent l&#8217;\u00e9l\u00e9ment section pour diviser un grand document en chapitres, pour s\u00e9parer diff\u00e9rents onglets dans une application ou pour diviser les sections d&#8217;un document de mani\u00e8re th\u00e9matique (section des annonces, section des derniers articles publi\u00e9s, section des liens connexes, etc.)<\/li><li><em>\n  <strong>&lt;\u00e0 part&gt;<\/strong>\n<\/em>repr\u00e9sente une section d&#8217;une page dont le contenu est indirectement li\u00e9 au contenu principal du document. Ces sections sont souvent repr\u00e9sent\u00e9es sous forme d&#8217;encadr\u00e9s ou d&#8217;encarts et contiennent une explication dans la marge, telle qu&#8217;une d\u00e9finition de glossaire, ainsi que des \u00e9l\u00e9ments indirectement li\u00e9s, tels que des publicit\u00e9s.<\/li><li><em>\n  <strong>&lt;nav&gt;<\/strong>\n<\/em>repr\u00e9sente une partie d&#8217;une page dont le but est de fournir des liens de navigation, soit \u00e0 l&#8217;int\u00e9rieur du document actuel, soit vers d&#8217;autres documents. Les menus, les tables des mati\u00e8res et les index sont des exemples courants de sections de navigation.<\/li><\/ol>\n<h3 class=\"wp-block-heading\" id=\"estructura\">Onglet Structure<\/h3>\n\n<p>Lorsqu&#8217;une section comporte plus d&#8217;une colonne, nous pouvons utiliser ces param\u00e8tres de mise en page par d\u00e9faut. Les chiffres indiquent le pourcentage de largeur de chaque colonne par rapport au total de 100.  <\/p>\n\n<p>Ind\u00e9pendamment de la structure s\u00e9lectionn\u00e9e, qui propose par d\u00e9faut des colonnes de largeur \u00e9gale, nous pouvons d\u00e9finir la largeur des colonnes comme nous le souhaitons, soit en faisant glisser l&#8217;espace entre les colonnes, soit en entrant un nombre dans la zone de texte Largeur des colonnes dans les options de l&#8217;onglet Disposition des colonnes.<\/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 d'une section d'&#xE9;l&#xE9;mentor\" 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\">Qu&#8217;est-ce qu&#8217;une colonne ?<\/h2>\n\n<p>Une colonne dans Elementor est une division verticale d&#8217;une section, comme nous l&#8217;avons d\u00e9j\u00e0 dit, les colonnes sont les enfants des sections, et dans une section il peut y avoir une ou plusieurs colonnes. Les colonnes sont le contenant final des widgets qui composent la mise en page d&#8217;un document dans Elementor.<\/p>\n\n<p>Si un document comporte plus d&#8217;une colonne, les colonnes peuvent \u00eatre de largeur \u00e9gale ou diff\u00e9rente. Dans la bo\u00eete de configuration d&#8217;une <strong>section<\/strong>, il y a l&#8217;onglet <strong>\n  <a href=\"#estructura\">Structure<\/a>\n<\/strong> o\u00f9 l&#8217;on peut choisir parmi plusieurs options par d\u00e9faut, mais aussi d\u00e9finir des largeurs par d\u00e9faut pour chaque colonne, exprim\u00e9es en pourcentages de 100%. Par exemple, nous avons trois colonnes et nous en fixons une \u00e0 22,5 %, une autre \u00e0 27,5 % et la derni\u00e8re \u00e0 50 %.<\/p>\n\n<p>La hauteur d&#8217;une colonne est d\u00e9termin\u00e9e par la taille de la section, pour qu&#8217;une colonne ait une hauteur sup\u00e9rieure \u00e0 son contenu, il faut \u00e9tablir une hauteur minimale ou une hauteur minimale.  <\/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>Si vous souhaitez ajouter une nouvelle colonne ou dupliquer une colonne, <em>cliquez avec le bouton droit de la souris sur l&#8217;identifiant d&#8217;une colonne<\/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=\"Ic&#xF4;ne de colonne Elementor\"\/> et choisissez <strong>+Add New Column<\/strong> or <strong>Duplicate<\/strong> ( <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 \u00e0 l&#8217;aide des options <strong>Copier<\/strong> et <strong>Coller<\/strong>, ou copier et coller uniquement le <strong>style<\/strong> (sans le contenu) d&#8217;une colonne \u00e0 une autre.  <\/p>\n\n<p>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>Supprimer<\/strong> ici, vous supprimez la colonne. Si la section ne comporte qu&#8217;une seule colonne et que vous la supprimez, elle sera supprim\u00e9e mais remplac\u00e9e par une autre colonne vide.<\/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=\"Menu contextuel 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>Si vous cliquez sur <strong>Modifier la colonne<\/strong>, les options de la colonne seront affich\u00e9es 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\"><li><strong>Largeur de la colonne (%)<\/strong>: d\u00e9finissez la largeur de vos colonnes, en tenant compte du fait qu&#8217;il s&#8217;agit d&#8217;un pourcentage du total qui est de 100 %, l&#8217;augmentation de la taille d&#8217;une colonne la soustraira \u00e0 la colonne adjacente.<\/li><li><strong>Alignement vertical<\/strong>: d\u00e9finit l&#8217;alignement vertical des widgets contenus dans la colonne. Pour que cet alignement ait un sens, deux choses doivent se produire. D&#8217;une part, la hauteur de la section doit \u00eatre sup\u00e9rieure \u00e0 l&#8217;espace occup\u00e9 par le contenu. Pour ce faire, la <a href=\"#alto\">hauteur de la section<\/a> doit \u00eatre sup\u00e9rieure \u00e0 celle occup\u00e9e par le contenu, soit en s\u00e9lectionnant l&#8217;option &#8221; <em>Adapter \u00e0 l&#8217;\u00e9cran<\/em> &#8220;, soit en s\u00e9lectionnant l&#8217;option &#8221; <em>Hauteur minimale<\/em>&#8220;. Par ailleurs, apr\u00e8s avoir d\u00e9fini l&#8217;option <em>Adapter \u00e0 l&#8217;\u00e9cran<\/em> ou <em>Hauteur minimale<\/em>, nous avons d\u00e9fini l&#8217;option <em>Position de la colonne<\/em> sur <em>\u00c9tirer<\/em>.<ul><li><strong>Par d\u00e9faut<\/strong>: les widgets sont align\u00e9s en haut.<\/li><li><strong>Haut<\/strong>: les widgets sont align\u00e9s en haut.<\/li><li><strong>Moyen<\/strong>: les widgets sont align\u00e9s au milieu.<\/li><li><strong>Bas<\/strong>: les widgets sont align\u00e9s en bas.<\/li><li><strong>Espace interm\u00e9diaire<\/strong>: les widgets commencent et se terminent au bord de la colonne, avec un espacement \u00e9gal entre eux.<\/li><li><strong>Espacement autour<\/strong>: les widgets sont espac\u00e9s de mani\u00e8re \u00e9gale et les bordures ont une taille \u00e9gale \u00e0 la moiti\u00e9 de l&#8217;espace entre les widgets.<\/li><li><strong>Espacement uniforme<\/strong>: les widgets ont le m\u00eame espacement entre eux, avant et apr\u00e8s eux.<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=\"Colonnes d'alignement vertical\" 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>Alignement horizontal<\/strong>: cette option \u00e9tend la capacit\u00e9 de positionnement en ligne et vous permet d&#8217;aligner horizontalement les widgets en ligne qui sont plac\u00e9s sur la m\u00eame ligne. Pour que cet alignement soit possible, les widgets \u00e0 aligner doivent \u00eatre d\u00e9finis dans l&#8217;onglet <em>Avanc\u00e9<\/em> &gt; <em>Positionnement<\/em> &gt; <em>Largeur : int\u00e9gr\u00e9e (auto<\/em> ) afin que les widgets n&#8217;occupent pas toute la largeur de l&#8217;\u00e9cran et puissent \u00eatre align\u00e9s horizontalement.<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=\"Colonnes d'alignement horizontal\" 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>Balise HTML<\/strong>: d\u00e9finit une balise HTML pour votre colonne. <a href=\"#html\">En savoir plus sur les balises HTML<\/a>.<\/li><\/ol>\n<p><\/p>\n","protected":false},"featured_media":31009,"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-40991","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\/fr\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"Dans cette premi\u00e8re partie, nous examinerons l&#8217;onglet Disposition pour les sections et les colonnes, en laissant l&#8217;onglet Style de l&#8217;\u00e9diteur pour la deuxi\u00e8me partie. Qu&#8217;est-ce qu&#8217;une section ? Les sections dans Elementor sont des blocs de construction de type conteneur, \u00e0 l&#8217;int\u00e9rieur des sections se trouvent les colonnes qui sont l&#8217;endroit o\u00f9 nous placerons finalement&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/elementor-adedemy\/40991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/31009"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=40991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}