Elementor Academy

Sections et colonnes dans Elementor - Partie 1/2

> Sections et colonnes

Dans cette première partie, nous examinerons l’onglet Disposition pour les sections et les colonnes, en laissant l’onglet Style de l’éditeur pour la deuxième partie.

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 qui sont l’endroit où nous placerons finalement nos widgets de mise en page, une section a toujours au moins une colonne.

Les sections peuvent être manipulées et conçues grâce aux options du panneau Elementor sur la gauche ou en cliquant avec le bouton droit de la souris sur le contrôleur de section et en choisissant dans le menu contextuel qui s’affiche.

Options du clic droit

Si vous souhaitez dupliquer une section, cliquez avec le bouton droit de la souris sur son identifiant de section Sélecteur de section Elementor et cliquez sur Dupliquer dans le menu contextuel. Vous pouvez également copier et coller une section ailleurs dans le même document que vous êtes en train d’éditer et même dans un autre document (page, modèle, …) à condition qu’elle provienne du même site web, en utilisant les options Copier et Coller. Vous pouvez également copier et coller uniquement le style (sans le contenu) d’une section à l’autre. Cliquez sur Enregistrer en tant que modèle pour enregistrer la section en tant que modèle pouvant être inséré n’importe où par la suite. En cliquant sur Navigateur ici, vous ouvrirez le navigateur déjà configuré pour cette section particulière. Et, bien sûr, en cliquant sur Supprimer ici, vous supprimez la section.

Menu contextuel section Elementor

Si vous cliquez sur Modifier la section, les options de la colonne seront affichées dans le panneau Elementor sur la gauche avec toutes les options suivantes à votre disposition.

Onglet Mise en page

Onglet de mise en page d'une section Elementor

