Premiers pas avec les conteneurs Elementor : Structure, orientation et contrôles de mise en page expliqués

Lors de la construction d'un site web avec Elementor, il est important de maîtriser la fonctionConteneurL'utilisation du conteneur est une étape clé vers le responsive design et les mises en page personnalisées. Cet article détaille les paramètres de structure, l'orientation du contenu, le contrôle de la largeur, l'ajustement de l'espacement et les techniques de mise en page réactive pour les conteneurs. Il s'adresse aux débutants et à ceux qui sont en train de passer au format Conteneur Flexboxde nouveaux utilisateurs.

I. Ajout d'emballages et sélection de structures

Dans l'éditeur Elementor, cliquez sur le bouton "+L'icône "Widgets" ouvre le menu Widgets et vous pouvez sélectionner l'icône "Widgets" pour ouvrir le menu Widgets.conteneurs"pour ajouter une nouvelle structure. Can :

• Glisser-déposer directement dans un conteneur par défaut ;

• Choisissez ensuite une disposition structurelle (par exemple, une seule colonne, deux colonnes, etc.).

Définition de l'orientation du contenu

Cliquez sur la flèche vers le bas : le contenu est disposé verticalement (disposition en colonnes verticales).

Cliquez sur la flèche droite : le contenu est disposé horizontalement (disposition en lignes horizontales).

Lorsque vous allez dans les paramètres du conteneur, il y aura également d'autres directions de paramètres d'alignement

Prenons l'exemple de l'alignement vertical : le conteneur aligne automatiquement le contenu en colonnes, chaque élément enfant occupant toute la largeur de la colonne.

Deuxièmement, ajouter et ajuster les éléments de l'image

Après avoir ajouté le widget image au conteneur, vous pouvez l'ajouter au conteneur à l'aide de la balise "typeLe "Panel Setting Dimensions" :

• Recommandé pour les débutantspixels" ou "pour cent"en tant qu'unité ;

• En fixant la largeur à 150px, le composant occupe toute la largeur de la colonne dans le conteneur vertical, même si une largeur fixe est définie.

À ce stade, si vous copiez les composants de l'image, vous les retrouverez dans l'ordre sur la ligne suivante.

Troisièmement, passer à une présentation horizontale

Une fois le conteneur sélectionné, réglez la direction sur "Rangée"Le système respecte alors la largeur définie pour chaque élément enfant afin d'obtenir une disposition horizontale côte à côte.

Ajustement de l'alignement

Aller à "ouverture (jargon des échecs)"Le mot "¡§Justifier le contenuL'option " " permet de contrôler l'espacement entre les éléments :

• DémarrerLe texte de l'article est disponible sur le site web de la Commission européenne, à l'adresse suivante
• CentreCentré : Centré ;
• Fin: Aligné à droite ;
• L'espace entre les deuxLes éléments de l'image sont : alignés aux extrémités et également espacés au centre.

Quatrièmement, le contrôle de la largeur du contenu et de la hauteur minimale

Largeur du contenu

• La valeur par défaut est En boîte(boxed), c'est-à-dire que le conteneur est affiché en pleine largeur, mais le contenu est limité à la largeur spécifiée ;

• modifier pour Largeur totalele contenu remplira toute la largeur du conteneur.

L'effet peut être visualisé en ajoutant une bordure pour faciliter l'observation.

Hauteur minimale

Si elle n'est pas définie, la hauteur sera automatiquement ajustée en fonction du contenu.
L'option Hauteur minimale permet au conteneur de conserver la hauteur spécifiée même s'il y a peu de contenu. Elle est souvent utilisée dans la conception d'une bannière ou d'une première zone d'écran.

V. Paramètres personnalisés et conteneurs imbriqués

Dans le "niveau élevéL'onglet "Personnalisation avancée" vous permet de définir des personnalisations avancées telles que l'alignement des composants individuels.

Les conteneurs peuvent également être imbriqués, par exemple en plaçant plusieurs sous-221 dans un conteneur principal avec des règles d'orientation et d'alignement différentes pour une typographie réactive plus complexe.

VI. optimisation de la mise en page réactive

La véritable force du système de conteneurs réside dans sa capacité à s'adapter à différents appareils. Il peut être configuré séparément pour les ordinateurs de bureau, les tablettes, les téléphones portables et d'autres appareils :

• Direction du navire ;
• Marges intérieures et extérieures ;
• Alignement ;
• Largeur du contenu, etc.

Cela permet à la page de conserver une bonne mise en page et une cohérence visuelle sur tous les écrans.

résumés

Une maîtrise souple de la structure des conteneurs et des techniques de mise en page permet non seulement d'améliorer considérablement l'efficacité de la conception web, mais aussi d'obtenir facilement une mise en page réactive de haute qualité. Que vous soyez un designer, un développeur ou un opérateur de site web, les conteneurs sont l'un des outils de mise en page les plus puissants d'Elementor. Pour plus de tutoriels et d'informations sur WordPress, veuillez consulter les sites suivantsRéseau de fluctuation des photonsavec les tutoriels WordPress les plus complets et les plus actifs.Communauté d'échange WordPress.

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.