5 conseils d’experts pour améliorer votre workflow avec Elementor

Il existe de nombreuses raisons pour lesquelles les utilisateurs de WordPress choisissent Elementor plutôt que d’autres constructeurs de pages. Pour commencer, vous pouvez créer un site web au look incroyable sans jamais avoir à écrire une ligne de code. De plus, vous n’aurez pas à passer des semaines ou des mois à le concevoir.

Saviez-vous qu’Elementor peut également simplifier votre flux de travail de conception et de création de contenu ?

Bien sûr, il existe une multitude de modèles de pages et de blocs, ainsi que des dizaines de widgets qui vous évitent de devoir créer un site Web à partir de zéro. Cependant, vous pouvez travailler encore plus vite et plus intelligemment avec Elementor si vous savez comment tirer parti de certains de ses plans les moins connus.

J’ai dressé une liste de ces fonctionnalités qui amélioreront votre flux de travail et rendront Elementor encore plus facile à utiliser. Nous allons voir ci-dessous où vous pouvez accéder à ces plans et vous donner des conseils sur la façon de les utiliser comme le font les experts !

Comment améliorer votre méthode de travail avec Elementor

En tant que créateurs de sites Web, vous n’avez pas beaucoup de temps à perdre. Même avec les délais les plus souples, vous êtes soumis à une forte pression pour travailler aussi vite que possible, car vous ne savez jamais ce qui vous attend. Une urgence personnelle inattendue. Une vague de nouveaux clients. Un site web ou un client gênant qui vous empêche d’aller de l’avant.

C’est pourquoi un flux de travail de conception efficace est essentiel.

Voici quelques conseils pour améliorer encore plus votre flux de travail avec Elementor :

Conseil 1 : utilisez les raccourcis clavier pour accéder rapidement aux fonctionnalités ou effectuer des tâches.

Le temps que vous gagnez en utilisant les raccourcis clavier peut rapidement être additionné, surtout lorsque vous effectuez les mêmes actions à plusieurs reprises dans Elementor. En plus d’exécuter rapidement des tâches comme Copier, Coller et Annuler, les raccourcis clavier d’Elementor vous permettent d’accéder rapidement aux plans et d’effectuer des actions.

Pour accéder à la liste des raccourcis clavier d’Elementor :

  • Maintenez la touche CMD + ? sur un Mac
  • Maintenir la touche Ctrl + ? sur un PC

Explorons quelques-uns des raccourcis préférés de l’équipe Elementor, qu’ils utilisent au quotidien :

Afficher / masquer le panneau des widgets (CMD / Ctrl + P)

Lorsque vous utilisez l’éditeur, l’affichage par défaut place le panneau des widgets sur le côté gauche de l’écran. C’est utile pour la conception, mais pas tellement lorsque vous voulez avoir un aperçu de l’aspect de la page. Pour réduire le panneau, vous pouvez cliquer sur la flèche située sur le bord droit de celui-ci :

Vous pouvez accomplir la même chose en maintenant la touche CMD ou Ctrl enfoncée en même temps que la touche P. En utilisant à nouveau cette touche de raccourci, vous quitterez le mode de prévisualisation et ferez réapparaître le panneau des widgets.

Naviguer vers une autre page (CMD / Ctrl + E)

Quel que soit l’endroit où vous travaillez dans WordPress, vous pouvez utiliser la fonction de recherche Finder pour ouvrir rapidement une page, un article ou un modèle et commencer à le modifier. Il y a deux façons d’y accéder.

Dans l’éditeur Elementor, cliquez sur l’icône du menu hamburger, puis sélectionnez Finder :

Vous pouvez également accéder à cette fonction en maintenant la touche CMD ou Ctrl plus E enfoncée. La barre de recherche du Finder s’affiche alors :

Commencez à taper et le Finder remplira automatiquement les pages, les articles et les modèles qui correspondent à votre requête. Cliquez sur celui que vous voulez atteindre directement dans l’éditeur Elementor.

Vous pouvez également utiliser cet outil pour créer instantanément une nouvelle page ou un nouvel article sans avoir à revenir au tableau de bord de WordPress.

Ouvrir le Navigateur (CMD / Ctrl + I)

