Elementor Pro + Champs personnalisés avancés = Révolutionnaire (2021)

Champs personnalisés avancés Elementer Pro +

At CollectiveRay, nous sommes un peu un mashup, nous sommes d'anciens développeurs, devenus concepteurs de sites Web, chefs de produits et nous voulons simplement que notre site Web fasse ce dont nous avons besoin sans avoir à mettre les choses en place. C'est pourquoi nous aimons expérimenter avec des combinaisons de fonctionnalités et de fonctions pour faire des choses juste travailler. La dernière combinaison que nous avons trouvée révolutionnaire pour notre façon de travailler est Elementor combiné avec des champs personnalisés avancés - vraiment, ces deux plugins fonctionnant en tandem ont fait passer notre travail au niveau supérieur.

Restez avec nous pour avoir un aperçu complet des capacités de ces deux plugins et de la manière dont ils peuvent être combinés pour créer une combinaison gagnante. Nous venons de revoir l'article dans Septembre 2021 et mis à jour avec tous les nouveaux détails pertinents si nécessaire.

Résumé

   Elementor  Champs personnalisés avancés
Prix Gratuit ou Pro à partir de 49 $ Gratuit ou Pro à partir de 25 $
Essai gratuit Elementor Designer Lite Champs personnalisés avancés
Performance  Léger et rapide - surtout par rapport aux autres constructeurs de pages N'est pas applicable
Ce que nous avons aimé  UI / UX soigné et organisé  Flexibilité, polyvalence
   Léger, conçu pour la vitesse  Fonctionnalités conviviales pour les développeurs
   Bonne sélection d'éléments  Ensembles de règles d'affichage avancées
   Formulaires personnalisés intégrés  Personnalisation du backend WordPress sans codage
Général
Site Entreprise Visitez Elementor Visitez ACF

Examen Elementor

Elementor est le constructeur de pages WordPress le plus populaire. Grâce à sa version gratuite et à son prix Pro bon marché (49 $), il a connu une croissance fulgurante. Le grand nombre d'éléments dont il dispose signifie que vous aurez besoin de très peu de plugins tiers supplémentaires. Il dispose également de capacités de création de thèmes et d'une vaste bibliothèque de modèles.

Commençons par nous plonger dans Elementor. Les constructeurs de pages étant à la mode ces jours-ci, il en faut un peu pour nous impressionner, mais Elementor avait fait exactement cela - nous impressionner.

Premières impressions 

Ce plugin ultra-perfectionné pour créer des pages et des articles par glisser-déposer est certainement un candidat sérieux pour des personnes comme nous à utiliser comme produit goto pour la conception de leurs propres sites.

Il n'est pas étonnant que ce plugin soit connu comme le # 1 WordPress Pagebuilder et vous le trouverez classé comme l'un des meilleurs produits dans toute comparaison de produits de sa catégorie.

L'une des premières choses que vous remarquerez en travaillant avec Elementor est la conception absolument épurée. Pas de désordre, bien organisé, ce plugin sera un plaisir de travailler avec ceux qui sont organisés de manière obsessionnelle, et bien sûr, pour tous ceux qui aiment juste que les choses soient bien organisées.

Vous pouvez voir que l'interface utilisateur des éléments (à gauche) est très facile à comprendre et à utiliser. L'actuel canvas (à droite) est également maintenu très propre en gardant les options à l'écart jusqu'à ce que vous cliquiez réellement sur un élément spécifique. Ce n'est qu'alors que les options s'affichent. Ceux-ci gardent tout comme ils le feraient sur le front-end réel, une fois la page ou la publication publiée.

Première utilisation d'Elementor

Performance

Une autre chose qui est immédiatement évidente lorsque vous utilisez Elementor est sa légèreté lorsque vous l'utilisez. Après avoir utilisé quelques-uns des constructeurs de pages les plus populaires, nous pouvons facilement ressentir une réelle différence perceptible. Alors que des plugins tels que Visual Composer et Divi peuvent prendre quelques secondes à charger et se sentir maladroits à utiliser, ce qui nuit à leur utilisation. Bien que finalement, vous deviez vous y habituer, ce n'est pas quelque chose dont vous pouvez profiter, c'est juste quelque chose avec lequel vous devez vivre parce que vous n'avez tout simplement pas le choix.

Lire la suite: 

Divi contre Beaver Builder: https://www.collectiveray.com/beaver-builder-vs-divi

