Comment réduire le besoin de maincode des parties de thème dans votre site WordPress

Elementor Page Builder

Pendant longtemps, les gens rêvaient qu'ils seraient capable de mettre en place une page Web en faisant glisser et déposer différents éléments ensemble. C'est ainsi que les constructeurs de pages sont devenus populaires. Les concepteurs de pages ont introduit une expérience totalement différente de la construction d'une page – toutes les actions impliquant du contenu sont faites visuellement. Ils réduisent le temps nécessaire pour produire une structure désirable.

Et si nous prenions le CMS le plus populaire au monde et développions le constructeur de page le plus avancé pour cela? C'est ainsi que fut créé Elementor 1.0 pour WordPress. Voici quelques caractéristiques de l'outil qui mérite d'être mentionné:

• Montage en direct . Elementor fournit un montage en direct instantané – ce que vous voyez est ce que vous obtenez! L'outil est livré avec une interface de glisser-déposer en direct. Cette interface élimine les conjectures en vous permettant de construire votre mise en page en temps réel.
• Elementor est livré avec une tonne de widgets y compris pour les éléments de site Web les plus courants. En outre, il existe des dizaines d'add-ons Elementor créés par la communauté: https://wordpress.org/plugins/search/elementor/
• Conception adaptative sortie de boîte . Le contenu que vous créez avec Elementor s'adapte automatiquement aux appareils mobiles, garantissant ainsi que votre site Web est adapté aux mobiles. Votre design sera parfait sur n'importe quel appareil.
• Mobile-first design . Le générateur de page Elementor vous permet de créer un site Web véritablement réactif d'une toute nouvelle manière visuelle. Utilisez des tailles de police, des marges et des marges différentes par périphérique, ou même inversez l'ordre des colonnes pour les utilisateurs qui parcourent votre site Web à l'aide d'un périphérique mobile.
• Historique des révisions . Elementor dispose d'un navigateur d'historique qui vous permet d'avancer et de reculer dans vos modifications. Il vous donne la liberté d'expérimenter avec une mise en page sans crainte de perdre votre progression.
• La fonction CSS intégrée vous permet d'ajouter vos propres styles. Elementor vous permet d'ajouter du CSS personnalisé à chaque élément, et de le voir en action en direct dans l'éditeur.
• Indépendance du thème . Avec Elementor, vous n'êtes pas lié à un seul thème. Vous pouvez changer le thème quand vous le souhaitez, et votre contenu viendra avec vous. Cela vous donne, en tant qu'utilisateur WordPress, un maximum de flexibilité et de liberté pour travailler avec votre thème préféré, ou pour changer de thème et ne pas avoir à vous soucier de faire des changements.
• Référence complète du code et beaucoup de tutoriels . Elementor est un produit orienté développeur – c'est une solution open-source avec une référence de code complète . Si vous êtes intéressé par la création de vos propres solutions pour Elementor, consultez le site Web https://developers.elementor.com . Le site Web contient de nombreux didacticiels et explications utiles.

Il existe deux cas particuliers dans lesquels Elementor serait utile aux développeurs Web:

• Les développeurs Web qui ont besoin de créer très rapidement un prototype interactif . Elementor peut aider dans les situations où une équipe doit fournir une solution interactive mais n'a pas assez de temps pour le coder.
• Les développeurs Web qui ne veulent pas être impliqués dans des activités de post-développement . Elementor est parfait quand un site Web est développé pour un client qui veut faire lui-même beaucoup de changements sans avoir à écrire une seule ligne de code.

Rencontrez Elementor Pro 2.0 Theme Builder

Malgré tous les avantages d'Elementor 1.0 , il a également eu deux limitations sévères:

• Il y avait des parties d'un site Web WordPress qui n'étaient pas personnalisables. En tant qu'utilisateur, vous étiez limité à une zone spécifique de votre site Web: le contenu qui se trouve entre l'en-tête et le pied de page. Pour modifier d'autres parties du site Web (par exemple pied de page ou en-tête), vous avez dû modifier le code.
• Impossible de créer du contenu dynamique. Cela ne poserait aucun problème si le site Web ne contenait que des pages statiques (comme une page "À propos de nous"), mais il pourrait s'agir d'un obstacle si le site Web contenait beaucoup de contenu dynamique.

problèmes, l'équipe Elementor a publié le générateur de thème Elementor 2.0, avec une véritable fonctionnalité de création de thème. Elementor Pro 2.0 introduit une nouvelle façon de créer et de personnaliser des sites Web. Avec le Générateur de thèmes, vous n'avez plus besoin de coder des tâches de thème subalternes et vous pouvez vous concentrer sur des fonctionnalités de site Web plus approfondies. Vous êtes en mesure de concevoir la page entière dans le générateur de page.

