Comment créer une page de destination avec Elementor et PowerPack

WordPress a permis à chacun de créer facilement sa présence en ligne, qu'il s'agisse d'un blog, d'un site Web d'entreprise ou d'un ERP complexe. Les thèmes et plugins WordPress permettent aux utilisateurs de créer facilement leurs sites Web sans avoir à se soucier d'embaucher un expert. Les plugins Page Builder ont joué un rôle essentiel dans la transformation de la façon dont les sites Web sont construits avec WordPress. Elementor est l'un de ces plugins de création de pages populaires.

Si vous êtes un concepteur de sites Web et que vous souhaitez donner vie à vos conceptions sans vous soucier du code, vous pouvez utiliser Elementor. Mais que faire si vous êtes développeur ? Eh bien, si vous êtes un développeur, vous pouvez également utiliser Elementor en raison de sa fonctionnalité conviviale pour les développeurs et de son API facile à étendre.

Dans cet article, vous en apprendrez plus sur Elementor et comment vous pouvez l'utiliser avec les modules complémentaires Elementor pour créer rapidement des sites Web, des pages de destination, des fenêtres contextuelles.

Qu'est-ce qu'Elementor ?

Elementor est un plugin de création de pages populaire pour WordPress. Elementor fournit des blocs de contenu prêts à l'emploi appelés Widgets ainsi que des éléments structurels de base tels que des sections et des colonnes.

Vous pouvez faire glisser et déposer ces widgets sur n'importe quelle page de votre site Web WordPress et créer une mise en page personnalisée selon vos besoins.

Elementor Pro est livré avec plus de 60 widgets et de nombreux modèles prédéfinis que vous pouvez utiliser pour concevoir n'importe quelle page.

Caractéristiques d'Elementor

Elementor est livré avec de nombreuses fonctionnalités et fonctionnalités qui peuvent rendre le développement de votre site Web plus confortable et plus rapide. Voyons toutes les fonctionnalités impressionnantes d'Elementor qui en valent la peine.

Rapide et facile à utiliser

Elementor est optimisé pour les performances. Même si vous êtes un utilisateur novice, vous le trouverez très facile à utiliser et à naviguer sans effort dans Elementor. Vous ne sentirez jamais Elementor vous ramener dans votre processus de conception et ne fera que rendre les choses rapides et faciles pour vous.

Alors qu'Elementor est extrêmement rapide, vous pouvez tirer le meilleur parti d'Elementor lorsque vous utilisez l'hébergement Cloudways Elementor. CW est tout au sujet de la performance et offre un super contrôle sur le fonctionnement de votre serveur. En matière de sécurité, Cloudways propose des serveurs vraiment fiables et sécurisés régis par leurs pratiques de sécurité proactives pour assurer la sécurité de vos serveurs. Le nombre de fonctionnalités fournies avec Cloudways est quelque chose qui est difficile à trouver dans l'industrie aujourd'hui.

Modèles de pages prédéfinis

Avec Elementor, vous obtenez de nombreux modèles prédéfinis que vous pouvez utiliser pour créer une page Web en un seul clic. Il existe des modèles pour presque toutes les catégories de pages Web, telles que les pages de destination, les pages à propos, etc., et peuvent accélérer le processus de conception de sites Web.

Si vous ne trouvez pas de bon modèle dans Elementor Library, vous pouvez consulter les modèles Elementor tiers. Avec une communauté florissante de concepteurs et de développeurs, il est facile de faire passer Elementor au niveau supérieur.

Chargé de widgets

Les versions gratuites et pro d'Elementor sont livrées avec des widgets chargés de fonctionnalités. Des widgets de contenu simples comme les titres, l'éditeur de texte, les boutons aux widgets avancés comme la grille de publications, le formulaire de connexion, WooCommerce, le partage social, vous obtenez de nombreuses fonctionnalités avec Elementor.

Si vous souhaitez avoir plus de puissance en ce qui concerne les widgets, vous pouvez essayer des modules complémentaires Elementor tiers. Nous vous recommandons d'utiliser PowerPack pour Elementor. C'est un module complémentaire de premier plan pour Elementor et construit par la même équipe derrière le populaire module complémentaire PowerPack Beaver Builder.

Générateur de fenêtres contextuelles Elementor

