CSS Hero l'éditeur de thème WordPress en direct

Imaginez que vous construisez votre site WordPress et que vous rencontrez un élément que vous aimeriez modifier. La réponse peut être d'écrire du CSS pour personnaliser l'élément. Le seul problème est que vous ne connaissez pas suffisamment le CSS pour le modifier et que vous avez déjà passé des heures à chercher le bon code à utiliser.

Vous pouvez économiser une tonne de temps - et une migraine à part entière - en utilisant un outil qui élimine l'écriture de CSS à partir de zéro. Oubliez la chasse au bon élément dans l'inspecteur. Vous pouvez arrêter de vous soucier de vous souvenir du bon CSS à utiliser - et où l'utiliser.

Le plugin CSS Hero est une solution 100% sans code qui vous aidera à personnaliser votre site WordPress rapidement et facilement. Regardons ça!

Personnalisez votre site avec CSS Hero

CSS Hero est un plugin pour WordPress qui permet de personnaliser facilement l'apparence de votre site. Il possède une interface pointer-cliquer magnifiquement conçue et intuitive.

Quel que soit le thème WordPress que vous utilisez, vous pouvez avoir un contrôle total sur la personnalisation de votre site. C'est aussi simple que de cliquer sur un élément de votre site, d'apporter une modification et de la voir en direct. Avec CSS Hero, vous pouvez contrôler :

• Couleur
• Typographie et styles de police
• Mesures
• …et plus!

CSS Hero est également réactif de manière native, ce qui vous permet de contrôler l'apparence de votre site sur les ordinateurs de bureau et les appareils mobiles. Vous n'avez pas non plus à vous soucier de casser votre site. En plus de la fonctionnalité d'aperçu en direct, CSS Hero inclut une fonctionnalité de bureau qui vous permet de limiter les modifications au bureau uniquement.

Vous pouvez apporter autant de modifications que vous le souhaitez dans l'éditeur de thème CSS Hero sans modifier aucun de vos fichiers de thème existants. Si vous désactivez le plugin CSS Hero, votre site reviendra simplement à ce qu'il était.

Comme le sait un concepteur WordPress expérimenté, ajouter trop de CSS à votre site peut dégrader considérablement les performances. Cependant, CSS Hero n'empile pas sur une tonne de code CSS ; il génère plutôt une seule feuille de style supplémentaire statique qui remplace la feuille de style de votre thème.

Si vous avez déjà une certaine expérience dans l'écriture de CSS, vous pouvez également ajouter votre propre code dans l'éditeur de code CSS Hero. Il vous offre la même fonctionnalité de prévisualisation en direct que l'interface pointer-cliquer - et vérifie votre code pour les erreurs à la volée. De plus, vous pouvez ajouter vos propres requêtes multimédias. Vous pouvez également exporter votre code CSS pour l'utiliser ailleurs.

CSS Hero fonctionne bien avec :

• Élémentaire
• Castor Bâtisseur
• GénérerPresse
• WooCommerce
• Gutenberg
• Thémifier
• TutorLMS
• bbPress
• Formulaire de contact 7
• …et plus!

Vous pouvez travailler dans n'importe quel thème que vous aimez et personnaliser n'importe quel élément de votre site.

Comment utiliser CSS Hero pour personnaliser votre site

Bien que l'utilisation de CSS Hero soit satisfaisante et intuitive, je vais vous guider à travers la configuration et comment utiliser certaines des principales fonctionnalités du plugin.

Étape 1 : Installez le plugin CSS Hero

Vous pouvez trouver le plugin CSS Hero sur leur site Web. Il existe plusieurs plans d'achat, et je couvrirai les prix un peu plus tard. Ils offrent une garantie de remboursement de 30 jours, il n'y a donc aucun risque à l'essayer.

Une fois que vous avez créé un compte, il vous suffit de télécharger la dernière version du plugin à partir du tableau de bord de votre compte.

Une fois que vous avez enregistré le fichier .zip sur votre ordinateur, rendez-vous sur votre site WordPress et accédez à Plugins→Add New . Recherchez le fichier zip du plug-in, téléchargez-le et activez-le.

Étape 2 : connectez votre compte

Vous verrez immédiatement une notification dans votre tableau de bord d'administration WordPress vous demandant d'activer votre licence. Cliquez sur le gros bouton bleu et suivez les instructions pour ajouter votre licence à votre site.

Vous verrez maintenant un onglet pour CSS Hero dans votre barre de menu supérieure. Cliquez dessus pour entrer dans l'environnement d'édition.

Étape 3 : Modification de votre site

Lorsque vous entrez en mode d'édition dans CSS Hero, vous verrez une fenêtre d'aperçu de la page actuelle, similaire au Customizer. Cependant, vous avez maintenant une pléthore d'options d'édition.

L'éditeur

Lorsque vous déplacez votre curseur dans la fenêtre d'aperçu, vous verrez les éléments de la page appelés pour vous comme vous le verriez dans l'inspecteur de votre navigateur, mais avec plus de détails et de clarté.

Dans le menu de gauche, vous disposez d'un ensemble d'outils d'édition qui vous permettent de modifier l'élément sélectionné. Dans mon exemple, j'ai simplement sélectionné l'élément .site-title et modifié la couleur, la taille de la police, l'épaisseur de la police, l'espacement des lettres et ajouté une ombre. Tout cela a été fait à l'aide du menu intuitif avec des curseurs et des sélecteurs qui ressemblent beaucoup à un constructeur de site à part entière. Aussi discutable que soient mes choix de conception, l'éditeur est extrêmement facile à utiliser. Il s'agit d'une véritable édition visuelle des éléments du site, sans avoir à écrire un mot de code.

