6 erreurs courantes que les utilisateurs font avec Elementor

Elementor a toujours été un leader en termes d'expérience utilisateur et de facilité d'utilisation. Cependant, même si nous visons à simplifier les choses, il y aura toujours une courbe d'apprentissage. Pour vous aider à démarrer du bon pied, nous avons décidé de répertorier les erreurs les plus courantes commises par les utilisateurs d'Elementor et les solutions à ces erreurs.

Si vous vous rendez compte que vous avez vous-même commis certaines de ces erreurs, ne vous culpabilisez pas. Maîtriser n'importe quel outil ou tâche signifie qu'il y a toujours un peu plus à apprendre. L'idée est de garder l'esprit ouvert si vous avez l'intention de perfectionner vos compétences. Passons en revue ces erreurs courantes et leurs solutions, afin que vous puissiez faire passer vos compétences Elementor au niveau supérieur.

Erreur #1 – Utiliser un thème incompatible

Commençons par la première erreur courante dans Elementor : utiliser un thème incompatible.

Elementor est un plugin universel. Il est conçu pour se conformer aux normes de codage WordPress, rendant ainsi tout thème qui suit le WordPress Codex compatible avec Elementor. Cela ne signifie pas, cependant, que tous les thèmes qui fonctionnent avec WordPress suivent les normes de codage, ni que tout le monde crée des thèmes avec Elementor à l'esprit. Pour cette raison, de temps en temps, nous entendrons des utilisateurs qui ont des problèmes pour modifier leur page.

Voici quelques problèmes courants qui proviennent de l'utilisation d'un thème incompatible :

• Ne pas avoir une page pleine largeur
• Difficulté à supprimer l'espace sous l'en-tête
• Ne pas pouvoir changer les polices ou les couleurs

Solution : changez de thème

Il existe plusieurs solutions pour éviter cette erreur :

Le plus simple est de changer votre thème en quelque chose de similaire qui soit compatible. Le meilleur endroit pour trouver des thèmes compatibles WordPress est sur leur référentiel. Encore mieux, utilisez des thèmes qui fonctionnent bien avec Elementor comme WooVina et Astra.

WooVina est un thème de démarrage léger, rapide et entièrement personnalisable pour Elementor. Le thème WooVina fournit plus de 50 sites de démonstration Elementor prêts à importer pour vos nouveaux projets Web.

Une autre façon de le résoudre est de contacter notre équipe d'assistance concernant le thème gênant et de leur demander de corriger le bogue. Alternativement, avec un peu de connaissance du code, faites-le vous-même en approfondissant le code et en le rendant compatible avec vos besoins.

Erreur n ° 2 - Utiliser des colonnes et des widgets d'espacement pour positionner les éléments

La prochaine erreur courante que nous avons rencontrée consiste à utiliser des colonnes et des widgets d'espacement pour positionner les éléments. Nous avons rencontré de nombreux utilisateurs qui ont positionné et aligné leurs éléments à l'aide de colonnes supplémentaires et du widget d'espacement dès le premier jour. Non seulement cela n'est pas nécessaire, mais cela nuit également à votre page.

Chaque fois que vous ajoutez une colonne à votre page, vous ajoutez un balisage à votre code HTML, qui agit comme le squelette de votre page. Tout ce balisage supplémentaire s'additionne, donnant aux systèmes plus de travail à faire, finissant par faire pencher la balance en ce qui concerne le temps de chargement de votre page. De plus, l'utilisation d'éléments de « contenu » vides pour organiser votre mise en page donne aux moteurs de recherche une mauvaise impression, ce qui entraîne un classement inférieur de votre site.

Solution : utilisez le rembourrage et la marge

Chaque élément et widget d'Elementor a des paramètres de marge, de remplissage et d'index Z. Beaucoup ont même des options d'alignement et de positionnement supplémentaires dans les onglets Contenu du widget et Style. En utilisant ces options, Elementor garantit que vous n'utilisez qu'un minimum de données pour votre code. De plus, la conservation de ces données dans le code CSS élimine davantage le besoin d'ajouter au code de balisage. Cela vous permet également de copier/coller l'espacement lorsque vous utilisez l'option Coller le style.

Juste un petit rappel : la valeur margin définit l'espace à l'extérieur du cadre du widget, tandis que la valeur padding définit l'espace à l'intérieur du cadre, entre le cadre et l'élément.
Habituez-vous à utiliser le rembourrage et les marges. Après tout, c'est pour cela qu'ils ont été conçus.

Erreur #3 – Utilisation incorrecte du widget de la section interne

Pendant que nous parlons de colonnes, il est temps de mentionner une autre erreur de colonne courante.

L'utilisation incorrecte d'un widget Inner-Section ou de ce que certains utilisateurs appellent le widget Column.
Comme vous le savez, la meilleure façon d'ajouter une nouvelle section est de cliquer sur Ajouter une nouvelle section. Malheureusement, certains utilisateurs ont pris l'habitude d'attribuer le nombre de colonnes à cette section, au profit du glissement d'un widget Inner-Section.

Solution : utilisez des colonnes régulières

Lors de la configuration d'une section, la meilleure pratique consiste en effet à utiliser le bouton Ajouter une nouvelle section, puis à sélectionner le nombre de colonnes que vous souhaitez. Cela permet non seulement de garder tout agréable et uniforme dans toute votre section, mais cela vous permet d'avoir certaines choses indépendantes, comme les arrière-plans et les avant-plans animés, tout en gardant le balisage léger.

Le widget Inner-Section a été conçu pour permettre aux utilisateurs de créer une distinction au sein d'une section quelque peu uniforme. Si tout ce que vous voulez faire est d'ajouter une colonne à votre section, faites un clic droit sur la poignée de la colonne et ajoutez une nouvelle colonne.

