Maintenant vous savez

3 | Comment utiliser Elementor et les conteneurs Flexbox sur WordPress

La création de sites web modernes et attractifs est une compétence essentielle pour tout développeur ou designer web. Avec l’évolution des outils et des technologies, il est devenu plus facile que jamais de créer des sites web sophistiqués sans avoir besoin de connaissances approfondies en codage. Parmi les outils les plus populaires et puissants disponibles aujourd’hui, Elementor se distingue comme un constructeur de pages WordPress intuitif et riche en fonctionnalités. Combiné avec les conteneurs Flexbox, Elementor permet de concevoir des mises en page flexibles et responsives avec une grande facilité.

Dans cet article, nous allons explorer en profondeur comment les utiliser pour créer des sites web professionnels. Nous commencerons par une présentation de l’arborescence d’Elementor, en détaillant les sections, colonnes et widgets.
Ensuite, nous aborderons l’utilisation des sections et colonnes, en montrant comment les paramétrer pour obtenir des
mises en page harmonieuses. Nous introduirons également les conteneurs Flexbox, une technologie puissante pour gérer la disposition des éléments sur une page de manière flexible et efficace.

Pour renforcer votre compréhension, nous vous proposerons un exercice pratique consistant à recréer une page web en utilisant Elementor et les conteneurs Flexbox. Cet exercice vous permettra de mettre en pratique les concepts appris et de développer vos compétences en création de sites web. Enfin, nous conclurons en vous invitant à réaliser un exercice et à partager vos réalisations.

Chapitre 1 : Présentation d'Elementor - le constructeur de page intuitif & ergonomique

Logo Elementor, Png, Sans fond,

1.1 Qu'est-ce qu'Elementor ?

Elementor est un constructeur de pages WordPress visuel qui permet aux utilisateurs de créer des mises en page sophistiquées sans avoir besoin de compétences en codage.

Lancé en 2016, Elementor a rapidement gagné en popularité grâce à son
interface intuitive, ses fonctionnalités avancées et sa capacité à offrir une flexibilité créative quasi illimitée. Que vous soyez un développeur expérimenté ou un novice en création de sites web, Elementor vous permet de concevoir des pages web professionnelles et réactives en glissant-déposant des widgets dans des sections et colonnes. Grâce à une vaste bibliothèque de modèles préconçus et à des options de personnalisation exhaustives, Elementor facilite la création de sites web attrayants et fonctionnels, adaptés à tout type de projet

1.2 Interface et arborescence d'Elementor

<–À gauche,
vous trouverez
le panneau des widgets ou la bibliothéque d’élément contenant tous les éléments nécessaires à la construction de votre page.

Vous y trouverez des titres, des images, des vidéos, des boutons et bien plus encore.

>À droite,
l’éditeur en temps réel vous permet de voir instantanément les modifications apportées à votre page et l’arborescence avec le naviguateur.

L’arborescence d’Elementor repose sur une structure hiérarchique composée de sections, colonnes et widgets.

Les sections sont les blocs de base qui divisent la page en grandes zones horizontales.

Chaque section peut contenir une ou plusieurs colonnes, et chaque colonne peut contenir plusieurs widgets.

1.3 Premiers pas avec Elementor

Pour commencer à utiliser Elementor, vous devez d’abord l’installer sur votre site WordPress.

Allez dans le
tableau de bord WordPress, cliquez sur « Extensions » puis « Ajouter ».

R
echerchez Elementor, installez et activez le plugin.

Une fois Elementor installé, vous pouvez créer une nouvelle page en cliquant sur « 
Ajouter une nouvelle page » dans le menu des pages et en sélectionnant « Éditer avec Elementor ».

Vous serez alors redirigé vers l’interface d’Elementor, où vous pourrez commencer à construire votre page en ajoutant des sections, colonnes et widgets.

L’outil offre également
une vaste bibliothèque de modèles préconçus que vous pouvez utiliser comme point de départ pour votre conception, vous permettant de gagner du temps et de vous inspirer pour vos propres créations.

Chapitre 2 : Utilisation des sections et colonnes

2.1 Structure de base : Sections et Colonnes

Dans Elementor, les sections et colonnes sont les éléments fondamentaux de la mise en page.

Les sections sont les principaux blocs de construction qui divisent votre page en grandes zones horizontales. Elles servent de conteneurs pour les colonnes et les widgets. Les colonnes, quant à elles, permettent de subdiviser les sections en structures plus petites et flexibles, facilitant ainsi l’organisation des contenus de manière fluide et responsive.

