Elementor pour les débutants : Tutoriels de conception Web en 1 seconde !

Si vous êtes un site WordPressétudiant débutantElementor est un puissant plugin de construction de pages qui permet à tout un chacun de concevoir facilement de belles pages de sites web réactifs par simple glisser-déposer. Ensuite, nous allons partir de zéro pour apprendre à concevoir un site web à l'aide d'Elementor.

1. installer le plug-in Elementor

Avant de pouvoir utiliser Elementor, vous devez d'abord l'installer, comme suit :

• Installer Elementor Free Edition
  1. Connectez-vous à l'interface d'administration de WordPress.
  2. commutateur à Plugins > Installer des plugins.
  3. rechercher qqch. ElementorCliquez sur montagepuis activez le plug-in.

• Installez Elementor Pro (optionnel)
  Si vous voulez plus de fonctionnalités, vous pouvez acheter Elementor Pro, qui s'installe de la même manière :
  1. Visitez le site web d'Elementor pour acheter et télécharger Elementor Pro Plug-ins.
  2. Retournez dans le backend de WordPress et allez à Plugins > Ajouter des pluginsCliquez sur Télécharger le pluginPour télécharger un fichier ZIP du plug-in Pro, cliquez sur le bouton "Télécharger ZIP".
  3. Après l'installation et l'activation, utilisez votre clé de licence pour activer la version Pro.

2. créer une nouvelle page

Maintenant que vous avez installé et activé Elementor, vous pouvez commencer à créer des pages. Nous allons prendre l'exemple de la création d'une nouvelle page :

1. Dans le backend de WordPress, allez dans Pages > Nouvelle page.
2. Saisissez un titre de page, par exemple "Accueil".
3. frappe (sur le clavier) Editeur ElementorSi vous souhaitez utiliser l'éditeur Elementor, rendez-vous sur l'écran de l'éditeur Elementor.

3. comprendre l'interface de l'éditeur Elementor

L'interface de l'éditeur Elementor est divisée en trois parties : la barre d'outils à gauche, la zone de prévisualisation en direct au centre et le navigateur à droite.

• Barre d'outils gauche: C'est ici que vous pouvez sélectionner différents widgets et mises en page.
• Zone de prévisualisation droiteVous pouvez consulter et modifier le contenu des pages en temps réel.
• navigateur (sur un écran d'ordinateur)La nouvelle version s'appellecadreLa structure des conteneurs sur ce site vous permet de les visualiser facilement.

4. ajouter et modifier des éléments de page

Elementor fournit un ensemble riche de widgets que vous pouvez faire glisser et déposer pour créer des pages. Les widgets les plus courants sont les suivants :

• éditeur de texte: Permet d'insérer du contenu textuel.
• photographieInsérer une image ou une galerie.
• boutonsBouton d'ajout pour la prise en charge des liens de paramétrage : bouton d'ajout pour la prise en charge des liens de paramétrage.
• vidéoLes vidéos : intégrez des vidéos telles que celles de YouTube ou Vimeo.
• bibliothèque d'imagesPour afficher des galeries de photos.
• Délimiteurs et espacement: Permet d'ajuster la mise en page et d'ajouter des zones vierges.

5) Conteneurs et structures avec Elementor

La structure la plus importante d'Elementor est le concept de conteneur, un élément utilisé pour mettre en page et organiser le contenu, qui vous aide à contrôler la disposition des éléments sur la page de manière plus flexible.

• conception réactiveConteneurs : Les dispositions Flexbox et Grid des conteneurs permettent aux pages de se comporter de manière plus cohérente et plus fluide sur tous les appareils et toutes les tailles d'écran. Vous pouvez ajuster le comportement des conteneurs pour différents appareils afin d'optimiser l'affichage sur mobile ou ordinateur de bureau.
• Contrôle flexible de la mise en pageLes conteneurs prennent en charge les mises en page Flexbox et Grid, ce qui permet d'ajuster facilement la disposition des éléments. La mise en page Flexbox est particulièrement adaptée au responsive design, vous permettant d'adapter la disposition du contenu à la taille de l'écran.
• Emboîtement et hiérarchieLes conteneurs peuvent contenir d'autres conteneurs ou d'autres éléments, ce qui facilite grandement l'élaboration de mises en page complexes. Par exemple, vous pouvez créer un conteneur principal avec plusieurs sous-conteneurs imbriqués à l'intérieur, chacun d'entre eux pouvant contenir un contenu ou des modules différents.
• Contrôle de la conceptionContainer : Container offre des options de contrôle indépendantes pour chaque élément, vous pouvez définir l'espacement, l'alignement, la couleur d'arrière-plan, les bordures et bien plus encore. Il vous permet de contrôler la mise en page aussi finement que vous le feriez pour une page web.

6. les styles personnalisés

Elementor offre de puissantes options de personnalisation du style et de la conception, ce qui vous permet d'ajuster facilement les polices, les couleurs, les arrière-plans et bien plus encore.

• Polices et couleursVous le trouverez dans la barre d'outils de gauche, sous la rubrique type Définissez la police, la taille, la couleur, l'alignement, etc. sous les onglets.
• contextesSélectionnez le paragraphe ou la colonne et allez à type sélectionnez une couleur d'arrière-plan, une image ou un arrière-plan vidéo.
• Bordures et ombresVous pouvez également ajouter des bordures et des effets d'ombre à chaque élément afin d'améliorer l'effet visuel.

7. utilisation de modèles préconstruits (Template)

Si vous n'avez pas d'expérience en matière de conception, vous pouvez utiliser le logiciel Elementor fourni.Modèles prédéfinisElementor intègre de nombreux modèles de pages professionnels pour vous aider à créer des pages rapidement. Vous pouvez choisir un modèle, l'importer dans une page, puis le modifier selon vos besoins.

1. Dans l'éditeur, cliquez sur Ajouter un modèle.
2. Choisissez un modèle (par exemple, la page d'accueil de l'entreprise, la présentation du blog, etc.)
3. Importez le modèle et commencez à le modifier.

8. publication et visualisation des résultats

Lorsque vous avez terminé la page, cliquez sur le coin inférieur droit de l'écran d'accueil. poste pour publier la page sur le site web. Vous pouvez toujours revenir en arrière et modifier le contenu ou la conception.

9. les fonctionnalités d'Elementor Pro (optionnel)

Si vous choisissez de Elementor ProEn plus des fonctions d'édition de base, vous disposerez également de nombreuses fonctions avancées, notamment :

• Générateur de thèmesVous pouvez concevoir des modèles pour l'en-tête, le pied de page, les pages d'articles, etc. pour l'ensemble de votre site web.
• Constructeur de pop-upCréer des pop-ups avec des taux de conversion élevés.
• Éléments payantsPlus de widgets riches avec Loop Grid, Off-Canves et plus encore.

remarques finales

J'espère que ce tutoriel vous permettra de maîtriser les étapes de base de la création d'un site web avec Elementor. J'espère sincèrement que vous pourrez créer votre propre site web avec ce tutoriel ! Si vous avez des questions, ou si l'une des instructions de cet article n'est pas claire, vous pouvez laisser un commentaire dans la section commentaire ci-dessous et je répondrai aux commentaires quotidiennement.