Comment fonctionne Theme Builder

L'outil vous permet de créer un en-tête, un pied de page, des modèles uniques ou d'archives et d'autres zones d'un site Web en utilisant la même interface Elementor. Pour rendre cela possible, Elementor 2.0 introduit le concept de modèles globaux. Les modèles sont des unités de conception. Ils sont capables de personnaliser chaque zone de votre site Web.

Le processus de création d'un modèle est simple:

1. Choisissez un type de modèle.
2. Construisez la structure de votre page.
3. Définissez les conditions qui définissent où appliquer votre modèle.

Explorons chacune de ces étapes plus en détail en créant un site Web simple. Dans la section suivante, nous allons créer un site Web d'entreprise avec un en-tête et un pied de page personnalisés et un contenu dynamique (un blog et des archives). Mais avant de commencer le processus, assurez-vous d'avoir la dernière version de WordPress, avec le plugin Elementor Pro installé et activé. Il convient également de mentionner que vous devriez avoir un thème pour votre site Web. Elementor ne remplace pas votre thème; plutôt, il vous donne des possibilités de conception visuelle sur chaque partie du thème.

En-tête et pied de page personnalisés

L'en-tête et le pied de page sont l'épine dorsale de chaque site Web. Ils sont où les utilisateurs s'attendent à voir les options de navigation. Aider les visiteurs à naviguer est une priorité pour les concepteurs de sites Web.

Commençons par créer un en-tête. Nous allons créer un en-tête assez standard, avec le logo et le menu principal de l'entreprise.

Le processus de création d'un en-tête personnalisé commence par le choix d'un modèle. Pour créer un nouveau modèle, vous devrez aller à "Elementor" → "Mes modèles" → "Ajouter un nouveau"

Vous verrez une boîte de dialogue, "Choisir le type de modèle" ". Sélectionnez "En-tête" dans la liste des options.

Une fois que vous avez choisi un type de modèle, Elementor affichera une liste de blocs correspondant à ce type de contenu. Les blocs sont des mises en page prédéfinies fournies par Elementor. Ils vous font gagner du temps en prouvant des modèles de conception courants que vous pouvez modifier selon vos besoins. Alternativement, vous pouvez créer un modèle à partir de zéro.

Choisissons la première option de la liste ("Metro"). Vous pouvez voir que la première partie de la mise en page a un nouvel objet – un en-tête nouvellement créé.

Maintenant, vous devez personnaliser l'en-tête en fonction de vos besoins. Choisissons un logo et définissons un menu. Cliquez sur l'espace réservé "Choisissez votre image" et sélectionnez le logo dans la galerie. Il convient de mentionner que le modèle intègre le logo de votre site Web. C'est bien parce que si vous changez ce logo au niveau du site Web, l'en-tête sera automatiquement mis à jour sur toutes les pages. Ensuite, cliquez sur l'espace réservé du menu et sélectionnez le menu principal du site Web.

Lorsque le processus de personnalisation est terminé, vous devez implémenter l'en-tête révisé sur votre site Web. Cliquez sur le bouton "Publier". La fenêtre "Conditions d'affichage" vous demandera de choisir où appliquer votre modèle.

Les conditions définissent les pages auxquelles votre modèle sera appliqué. Il est possible d'afficher l'en-tête sur toutes les pages, de ne l'afficher que sur certaines pages ou d'exclure certaines pages de l'en-tête. Ce dernier cas est utile si vous ne voulez pas afficher l'en-tête sur des pages particulières.

Dès que vous publiez votre modèle, Elementor le reconnaîtra comme un en-tête et l'utilisera sur votre site Web.

Il est maintenant temps de créer le pied de page de votre site Web. Le processus est similaire. la seule différence est que cette fois vous devrez choisir le modèle nommé "Pied de page" et sélectionner la disposition de pied de page dans la liste des blocs disponibles. Choisissons la première option de la liste (celle qui dit "Rester en contact" sur le fond sombre).

Ensuite, nous devons personnaliser le pied de page. Changer la couleur du pied de page et l'étiquette de texte sous les mots "Rester en contact". Réutilisons la couleur de l'en-tête du pied de page. Cela rendra la conception plus cohérente visuellement

Enfin, nous devons choisir les conditions d'affichage. Semblable à l'en-tête, nous allons choisir d'afficher le pied de page pour l'ensemble du site Web.