En utilisant des sections et des colonnes, vous pouvez créer des mises en page complexes et esthétiques sans écrire une seule ligne de code. Cette approche modulaire rend la conception web accessible et flexible, adaptée à tous types de projets, qu’il s’agisse de blogs personnels, de sites d’entreprise ou de boutiques en ligne.

2.2 Paramétrage des sections et colonnes

Pour tirer le meilleur parti des sections et colonnes, il est essentiel de maîtriser leur paramétrage. Lorsque vous ajoutez une section, Elementor vous permet de choisir parmi plusieurs types de sections : pleine largeur, largeur fixe, avec ou sans colonnes.
Chaque
section peut ensuite être subdivisée en colonnes en fonction de la mise en page souhaitée. Pour personnaliser les sections et les colonnes, Elementor propose une gamme complète d’options de style et d’agencement. Vous pouvez ajuster les marges et les paddings pour contrôler l’espacement autour des éléments, définir des couleurs de fond, ajouter des bordures et des ombres, et même appliquer des animations.

Les options avancées vous permettent de contrôler des aspects tels que la visibilité sur différents appareils, les réglages de positionnement et les attributs CSS personnalisés. Par exemple, vous pouvez définir des règles spécifiques pour l’affichage de certaines sections sur mobile ou tablette, garantissant ainsi une expérience utilisateur optimale sur tous les appareils.

2.3 Exemples de mise en page

Pour illustrer les possibilités offertes par les sections et colonnes d’Elementor, considérons quelques exemples concrets.
Imaginons une
page d’accueil de site d’entreprise comme ci-dessus.
Vous pourriez commencer par une section en pleine largeur avec une image de fond accrocheuse. Dessus, ajoutez une nouvelle section interne divisée en trois colonnes pour afficher les services ou les avantages de l’entreprise. Chaque colonne pourrait contenir une icône, un titre et une brève description, le tout aligné de manière cohérente et esthétique.

Pour un blog, vous pourriez créer une mise en page en grille avec une section contenant plusieurs colonnes, chacune dédiée à un article de blog récent avec une image, un titre et un extrait de texte.
En jouant avec les
options de style et les réglages de marges et paddings (marge interne), vous pouvez créer des sections visuellement distinctes qui attirent l’attention des visiteurs et mettent en valeur votre contenu de manière professionnelle.

Chapitre 3 : Introduction aux conteneurs Flexbox

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

Le modèle de boîte flexible, ou Flexbox, est une méthode de mise en page CSS qui permet une distribution efficace de l’espace entre les éléments d’une page web et une meilleure organisation des conteneurs, même lorsque leur taille est inconnue ou dynamique.

Contrairement aux méthodes de mise en page traditionnelles, Flexbox est conçu pour les interfaces utilisateur, offrant une
flexibilité optimale pour aligner, distribuer et réorganiser les éléments de manière adaptative.
Les conteneurs Flexbox peuvent
s’adapter automatiquement aux différentes tailles d’écran, garantissant ainsi une expérience utilisateur cohérente et responsive sur tous les appareils.

3.2 Mise en œuvre des conteneurs Flexbox dans Elementor

Vidéo Tutoriel pour les conteneurs FlexBox

Elementor intègre les conteneurs Flexbox pour offrir une plus grande flexibilité et contrôle dans la conception de vos mises en page.
Pour utiliser les conteneurs Flexbox dans Elementor, commencez par
ajouter une nouvelle section et sélectionner « Flexbox »

Par exemple, en utilisant Flexbox, vous pouvez facilement centrer un groupe de boutons horizontalement et verticalement dans un conteneur, ou répartir uniformément des cartes de produits avec des hauteurs variables, en veillant à ce que chaque carte prenne le même espace dans le conteneur.
Cela simplifie grandement le processus de mise en page, surtout lorsque vous devez ajuster rapidement la disposition pour différentes tailles d’écran.

3.3 Cas pratiques avec Flexbox

Pour mieux comprendre l’application des conteneurs Flexbox, examinons quelques cas pratiques. 

Imaginons que vous conceviez une galerie de photos :

En utilisant Flexbox, vous pouvez
organiser les images de manière à ce qu’elles s’ajustent automatiquement en fonction de la taille de l’écran, garantissant une disposition cohérente et esthétique. Les images peuvent être centrées ou distribuées uniformément, et les espaces entre elles peuvent être ajustés pour une apparence nette et équilibrée.

Un autre exemple est la création d’un tableau de prix :

Avec Flexbox, vous pouvez aligner les différentes cartes de prix de manière à ce qu’elles aient la même hauteur, même si le contenu de chaque carte varie.
Cela donne une
apparence professionnelle et ordonnée, améliorant l’expérience utilisateur.

