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.

In this blog, you will learn about the new options Conteneur Elementor Flexbox brings to the table to build a responsive website and follow a complete Elementor Flexbox Container tutorial to create modern layouts using flexbox elementor features.

Alors continuez à lire…

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

Élémentor Flexbox Récipient brings all the CSS Flexbox facilities to your Elementor editor and helps users create advanced responsive layouts using a modern flexbox container system. With the new addition, you can easily create advanced layouts to ensure that web pages look great on all devices irrespective of size.

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.

And when it comes to the Elementor flexbox container, you won’t have to use sections anymore. You can add widgets within a container without any section. This nested container Elementor structure gives you more flexibility than traditional sections and columns.

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

Understanding Elementor section vs container layouts is important because containers provide lighter code structure, better responsiveness, and more design flexibility compared to older sections.

. Well, there are quite a few differences. These are some key differences :

• Tu peux add widgets to containers with Elementor 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 will reduce the number of Elementor Flexbox columns and inner sections. As a result, less code will be produced in the backend. And less DOM will result in better speed 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

First, you need to enable the Elementor Flexbox Container feature to start using Elementor containers inside the editor.

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 choose Active from the dropdown menu to enable flexbox container elementor support on your website. Enfin, faites défiler vers le bas et cliquez sur « Enregistrer les modifications» pour enregistrer le statut.

Step 2: Create a New Page

After activating the flex container, it’s time to create a new page so you can use this feature. This is the starting point for any beginner following an Elementor container tutorial or learning how to use Elementor’s flexbox containers effectively.

For that, Navigate to Pages ⇒ Toutes les pages et puis cliquez sur Ajouter nouveau. Maintenant, donnez un titre, et cliquez sur Modifier avec Elementor.

Step 3: Add a Container

Now, instead of a section, you need to add container layouts using the new Elementor container flexbox system. If you are wondering how to add a container in Elementor, simply click the plus icon and select your preferred structure.

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: You can choose overflow value as Default, hidden, or auto. Advanced users often use Elementor container overflow hidden settings to improve animation and scrolling effects.
• Balise HTML : You can also create an Elementor container link by assigning clickable HTML tags. You get options such as div, header, footer, main, article, section, etc. There is a new addition of a tag.

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.

Step 4: Add Widgets

Le processus d'ajout de widgets est le même que pour la structure des sections de colonnes. Vous devez search for the widget then and drag widgets directly into the Elementor-widget-container area inside each container. This makes Elementor widget container management easier compared to older section-based layouts.

For example, I am going to add one heading, one video, and one social share icon.

Step 5: Customize Container Contents 

The Flexbox controls are the core of Flexbox WordPress layouts inside Elementor. For this, edit the container. Then, go to Layout on the left panel and expand the Items option. Here are the options you get to play with:

• 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.

How to Convert Section-based Elementor Page to Flexbox Container

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 :

Step 1: Select the Section you Want to Convert

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).

Step 2: Click on Convert to Make the 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.

Step 3: Delete the Previous Section

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

You can repeat steps 1 to step 3 for all the sections of your page. Once you are done with converting all the sections into WordPress Flexbox container layout, click on the 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.

Can You Use Elementor Add-on Features with the New Flexbox Container?

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 90+ advanced widgets, 20+ modules, and 1,000+ professional templates. It extends the Elementor page builder with multilevel mega menus, custom headers & footers, versatile content elements, and trendy animations like liquid glass ou parallaxe to build powerful WordPress websites. You can easily créer un site internet complet using the ElementsKit premade template in just a few minutes.

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

FAQ

What is the difference between flexbox vs grid Elementor layouts?

Flexbox is a one-direction layout that allows you arrange items in a row or column. Whereas, Elementor grid is a two-dimentional layout where you can arrange items both in columns or rows at the same time.

Why Elementor flexbox container not showing?

Elementor flexbox container might not show due to plugin conflict, browser cache, outdated Elementor version, disabled flexbox container, etc. So, if you encounter such error, check and resolve the issue related to it.

How to reduce space between container in Elementor?

You can reduce space between Elementor container by adjusting padding and margin settings. Besides, you can also edit column gaps and container layout controls to reduce space between containers in Elementor.

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.