Elementor contre Divi: https://www.collectiveray.com/elementor-vs-divi

Revue du thème Divi: https://www.collectiveray.com/divi-theme-review

Ce. Celui-ci en revanche est une bouffée d'air frais. En cliquant sur Modifier avec Elementor, la page ou l'article dont vous avez besoin pour éditer les charges presque immédiatement, nous oserions dire, pas très différent de ce que vous deviez charger l'article ou la page SANS le plugin activé, c'est-à-dire avec l'éditeur WordPress natif. 

Même en travaillant avec le générateur de glisser-déposer, vous pouvez sentir à quel point l'ajout ou la suppression d'éléments est instantané. Vous n'avez pas besoin d'attendre que le constructeur tâtonne et ayez ces quelques secondes de "temps d'attente" jusqu'à ce qu'un élément soit chargé. Vous choisissez, vous faites glisser, vous déposez, vous continuez à travailler - l'outil fonctionne avec vous, à votre rythme.

Comment l'utiliser 

Il existe deux façons d'utiliser Elementor. La façon dont vous choisissez de travailler avec cela dépend si vous envisagez de créer une page à partir de zéro ou si vous souhaitez partir de l'un des modèles existants disponibles pour les scénarios de site Web les plus courants.

Si vous voulez repartir de zéro, vous créez simplement une nouvelle page ou un article, puis cliquez sur le bouton Modifier avec Elementor, et le plugin est chargé, prêt à commencer l'édition.

Modifier avec Elementor

Cela ouvre alors une page propre, prête à commencer à ajouter les sections (lignes) dont vous avez besoin ou à charger à partir d'un modèle existant (nous en discuterons bientôt).

Page vierge ou article prêt pour l'ajout de modèles de widgets de sections

 

Lorsque vous cliquez pour ajouter une section (une ligne), vous êtes alors invité à choisir le nombre de colonnes que cette section aura réellement. Dans chaque colonne, vous pouvez ensuite ajouter les différents éléments disponibles. 

Définir la structure de la section (colonnes)

Une fois que vous avez défini la structure, vous pouvez maintenant commencer à faire glisser et déposer des widgets dans les différentes sections. Il existe, bien sûr, de nombreux widgets différents parmi lesquels choisir, des éléments simples fournis avec la version gratuite du plugin aux fonctionnalités et fonctions plus complexes disponibles avec la version PRO.

Éléments disponibles pour l'ajout

Éléments disponibles

De nombreuses fonctionnalités standard attendues d'un site Web sont disponibles sous forme de widgets qui peuvent être ajoutés à la page. Certains des widgets les plus attrayants à utiliser sont:

  • Icônes
  • Google Maps
  • Portfolio
  • Titre animé (texte en rotation ou encerclé)
  • Liste de prix ou tableau de prix
  • Appels à l'action
  • Témoignages
  • Compte à rebours
  • Commentaires et intégrations Facebook
  • Boîte auteur
  • Les barres de progression
  • Galeries d'images ou carrousels
  • Shortcodes
  • etc. etc.

Qu'il suffise de dire que dans un seul plugin, il y a tous les éléments dont vous pourriez avoir besoin d'utiliser sur une page.

Non seulement cela, mais Elementor va au-delà de la plupart des autres plugins. 

En effet, en plus de prendre en charge ses propres éléments natifs, le plugin prend également en charge les codes courts et les widgets WordPress standard. Cela signifie qu'en plus de prendre en charge tous ses propres éléments et TOUS les widgets WordPress, vous pouvez également intégrer toutes les fonctionnalités et fonctions tierces activées via des codes courts. Cela signifie à peu près que vous êtes pratiquement illimité dans ce que vous pouvez ajouter à une page ou à un article en cours de conception.

Essayez Elementor maintenant

Éléments dynamiques

Une autre fonctionnalité intéressante de ce générateur de page est sa capacité unique à concevoir des pages en utilisant un contenu dynamique plutôt qu'un contenu statique. C'est une fonctionnalité assez innovante et certainement quelque chose que nous avons rencontré souvent (ou pas du tout).

Bien sûr, c'est bien que vous puissiez faire glisser et déposer les éléments décrits ci-dessus, mais c'est devenu une fonctionnalité attendue de ce type d'outil.

Cependant, Elementor est allé au-delà de cela - en permettant des éléments de page dynamiques. Le moyen le plus simple d'expliquer cela serait d'utiliser le titre ou l'en-tête d'une page.