Vous pouvez également utiliser Flexbox pour créer des
barres de navigation adaptatives, qui se réorganisent automatiquement en fonction de l’espace disponible, assurant ainsi une navigation fluide et intuitive sur tous les appareils.

Chapitre 4 : Exercice pratique : Refaire une page avec Elementor et Flexbox

4.1 Présentation de la page d'exercice

Pour consolider vos connaissances sur Elementor et les conteneurs Flexbox, je vous propose un exercice pratique consistant à recréer la page web ci-dessous.
Cet exercice vous permettra de mettre en œuvre les concepts appris dans un cadre concret, vous aidant ainsi à renforcer votre maîtrise des outils.

La page d’exercice comprend plusieurs sections avec des structures variées. Chaque section utilise les principes de Flexbox pour garantir une mise en page responsive et esthétique. L’objectif de cet exercice est de vous familiariser avec l’utilisation des sections, colonnes et conteneurs Flexbox dans différents contextes de conception.

4.2 Idées de Créations d'éléments supplémentaires

Voici des idées d’éléments pour vous entrainez :

  1. En-tête avec texte et bouton :
    • Ajoutez une nouvelle section pleine largeur.
    • Insérez une colonne unique et ajoutez un widget « Titre » et un widget « Bouton ».
    • Utilisez Flexbox pour centrer le contenu verticalement et horizontalement dans la section.
    • Appliquez des marges et paddings pour ajuster l’espacement.
  2. Galerie d’images :
    • Ajoutez une nouvelle section et divisez-la en trois colonnes.
    • Dans chaque colonne, insérez un widget « Image ».
    • Utilisez les paramètres Flexbox pour aligner les images uniformément et ajuster l’espacement entre elles.
    • Assurez-vous que les images sont responsives et redimensionnées proportionnellement sur différents appareils.
  3. Tableau de prix :
    • Créez une nouvelle section et ajoutez trois colonnes.
    • Dans chaque colonne, insérez un widget « Boîte de prix » (ou créez une boîte personnalisée avec des titres, descriptions et boutons).
    • Utilisez Flexbox pour égaliser la hauteur des boîtes et distribuer l’espace de manière cohérente.
    • Ajoutez des bordures et des ombres pour améliorer l’esthétique visuelle.
  4. Formulaire de contact :
    • Ajoutez une nouvelle section pleine largeur.
    • Insérez une colonne unique et ajoutez un widget « Formulaire ».
    • Utilisez Flexbox pour centrer le formulaire dans la section et ajuster l’espacement.
    • Appliquez des styles pour correspondre à l’esthétique globale de la page.
  5. Pied de page avec liens sociaux :
    • Ajoutez une nouvelle section et divisez-la en deux colonnes.
    • Dans la première colonne, ajoutez un widget « Texte » pour les informations de contact.
    • Dans la deuxième colonne, ajoutez des widgets « Icône » pour les liens sociaux.
    • Utilisez Flexbox pour aligner le contenu horizontalement et ajuster l’espacement entre les éléments.

4.3 Évaluation et astuces

Pour évaluer votre travail, assurez-vous que la page recréée respecte les critères suivants :

  • Mise en page elementor canevas : Vérifiez que dans les réglages de page « écrous en bas à gauche » vous avez bien sélectionner le modèle de page « Elementor Canevas »
  • Alignement et espacement : Les éléments doivent être correctement alignés et espacés de manière cohérente.
  • Esthétique visuelle : La page doit être visuellement attrayante et cohérente avec le thème général du site et de l’exercice.

Astuces pour réussir l’exercice :

  • Utilisez les prévisualisations : Utilisez la fonction de prévisualisation d’Elementor pour vérifier l’apparence de la page sur différents appareils (Petit œil en bas à gauche)
  • Apprenez des erreurs : Ne vous découragez pas si le résultat n’est pas parfait du premier coup. Apprenez de chaque ajustement pour améliorer votre maîtrise de l’outil.
  • Explorez les options avancées : N’hésitez pas à explorer les options avancées des widgets pour personnaliser davantage votre mise en page.

Chapitre 5 : Installer Elementor Pro Gratuitement

5.1 Installer et Téléverser l'extension Elementor Pro Gratuitement

 

Voici un guide détaillé pour téléverser et installer l’extension Elementor Pro sur votre site WordPress :

Étape 1 : Téléchargez Elementor Pro 

  1. Téléchargez Elementor Pro :  Cliquez sur le lien ci-dessous pour télécharger Elementor Pro.
  2. Assurez-vous d’avoir Elementor gratuit installé : Elementor Pro est une extension qui nécessite Elementor « basique ». Vous pouvez télécharger Elementor gratuit depuis le répertoire des extensions WordPress ou directement depuis l’administration de votre site WordPress.

