Interface d'édition web avec plusieurs boutons d'appel à l'action. Vue de configuration des colonnes dans un constructeur visuel.
Table des matières
Ce contenu utilise une ancienne structure d’Elementor basée sur des sections et des colonnes. Actuellement, Elementor a adopté un système de conteneurs, ce qui améliore la flexibilité et l’organisation de la mise en page.
Vidéo étape par étape
Qu’est-ce qu’une section ?
Les sections dans Elementor sont des blocs de construction de type conteneur ; à l’intérieur des sections se trouvent les colonnes, où nous placerons finalement nos widgets de conception. Une section possède toujours au moins une colonne.
Les sections peuvent être manipulées et conçues via les options du panneau Elementor à gauche ou en faisant un clic droit sur la poignée de la section et en choisissant dans le menu contextuel qui apparaît.
Options du clic droit
Si vous souhaitez dupliquer une section, faites un clic droit sur sa poignée de section et cliquez sur Dupliquer dans le menu contextuel. Vous pouvez également copier et coller une section ailleurs dans le même document que vous éditez, et même dans un autre document (page, modèle, …) à condition qu’il s’agisse du même site web, en utilisant les options Copier et Coller. Vous pouvez aussi copier et coller uniquement le style (sans le contenu) d’une section à une autre. Cliquez sur Enregistrer comme modèle pour sauvegarder la section en tant que modèle pouvant être inséré n’importe où ultérieurement. En cliquant sur Navigateur ici, vous ouvrirez le Navigateur déjà configuré pour cette section particulière. Et, bien sûr, en cliquant sur Effacer ici, vous supprimerez la section.
Si vous cliquez sur Modifier la section, les options de la colonne s’afficheront dans le panneau Elementor à gauche avec toutes les options suivantes à votre disposition.
Onglet Mise en page
Si vous cliquez sur Modifier la section, les options de la colonne s’afficheront dans le panneau Elementor à gauche avec toutes les options suivantes disponibles.
Largeur du contenu : définit la largeur du contenu sur Encadré ou Pleine largeur. Si vous sélectionnez Encadré, la largeur par défaut du contenu sera de 1140 px (cela peut être modifié depuis le menu « hamburger » en haut à gauche). > Réglages du site > Mise en page), bien que vous puissiez utiliser le curseur pour définir votre largeur préférée.
Écart entre les colonnes : l’espace par défaut entre les colonnes est de 20 px, mais vous pouvez le modifier depuis ce sélecteur (Sans écart, Étroit, Étendu, Large, Plus large et Personnalisé).
Hauteur : Par défaut, la section ajuste sa hauteur au contenu, mais elle dispose de deux options supplémentaires :
Adapter à l’écran : la section s’ajuste pour remplir tout l’écran.
Position de la colonne : si vous sélectionnez « Adapter à l’écran », cette autre option s’affichera pour vous permettre d’aligner verticalement la position de la colonne (étirer, haut, milieu, bas).
Hauteur minimale : cette option vous permet de définir une hauteur minimale via le curseur, mais gardez à l’esprit que si vous indiquez une valeur inférieure à la hauteur déjà occupée par le contenu, elle n’aura aucun effet.
Position de la colonne : si vous sélectionnez « Adapter à l’écran », cette autre option s’affichera pour vous permettre d’aligner verticalement la position de la colonne (étirer, haut, milieu, bas).
Alignement vertical : vous permet de définir l’alignement vertical des widgets que vous ajoutez, mais pour que cela soit pertinent, la hauteur de la section doit être réglée sur « Adapter à l’écran » ou sur une hauteur minimale supérieure à celle occupée par le contenu existant. Quoi qu’il en soit, la colonne possède un autre contrôle identique d’alignement vertical qui prime sur celui-ci ; ma recommandation pour l’alignement vertical est donc d’utiliser le contrôle d’alignement vertical de la colonne.
Débordement : sélectionnez la manière de gérer le contenu qui dépasse de votre conteneur. La valeur par défaut autorise le débordement. Sélectionnez Masqué pour cacher le contenu qui dépasse. Par exemple, lors de l’utilisation des effets de mouvement de l’onglet Avancé, le contenu peut entrer depuis l’extérieur de la colonne via une animation ; si ce contrôle est réglé sur Par défaut, l’élément animé sera visible sur tout son parcours, tandis qu’avec « Masqué », nous ne verrons l’élément animé que dans la zone délimitée par la colonne. Cela est beaucoup plus clair dans le tutoriel vidéo sur ce sujet.
Étirer la section : force la section à s’étirer sur toute la largeur de la page via JavaScript. Nous n’utiliserons cette option que si nous avons réglé le contrôle au début de cette boîte Largeur du contenu sur Pleine largeur et que cela n’a pas d’effet.
Balise HTML : définit une balise HTML pour votre section ; ce point est développé ci-dessous.
Comment ajouter des balises HTML à ma section et à ma colonne
Les balises HTML sont essentielles pour le SEO de votre site. Les utiliser correctement aura un impact positif sur le trafic de votre site web.
Si vous éditez l’en-tête, utilisez la balise header
Allez dans les réglages de votre section ou colonne.
Dans Mise en page, cliquez sur le menu déroulant Balise HTML.
Choisissez la balise que vous souhaitez utiliser.
Voici les différents types de balises HTML que vous pouvez choisir :
<div> : définit une division. Cette balise permet de regrouper plusieurs éléments de bloc (paragraphes, titres, listes, tableaux, divisions, etc.).
<header> : définit un en-tête pour un document ou une section. C’est utile lorsque vous créez un modèle d’en-tête. Il peut contenir les éléments liés à l’en-tête d’un site web comme le logo, un menu de navigation, un formulaire de recherche, …
<footer> : définit un pied de page pour un document ou une section. C’est utile lorsque vous créez un modèle de pied de page. Il représente un pied de page qui contient typiquement des informations sur l’auteur du site web, des liens vers les textes légaux et le copyright.
<main> : Représente le contenu principal d’un document. Ce contenu doit être unique au document, excluant tout contenu répété sur d’autres documents comme les barres latérales, les liens de navigation, les informations de droits d’auteur, les logos du site et les formulaires de recherche (à moins, bien sûr, que la fonction principale du document soit un formulaire de recherche).
<article> : représente une composition indépendante et complémentaire du contenu principal du document ; il pourrait s’agir par exemple d’un message sur un forum, d’un article de magazine ou de journal, d’un article de blog, d’un commentaire d’utilisateur, d’un widget interactif ou gadget, ou de tout autre élément indépendant du contenu.
<section> : conçu pour contenir une partie d’un document thématiquement définie. Les contenus d’un élément section sont généralement précédés d’un titre. Les auteurs utilisent habituellement l’élément section pour diviser un document étendu en chapitres, pour séparer les différents onglets d’une application ou pour diviser thématiquement les sections d’un document (section d’annonces, section des derniers articles publiés, section de liens connexes, etc.).
<aside> : représente une section d’une page consistant en un contenu indirectement lié au contenu principal du document. Ces sections sont souvent représentées comme des barres latérales ou des encadrés et contiennent une explication en marge comme une définition de glossaire ou des éléments liés indirectement, comme de la publicité.
<nav> : représente une partie d’une page dont le but est de fournir des liens de navigation, que ce soit à l’intérieur du document actuel ou vers d’autres documents. Les exemples courants de sections de navigation sont les menus, les tables des matières et les index.
Onglet Structure
Lorsqu’une section possède plus d’une colonne, nous pouvons utiliser ces configurations de distribution de colonnes prédéfinies ; les chiffres indiquent le pourcentage de largeur de chaque colonne par rapport au total de 100.
Indépendamment de la structure que nous sélectionnons, qui est par défaut des colonnes de largeur égale, nous pouvons définir la largeur des colonnes à notre guise, soit en faisant glisser l’espace intermédiaire entre les colonnes, soit via un chiffre dans le champ de texte « Largeur de colonne » situé dans les options de l’onglet Mise en page d’une colonne.
Qu’est-ce qu’une colonne ?
Une colonne dans Elementor est une division verticale d’une section. Comme nous l’avons dit précédemment, les colonnes sont les enfants des sections, et une section peut contenir d’une à plusieurs colonnes. Les colonnes sont le conteneur final des widgets qui composeront la conception d’un document dans Elementor.
Si un document possède plus d’une colonne, celles-ci peuvent avoir une largeur égale ou des largeurs différentes. Dans la boîte de configuration d’une section se trouve l’onglet Structure où nous pouvons choisir parmi plusieurs options prédéfinies, mais nous pouvons également établir des largeurs personnalisées pour chaque colonne exprimées en pourcentages d’un total de 100 %. Par exemple, nous avons trois colonnes et nous en réglons une à 22,5 %, une autre à 27,5 % et la dernière à 50 %.
La hauteur d’une colonne est déterminée par la taille de la section ; pour qu’une colonne ait une hauteur supérieure à son contenu, nous devons définir dans la section une hauteur minimale ou un
Options du clic droit
Si vous souhaitez ajouter une nouvelle colonne ou dupliquer une colonne, faites un clic droit sur une poignée de colonne et choisissez + Ajouter une nouvelle colonne ou Dupliquer dans le menu contextuel. Vous pouvez également copier et coller une colonne dans une autre section en utilisant les options Copier et Coller, ou copier et coller uniquement le style (sans le contenu) d’une colonne à une autre.
En cliquant sur Navigateur, vous ouvrirez le Navigateur déjà configuré pour cette colonne particulière. Et, bien sûr, en cliquant sur Effacer ici, vous supprimerez la colonne. Si la section ne possède qu’une seule colonne et que vous la supprimez, elle sera supprimée mais remplacée par une autre colonne vide.
Si vous cliquez sur Modifier la colonne, les options de la colonne s’afficheront dans le panneau Elementor à gauche avec les options suivantes disponibles.
Onglet Mise en page
Largeur de colonne (%) : définit la largeur de vos colonnes, en tenant compte du fait qu’il s’agit d’un pourcentage du total de 100 % ; en augmentant la taille d’une colonne, celle de la colonne adjacente sera réduite.
Alineación vertical: establezca la alineación vertical de los widgets que contenga la columna. Para que esta alineación tenga sentido se tienen que pasar dos cosas. Una que el alto de la sección sea mayor que el espacio que ocupa el contenido y esto se estableciendo el alto de la sección a un tamaño mayor que el que ocupa el contenido, ya sea seleccionando la opción Ajustar a pantalla o Altura mínima. Y otra que tras establer Ajustar a pantalla o Altura mínima establezcamos la opción Posición de la columna en Estirar.
Par défaut : les widgets sont alignés en haut.
Haut : les widgets sont alignés en haut.
Milieu : les widgets sont alignés au milieu.
Bas : les widgets sont alignés en bas.
Espace intermédiaire : les widgets commencent et se terminent au bord de la colonne, avec le même espace entre eux.
Espace autour : les widgets ont le même espace et les bords ont la moitié de la taille de l’espace entre les widgets.
Espace uniforme : les widgets ont le même espace entre, avant et après eux.
Alignement horizontal : cela étend la capacité du positionnement en ligne et vous permet d’aligner horizontalement les widgets en ligne placés sur la même ligne. Pour que cet alignement soit possible, il est nécessaire que les widgets que nous souhaitons aligner aient, dans l’onglet Avancé > Positionnement > Largeur : En ligne (auto), afin que les widgets n’occupent pas toute la largeur de l’écran et puissent être alignés horizontalement.
et cliquez sur Dupliquer dans le menu contextuel. Vous pouvez également copier et coller une section ailleurs dans le même document que vous éditez, et même dans un autre document (page, modèle, …) à condition qu’il s’agisse du même site web, en utilisant les options Copier et Coller. Vous pouvez aussi copier et coller uniquement le style (sans le contenu) d’une section à une autre. Cliquez sur Enregistrer comme modèle pour sauvegarder la section en tant que modèle pouvant être inséré n’importe où ultérieurement. En cliquant sur Navigateur ici, vous ouvrirez le Navigateur déjà configuré pour cette section particulière. Et, bien sûr, en cliquant sur Effacer ici, vous supprimerez la section. 
.