Le générateur de fenêtres contextuelles est l'un des derniers ajouts au générateur Elementor. La fonctionnalité de création de fenêtres contextuelles élimine le besoin d'utiliser un plug-in de création de fenêtres contextuelles tiers sur votre site Web. Vous pouvez utiliser Elementor pour concevoir des popups impressionnants avec des règles et des fonctionnalités de ciblage avancées.

Vous pouvez créer des formulaires de connexion, des tapis plein écran, des fenêtres contextuelles de remise, etc. avec la fonction de création de fenêtres contextuelles.

Paramètres globaux

Lorsque vous créez un site Web, il est important d'avoir des paramètres de couleur, une typographie, etc. cohérents. Vous pouvez personnaliser les couleurs, les polices et même le sélecteur de couleurs à l'avance pour faciliter votre processus de conception avec les paramètres globaux dans Elementor.

Créez des parties de thème telles que l'en-tête, le pied de page, les archives, etc.

Avec Elementor, votre conception ne se limite pas à la zone de contenu d'une page . Vous pouvez créer un en-tête, un pied de page, une barre latérale et presque toutes les parties du site Web personnalisés sans avoir à vous soucier d'écrire du code. Tous ces éléments peuvent être facilement créés à l'aide de la fonctionnalité Theme Builder d'Elementor Pro.

Contenu dynamique

Avec la fonctionnalité de contenu dynamique dans Elementor Pro, vous pouvez afficher des données/contenus dynamiques à partir de champs personnalisés WordPress, ACF, Toolset, Pods, MetaBox ou tout autre plugin de champs personnalisés. Vous pouvez utiliser les données des champs personnalisés et les afficher avec des widgets Elementor dans n'importe quelle partie de votre site. Vous pouvez en savoir plus sur le contenu dynamique ici.

Versions Lite et Pro

Bien qu'Elementor ait beaucoup à offrir, il n'est pas nécessaire que les utilisateurs doivent payer une somme énorme pour y accéder. En fait, Elementor a deux versions, Lite et Pro. Vous pouvez accéder à de nombreuses fonctionnalités d'Elementor dans la version allégée elle-même. Les deux versions ont leurs propres fonctionnalités à offrir. Voici une comparaison détaillée d'Elementor Lite et Pro qui peut vous aider à prendre une décision.

PowerPack pour Elementor

Elementor est définitivement le package complet. Le seul outil dont vous avez besoin pour commencer à concevoir des pages Web avec un angle d'apprentissage minimal.

Il peut arriver que vous vous sentiez un peu limité lorsque vous utilisez Elementor. Pour cela, des modules complémentaires tiers bien codés comme le module complémentaire PowerPack Elementor viennent à la rescousse. Ce module complémentaire est l'un des meilleurs de sa catégorie et offre d'excellents et impressionnants widgets avec de nombreuses options de personnalisation pour les utilisateurs.

Actuellement, il existe plus de 50 widgets dans la version Pro de PowerPack, et l'équipe continue d'ajouter de nouveaux widgets, ce qui en fait un excellent choix parmi les modules complémentaires Elementor.

PowerPack est construit par une équipe de développeurs et de concepteurs WordPress experts avec des performances à l'esprit. Le plugin est bien codé et régulièrement mis à jour pour la compatibilité avec les dernières versions d'Elementor et WordPress

Voyons comment vous pouvez utiliser les modules complémentaires Elementor et PowerPack ensemble pour créer des pages Web fantastiques.

Création d'une page de destination

Dans ce didacticiel, vous apprendrez comment créer une page de destination rapide avec les modules complémentaires Elementor et PowerPack Elementor. Il est facile de démarrer avec Elementor , tout cela grâce à l'interface conviviale.

Veuillez vous assurer que vous avez installé Elementor et PowerPack sur votre site. Vous pouvez obtenir les versions gratuites à partir des liens ci-dessous :

1. Élémentor
2. PowerPack Lite pour Elementor

Créer une page avec Elementor

Connectez-vous à votre tableau de bord d'administration WordPress et cliquez sur l'option Ajouter un nouveau sous Pages . Donnez maintenant un titre/nom à votre page et cliquez sur le bouton Modifier avec Elementor .

Dans ce tutoriel, nous créons une page de destination pour une pizzeria, nous nommerons donc notre page en conséquence. Voici à quoi devrait ressembler notre résultat final :