Sous la fenêtre de l'éditeur visuel se trouve un éditeur de code dans lequel vous pouvez voir le code CSS approprié énoncé lorsque vous modifiez l'élément. Si vous connaissez CSS et que vous aimez peaufiner le code lui-même, vous apprécierez les deux options. Si vous débutez avec CSS, il fonctionne comme un outil d'apprentissage utile.

Vous pouvez apporter des modifications ou des ajouts directement au code dans l'éditeur de code et vous verrez l'aperçu en direct comme vous le feriez en utilisant l'éditeur visuel. CSS Hero vous avertit également des erreurs de codage pendant que vous travaillez. Par exemple, lors de l'élimination d'un des arguments dans le sélecteur de couleur mais en laissant la virgule, une alerte est immédiatement apparue pour me dire où j'ai fait une erreur.

La correction de l'erreur fait disparaître automatiquement l'alerte.

Aperçus de plusieurs appareils

Dans la barre supérieure de l'éditeur CSS Hero, vous trouverez un tableau d'icônes pour divers appareils. La valeur par défaut est le mode bureau. Cliquer sur n'importe quelle icône d'appareil vous montrera un aperçu tel qu'il apparaîtrait sur cet appareil et son orientation. De plus, vous pouvez ajuster la taille de la fenêtre d'aperçu à l'aide des poignées ou en entrant la largeur en pixels dans la case en bas.

Toujours dans le menu de la barre supérieure, vous trouverez une bascule qui vous permet de naviguer sur le site plutôt que de sélectionner des éléments à modifier.

Vous pouvez cliquer sur les icônes Annuler et Rétablir et afficher un historique complet des modifications.

Plus de fonctionnalités

Ce sont les principales caractéristiques de l'interface CSS Hero. Il y a beaucoup plus que vous pouvez faire avec cet éditeur. Cliquer sur le menu déroulant Projet dans la barre de menu supérieure vous donne encore plus d'options.

variables

Il existe deux types de variables que vous pouvez utiliser dans CSS Hero : les variables LESS et les variables CSS. Vous pouvez ajouter des variables couramment utilisées sous LESS Variables et les gérer à partir d'un seul menu. Sous Variables CSS, vous pouvez rechercher n'importe quelle variable et modifier le nom et la valeur.

Paramètres de requête multimédia

Ce menu vous offre un emplacement unique pour gérer toutes vos requêtes multimédias existantes, ainsi que pour ajouter des requêtes personnalisées si nécessaire.

Points de contrôle

Supposons que vous souhaitiez prévisualiser certaines modifications apportées à votre site, mais que vous n'êtes pas encore prêt à mettre à jour le site en ligne. C'est là que Checkpoints peut vous aider. Effectuez les modifications souhaitées, puis créez un point de contrôle. Vous pouvez annuler vos modifications afin qu'elles n'affectent pas le site en ligne, mais vous pouvez revenir en arrière à tout moment et activer ces modifications sans refaire tout votre travail acharné.

Polices personnalisées

Vous pouvez télécharger toutes les polices personnalisées que vous aimez aux formats .ttf, otf et woff.

Arrière-plans vidéo

Vous voulez ajouter une de ces boucles vidéo lisses et compactes en arrière-plan ? Étonnamment, vous pouvez le faire directement dans l'éditeur. CSS Hero vous propose une grande quantité de vidéos prédéfinies, fournies par coverr. Sélectionnez simplement un élément, choisissez une vidéo et ajustez. C'est si simple.

Avant CSS Hero et après

Actuellement, vous pouvez ajouter tous les CSS que vous souhaitez dans le Customizer. WordPress vous montrera également un aperçu.

Cela fonctionne bien, mais considérez quelques choses:

1. Vous ne connaissez peut-être pas grand-chose – ou pas du tout – CSS.
2. La recherche de quelque chose que vous avez déjà codé peut prendre beaucoup de temps.
3. Tout ce CSS dans le Customizer peut considérablement ralentir votre site.

Après avoir commencé à utiliser l'éditeur CSS Hero, les modifications peuvent être apportées rapidement à l'aide d'un éditeur visuel - aucun codage n'est nécessaire. Vous pouvez facilement trouver ce que vous avez modifié en cliquant sur l'élément. Le code CSS ne ralentira pas votre site, car il est contenu dans sa propre feuille de style bien organisée.

Tarification

CSS Hero propose trois niveaux de plans tarifaires annuels et un plan à vie. Comme je l'ai mentionné plus tôt, il existe une garantie de remboursement à 100% dans les 30 jours suivant l'achat de tout plan. Il n'y a pratiquement aucun risque à l'essayer.

Entrée

Ce plan est idéal lorsque vous n'avez besoin de personnaliser qu'un seul site. Pour seulement 29 $ par an, vous bénéficiez de toutes les mises à jour de produits et d'une assistance de base.

Personnel

Si vous êtes indépendant ou dirigez une petite agence, le niveau suivant pourrait vous convenir le mieux. Vous pouvez installer CSS Hero sur un maximum de cinq sites, et vous bénéficiez de toutes les mises à jour du produit et de l'assistance de base. Le prix est de 59 $ par année.

Pro

Comme il semble, ce plan est le meilleur pour les éditeurs professionnels et les grandes agences. Pour 199 $ par an, vous obtenez 999 installations, avec prise en charge de WordPress Multisite.

Pro à vie

Il s'agit d'un plan unique qui vous permet d'obtenir 999 installations de site, une assistance prioritaire et des mises à jour de produits à vie… pour toujours. Avec un paiement unique de 599 $, vous êtes couvert à vie.

Personnalisation CSS intuitive et facile

Pour tout concepteur WordPress, CSS Hero a une énorme valeur. Même si vous connaissez le CSS comme votre poche, l'utilisation de l'éditeur CSS Hero rendra l'édition de votre site incroyablement efficace.