Comment utiliser le conteneur Elementor Flexbox en 6 étapes simples

Avez-vous essayé le nouveau  Conteneur Elementor Flexbox fonctionnalité?

Eh bien, le buzz est que c'est un excellent ajout pour rendre votre site Web plus optimisé pour tous les appareils et accélérer le chargement de votre site.

Comment? 

Eh bien, le nouveau conteneur flexible fonctionne d'une manière un peu différente (à la fois frontale et backend) que les sections/sections internes précédentes. Et ce sont ces nouvelles et différentes façons de travailler qui font la magie.

Dans ce blog, vous découvrirez les nouvelles options que le conteneur Elementor flexbox apporte pour créer un site Web et comment utiliser Elementor Flexbox Container dans un guide étape par étape.

Alors continuez à lire…

Qu'est-ce qu'un conteneur Elementor Flexbox ?

Le conteneur Elementor Flexbox apporte toutes les fonctionnalités CSS Flexbox à votre éditeur Elementor. Avec ce nouvel ajout, vous pouvez facilement créer des mises en page avancées pour garantir que les pages Web s'affichent parfaitement sur tous les appareils, quelle que soit leur taille.

Note: Le conteneur CSS flexbox, comme son nom l'indique, vous offre une flexibilité avancée pour créer une conception adaptée aux appareils. Avant l'introduction de flexbox, il était plutôt compliqué de créer un design réactif en utilisant plusieurs modes de mise en page tels que Bloc, Inline, Tableau et Position. Mais avec les conteneurs flexbox, vous n'avez plus besoin de plusieurs modes de mise en page.

Et en ce qui concerne le conteneur Elementor flexbox, vous n'aurez plus besoin d'utiliser de sections. Vous pouvez ajouter des widgets dans un conteneur sans aucune section. Vous pouvez également ajouter un nombre infini de conteneurs dans le conteneur.