Si vous cliquez sur Modifier la section, les options de la colonne seront affichées dans le panneau Elementor sur la gauche avec toutes les options suivantes disponibles.

  1. Largeur du contenu: permet de définir la largeur du contenu ( encadré ou pleine largeur). Si vous sélectionnez Box, la largeur par défaut du contenu sera de 1140px (elle peut être modifiée à partir du menu hamburger (en haut à gauche) Menu hamburger de l'éditeur Elementor > Site settings > Layout), bien que vous puissiez utiliser le curseur pour définir votre largeur préférée.
  2. Espacement des colonnes: l’espacement par défaut des colonnes est de 20px, mais vous pouvez le modifier à l’aide de ce sélecteur (Pas d’espacement, Étroit, Étendu, Large, Plus large et Personnalisé).
  3. Hauteur: par défaut, la section adapte sa hauteur au contenu, mais vous disposez de deux options supplémentaires :
    • Adapter à l’écran: la section est ajustée pour remplir l’ensemble de l’écran.
      • Position de la colonne: en sélectionnant Ajuster à l’écran, cette autre option s’affiche et vous permet d’aligner verticalement la position de la colonne (étirement, haut, milieu, bas).
    • Hauteur minimale: cette option vous permet de définir une hauteur minimale pour le curseur, mais vous devez tenir compte du fait que si vous définissez une valeur inférieure à la hauteur du contenu, cela n’aura aucun effet.
      • Position de la colonne: en sélectionnant Ajuster à l’écran, cette autre option s’affiche et vous permet d’aligner verticalement la position de la colonne (étirement, haut, milieu, bas).
  4. Alignement vertical: permet de définir l’alignement vertical des widgets que vous ajoutez, mais pour que cela ait un sens, la hauteur de la section doit être réglée sur Adapter à l’écran ou sur une hauteur minimale supérieure à la hauteur du contenu existant à l’écran. Cependant, la colonne dispose d’un autre contrôle semblable à ce contrôle d’alignement vertical qui a la priorité sur lui, c’est pourquoi je recommande d’utiliser le contrôle d’alignement vertical de la colonne.
  5. Débordement: sélectionnez la manière de traiter le contenu qui déborde de votre conteneur. La valeur par défaut autorise le débordement. Sélectionnez Caché pour masquer le contenu du débordement. Par exemple, en utilisant les effets de mouvement de l’onglet Avancé, le contenu peut entrer depuis l’extérieur de la colonne par le biais d’une animation, si ce contrôle est activé. Défaut l’élément animé s’affichera sur toute la longueur, alors qu’avec Hidden Overflow, nous ne verrons l’élément animé que dans la zone délimitée par la colonne. Le tutoriel vidéo consacré à ce sujet l’explique de manière beaucoup plus claire.
  6. Étirer la section: force la section à s’étirer sur toute la largeur de la page à l’aide de JavaScript. Nous n’utiliserons cette option que dans le cas où nous avons réglé le contrôle en haut de cette boîte de largeur de contenu sur Pleine largeur et que cela n’a pas d’effet.
  7. Balise HTML: définir 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 référencement de votre site. Leur utilisation correcte aura un impact positif sur le trafic de votre site web.

Si vous modifiez l’en-tête, utilisez l’en-tête

  1. Allez dans les paramètres de votre section Sélecteur de section Elementor ou de votre colonne Colonne Elementor.
  2. Sous Layout, cliquez sur le menu déroulant HTML Tag.
  3. Choisissez l’étiquette que vous souhaitez utiliser.
Balise HTML Elementor

Voici les différents types de balises HTML que vous pouvez choisir :

  1. <div> : définit une division. Cette balise permet de regrouper plusieurs éléments du bloc (paragraphes, titres, listes, tableaux, divisions, etc.).
  2. <en-tête> définit l’en-tête d’un document ou d’une section. Cette fonction 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 tels que le logo, un menu de navigation, un formulaire de recherche, …
  3. <pied de page> définit un pied de page pour un document ou une section. Cette fonction est utile lorsque vous créez un modèle de pied de page. Représente un pied de page qui contient généralement des informations sur l’auteur du site web, des liens vers des textes juridiques et des droits d’auteur.
  4. <main>: Représente le contenu principal d’un document. Ce contenu doit être propre au document, à l’exclusion de tout contenu répété dans d’autres documents, comme les barres latérales, les liens de navigation, les informations sur les droits d’auteur, les logos du site et les formulaires de recherche (sauf, bien sûr, si la fonction première du document est un formulaire de recherche).
  5. <article>représente une composition indépendante et complémentaire 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’utilisateur, un widget ou gadget interactif, ou tout autre élément indépendant du contenu.
  6. <section> La section est la partie d’un document qui est conçue pour contenir une partie thématiquement définie du document. Le contenu d’un élément de section est généralement précédé d’un titre. Les auteurs utilisent souvent l’élément section pour diviser un grand document en chapitres, pour séparer différents onglets dans une application ou pour diviser les sections d’un document de manière thématique (section des annonces, section des derniers articles publiés, section des liens connexes, etc.)
  7. <à part> représente une section d’une page dont le contenu est indirectement lié au contenu principal du document. Ces sections sont souvent représentées sous forme d’encadrés ou d’encarts et contiennent une explication dans la marge, telle qu’une définition de glossaire, ainsi que des éléments indirectement liés, tels que des publicités.
  8. <nav> représente une partie d’une page dont le but est de fournir des liens de navigation, soit à l’intérieur du document actuel, soit vers d’autres documents. Les menus, les tables des matières et les index sont des exemples courants de sections de navigation.

Onglet Structure

Lorsqu’une section comporte plus d’une colonne, nous pouvons utiliser ces paramètres de mise en page par défaut. Les chiffres indiquent le pourcentage de largeur de chaque colonne par rapport au total de 100.

Indépendamment de la structure sélectionnée, qui propose par défaut des colonnes de largeur égale, nous pouvons définir la largeur des colonnes comme nous le souhaitons, soit en faisant glisser l’espace entre les colonnes, soit en entrant un nombre dans la zone de texte Largeur des colonnes dans les options de l’onglet Disposition des colonnes.

Structure d'une section d'élémentor

Qu’est-ce qu’une colonne ?

Une colonne dans Elementor est une division verticale d’une section, comme nous l’avons déjà 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’un document dans Elementor.

Si un document comporte plus d’une colonne, les colonnes peuvent être de largeur égale ou différente. Dans la boîte de configuration d’une section, il y a l’onglet Structure où l’on peut choisir parmi plusieurs options par défaut, mais aussi définir des largeurs par défaut pour chaque colonne, exprimées en pourcentages de 100%. Par exemple, nous avons trois colonnes et nous en fixons 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, il faut établir une hauteur minimale ou une hauteur minimale.

Options du clic droit

Si vous souhaitez ajouter une nouvelle colonne ou dupliquer une colonne, cliquez avec le bouton droit de la souris sur l’identifiant d’une colonne Icône de colonne Elementor et choisissez +Add New Column or Duplicate ( Ajouter une nouvelle colonne ou dupliquer) dans le menu contextuel. Vous pouvez également copier et coller une colonne dans une autre section à l’aide des 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 Supprimer ici, vous supprimez la colonne. Si la section ne comporte qu’une seule colonne et que vous la supprimez, elle sera supprimée mais remplacée par une autre colonne vide.

Menu contextuel Elementor Column

Si vous cliquez sur Modifier la colonne, les options de la colonne seront affichées dans le panneau Elementor à gauche avec les options suivantes disponibles.

Onglet Mise en page

  1. Largeur de la colonne (%): définissez la largeur de vos colonnes, en tenant compte du fait qu’il s’agit d’un pourcentage du total qui est de 100 %, l’augmentation de la taille d’une colonne la soustraira à la colonne adjacente.
  2. Alignement vertical: définit l’alignement vertical des widgets contenus dans la colonne. Pour que cet alignement ait un sens, deux choses doivent se produire. D’une part, la hauteur de la section doit être supérieure à l’espace occupé par le contenu. Pour ce faire, la hauteur de la section doit être supérieure à celle occupée par le contenu, soit en sélectionnant l’option ” Adapter à l’écran “, soit en sélectionnant l’option ” Hauteur minimale“. Par ailleurs, après avoir défini l’option Adapter à l’écran ou Hauteur minimale, nous avons défini l’option Position de la colonne sur Étirer.
    • Par défaut: les widgets sont alignés en haut.
    • Haut: les widgets sont alignés en haut.
    • Moyen: 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 un espacement égal entre eux.
    • Espacement autour: les widgets sont espacés de manière égale et les bordures ont une taille égale à la moitié de l’espace entre les widgets.
    • Espacement uniforme: les widgets ont le même espacement entre eux, avant et après eux.Colonnes d'alignement vertical
  3. Alignement horizontal: cette option étend la capacité de positionnement en ligne et vous permet d’aligner horizontalement les widgets en ligne qui sont placés sur la même ligne. Pour que cet alignement soit possible, les widgets à aligner doivent être définis dans l’onglet Avancé > Positionnement > Largeur : intégrée (auto ) afin que les widgets n’occupent pas toute la largeur de l’écran et puissent être alignés horizontalement.Colonnes d'alignement horizontal
  4. Balise HTML: définit une balise HTML pour votre colonne. En savoir plus sur les balises HTML.

Suscríbete a Elementor Academy

Suscríbete y recibe avisos de nuevos contenidos

Temas relacionados

Elementos apilados horizontalmente
Éléments empilés horizontalement
 true
02:21
0.0/5
Sections et colonnes
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
Retour en haut

Générer des textes SEO efficaces avec l’IA pour positionner votre site web sur Google

Générer des textes SEO efficaces est fondamental pour positionner notre site web dans Google. Il est important de respecter les règles et de créer un contenu original et intéressant, à la fois sous forme de texte et de vidéo, et d’avoir des profils de marque sur les médias sociaux. Il convient également d’examiner la structure du contenu et des liens, ainsi que la qualité de l’orthographe. Grâce à la recherche de mots-clés, à la rédaction et à l’optimisation de l’URL, du titre et de la méta-description, nous pouvons créer un bon texte de référencement. La création de liens internes et externes et l’analyse des résultats sont également essentielles pour améliorer notre stratégie.

Importance du positionnement SEO sur Google

Le positionnement dans Google est un élément fondamental de toute stratégie numérique. Il est important de noter qu’il existe deux types de résultats différents : les résultats SEM et les résultats SEO, ces derniers générant un retour sur investissement de 20%.

Résultats SEM vs. résultats SEO

Les résultats SEM sont ceux obtenus grâce à la publicité sur Google, tandis que les résultats SEO sont ceux obtenus en optimisant le site web pour qu’il apparaisse dans les premiers résultats de recherche de Google.

20 % DE RETOUR SUR INVESTISSEMENT

Un retour sur investissement de 20 % pour les actions de référencement est un indicateur de l’efficacité de cette stratégie par rapport à d’autres.

Normes Google et créativité dans la création de contenu

Il est important de suivre les règles de Google lors de la création de contenu, mais nous ne devons pas pour autant négliger la créativité et l’originalité en créant un contenu intéressant et précieux pour améliorer notre référencement.

Création de contenu pour le référencement

La création d’un contenu intéressant et original est essentielle pour améliorer le positionnement de notre site web dans Google. Voici quelques clés pour créer un contenu efficace sur différentes plateformes.

Contenu vidéo sur YouTube et Instagram

Le contenu vidéo prend de plus en plus d’importance dans la stratégie de contenu SEO. YouTube et Instagram sont deux des plateformes les plus utilisées pour partager des vidéos de marque, bien que chacune ait ses propres particularités. Il est important de tenir compte de ces différences et d’adapter le contenu en fonction de nos besoins. Sur YouTube, par exemple, les vidéos doivent être plus longues et plus détaillées, tandis que sur Instagram, des vidéos plus courtes et plus accrocheuses peuvent être utilisées.

Profils de marque sur les réseaux sociaux

Avoir une présence sur les réseaux sociaux est fondamental pour maintenir une bonne stratégie de positionnement SEO. Ces profils de marque doivent être cohérents avec le contenu de notre site web et être actifs avec des posts réguliers. En outre, il est important d’utiliser des mots-clés dans la biographie et d’utiliser un contenu attrayant pour inviter les utilisateurs à visiter votre site web.

Structure du contenu, liens internes et orthographe

La structure du contenu est l’un des éléments les plus importants lors de la création de contenu pour le référencement. La hiérarchie des titres de H1 à H4 doit être prise en compte et un ordre logique doit être respecté dans la structure du contenu. Il est également essentiel d’inclure des liens internes et externes pour améliorer la navigation et l’autorité de notre site web. Enfin, il ne faut pas négliger l’orthographe et la grammaire du contenu, car elles peuvent affecter négativement la qualité de notre site web et donc nuire à son positionnement dans les moteurs de recherche.

Les clés d’une bonne rédaction SEO

Pour obtenir un bon positionnement SEO dans Google et améliorer le trafic vers notre site web, nous devons prendre en compte certaines clés dans la rédaction de nos contenus. Il s’agit notamment de

Recherche de mots-clés

Avant de rédiger un texte pour le référencement, il est important de faire une recherche de mots-clés. Nous devons choisir les mots qui sont liés à notre contenu et qui ont un volume de recherche élevé tout en ayant une faible concurrence. Cela nous aidera à mieux positionner notre contenu dans les résultats de recherche.

Structure du texte et création de liens

La structure du texte est essentielle pour rédiger un bon texte SEO. Nous devons le structurer avec des sous-titres H2, H3 et H4 et utiliser des liens internes qui redirigent vers d’autres contenus de notre site web et des liens externes vers d’autres sources d’information liées à notre secteur. Cela contribuera à accroître l’autorité de notre site web et à améliorer notre positionnement.

Rédaction et optimisation de l’URL, du titre et de la méta-description

Le libellé de l’URL, le titre et la méta-description de notre contenu sont également des facteurs importants pour le positionnement SEO. Nous devons créer une URL simple et descriptive, un titre accrocheur et une méta-description qui résume le contenu de manière claire et concise. En outre, nous devons y inclure nos mots-clés de manière naturelle et cohérente.

Nous ne devrions pas être trop obsédés par l’optimisation en soi, mais nous concentrer sur la création d’un contenu de valeur, intéressant et convaincant pour notre public. Tout cela nous aidera à améliorer notre positionnement dans Google et à générer des visites de qualité sur notre site web.

Génération de liens internes et externes et analyse des résultats

La génération de liens internes et externes est fondamentale pour améliorer le référencement de notre site web. Les liens internes contribuent à répartir la valeur des pages de notre site web, ce qui améliore le référencement de chacune d’entre elles, tandis que les liens externes de qualité apportent de l’autorité et de la pertinence à notre site web, ce qui l’aide à mieux se classer.

Analyse à l’aide d’outils tels que Google Analytics et Search Console

Pour mesurer le succès de notre stratégie de référencement, nous devons analyser les données obtenues à l’aide d’outils tels que Google Analytics et Search Console. Ces outils nous permettent de connaître le trafic sur notre site web, son origine, les mots-clés utilisés par les utilisateurs, la durée moyenne de la visite, entre autres aspects. De cette manière, nous pouvons détecter et corriger les éventuelles erreurs qui affectent notre position dans Google. En plus de ces outils, il existe d’autres options avancées qui nous permettent d’améliorer l’efficacité de notre stratégie de référencement. Certains d’entre eux sont Ahrefs, Moz ou SEMrush, qui offrent des statistiques détaillées sur les performances de notre site web et nous permettent de connaître en profondeur la concurrence.

Services de rédaction de contenu SEO

Si vous n’avez pas assez de temps ou de ressources pour créer un contenu SEO de qualité, il existe des services de rédaction de contenu SEO qui peuvent vous aider. Ces services sont dotés d’équipes de professionnels qui créent des contenus optimisés pour le référencement qui répondent à toutes les normes et attirent les utilisateurs. En outre, ces services peuvent vous aider à rechercher des mots-clés, à générer des liens et à optimiser vos URL, titres et méta-descriptions, entre autres. Avec l’aide de ces services, vous pouvez améliorer de manière significative la position de votre site web dans Google et augmenter le trafic et les visites de qualité.

Conseils pour améliorer le positionnement SEO de notre site web

Pour améliorer le positionnement SEO de votre site web, il est important de suivre certains conseils pour obtenir un meilleur succès dans Google :

Pensez au référencement lorsque vous rédigez des textes

Il est essentiel de prendre en compte les mots-clés et les techniques d’optimisation SEO lors de la rédaction de tout type de contenu, ne l’oubliez jamais.

Connaître notre public cible

Il est important de connaître en profondeur notre public cible, de connaître ses besoins, ses intérêts et son comportement, afin de pouvoir créer un contenu attrayant pour lui.

Optimisation des images

Les images sont un facteur important dans le positionnement SEO, car elles peuvent attirer les utilisateurs et améliorer la durée de leur visite sur notre site web. Il est nécessaire d’optimiser les images en termes de taille et de poids et de choisir des noms de fichiers appropriés avec les mots-clés de notre niche.

Qualité de la conception et du contenu

Nous devons soigner la conception de notre site web pour qu’il soit attrayant et facile à utiliser pour l’utilisateur, afin qu’il y passe plus de temps. En outre, le contenu doit être intéressant et pertinent pour avoir une chance d’être partagé sur les médias sociaux.

Il s'agit d'un message contextuel

Elementor dispose d’un générateur de messages popup qui se trouve dans le menu Modèles.

Plantillas > Mensajes emergentes

Bonjour !

Entrez vos données de connexion