Paramètres des conteneurs et de la largeur des colonnes dans Elementor : Conseils pour créer des pages Web joliment structurées

existent Elementor La largeur des sections et des colonnes est un élément essentiel de la mise en page d'un site web. Des paramètres de largeur appropriés améliorent non seulement l'effet visuel de la page, mais optimisent également l'expérience de l'utilisateur et garantissent que le contenu peut être affiché de manière fluide sur tous les appareils. Dans cet article, nous verrons comment définir la largeur des conteneurs et des colonnes dans Elementor, ce qui vous aidera à créer une structure claire et des pages web visuellement attrayantes.

Conteneurs et colonnes dans Elementor

Dans Elementor, l'élémentmise en pageCet objectif est atteint grâce à deux éléments principaux :Emballage (Section) répondre en chantant Colonne.

• Emballage (Section)Le conteneur est l'unité structurelle principale de la page. Il est généralement utilisé pour créer de grands blocs ou des lignes, et chaque conteneur peut contenir plusieurs colonnes. Il définit la structure générale de la page et détermine la disposition générale du contenu de la page.
• Colonne: est un élément enfant à l'intérieur d'un conteneur utilisé pour affiner la mise en page, en divisant la largeur du conteneur en sections. Plusieurs colonnes peuvent être placées à l'intérieur de chaque conteneur pour une mise en page flexible du contenu.

Définition de la largeur du conteneur : pleine largeur et mode encadré

Dans Elementor, la largeur du conteneur est définie de manière très flexible, ce qui permet aux utilisateurs de choisir entre le mode pleine largeur et le mode encadré pour l'affichage du contenu.

• mode pleine largeurLorsque le mode pleine largeur est sélectionné, la largeur du conteneur s'étend jusqu'aux bords du navigateur sans restriction, ce qui convient à la plupart des effets visuels et des mises en page grand écran. Les mises en page pleine largeur sont parfaites pour placer de grandes images ou des images d'arrière-plan, ce qui donne au contenu de la page un aspect plus ouvert et plus moderne.
• Étapes de l'installation: :

1) Ouvrez votre page et allez dans l'éditeur Elementor.

2. cliquez sur le conteneur que vous souhaitez définir (section) ; s'il n'y a pas encore de conteneur, vous pouvez le définir en cliquant sur le coin supérieur gauche de l'écran. "+" pour ajouter un nouveau conteneur.

3) Dans le panneau de gauche, cliquez sur le bouton "Mise en page". Tab.

4. trouver "Mise en page". Partiellement, veillez à ce que "Largeur L'option est réglée sur "Pleine largeur".. Cela permet d'étendre la largeur du conteneur à toute la largeur de la page.

• Mode en boîteLe mode encadré signifie que la largeur du conteneur sera limitée par la largeur maximale du contenu de la page, généralement avec des marges à gauche et à droite, adaptées à un contenu plus important et à la nécessité d'un certain confort visuel dans la mise en page. La mise en page encadrée est souvent utilisée dansblog (mot d'emprunt)etPage de détail du produitet d'autres pages à fort contenu.
• Étapes de l'installation: :

1) Sélectionnez le conteneur (section).

2) Dans le panneau d'édition de gauche, cliquez sur l'option "Mise en page".

3) Dans la section "Mise en page", remplacez ampleur fixé à en boîteet peut définir une largeur maximale pour s'assurer que le contenu ne dépasse pas les limites de la page.

Définir la largeur des colonnes : la clé d'une mise en page flexible

Les colonnes fournissent une mise en page flexible dans Elementor, et en ajustant la largeur des colonnes, vous pouvez obtenir une variété de mises en page de contenu différentes. Vous pouvez ajuster librement la largeur de chaque colonne, ce qui rend la mise en page de l'élémentmise en pagePlus de flexibilité et de diversité.

• colonne de largeur égalePar défaut, Elementor définit les colonnes du conteneur comme étant de largeur égale, c'est-à-dire que chaque colonne a la même largeur. Les colonnes de largeur égale conviennent aux mises en page qui nécessitent une répartition uniforme de l'espace, telles que les mises en page en deux ou trois colonnes.
• Étapes de l'installation: :
  1. Sélectionnez une colonne dans le conteneur.
  2. Dans le panneau d'édition de gauche, cliquez sur l'option "Mise en page".
  3. Dans la section "Largeur des colonnes", définissez la largeur des colonnes (par exemple 50%, 33%, etc.) de manière à ce que les largeurs des colonnes soient égales ou proportionnelles.