C'est tout! Vous venez de créer un nouvel en-tête et pied de page pour votre site Web sans écrire une seule ligne de code. L'autre bonne nouvelle est que vous n'avez pas à vous soucier de la façon dont votre design apparaîtra sur le mobile. Elementor fait cela pour vous. Les éléments de l'interface utilisateur tels que le menu de niveau supérieur deviendra automatiquement un hamburger pour les utilisateurs mobiles

Single Post for Blog

Concevons une page de blog. Contrairement aux pages statiques, telles que "À propos de nous", le blog a un contenu dynamique. Elementor 2.0 vous permet de créer un framework pour votre contenu. Ainsi, chaque fois que vous écrivez un nouveau billet, votre contenu sera automatiquement ajouté à ce cadre de conception.

Le processus de création d'une page de blog commence par la sélection d'un modèle. Pour un article de blog unique, choisissez le type de modèle nommé "Single". Nous avons deux options de blocs à choisir. Choisissons le premier.

Le bloc que vous avez sélectionné possède tous les widgets requis, vous n'avez donc pas besoin de changer quoi que ce soit. Mais il est relativement facile d'ajuster le modèle si nécessaire. Un seul article est composé de widgets dynamiques tels que le titre du message, le contenu du message, l'image sélectionnée, les métadonnées, etc. Contrairement aux widgets statiques qui affichent le contenu que vous entrez manuellement, les widgets dynamiques dessinent du contenu à partir des pages en cours où ils sont appliqués. Ces widgets se trouvent dans le panneau "Elements", sous la catégorie "Thème Elements".

Lorsque vous travaillez sur un contenu dynamique comme un seul article, vous voulez voir à quoi il ressemble sur différents articles. Elementor vous donne un mode de prévisualisation pour que vous sachiez exactement à quoi ressemblera votre blog.

Pour passer en mode de prévisualisation, vous devez cliquer sur l'icône Aperçu (l'icône de l'œil dans la partie inférieure gauche de la mise en page), et ensuite "Paramètres".

Pour voir à quoi ressemblera votre page lorsqu'elle sera remplie de contenu, choisissez simplement une source de contenu (par exemple un article de la catégorie "Actualités").

Une fois que vous avez fini de créer du contenu dynamique, vous devez choisir quand le modèle sera appliqué. Cliquez sur le bouton "Publier", et vous verrez une boîte de dialogue qui vous permet de définir les conditions.

Archive

La page d'archive est une page qui montre un assortiment de messages. Votre page d'archives permet aux lecteurs de voir tout votre contenu et de plonger plus profondément dans le site Web. C'est aussi un endroit commun pour afficher les résultats de recherche.

Le Générateur de thèmes vous permet de créer vos propres archives en utilisant une taxonomie personnalisée. Pour créer une page d'archive, vous devez suivre les étapes habituelles: créer un nouveau modèle et choisir un bloc pour celui-ci. Pour l'instant, Elementor fournit un seul type de bloc pour ce type de modèle (vous pouvez le voir dans l'image ci-dessous).

Après avoir sélectionné ce bloc, il suffit de définir une source pour vos données ou s'en tenir à la sélection par défaut. Par défaut, la page d'archive affiche tous les articles de blog disponibles. Laissons-le tel quel

Comme vous pouvez le voir, nous avons personnalisé avec succès l'en-tête, le pied de page, la publication unique et la page d'archive du site, sans aucun barrage de codage. Nearor

Elementor est activement développé, avec de nouvelles fonctionnalités et des améliorations passionnantes publiées tout le temps. Cela signifie que le constructeur de thème va seulement aller mieux. L'équipe Elementor prévoit d'ajouter une intégration pour les plug-ins tels que WooCommerce, Advanced Custom Fields (ACF) et Toolset. L'équipe accueille également les commentaires des développeurs. Donc, si vous avez une fonctionnalité que vous aimeriez avoir dans Elementor, n'hésitez pas à contacter l'équipe Elementor et la suggérer .

Conclusion

Lorsque WordPress a été publié il y a 15 ans, l'idée était de gagner un temps précieux pour les développeurs et de rendre le processus de gestion de contenu aussi facile que possible. Aujourd'hui, il est largement considéré comme un outil convivial pour les développeurs. Elementor n'est pas différent. L'outil offre maintenant une flexibilité inédite pour concevoir visuellement un site web entier. Ne me crois pas? Essayez-le pour vous-même! Découvrir Elementor Pro aujourd'hui

(ms, ra, il, al, yk)