Che ne dici di personalizzare il tema Live WordPress in tempo reale? Bene, CSSHero è un plug-in per apportare modifiche in modo semplice

Pubblicato: 2016-04-07

Personalizza facilmente i temi WordPress Live di CCSHero

WordPress è un framework CMS, pieno di personalizzazione e fornisce un sacco di API e hook che qualsiasi sviluppatore potrebbe utilizzare per modificare temi e plugin. Questo è il motivo per cui attualmente abbiamo un'opzione per scegliere i plug-in tra migliaia di plug-in disponibili dal repository ufficiale di WordPress.

In questo post parleremo del nuovo plugin CSSHero con tutti i dettagli. Ma prima di iniziare, concentriamoci su these questions .

  • Come make live changes in tempo reale al tuo sito WordPress?
  • Il tema cambia in tempo reale?
  • Esiste un modo semplice per conoscere il numero di proprietà CSS per il tema WordPress?
  • Modifica il tuo blog WordPress con anteprime in tempo reale
  • Personalizzazione dei temi WordPress prima che siano attivi

Se hai una delle domande di cui sopra, sei nel posto giusto.

Se vuoi apportare modifiche in tempo reale da solo without any help dal plug-in, devi conoscere in anticipo quasi ~300 of CSS properties . È quasi impossibile modificarli per vedere cambiamenti reali nella modalità tema dal vivo. Il customizer di WordPress ti consente di modificare alcune delle proprietà ma non tutte e questo è un vero problema che abbiamo.

Direi che abbiamo DUE opzioni:

Opzione-1) Esegui manualmente le modifiche CSS

  • Apri il tuo blog in Chrome/Mozilla
  • Fai clic con il pulsante destro del mouse sugli elementi CSS, come intestazione, post, immagine, ecc
  • Fare clic su Inspect per vedere le proprietà CSS
  • Apporta le modifiche per vedere l'effetto
  • Una volta che sei a posto, vai al file style.css del tema e salva le modifiche
  • Ripetere il processo più volte

Opzione-2) Usa il plugin con funzionalità integrate, nel nostro caso è CSSHero

  • Esegui modifiche sul live site con l'editor
  • Guarda il risultato in tempo reale
  • Fare Save button e il gioco è done

CSSHero in collaborazione con Crunchify, regala 10 free Licenses ai lettori di Crunchify. Compila questo modulo Google per ottenere il tuo nome elencato. – Giveaway FINITO

Installiamo CSSHero ed eseguiamo modifiche al tema WordPress dal vivo

NOTE : controlla il video completo in fondo a questo post.

Passo 1

Perché CSSHero? CSSHero è un plugin WordPress premium . La licenza di base inizia con $29/site . Direi: se sei un principiante o un professionista vale la pena provare. Viene fornito con una garanzia di rimborso di 30 days .

Usa il codice CRUNCHIFY per ottenere il 34% off su Starter, piani personali e il 40% off sul piano Pro.

Registra la tua licenza e scarica l'ultima versione del CSSHero plugin dalla tua dashboard: http://www.csshero.org/

Scarica CSSHero Plugin per WordPress

Passo 2

  • Installalo dal tuo pannello di amministrazione di WordPress e attivalo
  • All'attivazione chiederà la Key
  • Basta fare clic su Get my Key Now! e si aprirà una pagina con la chiave di licenza
  • Fai clic su Get License e sei pronto

Ottieni la pagina della licenza CSS Hero

Punto-1) Iniziamo con la funzionalità

  • Ora vai alla home page del tuo blog e vedrai il pulsante animato CSSHero nell'angolo in top right .
  • Fai clic su quello e il plug-in caricherà control panel che funziona con il tuo tema

Dai un'occhiata alla gif qui sotto con tutte CSSHero options :

Pannello delle opzioni CSSHero

Punto-2) Opzione Editor temi CSSHero

L'idea per l' theme editor è cambiare tutto theme's style con un semplice editor visivo. Con l'aiuto dell'editor di temi CSSHero potresti cambiare

  • Titolo
  • font
  • frontiera
  • stili, ecc.

Lo stesso vale per

  • contenuto corporeo
  • posto d'ingresso
  • metavalori
  • valori di intestazione
  • piè di pagina
  • barra laterale, ecc. Dai un'occhiata alla GIF sotto.