Vous pouvez créer des designs très complexes à l’intérieur d’Elementor. Cependant, à mesure que vous ajoutez de la complexité à vos conceptions et que les pages s’allongent, il peut devenir difficile de trouver, sélectionner ou déplacer l’élément exact que vous souhaitez.

C’est pourquoi le Navigateur est un outil indispensable pour les créateurs. Vous pouvez y accéder en sélectionnant la deuxième icône en partant de la gauche dans la barre d’outils inférieure :

Vous pouvez également maintenir la touche CMD ou Ctrl et I enfoncée pour l’ouvrir instantanément dans l’éditeur :

À partir de là, vous pouvez voir la répartition des éléments sur la page, trouver celui que vous voulez modifier et même le déplacer par glisser-déposer vers une nouvelle position.

Activer le mode responsive (CMD / Ctrl + Shift + M)

Il est généralement préférable d’adapter vos conceptions Web aux écrans de tablettes et de mobiles au fur et à mesure que vous les créez, plutôt que de conserver vos modifications en mode responsive pour la fin. Pour activer le mode responsive dans Elementor, vous pouvez faire l’une des deux choses suivantes.

Vous pouvez cliquer sur la deuxième icône en partant de la droite dans la barre d’outils inférieure :

Vous pouvez également maintenir la touche CMD ou Ctrl enfoncée, ainsi que les touches Maj et M, pour passer instantanément en mode « responsive » :

Vous utiliserez le même raccourci clavier pour basculer entre les vues bureau, tablette et mobile.

Conseil 2 : utilisez le widget modèle pour ajouter et gérer des blocs identiques

Il n’est pas rare de construire un site Web avec des blocs qui apparaissent sur différentes pages. Il peut s’agir, par exemple, d’un bloc d’appel à l’action, de témoignage ou de formulaire de contact.

Plutôt que de recréer le bloc à chaque fois qu’il apparaît, vous pouvez le modéliser et l’ajouter à vos pages à l’aide du widget Modèle :

La configuration est très simple. Tout d’abord, allez dans Modèles > Modèles sauvegardés dans le panneau gauche de WordPress. Sélectionnez Ajouter nouveau pour créer le nouveau bloc.

Dans cet exemple, nous avons inséré un bloc de contact existant de la bibliothèque dans notre nouveau modèle :

Une fois le modèle nommé et enregistré, vous pouvez maintenant ajouter le bloc à la page de votre choix à l’aide du widget Modèle :

Cette façon de procéder présente un certain nombre d’avantages. Tout d’abord, vous n’aurez pas à passer du temps à concevoir le même composant, encore et encore. Ensuite, vous n’aurez qu’à modifier le bloc à partir de vos modèles au lieu d’aller sur chaque page où il apparaît.

Astuce 3 : Utilisez la fonction "Copier tout le contenu" pour dupliquer les pages.

WordPress ne permet pas de dupliquer facilement les pages ou les articles. Il y a des plugins que vous pouvez utiliser qui vous donnent la possibilité de dupliquer votre contenu, mais pourquoi s’embêter à installer un plugin supplémentaire quand Elementor fournit déjà cette fonctionnalité pour vous ?

Voici comment procéder :

Faites défiler jusqu’au bas de la page que vous voulez copier. Faites un clic droit sur le dossier gris, et vous verrez apparaître une courte liste d’options :

Sélectionnez Copier tout le contenu. Vous pouvez maintenant ouvrir une autre page et coller le contenu. Pour ce faire, cliquez avec le bouton droit de la souris sur le dossier gris et sélectionnez Coller tout le contenu.

Conseil n° 4 : utilisez la fonctionnalité de lien dynamique pour créer des liens intelligents.

Que faites-vous lorsque vous modifiez le slug d’une page de votre site qui fait l’objet de nombreux liens ? Vous avez plusieurs possibilités.

L’une d’elles consiste à créer une redirection afin que les utilisateurs qui rencontrent l’ancienne URL soient automatiquement redirigés vers la nouvelle. Pour ce faire, vous devez installer un plugin spécifique ou modifier le fichier .htaccess.

