CSS Hero Review: la personnalisation du thème WordPress en toute simplicité!

Offres WordPress


Lorsqu’il s’agit d’obtenir un site Web exactement comme vous le souhaitez, la richesse des différents thèmes WordPress disponibles est une véritable aubaine! Et si vous passez assez de temps à chercher, vous pourrez peut-être trouver un thème qui sera absolument parfait pour votre site. Il y a cependant de fortes chances que, bien que vous puissiez vous rapprocher de ce que vous voulez, vous serez probablement encore loin de la perfection. Après tout, un thème pré-construit peut-il vraiment répondre aux besoins d’un individu jusqu’à un T?…

Que faire si vous avez réussi à trouver un thème proche de ce que vous voulez, mais que vous devez encore apporter quelques modifications? Eh bien, si vous avez les compétences requises bien sûr, pas de problème: vous pourrez le modifier à votre guise. Mais que se passe-t-il si vous n’avez pas la confiance nécessaire pour apporter vos propres modifications aux fichiers nécessaires?

Aujourd’hui, je voudrais vous présenter un plugin très pratique en effet: CSS Hero – un plugin qui vous permet de faire vous-même des personnalisations visuelles petites – ou peut-être même relativement grandes: sans avoir à toucher une seule ligne de code!

Qu’est-ce que CSS Hero?

