Analyse complète d'Elementor Container : tutoriels détaillés de la configuration de base aux applications avancées

Qu'est-ce qu'Elementor Container ?

Elementor Container est une nouvelle fonctionnalité du constructeur de pages Elementor qui permet de créer des mises en page très flexibles et réactives. Container offre un contrôle plus puissant et plus d'options de mise en page que les mises en page de section traditionnelles. Il prend en charge deux modes de mise en page principaux : Flexbox et Grid.

1) Comment activer Elementor Container ?

Tout d'abord, vous devez combiner votre plugin Elementor Page Builder avec le pluginPlug-in Elementor ProPassez à la dernière version.

Après avoir mis à jour le plugin vers la dernière version, naviguez versElementor>mettre en placesous l'onglet Fonctionnalités

Dans Stable Features mettreConteneur de grilleActivation :

activerConteneur FlexboxSi vous souhaitez utiliser le Mega Menu fourni avec Elementor, vous devez également activer les fonctions Éléments imbriqués et Menu.

Une fois les réglages terminés, faites glisser la page vers le bas et cliquez sur le bouton "Enregistrer".

2) Comment convertir une section d'une page en conteneur ?

Après avoir accédé à l'éditeur de pages, sélectionnez la section que vous souhaitez convertir en conteneur et faites glisser le conteneur dans le curseur sélectionné.

Après la conversion, un module Conteneur identique sera automatiquement copié sous le module Section converti. Après avoir confirmé qu'il n'y a pas de problème avec le module Conteneur, vous pouvez supprimer directement le module Section pour terminer la conversion de Section en Conteneur.

3. quelques avantages du conteneur Elementor par rapport à la section

3.1 Une plus grande réactivité

Container utilise pleinement les contrôles de la mise en page pour effectuer automatiquement des ajustements réactifs. Cela signifie que dans la plupart des cas, vous n'avez pas besoin de faire beaucoup de configuration pour obtenir une mise en page réactive automatique pour votre contenu. La section, en revanche, exige que vous configuriez et ajustiez manuellement votre contenu en fonction des différents appareils pour obtenir un effet responsive parfait.

Container vous permet également de personnaliser la mise en page responsive pour différents appareils afin de répondre à des besoins spécifiques.

3.2 Un meilleur contrôle de la mise en page

Le conteneur offre plus de liberté et de flexibilité que la section. Vous pouvez imbriquer plusieurs niveaux de conteneurs et personnaliser leur largeur et leur hauteur. La création de modèles complexes et riches en fonctionnalités est ainsi beaucoup plus rapide et facile. Les conteneurs offrent plus de flexibilité que les mises en page traditionnelles, alors que les mises en page de section ne peuvent diviser les widgets qu'en sections et en colonnes.

3.3 Amélioration de la vitesse des pages

Elementor sera-t-il lent ? Les mises en page par section peuvent être un peu lentes pour vous, mais pas Container !

Elementor Container améliore la vitesse des pages en réduisant le nombre de séparateurs utilisés. Les sections, en revanche, contiennent généralement plus de colonnes et de sections internes, et plus il y a de séparateurs, plus le modèle objet du document (DOM) devient volumineux, ce qui augmente le temps de chargement des pages. L'utilisation de conteneurs permet de réduire le nombre de requêtes de données et de réduire le DOM, ce qui se traduit par une augmentation significative de la vitesse de chargement des pages.

3.4 Ajouter des liens directement au conteneur

Lorsque vous créez un élément de boucle, vous pouvez ajouter des liens à l'ensemble du conteneur au lieu d'ajouter des liens à chaque élément. Il suffit de modifier la balise HTML du conteneur comme suit<a>peut être réalisée. Cela rend la gestion des liens plus facile et plus efficace.

4 Paramètres de base d'Elementor Container

4.1 FlexBox et Grid pour Elementor Container

FlexBox et Grid sont deux modes de mise en page répondant à des besoins différents. FlexBox convient à une mise en page très libre, tandis que Grid suit une grille. Vous pouvez choisir le mode de mise en page approprié en fonction de vos besoins spécifiques.

a. Qu'est-ce que le conteneur FlexBox ?

FlexBox Container est une mise en page flexible qui offre des options de mise en page très libres pour votre site web.

b. Qu'est-ce qu'un conteneur de grille ?