Une autre façon de résoudre ce problème consiste à parcourir les pages de votre site et à les modifier une par une, qu’il s’agisse de liens texte ou de boutons. Cela peut être une tâche très fastidieuse, même pour les petits sites.

La meilleure solution consiste à créer des liens internes en utilisant plutôt le plan de liens dynamiques d’Elementor. Ainsi, plutôt que de saisir un lien statique (c’est-à-dire l’URL réelle) dans les paramètres de votre widget, vous créerez un lien intelligent.

Supposons que vous ayez un bouton qui pointe vers la même page sur l’ensemble de votre site. Dans cet exemple, nous voulons le faire pointer vers « Réserver une consultation » :

Dans cette capture d’écran, vous voyez le lien statique que beaucoup d’entre nous ont l’habitude d’utiliser. Cependant, c’est là que nous rencontrons le problème de devoir programmer des redirections ou de faire des modifications excessives pour réparer les liens internes.

Ce que vous voulez faire, c’est le définir comme un lien dynamique.

Pour ce faire, ouvrez l’élément lié (comme le bouton dans cet exemple). Allez dans le champ du lien, sélectionnez l’icône « Balises dynamiques » à côté de l’icône des paramètres. Faites défiler la liste jusqu’à Site et sélectionnez Internal URL.

Cliquez à nouveau sur le champ du lien et vous verrez apparaître une liste déroulante de paramètres. Définissez le Type : Content. Ensuite, effectuez une recherche sur le nom de la page ou du message dans la barre de recherche :

Choisissez le contenu vers lequel vous souhaitez créer un lien et enregistrez vos modifications. Elementor s’en chargera à partir de là.

Conseil n° 5 : Trier les couleurs et les polices de caractères globales pour une recherche plus rapide

Pouvoir définir des couleurs et des polices globales dans WordPress permet déjà de gagner beaucoup de temps dans le processus de conception web. Cependant, Elementor va un peu plus loin en vous permettant de trier vos paramètres personnalisés.

Pour les couleurs :

Vous pouvez trier vos couleurs globales par :

  • Fréquence d’utilisation – avec les plus utilisées en haut et les moins utilisées en bas.
  • Ensemble de couleurs – si vous avez certaines couleurs pour les boutons, les états de survol, etc.
  • Ordre alphabétique – si cela facilite la recherche de vos couleurs personnalisées.
  • Teinte – si vous trouvez qu’une disposition plus ordonnée et plus logique des couleurs est plus facile à utiliser.

Pour trier vos couleurs dans Elementor, cliquez sur l’icône du menu hamburger, allez dans les Réglages du site et choisissez Couleurs globales.

Lorsque vous passez la souris sur chaque couleur, vous verrez le code HEX être remplacé par une icône de glisser-déposer et une icône de poubelle. Saisissez la bande de couleur où se trouve l’icône de glisser-déposer, puis déplacez-la à son nouvel emplacement :

Vous pouvez également utiliser cet outil pour ajouter et supprimer des couleurs.

Pour les polices :

Même si votre site ne comporte que deux ou trois polices, vous pouvez avoir d’autres styles de polices qui s’appliquent à différents éléments du site – comme les CTA, les différents niveaux de titres, les menus de navigation, le texte du pied de page, etc. À ce titre, vos polices globales ont peut-être besoin d’être organisées, elles aussi.

Vous pouvez trier les polices par :

Fréquence d’utilisation – en plaçant les plus couramment utilisées plus haut.
Ordre alphabétique – si elles sont nombreuses et que vous pensez qu’elles seront plus faciles à trouver par leur nom.
Cas d’utilisation – en regroupant les polices de titres séparément des polices de texte.
Type – en les regroupant par type de police, par exemple avec ou sans empattement, etc.
Triez et organisez vos polices de la même manière que vous le faites pour vos couleurs. Cliquez sur l’icône du menu hamburger et allez dans les réglages du site. Cette fois, ouvrez le menu Polices globales. Ensuite, faites glisser et déposez vos polices à l’endroit voulu :

Cela peut représenter un gain de temps considérable si vous effectuez un travail de personnalisation important dans Elementor ou si vous créez des pages et des blocs à partir de zéro.