CSS Hero Review (2022) : #1 Plugin d'éditeur de thème WordPress en direct
Publié: 2022-03-17Un site Web est l'outil de marketing le plus important pour une entreprise. C'est la première impression que les clients potentiels auront de votre entreprise. Un site Web bien conçu peut vous aider à attirer de nouveaux clients et à les faire revenir
Donc, si vous cherchez un excellent moyen d'améliorer l'expérience utilisateur de votre site Web, vous devriez envisager d'utiliser CSS Hero.
Il est facile de comprendre qu'une seule ligne de code incorrect ou qu'il manque une virgule peut ruiner votre site Web. Ainsi, avec la plupart des constructeurs de pages, vous pouvez facilement personnaliser visuellement votre site Web.
Pourtant, tout le monde n'aime pas Elementor ou WP Bakery. Pour eux, CSS est un casse-tête car le thème WordPress peut ne pas avoir la capacité d'édition dont ils ont besoin.
Pour pallier ces difficultés, vous pouvez utiliser le plugin WordPress CSS Hero . Il génère automatiquement le code CSS de votre site WordPress sans avoir à toucher à une ligne de codage.
Je partage ici mes réflexions sur cet outil génial. Aussi, comment en tirer le meilleur parti.
Vous pouvez lire CSS Hero Vs Yellow Pencil: The Best comparé
Examen CSS Hero: Une introduction rapide
CSS Hero est un éditeur CSS visuel qui vous aide à gérer et à personnaliser l'apparence du thème de votre site Web. Il fournit un ensemble d'outils pour vous aider à créer des styles personnalisés et à les appliquer à des éléments spécifiques de votre page, et à prévisualiser leurs effets en temps réel.
Les outils qu'il fournit sont les classes CSS, qui vous permettent d'ajouter des styles communs et des styles personnalisés sans écrire de code CSS. Le héros CSS vous permet de les modifier de toute façon, contrairement à un constructeur de page où vous créez ou modifiez des éléments à partir de zéro.
La fonction d'annulation et de rétablissement aide les débutants à mettre à niveau n'importe quel thème WordPress sans le casser. L' éditeur visuel vous permet de cliquer sur des éléments et de voir les modifications dans un aperçu en direct.
CSS Hero ajoute tous les codes dans un fichier séparé , vous n'avez donc pas à vous soucier de perdre les propriétés CSS si vous modifiez quoi que ce soit.
En outre, vous pouvez ajouter les modifications des propriétés CSS personnalisées dans un thème enfant et les transférer à tout moment ou sur tout autre site Web.
Présentation rapide des principales fonctionnalités de CSS Hero
CSS Hero est un éditeur Visual CSS sans codage. Les développeurs CSS débutants et experts peuvent en tirer parti. Donc, pour le rendre utilisable pour les deux, ils ont ajouté de nombreuses fonctionnalités. Voici une liste de ceux-ci.
- Interface utilisateur simplifiée
- Beaucoup de personnalisation
- Styles prêts à l'emploi
- Inspecteur de héros CSS
- Style CSS complexe
- Sélecteur de couleurs intégré
- Animateur
- CSS généré
- Empreinte Légère
- Ajouter des images d'arrière-plan
- Aperçu mobile en direct avec le mode tablette
- Plus de 600 polices
- Arrière-plan vidéo pour n'importe quelle section
- Éditeur visuel JS
- Aperçus en direct
- Extrait intégré
- Bibliothèque de palettes de couleurs
- Déblocage pour l'édition de n'importe quelle partie du site Web
- Créer une page de connexion
- Historique du flux de travail
En plus de toutes ces excellentes fonctionnalités, vous bénéficiez également de bonus avec les abonnements premium.
- Media Query Manager : cela permet de définir différents médias pour différents appareils.
- Exportateur de code CSS : exportez les codes du site de la scène vers le site en direct.
- Mode survol : la nouvelle version inclut la prévisualisation du mode survol.
Comment utiliser le plugin CSS Hero ?
CSS Hero est un plugin premium que vous devez installer manuellement sur le site WordPress. Cela fonctionne comme le constructeur de pages Elementor. Vous devez ouvrir la page que vous souhaitez modifier et cliquer sur le bouton "CSS Hero".
Après avoir cliqué sur le bouton, une barre latérale gauche apparaîtra avec la documentation. Vous pouvez lire la documentation qui explique les bases de CSS hero.
Il dit essentiellement que CSS Hero est un plugin WordPress d'éditeur CSS avancé WYSIWYG qui vous aide dans la personnalisation avancée du thème.
Cliquez sur n'importe quel élément et vous verrez des options personnalisables sur le côté gauche et en bas de l'écran. Ensuite, vous pouvez modifier l'arrière-plan, les polices, le rembourrage, l'animation, le dégradé, tout ce que vous voulez.
De plus, si vous souhaitez créer un bouton héros pour n'importe quel lien, vous pouvez utiliser sa fonction d'extrait de code. Vous pouvez ajouter une ombre portée, un séparateur, des icônes de bouton et pas seulement un bouton.
Si vous le souhaitez, vous pouvez également ajouter des animations aux éléments. L'ajout d'animation est super facile avec son éditeur CSS visuel ; cliquez sur les éléments, accédez à la barre latérale gauche et ajoutez une animation.
Un regard de base sur l'interface :
CSS Hero n'a pas de zone de paramètres dédiée. Au lieu de cela, il utilise une interface frontale simple. L'interface est principalement l'aperçu en direct du site.
Après avoir cliqué sur le « bouton CSS Hero », vous verrez le menu et l'outil Inspecteur sur la gauche. Vous obtenez tous les outils d'affichage réactifs en haut au centre, et le coin supérieur droit contient notamment l'annulation, le rétablissement, l'historique et les outils.
Vous pourrez trouver l'éditeur JS et l'intégration vidéo en bas avec d'autres fonctionnalités. De plus, placer le curseur sur un élément affichera la zone de contenu, et un clic droit ou un clic gauche ouvrira les onglets de paramètres.
Dans l'ensemble, l'interface utilisateur est très conviviale pour les débutants et pas trop écrasante pour se perdre dans les paramètres.
Revue CSS Hero : Présentation des fonctionnalités
Options de personnalisation/Éditeur de héros CSS :
Vous obtiendrez 3 paramètres de personnalisation dans le menu CSS Hero : Propriétés, Extraits et Animation. Les propriétés contiennent la plupart des fonctionnalités d'édition. Vous pouvez modifier la couleur d'arrière-plan, le style de police, la couleur d'arrière-plan et la transformation.
L'ajout de remplissage, de bordures, d'espacement, d'affichage ou de masquage d'éléments, de positionnement et de mesures, toutes ces modifications se trouvent sous l'onglet Propriétés.
L'extrait contient des boutons prédéfinis et des ombres portées, des séparateurs, des arts d'arrière-plan, etc. Vous pouvez ajouter plusieurs conceptions à un seul élément.
De plus, en combinant différents paramètres, vous pouvez créer de nouveaux designs. L'onglet animation vous permet d'ajouter différentes animations comme un fondu entrant, un fondu sortant, etc.
Aperçu réactif :
CSS Hero propose 4 types de paramètres de conception réactifs . Vous pouvez rendre votre site Web réactif pour tous les appareils tels que les paramètres de bureau, de tablette et de mobile.
Non seulement cela, vous pouvez même éditer en mode paysage et portrait pour mobile et tablette. Vous pouvez également masquer une section spécifique pour n'importe quel appareil.
Par exemple, vous pouvez masquer la vidéo de la section héros pour un chargement rapide sur mobile. D'autre part, masquez le bouton d'appel sur le bureau.
Gestionnaire de requêtes multimédia :
CSS Hero rend tout le code réactif pour différents appareils. Cependant, il propose également un gestionnaire de requêtes multimédias pour l'édition manuelle.
Par exemple, si vous souhaitez qu'une image apparaisse sur le bureau mais ne s'affiche pas sur mobile, vous pouvez le faire à partir d'ici. Vous pouvez également modifier la dimension de l'image ou de la section pour mobile.
Outil CSS Hero Inspector :
L'outil d'inspection CSS Hero est un atout pour les développeurs Web. Vous pouvez affiner vos codes CSS ici. À moins que vous ne soyez l'un des bons sélecteurs CSS, cela pourrait ne pas fonctionner très bien.
Cependant, cette fonctionnalité n'est disponible que dans le plan Pro et supérieur. À moins que vous ne soyez très soucieux de garder le code CSS propre, vous n'en aurez pas besoin.
Exportateur de code CSS :
C'est une fonctionnalité géniale pour les développeurs de sites Web. Vous pouvez modifier le site Web de démonstration ou de développement et exporter tout le code dans un fichier. Ajoutez ce fichier que vous pouvez importer sur le site Web en direct, et tout le CSS est corrigé sans maintenir le site en maintenance.
Annuler/rétablir l'historique des révisions :
Lors de la modification du site Web, vous proposerez des conceptions que vous n'aimerez pas en premier, mais que vous voudrez revenir après avoir apporté quelques modifications. Là, le bouton Annuler et Rétablir est pratique.
Si vous faites une erreur, par hasard, un clic sur l'annulation du bouton héros CSS corrige tout. De plus, si vous aimez comparer les modifications, la fonction de rétablissement et d'annulation fonctionne comme un charme dans l'éditeur CSS en direct.
J'aime le plus le bouton historique. Supposons que vous souhaitiez accéder à n'importe quelle partie du montage tout en vérifiant l'amélioration. Ainsi, vous pouvez cliquer sur n'importe quelle partie des sélecteurs CSS et voir les modifications que vous avez apportées jusqu'à la fin.
Intégrations CSS Hero :
Après les nouvelles mises à jour de la version 5, CSS Hero est désormais plus qu'un plugin d'éditeur WordPress CSS. Vous pouvez gérer le code JS et l'intégrer à de nombreuses bibliothèques JS. Vous pouvez également vérifier la fonction Inspecteur de page qui vous montre le code HTML derrière la scène.
Y compris ceux-ci, il est livré avec l'intégration Unsplash et Coverr intégrée. Unsplash fournira un nombre illimité d'images libres de droits, tandis que Coverr fournira des vidéos.
Performances du héros CSS :
Tout en améliorant le classement des moteurs de recherche, la vitesse de chargement peut être une grande préoccupation. Mais je peux vous dire par expérience que cela ne ralentit pas mal le site Web.
Comme CSS Hero utilise un seul fichier CSS statique, il ne prend donc pas de place. En fait, il inclut ces codes dans votre fichier de feuille CSS existant.
Dans l'ensemble, CSS Hero ne ralentira pas la vitesse de chargement de votre site comme n'importe quel autre plugin de création de page. Vous pouvez donc l'utiliser sans souci.
Examen CSS Hero: avantages et inconvénients
Nous le savons tous, CSS est l'un des meilleurs plugins d'éditeur WordPress CSS. Cependant, tout a des fonctionnalités bonnes et moins bonnes.
Par exemple, apprendre le code CSS n'est plus obligatoire avec l'éditeur CSS Hero. Voici ce que j'aime et je ne suis pas très satisfait de CSS Hero.
Avantages
- Cliquez simplement et modifiez les éléments de la fenêtre contextuelle de la barre latérale
- Fonctionne sur presque tous les thèmes WordPress pour la personnalisation
- Prend en charge le multisite pour WP
- Ne fait aucune erreur CSS
- Ajouter un éditeur CSS en direct personnalisé supplémentaire
- Pas besoin d'apprendre le code CSS
- Feuilles de style prédéfinies pour travailler plus rapidement
- Menu héros et documentation adaptés aux débutants
Les inconvénients
- Assistance en direct manquante
- Aucune fonctionnalité pour ajouter ou créer une nouvelle couche CSS
Assistance et documentation CSS Hero
Vous pouvez manquer le support en direct sur cet impressionnant plugin d'éditeur CSS WordPress, mais la documentation est bien détaillée.
Vous pouvez tout obtenir dans des sections bien organisées. Le « Mise en route » vous permet de comprendre et d'installer correctement le plug-in, et les « Vidéos de présentation des fonctionnalités » se conservent avec les paramètres.
Chaque article est également accompagné d'un didacticiel auquel vous pouvez accéder gratuitement à des vidéos sur leur chaîne YouTube.
Combien coûte CSS Hero ?
Le plugin WordPress CSS Hero est proposé à 4 prix. Cela commence à partir de 29 $ par an pour un pack de démarrage à 599 $ à vie. Pour une seule entreprise, vous pouvez aller avec 29 $/an et pour les agences, 99 $/an est une excellente affaire.
Remarque : lors de la rédaction de la critique, ils proposaient une offre de réduction.
Alternatives CSS Hero
CSS Hero est un plugin WordPress de framework de genèse premium, et c'est l'un des meilleurs. Cependant, si vous voulez rivaliser avec eux, il y aura très peu d'alternatives.
Les meilleures alternatives CSS Hero sont :
- Crayon jaune
- CSS d'origine du site
- Microthémère
Ce sont ses concurrents directs. Cependant, CSS Hero offre une meilleure offre que les autres.
FAQ CSS Hero
CSS Hero fonctionne-t-il avec n'importe quel thème WordPress ?
Apparemment, CSS Hero travaille sur presque tous les thèmes populaires du référentiel WP. Il fonctionne également avec des thèmes premium comme DIVI. Il peut y avoir un thème où ce plugin d'éditeur WordPress CSS peut ne pas fonctionner comme vous le souhaitez.
Cela peut ne pas fonctionner sur tous les éléments du thème, mais tant que le thème fonctionne sur d'autres plugins WordPress du cadre de genèse, vous êtes prêt à partir.
CSS Hero est-il la bonne solution pour vous ?
Si vous êtes intéressé par le développement de sites Web WordPress, cela vaut la peine de l'obtenir. Tout d'abord, vous n'avez pas besoin d'apprendre le code CSS et il ne fait aucune erreur de codage.
De plus, vous pourrez éditer le code JS avec l'éditeur visuel. En regardant la critique impressionnante de l'utilisateur, il vous sera facile de déterminer.
CSS Hero fonctionne-t-il avec WooCommerce ?
Oui. Cela fonctionne bien avec WooCommerce. Non seulement cela, cela fonctionne avec la plupart des plugins et constructeurs de pages populaires. Si vous voulez savoir, permettez-moi de dire que cela fonctionne avec Gravity Forms, Slider Revolution, Visual Composer et bien d'autres.
CSS Hero fonctionne-t-il avec les plugins Page Builder comme Elementor ?
Cela fonctionne avec tous les plugins de création de pages populaires. Elementor, Beaver Builder, genesis framework, WP Bakery en font partie.
Que se passe-t-il si mon forfait expire ?
Peu importe le plan que vous obtenez, sauf si vous obtenez un contrat à vie. Vous bénéficierez d'un support et de mises à jour d'un an. Si votre plan expire, vous pourrez toujours utiliser le plugin, mais vous n'obtiendrez aucune mise à niveau.
CSS Hero ralentit-il votre site Web ?
Avoir un site Web léger est un facteur important pour améliorer le classement des moteurs de recherche. Bien que CSS Hero ajoute une feuille CSS frontale, il s'agit donc d'un plugin d'éditeur CSS WordPress très léger. Dans l'ensemble, cela ne ralentit pas beaucoup votre site Web.
Quelles sont les exigences du navigateur et du serveur pour exécuter le plugin CSS Hero ?
Il serait préférable que vous disposiez du dernier navigateur Web Chrome pour travailler facilement. Vous pouvez également travailler dans le dernier navigateur Firefox ou Safari. Le plugin fonctionne parfaitement sur les dernières versions/environnements Linux, Apache, MySQL et PHP. Vous devez avoir un plan d'hébergement sur l'un de ces serveurs.
Examen CSS Hero: Réflexions finales
La plupart des utilisateurs de ce plugin ont partagé leurs excellentes critiques à ce sujet. Je l'aime aussi pour le prix et les fonctionnalités qu'il offre. En tant que débutant qui ne connaît pas grand-chose au codage CSS, CSS hero facilite l'édition et la conception de mon site Web.
Vous n'avez pas besoin d'un développeur expert pour utiliser l'outil car il est presque explicite - la seule chose qui manque le support du chat en direct. Pourtant, si vous êtes quelqu'un qui a maintenant un site Web et qui fait tout seul, CSS Hero est un bon investissement.