Le conteneur de grille est une méthode de mise en page de grille qui contrôle la disposition des éléments en définissant des lignes et des colonnes afin d'assurer la cohérence de toutes les grilles. Si votre page nécessite une mise en page en grille, l'utilisation de Grid Container sera plus pratique et plus efficace.

4.2 Comment ajouter un conteneur à une page ?

a. Ajouter via le canevas

Lorsque vous devez ajouter le conteneur dans le canevas Elementor, cliquez sur le signe + pour le module ci-dessous et cliquez sur le signe + dans la zone pop-up.

Cliquez ensuite sur Flexbox ou Grid dans la fenêtre contextuelle pour ajouter le conteneur correspondant à la page.

Cette méthode est utilisée pour ajouter le conteneur supérieur de la page, qui est le conteneur de mise en page le plus extérieur de la page. Le conteneur supérieur est externe au canevas de la page et n'imbrique pas d'autres conteneurs.

Vous pouvez choisir d'utiliser plusieurs conteneurs sur une page ou d'utiliser un conteneur et d'y imbriquer d'autres conteneurs de mise en page, en fonction de votre plan de mise en page.

b, en ajoutant des éléments de mise en page par glisser-déposer.

L'ajout d'un conteneur interne imbriqué s'effectue en faisant glisser l'élément de mise en page comme suit : dans la bibliothèque d'éléments Elementor, sur le côté gauche du canevas Elementor, trouvez l'élément Conteneur sous Mise en page et faites-le glisser dans la zone correspondante.

Après avoir effectué un glisser-déposer, vous pouvez également observer ce conteneur glissé à travers le navigateur, imbriqué à l'intérieur d'un conteneur.

Les conteneurs ajoutés ci-dessous sont tous par défautFlexbox, que vous pouvez modifier à votre guise dans les paramètres de mise en page.GrilleMode.

4.3 Paramètres de mise en page des conteneurs

1. paramètres généraux du conteneur

Pour définir la disposition du conteneur, procédez comme suit :

1. Sélectionnez le conteneur que vous souhaitez définir à l'aide de la souris.
2. Dans la fenêtre de gauche, passez à l'onglet "Mise en page".
3. Cet onglet permet de définir des paramètres de mise en page pour le conteneur, tels que la largeur, la hauteur et l'alignement.

Container Layout est utilisé pour changer la disposition du conteneur, il y a deux options Flexbox et Grid, l'option par défaut est Flexbox.

Largeur du contenuUtilisé pour définir la largeur du conteneur, vous pouvez choisir "Boxed" ou "Full Width". Par défaut, il est défini sur "Boxed", ce qui signifie que la largeur du contenu est basée sur une valeur fixe. Vous pouvez définir la largeur globale du contenu dans les paramètres du site d'Elementor.

La largeur par défaut de Boxed est la largeur du contenu que vous avez défini globalement dans Site Setting, et vous pouvez modifier la largeur via la barre de défilement.

Largeur totaleSa largeur par défaut sera étalée en fonction du conteneur enveloppé ou, s'il s'agit du conteneur le plus extérieur dans le canevas, la largeur sera étalée en fonction de la fenêtre du navigateur par défaut. Vous pouvez ajuster la largeur à l'aide du curseur.

Hauteur minimalePermet de définir la hauteur minimale du conteneur. Lorsque le conteneur ne contient pas ou peu de contenu, il affiche la hauteur minimale ; si le conteneur contient plus de contenu, il est automatiquement ajusté en fonction de la hauteur du contenu. Vous pouvez modifier la hauteur en faisant glisser la barre ou en saisissant une valeur.

La disposition du conteneur peut passer de Flexbox à Grid, avec une différence dans les paramètres des éléments entre Flexbox et Grid.

2、Paramètres des éléments de Flexbox

Lorsque vous définissez la disposition du conteneur sur Flexbox, vous pouvez voir les paramètres de l'élément comme suit :

La direction représente la direction de l'affichage, il y a 4 options, selon la direction de la flèche : de gauche à droite, de haut en bas, de droite à gauche, de bas en haut.

Utilisez la fonction Direction pour modifier la direction et l'ordre des éléments que vous placez dans le conteneur.