Commençons par la première section . Avant de faire cela, changez la mise en page en Elementor Canvas en cliquant sur la petite icône de paramètres dans le coin inférieur gauche de l'éditeur.

Étape 1 : Section Héros

La section héros comprend une image d'arrière-plan, deux widgets de titres et un bouton CTA.

Tout d'abord, cliquez sur l'icône plus et ajoutez une structure de colonne unique parmi les options. Allez maintenant dans les paramètres de la section et activez l' option étirer la section et définissez les rembourrages inférieur et supérieur sur 250 dans l'onglet avancé.

Maintenant, vous pouvez sélectionner l'image souhaitée pour l'arrière-plan dans l' onglet style> type d'arrière-plan> Classique et en choisissant l'image dans l'affichage multimédia.

Nous avons l'arrière-plan prêt. Ajoutons maintenant les titres et le bouton à notre section héros.

Faites glisser et déposez le widget Double titre sur la page et modifiez le texte respectivement. Maintenant, assurez-vous de diviser le premier et le deuxième titre en conséquence pour mettre davantage l'accent sur le prix, comme nous l'avons fait dans l'image ci-dessous. Modifiez la typographie pour les deux parties du titre.

Il existe de nombreuses autres modifications que vous pouvez apporter pour que votre titre de héros soit comme vous le souhaitez.

Une fois que vous avez apporté les modifications, faites glisser et déposez un autre widget de titre sous le double titre et modifiez les paramètres de texte et de typographie comme requis, ici j'ai modifié la taille du texte en 90 , la police en Elsie et le poids de la police en 600 .

Nous allons maintenant ajouter le bouton CTA .

Faites glisser et déposez le widget Elementor Button dans la section juste en dessous du widget Heading. Nous allons maintenant commencer à modifier les paramètres du bouton.

Voici les modifications que j'ai apportées au bouton :

• Texte modifié en Commandez maintenant !
• Alignez le bouton au centre.
• Ajout du lien CTA
• Typographie changée en Elise; 24 600 pour la police, la taille et le poids respectivement.
• Modification de la couleur d'arrière-plan en rouge ( #ff0000 ) et de la couleur de la police en blanc ( #ff0000 ).
• Ajout du rembourrage 18, 40, 18, 40 pour le haut, la droite, le bas et la gauche respectivement.

Après avoir apporté les modifications, voici à quoi ressemble la section des héros.

Étape 2 : La section À propos

Nous allons maintenant travailler sur la section À propos, allez-y et ajoutez une structure à deux colonnes à la page en cliquant sur l'icône "+".

Maintenant, nous visons à créer une mise en page similaire à celle-ci, nous allons donc ajouter un widget d'en-tête, un widget d'éditeur de texte et le widget Témoignages dans la colonne de gauche. Dans la colonne de droite, nous ajouterons un widget Titre, un widget Texte et le widget Bouton.

Commencez simplement par glisser-déposer les widgets sur la section et modifiez-les pour qu'ils ressemblent à ceux de l'image fournie ci-dessus. Ajoutez le titre et modifiez la typographie pour le même.

Voici à quoi cela ressemblera :

Ajoutez maintenant l'éditeur de texte sous le titre dans la colonne de gauche et remplacez la typographie par celle affichée ci-dessous.

Nous allons maintenant ajouter le widget Carrousel de témoignages sous le widget de l'éditeur de texte. Ajoutez les « articles » ou les témoignages à afficher sur votre site Web. Vous pouvez également utiliser le widget Témoignages de PowerPack qui offre beaucoup plus de puissance de personnalisation.

Une fois que vous avez terminé d'apporter les modifications, la colonne de gauche de votre section À propos devrait ressembler à ceci.

Maintenant pour la colonne de droite , ajoutez l'arrière-plan pour ajouter un peu de contraste à la section.

Créez maintenant un duplicata du titre que nous avons créé dans la colonne de gauche et faites-le glisser et déposez-le dans la colonne de droite. Faites de même pour l'éditeur de texte car cela vous évitera une redondance inutile et vous fera également gagner du temps. Maintenant, pour le bouton, dupliquez simplement le bouton de la section Hero et faites-le glisser et déplacez-le vers la colonne de droite de la section À propos.

Alignez verticalement la colonne de droite au milieu à partir de la colonne d'édition> mise en page> alignement vertical et votre section À propos est prête !