Supposons que vous souhaitiez concevoir une page qui affiche les actualités actuelles de votre entreprise. Maintenant, plutôt que d'utiliser le titre banal, «Dernières nouvelles», nous voulons présenter notre événement d'actualité. 

Donc, au lieu d'avoir la page construite en utilisant Elementor affichant un "titre" statique - nous utilisons l'élément de thème Titre de l'article qui interroge en fait le nom du titre actuel dans la base de données et l'affiche à la place de tout contenu générique.

Une autre excellente utilisation dans le même sens que celle-ci est l'image en vedette. En ayant une image en vedette dynamique, vous pouvez être sûr que c'est votre dernière image en vedette qui est réellement affichée (personnalisée pour l'événement de titre actuel), par opposition à une image générique que vous auriez à afficher à l'aide des éléments statiques.

Jetez un œil à la vidéo explicative de 2 minutes ci-dessous sur les éléments dynamiques d'Elementor.

ruMtMAVVF_Y

Modèles Elementor

Ci-dessus, nous avons vu comment une page ou un article peut être construit à partir de zéro en utilisant les éléments intégrés disponibles avec ce produit. Mais il y a un plus rapide, plus efficace façon de créer des pages. Ou, plutôt que de simples pages, vous pouvez facilement créer des sites Web complets en quelques minutes! C'est grâce à l'utilisation de modèles Elementor.

C'est une fonctionnalité qui devient un moyen très efficace d'utiliser un constructeur de page. Essentiellement, l'idée est la suivante: plutôt que de créer les pages vous-même à partir de zéro, avec le risque de tout gâcher (en particulier si vous n'êtes généralement pas exposé à la conception de sites Web ou à la conception en général), vous utilisez un modèle de page prédéfini. .

Une fois que vous avez sélectionné un modèle, votre seul travail consiste à personnaliser légèrement les éléments en fonction des besoins de la page ou du message que vous créez. Que ce soit pour un client ou pour vous-même, votre travail consisterait à modifier le contenu pour refléter les besoins du site Web que vous créez.

Ceci, bien sûr, réduira considérablement votre temps de conception. Non seulement cela, mais cela garantira également que votre conception sera celle d'une entreprise de design professionnelle, plutôt que celle de quelqu'un qui n'est peut-être pas totalement habitué à la conception.

Il existe plus de 100 modèles disponibles par défaut avec Elementor Pro, mais ce n'est pas tout.

Les modèles Elementor sont désormais une industrie de niche en soi. Vous constaterez qu'il existe des centaines d'autres plugins gratuits et premium disponibles à l'achat et au téléchargement, pour couvrir et niches, l'industrie ou les besoins.

Modèles Elementor

Pour ne citer que quelques-uns des modèles disponibles, on peut trouver

  •  Interior design
  • Modèle d'application
  • Café, restaurant et services de repas
  • Pages de produits
  • Fitness
  • Cabinet d'avocats
  • Copywriter
  • Agence et créatifs
  • Hôtels
  • L'architecte ;
  • Mariage
  • Dessinateur graphique
  • Démarrage
  • Perso
  • CV
  • Portfolio
  • Ebook
  • et bien d'autres.

Elementor - Page de destination de la photographie

Nous vous conseillons de visiter bibliothèque.elementor.com pour consulter la liste complète des modèles de pages de destination WordPress disponibles par défaut avec le plugin, où vous pouvez également voir une démo réelle de la page exacte qui serait créée par le modèle.

Prix

Elementor est disponible en six saveurs:

prix élémentaire

  • Gratuit
  • Essentiel (pour 1 site) - 49 $
  • Avancé (pour 3 sites) - 99 $
  • Expert pour (25 sites) - 199 $
  • Studio (pour 100 sites) - 499 $
  • Illimité (sites illimités) - 999 $

Tous les plans incluent 1 an de mises à jour et de support. Avec le prix ridiculement bon marché de 49 $, quand il vous faudra littéralement quelques heures au maximum (sur la base des modèles) pour créer un tout nouveau site à partir de zéro - nous pensons que c'est un excellent rapport qualité-prix. 

Si vous êtes un concepteur, il est probable que vous créiez plus de 4 sites Web par an (même compte tenu de la vitesse de développement des sites maintenant que vous avez Elementor dans votre arsenal), il est donc fortement recommandé d'opter directement pour le Plan illimité immédiatement. 

Code de réduction Elementor

Chaque fois que nous avons un code de réduction ou un code de réduction Elementor, nous le publierons ici, afin que vous obteniez le meilleur prix.

