Que diriez-vous de personnaliser le thème Live WordPress en temps réel ? Eh bien, CSSHero est un plugin pour apporter des modifications de manière simple

Publié: 2016-04-07

Personnalisez facilement les thèmes WordPress en direct par CCSHero

WordPress est un framework CMS, plein de personnalisation et fournit un tas d'API et de crochets que tout développeur pourrait utiliser pour modifier des thèmes et des plugins. C'est la raison pour laquelle nous avons actuellement la possibilité de choisir des plugins parmi des milliers de plugins disponibles dans le référentiel officiel WordPress.

Dans cet article, nous allons discuter du nouveau plugin CSSHero avec tous les détails. Mais avant de commencer, concentrons-nous sur these questions .

  • Comment make live changes à votre site WordPress ?
  • Changements de thème en temps réel ?
  • Existe-t-il un moyen simple de connaître le nombre de propriétés CSS pour le thème WordPress ?
  • Modifiez votre blog WordPress avec des aperçus en temps réel
  • Personnaliser les thèmes WordPress avant qu'ils ne soient en ligne

Si vous avez l'une des questions ci-dessus, vous êtes au bon endroit.

Si vous souhaitez effectuer des modifications en direct par vous-même without any help du plug-in, vous devez connaître au préalable près ~300 of CSS properties . Il est en quelque sorte impossible de les modifier pour voir de vrais changements en mode thème en direct. Le customizer WordPress vous permet de modifier certaines propriétés mais pas toutes et c'est le vrai problème que nous avons.

Je dirais que nous avons DEUX options :

Option-1) Effectuez manuellement les modifications CSS

  • Ouvrez votre blog dans Chrome / Mozilla
  • Faites un clic droit sur les éléments CSS, comme l'en-tête, la publication, l'image, etc.
  • Cliquez sur Inspect pour voir les propriétés CSS
  • Apportez des modifications pour voir l'effet
  • Une fois que tout va bien - Accédez au fichier style.css du thème et enregistrez les modifications
  • Répétez le processus plusieurs fois

Option-2) Utilisez le plugin avec des fonctionnalités intégrées, dans notre cas c'est CSSHero

  • Effectuer des modifications sur le live site avec l'éditeur
  • Voir le résultat en direct
  • Cliquez sur le Save button et vous avez done

CSSHero en collaboration avec Crunchify, offrant 10 free Licenses aux lecteurs de Crunchify. Remplir ce formulaire google pour faire inscrire votre nom. – Concours TERMINÉ

Installons CSSHero et effectuons des changements de thème WordPress en direct

NOTE : Découvrez la vidéo complète au bas de cet article.

Étape 1

Pourquoi CSSHero ? CSSHero est un plugin WordPress premium . La licence de base commence à $29/site . Je dirais que si vous êtes débutant ou professionnel, cela vaut la peine d'essayer. Il est livré avec une garantie de remboursement de 30 days .

Utilisez le code CRUNCHIFY pour obtenir 34% off sur les plans Starter, Personal et 40% off sur le plan Pro.

Enregistrez votre licence et téléchargez la dernière version du CSSHero plugin depuis votre tableau de bord : http://www.csshero.org/

Télécharger le plugin CSSHero pour WordPress

Étape 2

  • Installez-le depuis votre panneau d'administration WordPress et activez-le
  • Lors de l'activation, il vous demandera la Key
  • Cliquez simplement sur Get my Key Now! bouton et il ouvrira une page avec la clé de licence
  • Cliquez sur Get License et vous êtes prêt

Obtenir la page de licence CSS Hero

Point-1) Commençons par la fonctionnalité

  • Allez maintenant sur la home page de votre blog et vous verrez le bouton animé CSSHero dans le coin top right .
  • Cliquez dessus et le plugin chargera control panel qui fonctionne avec votre thème

Jetez un oeil au gif ci-dessous avec toutes CSSHero options :

Panneau d'options CSSHero

Point-2) Option de l'éditeur de thème CSSHero

L'idée pour l' theme editor est de changer tout theme's style avec un simple éditeur visuel. Avec l'aide de l'éditeur de thème CSSHero, vous pouvez modifier

  • En-tête
  • Police de caractère
  • frontière
  • styles, etc...

La même chose s'applique à

  • contenu du corps
  • poste d'entrée
  • méta-valeurs
  • valeurs d'en-tête
  • bas de page
  • barre latérale, etc. Jetez un œil au GIF ci-dessous.