Voici le résultat final de la section À propos :

Étape 3 : Section CTA « En savoir plus »

Nous allons ajouter une autre section sur la pizzeria. Cette section sera similaire à celle que nous avons créée auparavant, mais la structure sera un peu différente.

Donc, nous voulons que notre résultat final ressemble à ceci:

Avez-vous remarqué quelque chose de similaire ici?

Oui! L'en-tête, l'éditeur de texte sont similaires à celui que nous avons déjà créé précédemment. Ainsi, au lieu de reconcevoir tous les widgets, nous allons simplement les dupliquer et les faire glisser pour les placer.

Faisons le!

Tout d'abord, ajoutez une nouvelle structure à deux colonnes et accédez aux paramètres de la section, ajoutez l'image d'arrière-plan de la fenêtre multimédia et ajoutez un rembourrage supérieur de 100 pour rendre le panneau plus spacieux. Activez également l' option Étirer la section dans les paramètres.

Passez maintenant à la section précédente et dupliquez l'en-tête, l'éditeur de texte et le widget de bouton . Vous pouvez simplement le faire en cliquant avec le bouton droit sur le widget et en sélectionnant l'option dupliquer . Une fois dupliqués, faites glisser et déposez les widgets dupliqués vers leurs nouvelles positions.

Voici à quoi ressemble la section :

Maintenant, pour la colonne de droite, faites glisser et déposez le widget d'image et sélectionnez l'image dans la galerie multimédia. Ajustez l'image en termes de taille d'image, etc. et une fois que vous avez terminé, voici à quoi ressemble la section.

Etape 4 : La rubrique Contact/Commande

Il s'agit de la section CTA qui aidera l'utilisateur à passer la commande. Maintenant, qu'est-ce que toute cette section devrait inclure? Voyons ce que nous visons à faire ici.

Nous devons créer deux widgets d'en-tête et d'éditeur de texte, un formulaire de contact et le widget de menu de liste de prix par PowerPack.

Tout d'abord, nous savons que nous devons conserver le même design et l'apparence du titre et de l'éditeur de texte. Vous pouvez aller de l'avant et les dupliquer à partir de la section précédente et les placer ici. Maintenant, changez le texte avec celui que vous voulez.

Vous pouvez utiliser le widget Formulaires dans Elementor Pro pour créer un formulaire de contact par simple glisser-déposer. Une fois cela fait, le formulaire de contact apparaîtra sur la page. Vous pouvez maintenant personnaliser davantage les formulaires. Voici les modifications que j'ai apportées :

• Ajout de champs de formulaire et modification de la taille du champ.
• Modification du texte, de la taille et de l'alignement du bouton.
• Ajout de l'e-mail en tant qu'action du bouton d'envoi et ajout des détails de l'e-mail.
• Ajustement des espaces entre les colonnes et refonte de la typographie et des couleurs du texte et des champs
• Autres modifications nécessaires pour rendre le formulaire de contact plus attrayant .

Si vous utilisez un plugin de formulaire de contact comme Gravity Forms, WPForms, Ninja Forms, etc., vous pouvez utiliser le widget de style de formulaire de PowerPack pour styliser le formulaire avec Elementor.

Maintenant, dans la colonne de droite, nous ajouterons la liste de prix pour les produits. Pour cela, nous utiliserons le widget Price Menu de PowerPack. Faites-le simplement glisser et déposez-le, ajoutez les détails et modifiez la conception et la mise en page pour le même. Voici à quoi ressemblerait toute la section :

Participez au concours maintenant !

Concours PowerPack hébergé par Cloudways

La liquidation !

Après avoir fait tous les changements, voici à quoi ressemblerait notre mise en page entière.

Maintenant, vous pouvez également créer une belle mise en page avec Elementor et PowerPack pour Elementor. Alors qu'Elementor offre de nombreuses fonctionnalités, PowerPack l'étend davantage avec des widgets créatifs et axés sur les fonctionnalités. Avec plus de 50 widgets très utiles dans votre boîte à outils, vous pouvez créer des sites Web plus rapidement.

Elementor et PowerPack peuvent vous faire gagner du temps, des efforts et vous aider à développer votre entreprise de conception de sites Web. De plus, les deux produits sont soutenus par une incroyable équipe d'experts WordPress pour que vous ayez l'esprit tranquille.