Étape 2 : Connexion à l’Administration WordPress

  1. Ouvrez votre navigateur et allez à l’adresse de connexion de votre site WordPress (ex. https://votresite.com/wp-admin).
  2. Connectez-vous avec votre nom d’utilisateur et mot de passe.

Étape 3 : Installer Elementor Gratuit

Si Elementor « basique » n’est pas encore installé, suivez ces étapes :

  1. Dans le menu latéral, allez dans « Extensions ».
  2. Cliquez sur « Ajouter ».
  3. Dans la barre de recherche, tapez « Elementor ».
  4. Trouvez l’extension Elementor Page Builder et cliquez sur « Installer », puis « Activer ».

Étape 4 : Téléverser Elementor Pro

  1. Dans le menu latéral de l’administration WordPress, allez dans « Extensions ».
  2. Cliquez sur « Ajouter ».
  3. En haut de la page, cliquez sur le bouton « Téléverser une extension ».
  4. Cliquez sur le bouton « Choisir un fichier » et sélectionnez le fichier ZIP d’Elementor Pro que vous avez téléchargé.
  5. Cliquez sur le bouton « Installer maintenant ».

Étape 5 : Activer Elementor Pro

  1. Une fois l’installation terminée, vous serez redirigé vers une page de confirmation.
  2. Cliquez sur le bouton « Activer l’extension » pour activer Elementor Pro

Conseils et Astuces

  • Ne pas mettre à jour Elementor Pro : Ne faites pas la mise à jour de l’extension Elementor Pro ou vous perdrez la licence gratuite à vie. 
  • Sauvegardez votre site : Avant d’installer Elementor Pro, il est recommandé de faire une sauvegarde complète de votre site.
  • Support et documentation : Si vous avez des questions ou rencontrez des problèmes, consultez la documentation d’Elementor ou les vidéos d’apprentissage.

Chapitre 6 : Conclusion

6.1 Récapitulatif des points clés

Au cours de cet article, nous avons exploré en détail l’utilisation d’Elementor et des conteneurs Flexbox pour créer des sites web modernes et responsives.
Nous avons commencé par une présentation générale d’Elementor, en détaillant ses fonctionnalités et son interface utilisateur.
Ensuite, nous avons examiné l’utilisation des sections et colonnes, en expliquant comment les paramétrer pour obtenir des mises en page harmonieuses.
Nous avons ensuite introduit les conteneurs Flexbox, en démontrant leur potentiel pour améliorer la flexibilité et l’adaptabilité des mises en page.
Enfin, j’ai pu vous proposé un exercice pratique pour appliquer ces connaissances, en fournissant des instructions détaillées et des astuces pour réussir.

6.2 Prochaines étapes et ressources supplémentaires

Pour continuer à développer vos compétences en conception web avec Elementor et Flexbox, nous vous recommandons d’explorer les ressources supplémentaires suivantes :

  • Tutoriels vidéo sur Elementor : De nombreuses vidéos explicatives sont disponibles en ligne pour approfondir votre compréhension des fonctionnalités avancées.
  • Documentation officielle d’Elementor : Consultez la documentation pour des guides détaillés et des conseils sur l’utilisation des différents widgets et paramètres.
  • Communautés en ligne et forums : Rejoignez des forums et des groupes de discussion où vous pouvez poser des questions, partager vos créations et obtenir des conseils de la part d’autres utilisateurs.
  • Cours en ligne sur le développement web : Inscrivez-vous à des cours en ligne pour obtenir une formation plus structurée et approfondie.

Maintenant que vous avez acquis une compréhension solide des concepts de base et avancés d’Elementor et des conteneurs Flexbox, il est temps de mettre ces connaissances en pratique.
Je vous invite à
réaliser l’exercice proposé et à recréer la page web en utilisant les techniques apprises.

N’hésitez pas à poser des questions si vous rencontrez des difficultés.
La
pratique régulière est la clé pour maîtriser ces outils et devenir un expert en création de sites web. Commencez dès maintenant et voyez par vous-même comment Elementor et Flexbox peuvent transformer vos projets web.

Bonne création !

Vous souhaitez vous inspirez de mes créations pour vous exercez ? Découvrez mes sites internet créer avec Elementor

Partagez mes articles sur vos réseaux sociaux :

Picture of Jordan Goussery
Jordan Goussery

Aventurier, explorateur, artiste & entrepreneur.

Mes autres récits

Retour en haut