Verifica l'interfaccia utente di modifica della proprietà HTML di CSSHero

Punto-3) Opzioni di layout del dispositivo a portata di mano con un clic

Come puoi vedere nell'immagine qui sotto, l'editor del tema ci offre la possibilità di controllare il numero di diversi Layouts di dispositivi mobili, iPhone, iPad del tuo tema con il semplice passaggio del mouse e un solo clic.

Acquista diversi layout mobili

Punto-4) Come annullare le modifiche recenti?

L'utente ha un'opzione per annullare tutte le modifiche recenti utilizzando il semplice modulo Change history . Scommetto che nessuno degli sviluppatori riesce a fare le cose bene al primo tentativo, non almeno io :). Questo è molto utile per me.

CSSHero fornisce anche un modulo molto utile che mostra all of your save changes . Potresti tornare indietro nella timeline e tornare alla versione precedente. Non è uno strumento utile? Ho usato questo strumento finora un numero di volte diverso e lo adoro.

Cronologia delle modifiche alla cassa

Punto-5) Impostazioni e Opzioni Strumenti

Preset Settings e Tools Options .

Carica tutte le modifiche da Account o modifiche locali

Ripristina tutte le impostazioni Opzione

Dai un'occhiata al video dettagliato che abbiamo catturato che mostra tutte le funzionalità del CSSHero WordPress Custom CSS Editor.

Video Youtube dettagliato:

Ora che hai visto tutte le funzionalità, è il momento di porre le domande seguenti :).

Punto-6) Questo plugin funziona con il mio tema?

Secondo le informazioni dal sito ufficiale CSSHero, il plug-in funziona con tutti i framework dei temi WordPress.

  • Quadro Genesi
  • GeneraPress
  • LivelliWP
  • Tema Ultimatum
  • Totale
  • In anticipo
  • WP Bootstrap
  • tematico
  • Richiesto + Fondazione
  • Omega
  • Pageline DMS

Se il tuo tema isn't compatible con CSSHero, no worries . Ti mostrerà un'opzione per abilitare la Rocket mode .

Message : il supporto nativo per questo tema non è presente. Vuoi provare il rilevamento automatico della modalità Rocket? enable it e prova a modificare CSS again e dovresti vedere le stesse opzioni che hai visto nel video sopra.

CSSHero Abilita RocketMode

Punto-7) Che ne dici di supporto e documentazione per i plugin?

Alcuni dei popolari plugin di WordPress, come Gravity Forms, WooCommerce, Contact Form7, WP Pools e altri sono compatibili con il framework CSSHero.

Ciò significa che CSSHero non funziona solo con theme customization , ma funziona anche con la plugin layout customization .

Ultimo ma non meno importante, sul sito ufficiale, sono disponibili numerosi articoli di tips and tricks dettagliati da leggere.

Documenti e supporti molto belli per CSSHero

L' Only Cons che mi viene in mente è di familiarizzare con tutte le funzionalità. Potrebbe volerci del tempo per iniziare e diventare un professionista. Una volta che avrai familiarizzato con CSSHero, sono sicuro che sarà very handy solution per tutti i blogger di WordPress.

Mettiti in contatto con noi se hai un prodotto, plugin, tema, ecc. che pensi di voler promuovere.

Ecco le offerte esclusive di Crunchify per CSSHero:

CSSHero 40% di sconto sul codice coupon - CRUNCHIFY

Ciao lettori Crunchify –

Siamo lieti di annunciare up-to 40% off sul plug-in di personalizzazione del tema WordPress CSSHero.

Si prega di dare un'occhiata ai passaggi seguenti

Passo 1

  • Vai al sito CSSHero: https://www.csshero.org/
  • Fare clic sul collegamento Pricing Plans

Passo 2

  • Fare clic sul pulsante I have a coupon code

Passaggio 3

  • Inserisci il codice coupon: CRUNCHIFY

Aggiungi il codice CRUNCHIFY per ottenere fino al 40% di sconto su CSSHero

Passaggio 4

  • Fai clic sul pulsante Riscatta per ottenere 34% off su Starter e Piano personale
  • Ottieni 40% off sul piano Pro

Plugin CSSHero Theme Editor e codice Crunchify Exclusive Deal-CRUNCHIFY

Elenco di tutte le offerte: https://crunchify.com/deals/