Justifier le contenuPermet de définir l'alignement des éléments à l'intérieur du conteneur sur l'axe principal. Si la direction est définie sur Horizontal (de gauche à droite ou de droite à gauche), Justify Content est utilisé pour définir l'alignement de l'élément dans la direction horizontale ; si la direction est définie sur Vertical (de haut en bas ou de bas en haut), Justify Content est utilisé pour définir l'alignement de l'élément dans la direction verticale.

JJustifier le contenuPermet de définir l'alignement des éléments internes du conteneur sur l'axe principal, avec les cinq options suivantes :

1. Démarrage: organise les éléments à partir du début de la direction de la mise en page du conteneur.
2. Centre: centre les éléments dans le conteneur.
3. Fin: organise les éléments à partir de la fin de la direction de la mise en page du conteneur.
4. L'espace entre les deuxLe premier élément est placé au début, le dernier élément à la fin et les autres éléments sont répartis uniformément.
5. L'espace autourChaque élément a le même espace environnant.
6. Espace régulierLa distance entre chaque élément est égale.

Aligner les élémentsPermet de définir l'alignement des éléments internes du conteneur en fonction de la direction de l'axe principal. Il contient les quatre options suivantes :

1. DémarrageAligne les éléments à l'intérieur du conteneur sur la base du point de départ de la direction de la mise en page.
2. Centre: aligne de manière centrale les éléments à l'intérieur du conteneur en fonction de l'orientation de la mise en page.
3. FinAligne les éléments à l'intérieur du conteneur en fonction du point d'arrivée de la direction de mise en page.
4. Étirer: étire les éléments pour qu'ils s'adaptent à la taille du conteneur. Si les éléments ont une taille "auto", ils seront étirés pour s'adapter à la taille du conteneur ; s'ils ont une taille fixe, ils ne seront pas étirés automatiquement.

4、Options supplémentaires其他选项设置

Il y a 2 options dans les options supplémentaires du conteneur.

Débordement Débordement Réglages

Contrôle si le contenu du conteneur ne tient pas dans la fenêtre du navigateur et si le débordement doit être caché ou visible, ce qui entraîne un défilement horizontal.

DébordementTrois options sont possibles :

• La valeur par défaut permet aux éléments situés en dehors du conteneur de déborder.
• Caché Cacher les éléments débordés, ne pas accéder aux éléments débordés.
• Auto Crée une barre de défilement pour garder les éléments accessibles lorsque le contenu déborde, un paramètre qui permet de faire glisser le contenu dans une vue en mouvement.

État caché, si le contenu est débordé, vous ne pouvez pas voir le contenu débordé.

4.4 Paramètres de style du conteneur

Passez à l'onglet Style du conteneur pour définir le style du conteneur.

1）Background(arrière-plan)

Vous pouvez définir la couleur d'arrière-plan du conteneur via l'arrière-plan.

Vous pouvez également définir une image de fond pour les conteneurs.

(2) Superposition de l'arrière-plan)

L'incrustation d'arrière-plan vous permet de superposer un masque de couleur ou d'image à l'arrière-plan que vous avez défini, et vous pouvez définir la transparence de la couleur ou de l'image en fonction de l'effet que vous souhaitez obtenir.

3) Bordure (réglage de la bordure)

Border permet de définir la bordure du conteneur et l'effet de projection.

4) Diviseur de forme (Diviseur de forme)

La ligne de partage de la forme peut être utilisée pour faire du Container entre l'effet de partage, qui est une fonction fournie par le plugin UAE.

Vous pouvez choisir de définir la forme du haut ou du bas du conteneur en basculant entre Top et Bottom, et dans Type, vous pouvez choisir une forme qui vous plaît (uniquement celles fournies).

Résumé :

Cet article vous explique comment activer le conteneur Elementor, convertir une section d'une page en conteneur et découvrir les avantages du conteneur par rapport à la section, tels qu'une plus grande réactivité, un contrôle flexible de la mise en page et une plus grande rapidité de la page. Le tutoriel couvre également les paramètres de mise en page des conteneurs, y compris l'utilisation des modes de mise en page Flexbox et Grid, et la façon d'ajouter des liens et des styles personnalisés au conteneur. Que vous soyez un débutant ou un concepteur web expérimenté, ce tutoriel vous aidera à tirer pleinement parti de la puissance d'Elementor Container pour améliorer l'efficacité et l'efficience de la conception 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.