Le lien ci-dessous vous mènera au site officiel où vous obtiendrez le meilleur prix sur Elementor en Septembre 2021.

Cliquez ici pour le prix le plus bas sur Elementor

 

Jetez un œil à ce que certaines personnes ont dit à propos du plugin:

témoignages

 

Champs personnalisés avancés

La prochaine partie de notre article attire l'attention sur un autre plugin que nous adorons, Advanced Custom Fields.

Nous commencerons par un bref aperçu de ACF, après cela, nous nous concentrerons sur la façon de combiner les champs personnalisés avancés et Elementor pour obtenir des résultats étonnants. Révolutionnaire même.

Pour les non-initiés, ACF permet à un utilisateur de créer des champs personnalisés pour éditer des écrans afin d'améliorer à la fois l'expérience de l'utilisateur créant le site et bien sûr, finalement, l'utilisateur visitant le site.

Juste comme une brève introduction

  • Le générateur de champs ACF permet d'ajouter des champs aux écrans d'édition WP en quelques secondes
  • Les champs peuvent être ajoutés à n'importe quel contenu, messages, utilisateurs, termes de taxonomie, médias, commentaires ou n'importe où ailleurs
  • Vous pouvez ensuite afficher les champs n'importe où, avec des fonctions conviviales pour les développeurs

En tant que développeur / concepteur, dès que vous voyez ce qui précède, votre esprit peut rapidement commencer à courir sur les énormes possibilités disponibles. Avec ce qui précède, vous pouvez littéralement créer une "copie personnalisée" de WordPress qui est exactement adaptée aux besoins de chaque client que vous avez. 

Vous saurez probablement que la plupart des clients, même s'ils seraient heureux d'utiliser WordPress, auront toujours leurs propres exigences. Vous savez également que modifier le code principal pour implémenter ces modifications est généralement une mauvaise idée car cela signifie que vous ne pourrez pas obtenir les mises à jour principales, ce qui crée des risques de sécurité importants pour cette installation.

ACF vous permet de "personnaliser" WordPress, sans toucher à aucun code de base, simplement via un plugin.

Vous pouvez en savoir plus sur les plugins ici : https://www.collectiveray.com/wp/plugins/

Et bien sûr, il n'y a pas que nous qui sommes enthousiasmés par les possibilités d'utiliser les champs personnalisés avancés. C'est l'un des plugins les plus populaires, installés et les mieux notés. Étant donné que cela est orienté concepteur / développeur, vous pouvez voir que les statistiques d'installation ci-dessous sont tout simplement extraordinaires.

Donc, avant même d'aller plus loin, il est bon de noter que ce plugin compte plus d'un million d'installations actives et bénéficie d'une note de 1 étoiles sur plus de 5 avis. C'est une réalisation exceptionnelle si vous deviez me le demander.

Champs personnalisés avancés, installations actives et révisions en cours 

Création de champs personnalisés

Le point fort d'ACF est, bien entendu, la création de champs personnalisés qui peuvent ensuite être entièrement combinés dans des formulaires complexes. Nous voyons cela comme étant très utile pour créer une variété de choses:

  • Les formulaires de contact personnalisés demandent au visiteur des informations détaillées et spécifiques qui peuvent être utilisées pour mieux répondre à leurs requêtes. Par exemple, si votre client est un client orienté vers le service ou la fabrication, vous pouvez client un formulaire complexe qui pose des questions très spécifiques sur les besoins du visiteur. Finalement, toutes ces informations combinées pour émettre un meilleur client ou donner une meilleure réponse à la requête spécifique.

Tout cela ne fait qu'effleurer la surface de ce qu'ACF peut faire dans la réalité. Compte tenu de sa concentration sur les développeurs, il n'est pas étonnant que ce plugin soit si populaire. Une fois les champs personnalisés créés, on peut facilement intégrer ces champs dans

  • Thèmes - en tant que développeur d'un thème, vous pouvez en fait inclure les champs et fonctions personnalisés que vous avez créés pour personnaliser votre travail afin que vos utilisateurs puissent bénéficier de ces personnalisations - pensez, par exemple, à la possibilité de créer différents formulaires personnalisés pour différentes niches
  • Plugins - encore une fois en tant que développeur de plugins, vous pouvez en fait personnaliser des formulaires spécifiques pour créer des fonctionnalités étendues pour des fonctionnalités spécifiques de WordPress ou votre propre plugin - vous pouvez en fait utiliser ACF pour concevoir des fonctionnalités de formulaire étendues qui pourraient être utilisées pour personnaliser la capture de données de votre brancher