CSS Hero est un plugin de personnalisation de thème (voir les fonctionnalités.

Héros CSS

En tant que tel, il occupe un espace similaire aux plugins de création de pages par glisser-déposer. Cependant, lorsque les créateurs de pages vous encouragent à créer un design personnalisé à partir de zéro, CSS Hero vous permet de modifier votre thème WordPress existant comme vous le souhaitez.

Cela vous permet de jouer au développeur, sans nécessairement posséder les compétences de développeur généralement impliquées. Vous continuez à utiliser votre thème WordPress conçu par des professionnels – vous savez, celui construit par un expert, pas par quelqu’un qui jette des modules aléatoires ensemble, à la page des plugins de création de page – tout en faisant des ajustements mineurs pour répondre à vos besoins.

Aucun élément sur site n’est interdit: vous pouvez personnaliser tout et n’importe quoi. CSS Hero convertit vos personnalisations en code CSS approprié, qui est ensuite appliqué à une nouvelle feuille de style CSS (la feuille de style d’origine reste intacte, évitant ainsi tout problème sur la ligne).

CSS Hero fonctionne également avec n’importe quel thème WordPress. Ceux qui sont largement testés pour la compatibilité sont appelés prêts pour les héros, tandis que les thèmes non testés sont toujours pris en charge en mode Rocket.

Des prix

CSS Hero est un plugin premium abordable. Pour refléter sa concurrence, son prix est comparable à celui des plugins de création de pages les plus populaires.

Une licence de base de base ne coûte que 29 $ et vous donne accès au plugin CSS Hero complet (bien que vous ne puissiez l’utiliser que sur un seul site Web).

Si vous souhaitez utiliser CSS Hero sur plusieurs sites Web, vos options sont les suivantes:

  • Licence personnelle (59 $) – jusqu’à cinq sites
  • Licence Pro (199 $) – jusqu’à 999 sites

Comme vous pouvez l’imaginer, la licence pro s’adresse aux agences de création et aux développeurs de carrière. Les licences personnelles et professionnelles ont également accès à l’add-on premium, Inspector Pro – nous couvrirons cela plus en détail plus loin sur la page..

Les trois licences CSS Hero sont valables un an, donnent accès aux mises à jour et à l’assistance pendant un an et sont assorties d’une garantie de remboursement de 30 jours..

Commencer

Après avoir effectué votre achat, vous serez redirigé vers le tableau de bord CSS Hero. À partir de là, vous pourrez accéder à la documentation complète du plugin, ainsi qu’à la formidable CSS Hero Academy. L’académie est une belle touche, avec une série de didacticiels vidéo adaptés aux débutants conçus pour vous aider à tirer le meilleur parti de votre nouveau plugin (j’aimerais voir d’autres plugins avancés suivre le mouvement).

Tableau de bord CSS Hero

Le tableau de bord remplit une autre fonction importante: c’est là que vous téléchargez CSS Hero et – selon votre niveau de licence – les plugins Inspector Pro.

Une fois les téléchargements terminés, connectez-vous à votre tableau de bord WordPress. Accédez aux plugins > Ajouter un nouveau > Téléchargez le plugin, puis suivez les instructions pour télécharger les fichiers zip du plugin et activez le plugin. Si vous avez déjà installé un plugin WordPress auparavant, tout cela vous semblera très familier.

Cependant, l’installation de CSS Hero nécessite une étape supplémentaire: la vérification. Cliquez sur le bouton bleu, puis suivez les instructions lorsque vous enregistrez l’une de vos licences. Jusqu’ici tout va bien.

Maintenant, CSS Hero est un outil d’édition de thème et, en tant que tel, l’édition se fait sur le front-end, où vous pouvez voir les changements en temps réel. Accédez à l’interface utilisateur de votre site et vous verrez une nouvelle icône bleue dans le coin supérieur droit de l’écran. Cliquez ici pour commencer à utiliser votre nouveau plugin.

Icône de héros CSS

Éditeur de héros CSS

Après avoir cliqué sur l’icône bleue, vous devrez attendre quelques secondes pour que CSS Hero s’allume. Avec le plugin activé, vous pouvez maintenant commencer à styliser et personnaliser votre site Web.

Pour commencer, cliquez simplement sur l’icône bleue en haut du panneau d’options. Si vous ne savez pas comment procéder, le plugin vous fournira des liens pratiques couvrant toutes les bases. Cependant, si vous êtes prêt à plonger directement, vous pouvez commencer à cibler et à modifier n’importe quel élément de votre page.

Passez la souris sur l’élément que vous souhaitez modifier, puis cliquez sur (nous allons commencer par regarder un paragraphe de contenu relativement basique, comme le montre la capture d’écran ci-dessous). Une fois cliqué, CSS Hero verrouille votre élément, ce qui signifie que vous êtes libre de commencer à personnaliser.

Élément cible CSS Hero

Pour rendre le processus aussi simple que possible, CSS Hero vous fournira une liste d’options de personnalisation, selon le type d’élément que vous avez choisi. Après avoir sélectionné un paragraphe, mes options incluent la modification des polices, des arrière-plans et des bordures, et la configuration du remplissage autour du texte.

La modification des éléments est facile, tout est contrôlé à partir de la barre de menu de droite, ainsi que les modifications prévisualisées en temps réel. Pour commencer, j’ai décidé de me concentrer sur les propriétés du texte. Lorsque cette option est sélectionnée, CSS Hero affiche toutes les options disponibles pour configurer le texte, notamment:

  • Face de police – avec chaque police Google disponible pour la sélection
  • Couleur de la police
  • Taille de police
  • Poids de la police
  • Alignement du texte
  • Transformation de texte – par exemple, majuscule
  • Espacement des mots
  • Hauteur de la ligne

Apportez les modifications souhaitées et observez-les appliquées au texte une fraction de seconde plus tard.

Style de police CSS Hero

Vous pouvez ensuite revenir en arrière et configurer un arrière-plan pour votre paragraphe – encore une fois, CSS Hero vous donne le contrôle total. Vous pouvez télécharger une image personnalisée, sélectionner une couleur ou configurer un dégradé pour l’afficher comme arrière-plan.

Dégradé de fond de héros CSS

Vous disposez également des mêmes options pour les bordures de paragraphe, avec une flexibilité totale sur le style, la largeur et la couleur des bordures.

Style de bordure de héros CSS

Il existe même quelques styles sympas préconfigurés – par exemple, transformer votre texte en bouton ou afficher un arrière-plan prêt à l’emploi dans un certain nombre de modèles sympas.

Styles CSS Hero ReadyMade

Si vous préférez ne pas traiter vos modifications une section à la fois, vous pouvez également sélectionner l’option tout, qui répertorie toutes les options de personnalisation sur un écran pratique.

Annulation des modifications

Lorsque vous apportez des modifications au texte, CSS Hero les appliquera à la version en direct de votre site Web. Cependant, ne vous inquiétez pas de faire des modifications permanentes à ce stade – avant que les modifications ne soient appliquées, vous avez la possibilité de les effacer en cliquant sur Annuler ou de les confirmer en appuyant sur le bouton Enregistrer.

Même après avoir sauvegardé, vous ne serez pas bloqué par des modifications indésirables. Pour revenir à l’original, revenez au niveau supérieur du menu CSS Hero, accédez à la section des outils, puis sélectionnez l’option de réinitialisation des paramètres par défaut du thème.

Il est également possible de restaurer un élément individuel aux paramètres d’usine par défaut – cliquez simplement sur l’élément que vous souhaitez restaurer, puis cliquez sur la petite icône de réinitialisation «R» à droite du menu. Appuyez sur Confirmer et votre élément voyou sera restauré à son ancienne gloire.

Comme je l’ai mentionné précédemment, toutes les personnalisations sont appliquées à une feuille de style supplémentaire. Si le pire se produit, la feuille de style originale de votre thème restera intacte. Cela signifie, peu importe les modifications que vous apportez à l’aide de CSS Hero, aucun dommage à long terme ne peut être fait. Si toutes les autres options de restauration échouent, vous pouvez restaurer votre thème par défaut et dormir facilement!

Modifier n’importe quel élément

L’une des forces de CSS Hero est qu’il vous permet de modifier n’importe quel élément de votre page, quelle que soit sa taille..

En regardant la vue d’ensemble, vous pouvez modifier l’image d’arrière-plan, le style de la barre latérale et le pied de page de votre site.

Ceci est réalisé en utilisant le même processus que nous avons utilisé pour modifier notre paragraphe, mais démontre que CSS Hero peut être utilisé pour apporter des changements fondamentaux à l’esthétique de votre site. Consultez la capture d’écran ci-dessous, où j’ai changé l’arrière-plan de ma barre latérale, changé les styles d’en-tête du widget et reconfiguré également l’espacement. Voici la base avant la prise de vue:

Héros CSS avant capture d'écran

Et le voici après mon peaufinage – je ne suis pas un designer, certes, mais cela n’a pris que quelques secondes pour atteindre.

CSS Hero After Screenshot

Vous pouvez également personnaliser de minuscules éléments de contenu, tels que des images, des couleurs de lien et des styles de liste. Les styles de liste sont particulièrement intéressants, car vous pouvez choisir des puces personnalisées dans la section des listes dédiées. Il y a six puces préconstruites sympas prises en charge – y compris les carrés, les décimales et les chiffres romains – ou vous pouvez télécharger vos propres icônes personnalisées pour une touche plus personnelle.

Nous espérons que cela vous donnera une idée de la façon dont vous pouvez réviser la conception de votre site. Votre thème WordPress fournit la base, mais, grâce à CSS Hero, vous pouvez modifier chaque pixel de votre site Web à votre guise – sans toucher à une ligne de code.

Autres caractéristiques

CSS Hero possède plusieurs autres fonctionnalités intéressantes sur lesquelles j’aimerais attirer votre attention.

Le premier est le changeur de vue. En mettant de plus en plus l’accent sur la conception réactive, il est important que votre site Web fonctionne parfaitement sur des appareils de toutes formes et tailles. CSS Hero est livré avec une fonctionnalité intégrée qui vous permet d’afficher votre site en mode bureau, tablette et mobile.

Sélectionnez simplement votre vue préférée dans la barre d’outils – c’est la deuxième option vers le bas – et laissez CSS Hero transformer votre écran à la taille appropriée. C’est un excellent moyen de tester les modifications que vous avez appliquées sur les petits appareils.

Vue de la tablette CSS Hero

Ensuite, nous avons la fonction historique importante. Chaque fois que vous appuyez sur le bouton Enregistrer, CSS Hero stocke un instantané de votre site Web. Ces instantanés peuvent être visualisés et restaurés en un clic, ce qui signifie que votre travail acharné n’est jamais perdu – vous pouvez simplement sauter en avant et en arrière dans le temps.

Enfin, nous avons l’option Export CSS, disponible dans la section outils. Cela vous donne la possibilité d’exporter votre CSS édité pour l’utiliser sur un autre site Web, ou tout simplement de l’afficher à l’écran pour étudier les modifications que vous avez apportées (l’une des meilleures façons d’apprendre le CSS).

Module complémentaire Inspector Pro

Ceux d’entre vous qui ont mis à niveau vers les plans personnels ou professionnels obtiennent également le complément CSS Hero Inspector Pro inclus avec votre licence.

Annoncé en mai 2015 et récemment sorti du mode bêta, Inspector Pro s’adresse aux utilisateurs CSS plus avancés. Alors que CSS Hero est un outil qui ne nécessite absolument aucune compétence CSS, Inspector Pro a été développé pour ceux qui veulent personnaliser leur site en peaufinant directement le CSS.

Inspector Pro affiche le CSS de votre thème sous l’aperçu en direct. Vous pouvez modifier ce code à votre guise et, ce faisant, vos modifications sont reflétées dans l’aperçu. En vous donnant la possibilité de modifier le CSS directement, ce plugin vous donne un contrôle absolu sur vos personnalisations, pixel par pixel.

CSS Hero Inspector Pro

Cependant, Inspector Pro offre également des fonctionnalités utiles, vous n’êtes donc jamais seul. Par exemple, vous pouvez passer à une ligne spécifique en utilisant la fonction de recherche utile ou désactiver des lignes de style spécifiques afin que les éléments qui se chevauchent ne gênent pas.

Si vous écrivez votre CSS à partir de zéro, vous allez adorer ce module complémentaire, car cela signifie que vous n’aurez plus à parcourir les fenêtres – vous pouvez effectuer et afficher toutes vos modifications sur un seul écran. Pratique!

Prise en charge de CSS Hero

Dès que vous vous connectez au tableau de bord CSS Hero, vous pouvez voir que les développeurs ont du mal à vous aider à tirer le meilleur parti de leur plugin.

J’ai déjà abordé la documentation complète et la CSS Hero Academy (l’académie en est à ses balbutiements, mais il existe des plans concrets pour poursuivre son expansion).

Ces deux sections sont incroyablement complètes et l’académie comprend des didacticiels vidéo utiles. CSS Hero peut sembler difficile à utiliser au début, j’ai donc trouvé ces courts didacticiels vidéo utiles pour trouver mes pieds – après quoi, le plugin était relativement simple.

CSS Hero Academy

Il existe également une section de documentation plus avancée, connue sous le nom de Base de connaissances des développeurs. Ceci est destiné aux développeurs de plugins / thèmes, qui suivent les étapes nécessaires pour garantir que leurs produits sont entièrement compatibles avec CSS Hero – c’est-à-dire prêts pour les héros.

Pour ceux qui ne sont toujours pas en mesure de résoudre leurs problèmes, malgré la documentation approfondie, il existe également un forum d’assistance. Les membres du personnel de support de CSS Hero sont à votre disposition pour répondre à toutes vos questions, généralement en quelques heures. Une licence vous donne accès pendant un an au forum et à l’équipe d’assistance.

Forum de support CSS

Dans l’ensemble, CSS Hero ne peut être blâmé pour ses efforts de support. Les didacticiels pré-écrits et enregistrés sont vraiment utiles, et ils sont disséminés tout au long de l’expérience utilisateur aux points où ils sont le plus susceptibles d’être nécessaires.

Alors que les plugins WordPress deviennent de plus en plus sophistiqués, j’aimerais voir plus de développeurs suivre l’exemple de CSS Hero, offrant une prise en charge avancée dès le départ, de sorte que les utilisateurs inexpérimentés ne se sentent jamais hors de leur profondeur.

Dernières pensées

Dans l’ensemble, j’ai été vraiment impressionné par CSS Hero. Avec un potentiel de personnalisation aussi illimité, ce plugin aurait pu facilement être écrasant – cependant, en raison de l’interface intelligente et intuitive (et des tutoriels utiles), il est resté facile à utiliser tout au long de.

Les options de personnalisation sont infinies, vous permettant de modifier votre thème de la manière que vous pouvez imaginer. Cela vous permet de créer des designs sympas et originaux, en utilisant les fondations de votre thème, et tout cela sans vous salir les mains avec le code.

Cependant, CSS Hero n’est pas uniquement destiné aux codeurs amateurs. Inspector Pro est un outil passionnant pour les développeurs expérimentés qui cherchent à créer un site Web à partir de zéro.

L’add-on rend tout à fait possible que vous puissiez créer un site à partir de zéro, en regardant votre création prendre vie au fur et à mesure que vous codez, ligne par ligne. Plus réaliste, cependant, cela supprime les conjectures de la personnalisation du thème, ce qui permettra aux développeurs de gagner énormément de temps pour le travail client.

Dans l’ensemble, CSS Hero est un plugin de premier plan, et qui devrait vraiment plaire aux utilisateurs de WordPress de tous niveaux. Si vous ne l’avez pas déjà fait, vérifiez-le!

(mise à jour – 16 mars – depuis la rédaction de cet article, CSS Hero nous a gentiment fourni une offre spéciale code de réduction donnant aux lecteurs WinningWP jusqu’à 40% de réduction – voir le coupon.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me