Erreur #4 – Modifier sans désactiver ni vider le cache

Une autre erreur courante consiste à modifier votre site Web sans désactiver ou vider votre cache au préalable. Les sites Web subissent continuellement des modifications et des mises à jour. C'est quelque chose que nous prenons pour acquis. Nous avons constaté que trop souvent, les utilisateurs passent des heures à apporter des modifications à leur site sur le back-end, pour découvrir que cela ne fait absolument aucune différence pour le site sur le front-end, où il est en ligne.

La mise en cache de nos sites est conçue pour résider sur le front-end et répondre aux demandes de contenu provenant des personnes visitant votre site Web. Un cache contient des données de contenu très demandées et permet de réduire le temps de téléchargement. Le plus souvent, nous avons le cache du navigateur, mais nous avons également un plug-in de cache et un cache de site Web sur le serveur de l'hôte.
À moins que nous informions le système que nous apportons des modifications, ces caches continueront d'envoyer le contenu que nous avons défini en premier lieu.

Solution : vider le cache

Voici quelques méthodes qui peuvent vous aider à éviter cette erreur :
L'actualisation de la page dans le navigateur videra le cache du navigateur. Vous pouvez le faire en appuyant sur Commande + R sur Mac ou Control F5 sur un PC.

Vous pouvez également accéder aux paramètres du navigateur et trouver l'option de suppression du cache.
Une autre façon de procéder consiste à ajouter un point d'interrogation après l'URL dans la ligne d'adresse, suivi d'un charabia. Cela oblige le navigateur à rechercher ces informations. Ce faisant, il recharge une nouvelle version de la page.

Certains utilisateurs utilisent des plugins de cache comme WP Rocket ou WP Fastest Cache, qui effectuent la mise en cache des données en dehors du navigateur pour aider à charger la page plus rapidement.

Ici, nous vous suggérons de désactiver le plugin de cache sur le tableau de bord WordPress avant de commencer à modifier ou à apporter des modifications à votre site. Si vous avez oublié de le faire, utilisez les options dans les paramètres du plugin pour vider le cache
Parfois, la mise en cache sur le serveur d'hébergement doit être actualisée. Nous pouvons vérifier que cela cause des problèmes si la page ne se recharge pas après avoir cliqué sur mettre à jour dans l'éditeur Elementor.
Si tel est le cas, sur le tableau de bord WordPress, accédez à Elementor> Outils> et dans l'onglet Général, cliquez sur le bouton Régénérer le CSS, puis sur Enregistrer. Vous pouvez trouver plus d'options pour des problèmes comme celui-ci, dans notre documentation.

Erreur n ° 5 - Utiliser des images de mauvaise taille

La prochaine erreur courante consiste à utiliser des images de mauvaise taille. Les utilisateurs qui téléchargent des images trop petites ou trop grandes pour la place allouée sur la page ne manquent pas. Modifiez ensuite les paramètres du widget d'image pour forcer l'image à s'adapter. Cela est également vrai pour les utilisateurs qui téléchargent des images de différentes tailles, dans des choses comme des galeries d'images ou des carrousels et trouvent qu'ils ont la même difficulté. Les lecteurs réguliers le sauront et conviendront sans doute que la planification est la clé pour travailler correctement et gagner du temps dans le processus.

Solution : Optimiser les dimensions et la taille de l'image

Planifier les tailles et les dimensions de chaque photo et préparer nos images à l'avance, en utilisant des outils de conception tels que Sketch ou Photoshop, ou même des sites en ligne comme Pixlr, vous fera gagner beaucoup de temps et de tracas.

Pendant que vous travaillez sur les dimensions de l'image, vous pouvez également travailler sur la taille du fichier. Les images haute résolution qui ralentissent le temps de chargement de votre page entraîneront certainement un grand nombre de visiteurs rebondissant sur votre site. Vous pouvez utiliser des outils comme Optimole pour réduire automatiquement la taille de l'image ou utiliser des services externes comme Tiny PNG.

Erreur #6 – Ne pas définir les couleurs par défaut

Passons à l'erreur suivante : ne pas définir les couleurs par défaut. Il existe de nombreuses options dans Elementor conçues précisément pour faciliter la vie des utilisateurs. Définir les couleurs par défaut de votre conception vous fera, encore une fois, gagner beaucoup de temps, tout en garantissant que votre palette de couleurs restera cohérente sur l'ensemble de votre site Web.

Solution : choisissez nos couleurs à l'avance

La meilleure pratique serait de le faire au début de la création de notre page, une fois que vous avez votre première page vierge ouverte dans Elementor. Dans le menu, choisissez les couleurs par défaut dans la palette et appliquez-les. Nous avons en fait couvert la mise en place de cela dans la masterclass précédente.

Conclusion

Cette liste ne couvre pas toutes les erreurs commises par les utilisateurs. Il y en a beaucoup d'autres que nous aurions pu mentionner, par exemple — coller du texte dans l'éditeur de texte, qui inclut un style en ligne, au lieu de nettoyer le texte. Toutefois, surmonter ces 6 erreurs vous permettra de prendre un bon départ et vous aidera à mieux comprendre et utiliser Elementor.

Vous seriez étonné de voir à quel point l'utilisation appropriée d'Elementor entraînera immédiatement une amélioration considérable des sites Web que vous produisez.

Si vous pensez que nous avons manqué des erreurs courantes qui devraient être mentionnées ou si vous avez rencontré des erreurs courantes que vous ou vos clients faites souvent en utilisant Elementor, veuillez les partager avec nous dans les commentaires ci-dessous.