• Largeurs de colonnes personnaliséesLa largeur de chaque colonne : Vous pouvez ajuster librement la largeur de chaque colonne en faisant glisser les bords des colonnes pour répondre à différents besoins en matière de conception. Par exemple, vous pouvez définir une colonne principale plus large et plusieurs barres latérales plus petites. Cette fonction est particulièrement efficace pour les mises en page complexes.
• Étapes de l'installation: :
  1. Sélectionnez une colonne dans le conteneur.
  2. Faites glisser les bords des colonnes pour ajuster la largeur jusqu'à ce que vous obteniez la présentation souhaitée.
  3. Définissez exactement le pourcentage de largeur en utilisant l'option "Mise en page" dans le panneau d'édition de gauche.

• Paramètres de largeur de colonne réactifsElementor propose des paramètres pour le responsive design afin de s'assurer que la largeur des colonnes des pages web change de manière adaptative sur différents appareils. Vous pouvez définir la largeur des colonnes individuellement pour les ordinateurs de bureau, les tablettes et les appareils mobiles, ce qui garantit que le contenu web s'affiche parfaitement sur tous les types d'appareils.
• Étapes de l'installation: :
  1. Sélectionnez les colonnes dans le conteneur.
  2. Dans le panneau d'édition de gauche, cliquez sur l'icône de l'appareil pour passer à l'affichage réactif (ordinateur de bureau, tablette ou mobile).
  3. Dans l'option Mise en page, réglez la largeur des colonnes en fonction des différents appareils.

Espacement et remplissage : peaufiner l'aspect visuel des conteneurs et des colonnes

Les paramètres de largeur des conteneurs et des colonnes ne concernent pas seulement la largeur réelle des conteneurs et des colonnes. Marge intérieure (Padding) répondre en chantant Marge Les réglages. En ajustant ces paramètres, l'effet visuel de la page peut être encore optimisé.

• Marge intérieure (Padding): Utilisé pour ajuster la distance entre le contenu à l'intérieur d'un conteneur ou d'une colonne et les bords, il permet d'aérer le contenu et d'éviter que les éléments de la page ne soient trop encombrés.
• Étapes de l'installation: :
  1. Sélectionnez le conteneur ou la colonne.
  2. Dans le panneau d'édition de gauche, cliquez sur l'option "Avancé".
  3. Ajuste la valeur de la marge intérieure (haut, droite, bas, gauche).

• Marge: Utilisé pour ajuster la distance entre les conteneurs ou les colonnes, il permet de contrôler les écarts entre les éléments, ce qui donne un aspect plus net à la page.
• Étapes de l'installation: :
  1. Sélectionnez le conteneur ou la colonne.
  2. Dans le panneau d'édition de gauche, cliquez sur l'option "Avancé".
  3. Règle la valeur de la marge extérieure.

Conseils pratiques : mise en page multi-colonnes et styles d'arrière-plan

Dans la conception réelle, les paramètres de largeur des conteneurs et des colonnes impliquent souvent non seulement l'affichage du contenu, mais aussi les couleurs d'arrière-plan, les images et d'autres paramètres de style. En définissant le style d'arrière-plan, vous pouvez donner à chaque conteneur et à chaque colonne un caractère plus hiérarchique et un plus grand impact visuel.

• Réglage de la couleur ou de l'image d'arrière-planL'utilisation de couleurs ou d'images d'arrière-plan dans les conteneurs ou les colonnes peut améliorer efficacement l'effet visuel d'une page web.
• Étapes de l'installation: :
  1. Sélectionnez le conteneur ou la colonne.
  2. Dans le panneau d'édition de gauche, cliquez sur l'option "Style".
  3. Définissez la couleur d'arrière-plan ou téléchargez une image d'arrière-plan dans la section arrière-plan.

Conclusion : optimiser la conception pour améliorer l'expérience

Elementor Le réglage de la largeur des conteneurs et des colonnes est un élément très important de la conception des sites web. Un ajustement raisonnable de la mise en page permet d'améliorer considérablement la lisibilité de la page et l'expérience de l'utilisateur. Qu'il s'agisse de responsive design ou de mise en page flexible du contenu, il est possible d'y parvenir grâce à un réglage précis de la largeur des conteneurs et des colonnes. La maîtrise de ces compétences vous aidera à créer un site web plus beau et plus clairement structuré.conception de sites web.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.