Commander l'interface utilisateur de changement de propriété CSSHero HTML

Point-3) Options de mise en page pratiques de l'appareil en un seul clic

Comme vous le voyez dans l'image ci-dessous, l'éditeur de thème nous donne la possibilité de vérifier le nombre de différentes Layouts en page mobiles, iPhone, iPad de votre thème avec un simple survol de la souris et un simple clic.

Commander différentes mises en page mobiles

Point-4) Comment annuler vos modifications récentes ?

L'utilisateur a la possibilité d'annuler toutes les modifications récentes à l'aide du simple module Change history . Je parie qu'aucun des développeurs ne réussit du premier coup, pas du moins moi :). C'est très pratique pour moi.

CSSHero fournit également un module très pratique qui affiche all of your save changes . Vous pouvez revenir en arrière dans la timeline et revenir à la version précédente. N'est-ce pas un outil pratique ? J'ai utilisé cet outil jusqu'à présent plusieurs fois et je l'adore.

Vérifier l'historique des modifications

Point-5) Paramètres et options des outils

Preset Settings et Tools Options .

Chargez toutes vos modifications depuis le compte ou les modifications locales

Réinitialiser tous les paramètres Option

Jetez un œil à la vidéo détaillée que nous avons capturée et qui montre toutes les fonctionnalités du CSSHero WordPress Custom CSS Editor.

Vidéo Youtube détaillée :

Maintenant que vous avez vu toutes les fonctionnalités, il est temps de poser les questions ci-dessous :).

Point-6) Est-ce que ce plugin fonctionne avec mon thème ?

Selon les informations du site officiel CSSHero, le plugin fonctionne avec tous les frameworks de thèmes WordPress ci-dessous.

  • Cadre Genèse
  • GénérerPresse
  • CouchesWP
  • Thème Ultimatum
  • Total
  • À l'avant
  • Amorçage WP
  • Thématique
  • Requis + Fondation
  • Oméga
  • Lignes de page DMS

Si votre thème isn't compatible avec CSSHero, no worries . Il vous montrera une option pour activer le Rocket mode .

Message : Le support natif pour ce thème n'est pas présent. Voulez-vous essayer la détection automatique du mode fusée ? enable it simplement et essayez CSS again et vous devriez voir les mêmes options que celles que vous avez vues dans la vidéo ci-dessus.

CSSHero Activer RocketMode

Point-7) Qu'en est-il du support et de la documentation des plugins ?

Certains des plugins WordPress populaires, tels que Gravity Forms, WooCommerce, Contact Form7, WP Pools, etc. sont compatibles avec le framework CSSHero.

Cela signifie que CSSHero fonctionne non seulement avec theme customization , mais également avec la plugin layout customization .

Enfin et surtout, sur le site officiel, il existe un certain nombre d'articles détaillés de tips and tricks à lire.

Très beaux documents et supports pour CSSHero

Only Cons je pouvais penser est de se familiariser avec toutes les fonctionnalités. Il vous faudra peut-être un certain temps pour vous lancer et devenir un pro. Une fois que vous serez familiarisé avec CSSHero, je suis sûr que ce sera une very handy solution pour tous les blogueurs WordPress.

Contactez-nous si vous avez un produit, un plugin, un thème, etc. que vous pensez vouloir promouvoir.

Voici les offres exclusives Crunchify pour CSSHero :

CSSHero 40% de réduction sur le code promo - CRUNCHIFY

Salut les lecteurs de Crunchify -

Nous sommes heureux d'annoncer up-to 40% off sur le plugin de personnalisation CSSHero WordPress Theme.

Veuillez consulter les étapes ci-dessous

Étape 1

  • Allez sur le site CSSHero : https://www.csshero.org/
  • Cliquez sur le lien Pricing Plans tarifaires

Étape 2

  • Cliquez sur le bouton I have a coupon code

Étape 3

  • Entrez le code promo : CRUNCHIFY

Ajoutez le code CRUNCHIFY pour obtenir jusqu'à 40 % de réduction sur CSSHero

Étape 4

  • Cliquez sur le bouton Utiliser pour obtenir 34% off sur le plan de démarrage et personnel
  • Obtenez 40% off sur le plan Pro

Plugin CSSHero Theme Editor et Crunchify Exclusive Deal code-CRUNCHIFY

Liste de toutes les offres : https://crunchify.com/deals/