Une fois que vous avez ajouté des widgets et des conteneurs, vous pouvez contrôler la distribution des widgets dans le conteneur ainsi que la disposition de chaque appareil. En outre, vous obtenez des paramètres de personnalisation distincts pour chaque conteneur (même les conteneurs au sein d'un conteneur). Cela vous offre la meilleure flexibilité pour rendre votre appareil de conception réactif. 

Différence entre les nouveaux conteneurs et sections Elementor Flex

Vous devez vous demander quelles sont les différences entre les conteneurs et les sections. Eh bien, il y a pas mal de différences. Voici quelques différences clés :

• Tu peux ajouter des widgets aux conteneurs avec flexbox alors qu'avec les sections, vous devez ajouter des colonnes, puis y ajouter des widgets.
• Dans le conteneur flexible, la largeur du widget est en ligne par défaut alors que, avec la structure de section de colonnes, la largeur du widget est pleine largeur par défaut.
• Auparavant, vous ne pouviez ajouter qu'une seule section interne à l'intérieur d'une section, mais avec Avec les derniers conteneurs flexibles, vous pouvez ajouter autant de conteneurs que vous le souhaitez.
• Avec la structure en sections de colonnes, vous pouvez modifier la direction du widget à l'aide d'un positionnement en colonne ou en ligne. Désormais, avec le dernier conteneur flexible, vous pouvez modifier la direction du widget à l'aide de Column, Row, Column Reverse ou Row Reverse.
• Dans la structure des sections de colonnes, des colonnes inversées ou des sections en double ont été utilisées pour rendre les pages Web réactives. Dans la dernière méthode de conteneur flexible, vous pouvez utiliser un Ordre personnalisé des widgets ou des conteneurs pour chaque appareil.
• Les options d'alignement dans la structure section/colonne sont Gauche, Centre et Droite. D'un autre côté, avec les conteneurs flexibles, vous disposez d'options d'alignement telles que flex-start, flex-center et flex-End.

Maintenant, vous devez réfléchir à la manière dont ces changements peuvent vous être bénéfiques. Pour en savoir plus, passez à la section suivante.

Avantages de l'utilisation du conteneur Elementor Flexbox

De nombreuses recherches sont effectuées avant qu'une nouvelle fonctionnalité ne soit ajoutée à un plugin pour garantir que la fonctionnalité est utile aux clients. Il en va de même avec le conteneur flexible Elementor. Ce Élémentor La fonctionnalité a été ajoutée car elle profitera dans une large mesure aux utilisateurs.

Voici quelques-uns des avantages dont vous bénéficierez si vous utilisez le conteneur Elementor flexbox :

• Puisque la section et la section intérieure seront remplacées par des conteneurs flexibles, vous pouvez créer sites Web plus optimisés.
• Flexbox réduira le nombre de colonnes et de sections internes d'Elementor Flexbox. En conséquence, moins de code sera produit dans le backend. Et moiess DOM entraînera une meilleure vitesse pour votre site WordPress.
• Les paramètres du conteneur Flexbox vous permettront de créer des sites Web adaptés aux appareils avec plus de flexibilité qu'auparavant.
• Maintenant vous pouvez créer un lien hypertexte vers une section complète. Auparavant, vous ne pouviez créer des liens hypertextes que vers des widgets.
• Si vous n'étiez pas satisfait plus tôt parce que vous ne pouviez ajouter qu'une seule section interne dans une section, alors le conteneur flexible est fait pour vous. Avec le conteneur flexible, vous pouvez ajouter des conteneurs dans le conteneur indéfiniment.

Comment utiliser le conteneur Elementor Flexbox en 6 étapes

Suivez les étapes ci-dessous pour savoir comment utiliser le conteneur Elementor Flexbox sur votre site Web afin d'obtenir une apparence plus optimisée. Le processus se compose de 6 étapes simples :

Étape 1 : Activer le conteneur Flexbox dans les expériences Elementor

Tout d’abord, vous aurez besoin d’une fonctionnalité de conteneur flexbox pour exploiter le conteneur flexbox dans Elementor. Pour ça, accédez à Elementor ⇒ Paramètres depuis le tableau de bord WordPress. Passez maintenant à l'onglet Expériences et faites défiler vers le bas pour trouver l’option « Conteneur Flexbox ».

Après avoir trouvé l'option choisissez Actif dans le menu déroulant pour activer Elementor Flexbox Container. Enfin, faites défiler vers le bas et cliquez sur « Enregistrer les modifications» pour enregistrer le statut.

Étape 2 : Créer une nouvelle page

Après avoir activé le conteneur flexible, il est temps de créer une nouvelle page afin que vous puissiez utiliser cette fonctionnalité. Pour cela, accédez à Pages ⇒ Toutes les pages et puis cliquez sur Ajouter nouveau. Maintenant, donnez un titre, et cliquez sur Modifier avec Elementor

Étape 3 : Ajouter un conteneur

Désormais, au lieu d'une section, vous devez ajouter un conteneur. Pour ça,  cliquez sur l'icône +, puis choisissez la structure qui vous plaît.

Note: Si vous remarquez la structure dans le navigateur, vous constaterez qu'elle est en fait un conteneur contenant d'autres conteneurs plutôt que des colonnes. Vous pouvez aussi faites glisser et déposez un seul conteneur depuis le menu de gauche. 

Vous pouvez personnaliser de nombreuses options pour le conteneur telles que

• Largeur du conteneur : Vous pouvez choisir la largeur du conteneur en boîte ou en pleine largeur.
• Largeur: Si vous choisissez Boxed comme largeur de conteneur, la largeur sera de 928Px. D'un autre côté, si vous choisissez Pleine largeur, la largeur du conteneur sera de 100% de la largeur de la fenêtre d'affichage. Cependant, vous pouvez modifier les deux valeurs de largeur.
• Débordement: Vous pouvez choisir la valeur de débordement comme valeur par défaut, masquée ou automatique.
• Balise HTML : Vous pouvez également modifier la balise HTML du conteneur. Vous obtenez des options telles que div, en-tête, pied de page, principal, article, section, etc. Il y a un nouvel ajout d'une balise. De cette façon, vous pouvez transformer un econteneur entier dans un lien avec une balise.

Note:  Vous disposez également de nombreuses options sous « Articles » (nous y reviendrons plus tard). De plus, vous pouvez personnalisez tous les paramètres ci-dessus pour chaque conteneur intérieur aussi.

Étape 4 : Ajouter des widgets

Le processus d'ajout de widgets est le même que pour la structure des sections de colonnes. Vous devez recherchez le widget puis glissez-déposez sur l'icône + de chaque conteneur. Par exemple, je vais ajouter un titre, une vidéo et une icône de partage social.

Étape 5 : Personnaliser le contenu du conteneur 

Il est maintenant temps de personnaliser les widgets du conteneur. Pour cela, éditez le conteneur. Ensuite, accédez à Mise en page dans le panneau de gauche et développez l'option Éléments. Voici les options avec lesquelles vous pouvez jouer :

• Directions: La direction par défaut est la ligne. Cependant, vous disposez de quatre options telles que Ligne, Colonne, Ligne inversée et Colonne inversée. Si vous choisissez la colonne ou la colonne inversée, tous les conteneurs du conteneur principal apparaîtront sous forme de colonnes Elementor flexbox différentes.

Remarque : Si vous choisissez une colonne, vous devez ajuster la largeur des conteneurs internes.

• Aligner les conteneurs : Vous pouvez définir l'alignement sur Flex Start, Center, Flex-end et Scratch. Flex commence à placer votre élément conteneur à partir du point de départt, et avec une valeur Flex center, vous pouvez placer les éléments au centre. D'autre part, avec l'extrémité Flex, vous pouvez afficher tous les conteneurs intérieurs en bas. Et avec l'option extensible, les conteneurs intérieurs occuperont tout espace supplémentaire s'ils sont alloués. Tout cela sera applicable si vous choisissez la direction sous forme de ligne.

En revanche, si vous choisissez le direction sous forme de colonne, alors les valeurs flex-start et center fonctionneront de la même manière que la ligne. Mais avec le flex-end, les conteneurs seront décalés vers la droite et avec scratch, cela prendra n'importe quel espace sur la gauche.

• Justifier le contenu :  Vous disposez de six options pour justifier le contenu : début flexible, centre, extrémité flexible, espace entre, espace autour et espace uniformément. L'espace entre ajoutera le même espace entre chacun des éléments. Cependant, cela n’ajoutera aucun espace en haut ou en bas des éléments.

L’option espace autour ajoutera de l’espace en haut et en bas de chaque conteneur. Et l’option espacer uniformément ajoutera le même espace autour de tous les widgets et conteneurs internes.

• Écart entre les éléments :  Vous pouvez utiliser cette option pour ajouter de l'espace entre les éléments (widgets et sections internes).

• Envelopper: Choisir Pas d'emballage mettre tous les éléments sur une seule ligne et Enveloppez pour laisser le contenu s'écouler sur plusieurs lignes.

Étape 6 : Publier et prévisualiser

Vous pouvez répéter l'étape 4 pour personnaliser tous les paramètres de votre conteneur. Une fois la personnalisation terminée, cliquez sur le bouton de publication pour publier la page. Ensuite, vous pouvez cliquer sur le bouton Aperçu pour voir votre page avec la nouvelle structure de conteneur flexible.

Comment convertir une page Elementor basée sur une section en conteneur Flexbox

La conversion d'une structure basée sur des sections/colonnes vers le nouveau conteneur Elementor Flex est très simple. Vous pouvez le faire en suivant les 4 étapes simples indiquées ci-dessous :

Étape 1 : Sélectionnez la section que vous souhaitez convertir

Vous devez convertir chaque section séparément. Alors, commencez par sélectionner la section que vous souhaitez convertir. Tu peux cliquez sur les six points pour sélectionner une section ou sélectionner une section dans le navigateur (vous pouvez trouver l'option dans le coin inférieur gauche).

Étape 2 : Cliquez sur Convertir pour effectuer la conversion

Maintenant, pour convertir, sur le panneau de gauche, vous trouverez un Option Convertir en conteneur sous la mise en page. Cliquez sur sur le CONVERTIR bouton.

Étape 3 : Supprimez la section précédente

Une fois le processus de conversion terminé, vous trouverez deux versions de la même section. L’un est basé sur des sections et un autre est basé sur des conteneurs. La version du haut est basée sur des sections. Supprimez la version précédente/originale.

Étape 4 : mise à jour et aperçu

Vous pouvez répéter les étapes 1 à 3 pour toutes les sections de votre page. Une fois que vous avez terminé de convertir toutes les sections en disposition de conteneur Flexbox, cliquez sur le bouton bouton de mise à jour pour enregistrer. Vous pouvez maintenant cliquer sur le bouton d'aperçu pour voir la même page mais avec une disposition en conteneur.

Pouvez-vous créer un conteneur Flexbox horizontal et vertical dans Elementor ?

Oui, Elementor prend en charge la création de conteneurs flexbox horizontaux et verticaux en moins de quelques secondes. Il vous suffit de sélectionner les six points du conteneur Elementor et de sélectionner la direction horizontale ou verticale dans l'onglet de mise en page. Ainsi vous pouvez réaliser votre conteneur flexbox sans accroc.

Puis-je utiliser les fonctionnalités complémentaires d’Elementor avec le nouveau conteneur Flexbox ?

Oui. Vous pouvez absolument. 

Vous pouvez utiliser ElementsKit - le module complémentaire ultime pour Elementor pour ajouter des widgets supplémentaires et d'autres fonctionnalités au générateur de pages Elementor. Cet élément Ajouter sur est 100% compatible avec le nouveau conteneur Flexbox d'Elementor.

Vous pouvez utiliser le même processus de conversion de n'importe quelle section Elementor en disposition de conteneur (illustré dans la section ci-dessus) pour convertir les sections/pages ElementsKit. 

ElementsKit est livré avec Plus de 500 sections prêtes, plus de 35 pages prêtes et plus de 85 modules complémentaires personnalisés des fonctionnalités pour vous faciliter la vie. Vous pouvez facilement créer un site internet complet en utilisant le modèle ElementsKit Premade en quelques minutes seulement.

Voici un exemple qui vous permet de voir avec quelle fluidité les pages prédéfinies ElementsKit sont converties en Elementor Flexbox Container.

Conclure

Je suis sûr que vous comprenez maintenant pourquoi il y a tant de choses autour de ce nouvel ajout d'Elementor. Le conteneur Elementor Flex est vraiment une bénédiction pour tous les créateurs de sites Web WordPress qui cherchaient des moyens de créer des sites Web. plus optimisé, plus rapide et réactif quelle que soit la taille de l’appareil.

Et la cerise sur le gâteau est que vous pouvez transformer votre site Web précédemment créé en un site Web optimisé basé sur des conteneurs en un rien de temps. Cependant, le conteneur flexible est toujours en mode expérimental. Il n'est donc pas recommandé de l'utiliser sur un site Web en direct jusqu'à ce qu'il soit publié en tant que fonctionnalité active.

D’ici là, n’hésitez pas à jouer avec le conteneur flexible Elementor sur votre site de développement. Et essayez ElementsKit pour obtenir plus de flexibilité pour concevoir un site Web époustouflant qui retient l'attention de vos clients et augmente le succès de votre site Web.