Encore une fois, en tant que développeur, ou même en tant que concepteur Web, vous pouvez déjà commencer à voir (et probablement vous enthousiasmer) le potentiel d'ACF.

Alors commençons à jouer un peu avec ACF et voyons de quoi il est capable. Jetez un œil ci-dessous au formulaire suivant que nous avons créé en quelques minutes. Nous aimerions attirer votre attention sur quelques points auxquels nous ne nous attendions pas.

Créer un formulaire personnalisé

Outre vos champs de formulaire standard tels que le texte, la case à cocher et la sélection, le sélecteur de date et vos options d'exécution standard de l'usine, ACF prend également en charge

  • Types de publications relationnelles - ce type de champ vous permet d'afficher des éléments (tels que des articles et des pages) qui existent déjà sur le site actuel. Donc, encore une fois, imaginons un instant que nous sommes un développeur de thèmes et que nous voulons donner à l'utilisateur la possibilité de sélectionner quelques articles à afficher sur la page d'accueil. En utilisant les filtres avancés de ce type, nous pouvons facilement créer une interface utilisateur qui nous permet de faire tout cela. Nous avons également accès à des éléments tels que les pages, les taxonomies, les utilisateurs et les rôles.
  • Google Maps, sélecteur de date et ColorPicker - ces types de champs sont tous alimentés par jQuery et sont tous pris en charge par défaut (même avec la version gratuite d'ACF)
  • Règles - les champs peuvent être affichés ou non selon une logique conditionnelle que vous pouvez définir via l'interface utilisateur ACF. Cela signifie que votre formulaire peut être adapté aux entrées de l'utilisateur, en affichant des champs supplémentaires ou en masquant d'autres si nécessaire en fonction de ce que l'utilisateur saisit réellement
  • Les options - la finale et cerise sur le gâteau, vous permet de décider des options exactes de comment et où vous souhaitez afficher votre formulaire. Que vous souhaitiez afficher le formulaire en haut de la page (dans le backend), en utilisant une Metabox ou non et d'autres options.

Voici une liste complète de tous les types de champs disponibles:

  • Texte - Champ de texte sur une seule ligne avec prise en charge HTML facultative et limites de caractères
  • Zone de texte - Identique au texte mais peut avoir plusieurs lignes
  • Number - Champ numérique pouvant avoir des valeurs min / max optionnelles pour les limites et la validation
  • E-mail - Champ personnalisé pour la saisie d'e-mail, y compris la validation
  • Mot de passe - Saisie du mot de passe avec masquage de texte
  • WYSIWYG Editor - Entrée de l'éditeur WordPress avec des options d'insertion multimédia et des boutons d'édition
  • Image - Téléchargez une image ou sélectionnez-en une dans la bibliothèque multimédia. Renvoie un objet, une URL ou un ID.
  • Fichier - Identique à l'image mais pour les fichiers en général
  • Sélectionner - Menu déroulant avec prise en charge de plusieurs sélections
  • Case à cocher - Champ de case à cocher pour un ou plusieurs éléments
  • Bouton radio - Choisissez un seul élément via le bouton radio
  • Vrai / Faux - Sélecteur de base vrai ou faux
  • Lien de page - Renvoie l'URL de n'importe quel article ou page. Peut être limité à des types de publication spécifiques.
  • Objet de publication - Renvoie un objet WordPress de n'importe quel article ou page, type d'article ou taxonomie
  • Relation - Identique à l'objet de publication mais avec une interface avancée et une réorganisation par glisser-déposer
  • Taxonomie - Renvoie un objet ou un ID pour une ou plusieurs taxonomies. Peut être limité à des balises, des catégories ou des termes de taxonomie personnalisés.
  • Utilisateur - Sélectionnez un ou plusieurs utilisateurs. Option pour limiter le choix par rôle d'utilisateur.
  • Google Map - Définissez un centre, un niveau de zoom et une largeur
  • Sélecteur de date - Sélectionnez une date de calendrier et renvoyez une chaîne de date formatée
  • Sélecteur de couleurs - Sélectionnez une couleur hexadécimale
  • Message - Laisser un message
  • Onglet - Combinez les champs dans une interface à onglets 

 

Il est difficile de penser à des scénarios que les fonctions ci-dessus ne couvrent pas. Il n'est pas étonnant que le plugin s'appelle Advanced Custom Forms, car la fonctionnalité fournie est très puissante entre les mains de quelqu'un qui sait comment exploiter ces fonctionnalités. il est extrêmement flexible et peut permettre d'étendre les fonctions standard de WordPress, uniquement limité par votre imagination.

La grande chose est que toute cette personnalisation est effectuée sans toucher à une ligne de code et, plus important encore, sans toucher aux fichiers principaux, ce qui vous garantit de ne créer aucun problème de sécurité pour les sites Web que vous personnalisez.

C'est sans aucun doute un changement de jeu.

Frontend vs Backend 

À partir des exemples et des options ci-dessus, vous pouvez voir qu'ACF peut être utilisé à la fois dans le front-end et sur le backend. Maintenant, vraiment et vraiment, nous savons qu'il existe un million et un plugins de formulaire, qui vous permettent de créer des formulaires personnalisés pour le backend.

Le véritable avantage vient de la possibilité de modifier les pages d'administration de WordPress - cela fait essentiellement de ce produit un produit conçu par des développeurs pour des développeurs et des concepteurs. En tant que développeurs, ils connaissent et comprennent les limites du fonctionnement uniquement dans les limites de WordPress.

C'est donc un produit qui permet aux développeurs et aux concepteurs de repousser les limites de WordPress, non pas depuis le frontend, mais surtout au niveau des possibilités offertes à l'administrateur ou au webmaster WordPress.

Maintenant que nous avons vu les capacités d'ACF et d'Elementor, donnons quelques exemples de la manière dont ils peuvent fonctionner ensemble.

Formulaires de contact personnalisés

Nous avons déjà discuté ci-dessus de la façon dont un formulaire de contact personnalisé spécifiquement pour votre service, votre industrie ou votre produit contribuera grandement à la conclusion d'une nouvelle entreprise. Voyons donc ce que nous pouvons faire en utilisant Elementor et Advanced Custom Fields.

Nous avons déjà créé un formulaire personnalisé pour un secteur spécifique (il est encore assez générique par nature, mais vous avez l'idée, vous pouvez ensuite personnaliser et ajouter des champs selon votre cas spécifique).

Alors maintenant, nous voulons ajouter ce formulaire à une page Contactez-nous créée par Elementor. Nous créons la page Contactez-nous, et plutôt que de la concevoir à partir de zéro, nous allons choisir un modèle parmi les modèles prêts à l'emploi.

modèle de page de contact

Maintenant que nous avons une base par où commencer, ajoutons notre propre formulaire personnalisé:

Nous avons supprimé l'existant de contact et déposé le widget de formulaire et personnalisé le formulaire de contact pour créer notre propre formulaire de devis personnalisé - littéralement en quelques minutes, nous avons terminé.

Conception d'un formulaire de devis personnalisé

Et c'est la beauté d'utiliser ces deux plugins. Que vous souhaitiez créer des formulaires personnalisés dans le backend pour vos propres thèmes et plugins, ou que vous souhaitiez utiliser des formulaires personnalisés dans le front-end, les possibilités sont infinies.less.

Une chose que nous souhaitons pouvoir faire, et nous sommes sûrs que l'équipe d'Elementor finira par s'intégrer dans ses produits, serait la possibilité de créer des formulaires à l'aide d'ACF et de les ajouter directement dans le constructeur de pages. 

MISE À JOUR Septembre 2018 - les nouvelles versions de ces deux plugins peuvent désormais s'intégrer directement. Les formulaires personnalisés créés dans ACF peuvent désormais être intégrés directement dans Elementor à l'aide de types de publication personnalisés.

Combiner ACF et Elementor

C'est donc quelque chose que les deux plugins ont manqué il y a quelques mois, lorsque nous examinions ces deux produits. Nos lecteurs ont également découvert quelque peu déroutant et décevant de ne pas pouvoir le faire.

Comme un bon critique devrait le faire, nous avons contacté l'équipe de développement et avons suggéré que cela devrait être intégré à ces deux produits, afin de pouvoir créer une belle solution d'intégration entre les deux.

Et comme le fait une bonne équipe qui veille sur ses clients, ils ont rapidement sauté dessus et seulement quelques mois plus tard, nous avons de nouvelles versions des deux produits qui offrent désormais une intégration directe.

Cela peut être possible en utilisant des types de publication personnalisés dans WordPress. Pour ceux qui ne sont pas familiers, les types d'articles personnalisés les plus courants sont les articles, les pages et les pièces jointes, mais il y en a plus. Les autres types de publications courants que vous pourriez avoir vus sont les produits WooCommerce, les témoignages, les événements, les critiques, les portefeuilles ... et bien d'autres. 

En d'autres termes, les types de publication personnalisés sont un type spécifique de «contenu» qui prend un certain format.

Il faut noter qu'il est également possible à 100% de définir de nouveaux types d'articles personnalisés si vous avez un contenu spécifique qui doit être «structuré».

Essentiellement, ce que vous devrez faire pour créer un type de publication personnalisé est soit d'utiliser un plugin de publication personnalisée pour définir les nouveaux champs dont vous aurez besoin, soit de le faire en utilisant du code.

Les gars d'Elementor ont créé un article détaillé très détaillé sur comment effectuer cette intégration.

Le moyen le plus simple de le faire est d'utiliser le plugin CPT UI que vous pouvez trouver ici. Nous ne passerons pas en revue tous les détails de la création d'un type de publication personnalisé, il existe de nombreux articles, bien que nous vous recommandons vivement de visiter celui-ci.

Type de publication personnalisé de l'interface utilisateur CPT

Une fois que vous avez créé le type de publication personnalisé, vous devez maintenant créer les champs personnalisés à l'aide d'ACF et afficher uniquement les champs spécifiques en fonction du fait que le type de publication est celui que vous venez de définir.

créer des champs personnalisés avec acf

 

Pour pouvoir afficher ces types de publication personnalisés sur les pages de blog, il faut comprendre comment ces types de publication personnalisés fonctionnent dans les différentes zones de votre site.

Si vous deviez imaginer un type de message personnalisé, vous pouvez l'ajouter dans n'importe quelle page ou publication que vous utilisez. Vous pouvez également créer un «message» complet en utilisant le type de message personnalisé.

Pour les utiliser avec Elementor, nous utiliserons des modèles et voici les étapes que vous devrez suivre:

  • Créez un nouveau modèle unique, vous pouvez lui donner le nom de votre nouveau type et ajouter un nouveau widget de texte. À titre d'exemple, nous utiliserons le widget d'en-tête. 
  • Cliquez sur l'icône dynamique et choisissez Champ ACF. Cliquez à nouveau dessus, et sous «clé», choisissez le type de publication personnalisé que vous avez créé. Le contenu que vous avez ajouté précédemment apparaîtra maintenant.
  • Il ne vous reste plus qu'à publier et vous pouvez désormais utiliser ce modèle dans votre contenu.

 

Si vous souhaitez pouvoir réutiliser ces types de contenu et ces champs, vous pouvez les utiliser dans les modèles Elementor. À l'aide de la fonctionnalité Générateur de thèmes, vous pouvez créer des modèles à l'aide de ces types personnalisés, en sélectionnant les champs dans le contenu dynamique.

Visitez Elementor pour une explication plus détaillée des types de publication personnalisés

Extras Elementor

Maintenant que nous avons parlé de ces deux excellents produits en détail, nous aimerions nous diversifier un peu. Lorsque des plugins comme ceux-ci atteignent une telle popularité, il est inévitable qu'ils deviennent une niche et une industrie à part entière et commencent à attirer des éditeurs de logiciels qui créent en fait d'autres extensions pour étendre les fonctionnalités de ces plugins.

Nous allons donc examiner un certain nombre d'extras Elementor que vous voudrez peut-être envisager pour pousser plus loin la fonctionnalité.

Addons ultimes pour Elementor

Il s'agit d'un ensemble de widgets qui visent à ajouter plus de fonctionnalités et de flexibilité au constructeur de pages. Étant donné que ces widgets proviennent de Brainstorm Force, la société derrière WP Astra, vous pouvez comprendre que la qualité de ces fonctionnalités est d'un très haut niveau.

Addons ultimes

Il y a plus de 24 widgets disponibles au moment de la rédaction, y compris, mais sans s'y limiter:

  • Chronologie: - c'est un moyen génial d'afficher des graphiques chronologiques, des feuilles de route ou d'autres éléments temporels
  • Basculer le contenu - cela permet à votre utilisateur final de basculer entre des éléments de contenu spécifiques, par exemple, vous souhaitez afficher la tarification mensuelle ou annuelle ou d'autres bascules de prix similaires
  • Popup modal - un moyen propre et facile de créer des fenêtres contextuelles, pour des éléments tels que les abonnements à la newsletter ou tout autre contenu que vous souhaitez présenter.
  • Heures d'ouverture - utilisé pour rendre vos heures de travail plus attrayantes et plus professionnelles
  • Google Map - une fonction essentielle pour tout site pour une entreprise locale, pour s'assurer que les clients savent où vous vous trouvez
  • Liste de prix et boîte de prix - la tarification est, bien sûr, une autre fonction essentielle si vous êtes dans le secteur de la vente de services ou de forfaits

La beauté de cet ensemble de widgets réside dans les différentes structures de prix.Si vous optez pour l'offre groupée d'agence, vous obtiendrez même une copie gratuite du plugin Astra Pro et WP Portfolio en plus d'un certain nombre de sites Web de démarrage prêts à l'emploi pour relancer votre conception Web travailler.

Crocobloc

C'est une entreprise qui est de grands fans d'Elementor et qui a créé un bon nombre de plugins premium tels que:

  • JETElements - un certain nombre de beaux widgets pour styliser vos pages à merveille tels que des tableaux de prix, SVG en ligne, des chronologies, des barres de progression, des mises en page de maçonnerie et bien plus encore, vous avez le choix entre plus de 40 widgets
  • JETMenu - un moyen simple de créer un Mega Menu facile à utiliser et personnalisable
  • JETabs - un excellent moyen d'organiser des pages encombrées qui nécessitent de nombreuses informations essentielles telles que les pages produits
  • JETWoobuilder - c'est un autre excellent produit qui est essentiellement un excellent moyen de créer des pages WooCommerce qui vendent
  • Moteur d'avion - c'est un plugin qui est excellent pour créer du contenu dynamique dans vos pages, tel que des champs dynamiques, des méta, des liens et même des images et des mises en page.

Plugins Crocoblock

Dans l'ensemble, avec Crocobloc, vous avez un seul fournisseur qui peut répondre à tous vos besoins WordPress. À la fois leur thème Kava, les multiples widgets Elementor, divers plugins et bien plus encore, tous disponibles à un prix énorme via le package Lifetime, c'est une excellente affaire.  

 

Élémentor contre Beaver Builder

Lectures recommandées: Beaver Builder vs Elementor - Un guide ultime et une comparaison (2019) 

Il existe de nombreux produits différents pour créer des sites Web WordPress. Sans aucune hésitation, nous pouvons dire que ce produit est certainement l'un des produits les plus populaires et les plus réussis du marché, atteignant 5 millions d'installations actives en septembre 2020.

Mais ce n'est sûrement pas le seul que vous pouvez utiliser. Par exemple, alors que les concepteurs de sites Web et les administrateurs de sites Web ont une préférence pour le générateur de pages par glisser-déposer, les développeurs Web ont généralement tendance à préférer des cadres tels que Beaver Builder ce qui leur donne plus de flexibilité plutôt que de leur donner uniquement l'option prise en charge par le plugin.

Il y a beaucoup plus de points à discuter lorsqu'il s'agit de comparer Elementor à Beaver Builder. En fait, nous venons de passer en revue ces deux éléments et de créer une comparaison complète et un guide ultime que vous pouvez voir sur le lien ci-dessus.

Réflexions finales

Nous pensons qu'Elementor fixe la barre en ce qui concerne les constructeurs de pages - et cela la place assez haut.

C'est certainement l'un des meilleurs constructeurs de pages et d'autres fournisseurs se feraient une faveur s'ils regardaient ce produit pour s'assurer qu'à tout le moins, ils fournissent le même niveau de fonctionnalités qu'Elementor.

Non seulement cela, mais en tant que concepteur et développeur, la combinaison de l'utilisation d'Elementor et d'ACF pour alimenter vos propres thèmes personnalisés vous donne la possibilité de commencer à créer des thèmes très de niche, qui s'adressent à des industries très spécifiques, d'une manière qui n'était guère possible auparavant.

Nous pensons que ces deux plugins changent la donne en eux-mêmes, mais ensemble - une vraie combinaison gagnante.

Cliquez ici pour le prix le plus bas sur Elementor

A propos de l'auteur
David Attard
Auteur: David AttardSite Web : https://www.linkedin.com/in/dattard/
David travaille dans ou autour de l'industrie en ligne / numérique depuis 18 ans. Il possède une vaste expérience dans les industries du logiciel et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plates-formes numériques disponibles aujourd'hui.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...