Come personalizzare il tuo sito WordPress senza dover comprendere i CSS

Ti mostreremo come è possibile apportare modifiche visive ai tuoi siti Web WordPress senza alcuna esperienza precedente sui CSS. Ma prima, prendiamoci un minuto per un piccolo apprezzamento WordPress.

Vecchia interfaccia di wordpress

Ricorda questo? Ecco come appariva WordPress quando ci siamo innamorati per la prima volta. Undici anni più tardi e siamo ancora innamorati di esso ma (per fortuna) è cambiato così tanto che è a malapena riconoscibile.

Da una semplice piattaforma di blogging al sistema di gestione dei contenuti più famoso al mondo, WordPress è ora alla base di centinaia di migliaia di siti popolari con una schiera di sviluppatori che lavorano sulla piattaforma e un'intera nuova armata di sviluppatori che costruisce così tanti temi e plugin per questo, che venderli è un lavoro a tempo pieno per molte persone. Themeforest è probabilmente il negozio di temi online più famoso e vanta quasi 20.000 temi, di cui la maggior parte è per WordPress. Per metterlo in prospettiva, potresti avere un sito Web completamente diverso ogni giorno per 54 anni!

Saresti difficile trovare un prodotto comparabile, a pagamento o gratuito, che lo renda così facilei non-programmatori di passare da zero a un sito web completamente funzionante con la stessa facilità.

Negli ultimi anni abbiamo reso la personalizzazione di WordPress resa ancora più semplice, grazie alla crescente lista di costruttori di pagine che aiutano gli utenti a mettere insieme i propri progetti con facilità. Combina questi potenti strumenti di architettura con la crescente lista di plugin per la sicurezza, la condivisione e il commento, è semplicissimo costruire il sito che hai sempre desiderato.

Tutto quanto sopra menzionato ti farà arrivare al 90%; tutto il contenuto di cui hai bisogno, su una piattaforma di cui ti fidi; sembra quasi perfetto grazie al duro lavoro degli sviluppatori che creano grandi temi e plugin.

Ma anche con i temi migliori hai sempre intenzione di apportare piccole modifiche. Piccole modifiche visive per creare un tema tuo, diverso da qualsiasi altra cosa. Che si tratti di arrotondare gli angoli o di ispessire i bordi o di modificare l'ombra attorno a un oggetto, sono queste le modifiche che rendono perfetto un tema eccezionale.

Tutti i cambiamenti sopra menzionati arrivano apersonalizzazione CSS. Abbastanza facile se sei un designer o uno sviluppatore, ma come cercare di leggere la matrice se non lo sei.

Per fare in modo che le modifiche ai CSS utilizzino strumenti progettati per sviluppatori, strumenti come Ispettori del browser per trovare il pertinente Selettori CSS e manipolandoli manualmente. Dovresti quindi copiare quel CSS come testo, incollarlo in un editor di testo per assicurarti che abbia solo le informazioni necessarie e non abbia raccolto le opzioni del browser come le caselle di controllo oi nomi dei fogli di stile. Dovresti quindi creare un tema figlio per il tuo sito WordPress e copiarlo lì, oppure usare le caselle CSS personalizzate che ora sono dotate di tanti temi. Questo è un processo molto lungo. Con così tanti passaggi la tua esposizione agli errori è notevolmente aumentata e la risoluzione dei problemi può essere un gioco da ragazzi.

Presentazione di CSS Hero

Proprio come i costruttori di pagine hanno semplificato la modifica della struttura di un sito WordPress, CSS Hero rende possibile la modifica visiva. Come non-designer puoi guardare un angolo e pensare "rendilo curvo, non può essere così difficile", ma poi controlli il codice necessario per apportare quel cambiamento ed è scoraggiante;

L'interfaccia CSS Hero

Usare CSS Hero sembra più come usare Photoshop o un prodotto simile. I cursori ti consentono di regolare elementi come il riempimento, i margini, la nitidezza degli angoli e le dimensioni dei caratteri, mentre le tavolozze dei colori ti consentono di regolare l'aspetto predefinito per adattarlo meglio al tema e allo stile del tuo marchio.
Persino i progettisti veterani e i guru dei CSS apprezzano l'interfaccia in tempo reale facile da usare. Rende solo le cose più fluide, più veloci e più facili da regolare.

Com'è facile? Facile come installare un plugin.

CSS Hero non viene fornito con un lungo manuale di istruzioni perché non ne avrai bisogno. Ti mostreremo come puoi personalizzare il tuo sito in un paio di minuti.

Iniziare

Pulsante del bullone Hero di CSS

Ogni personalizzazione inizia con il clic di un fulmine blu. Questo apre il menu di personalizzazioni di CSS Hero direttamente sul frontend del tuo sito web, senza fare confusione nel dashboard, apportare modifiche e tornare indietro per vedere come sono. Guarda i cambiamenti accadono mentre li fai.

Tutto quello che fai con i CSS è compito tuo, lascialo in CSS Hero e funzionerà come un incantesimo senza ulteriori azioni necessarie. Puoi anche copiarlo in atema del bambino o il tuo pannello CSS personalizzato. Il tuo CSS, le tue regole. Passiamo direttamente alle modifiche!

Hover, Target, Change

Per questa dimostrazione usiamo il tema Divi di Elegant Themes. Questo è uno dei dozzine di temi Hero-Ready (il che significa che abbiamo aggiunto tutti i selettori necessari per farlo funzionare immediatamente). Se non stai utilizzando un tema Hero-Ready, puoi comunque aggiungere le tue classi e i tuoi ID direttamente in CSS Hero, o usare Modalità missilistica, ma ci arriveremo più tardi.

Ad eccezione dell'aggiunta di un paio di pagine e di un post sul blog, abbiamo iniziato con Divi praticamente "così com'è". Vogliamo mostrarti cosa fa CSS Hero su un tema nuovo. Stiamo usando un post sul blog come esempio perché è forse l'impostazione predefinita, la parte più semplice di Divi. È l'unica sezione in cui non puoi utilizzare il built-in di creazione di pagine, quindi è qui che vorrai sicuramente aggiungere il tuopropri tocchi personali.

Cambia il design dell'intestazione.

Prima di tutto vogliamo cambiare quell'intestazione: è molto piatta, tranne che per una sottile linea grigia al di sotto del quale non c'è molto da fare. Useremo CSS Hero per aggiungere un'ombra esterna al di sotto e sollevarla dalla pagina. CSS Hero ha un sacco di opzioni per aggiungere diversi tipi di ombre esterne, che possono essere ottimizzate per aiutarti a ottenere l'effetto desiderato.

Box Shadow

Successivamente cambieremo leggermente il colore in bianco sporco. Puoi utilizzare il selettore di colori integrato per apportare queste modifiche oppure, se stai lavorando su una combinazione di colori, puoi semplicemente inserire i valori RGBA o HEX. Entrambi sono supportati e sono semplici da inserire.

Cambia il colore di sfondo dell'intestazione

Successivamente andremo a scegliere come target la sezione del corpo del blog, facendo clic su di esso in modo che CSS Hero possa mostrarci le opzioni disponibili. Da qui andremo a cambiare il colore di sfondo in un grigio più scuro. Ora la nostra intestazione si distingue e una volta apportate le modifiche aggiuntive, anche il nostro contenuto e la barra laterale.

Cambiando lo sfondo dell'area di sinistra con il bianco, si posiziona davvero fuori dalla pagina, ma il colore si attenua leggermente al bordo, quindi abbiamo assegnato un bordo più scuro dello spessore di 1 pixel. Un piccolo aggiustamento al raggio del bordo dà alla sezione una bella curva e la regolazione del padding crea un bel margine attorno al contenuto.

Abbiamo cambiato i font del titolo in Helvetica. Uno degli oltre 100 tipi di carattere Google mostrati nel menu a discesa dei caratteri in CSS Hero, ma se vuoi aggiungere uno degli altri 550 caratteri Google è facile farlo.

Cambia il carattere: HelveticaCambia lo sfondo in grigioAggiungi 1px di bordoAggiunta di 20px di paddingAggiunta del raggio del bordo

Cambia la dimensione dell'immagine in primo piano

Per impostazione predefinita, Divi aggiunge l'immagine in primo piano da un post del blog sotto il titolo a tutta larghezza. Questo occupa molto spazio sopra la piega e spinge il testo fuori dalla vista. Abbiamo usato CSS Hero per cambiare la larghezza al 50% e rendere l'immagine corretta. Impostando il nuovo altezza dell'immagine a auto ha mantenuto le proporzioni e l'immagine sembra perfetta su tutti i dispositivi. Abbiamo anche aggiunto un po 'di imbottitura all'immagine quindi il testo non si siede proprio accanto ad esso. L'aggiunta di angoli leggermente curvi all'immagine usando il cursore del raggio di bordo in CSS Hero era tutto ciò che era necessario per rendere l'immagine perfetta.

Modifica le dimensioni dell'immagine in primo piano e aggiungi un raggio di confine

Alcune altre piccole modifiche che utilizzano CSS Hero tra cui la capitalizzazione del metamotore, la modifica del colore e del bordo del pulsante "invia commento" e siamo abbastanza contenti di come appare la sezione sinistra. Se lo confrontiamo con il modo in cui appariva in precedenza, è possibile vedere un enorme miglioramento in pochi minuti.

Meta ora è in maiuscolo

La barra laterale

Siamo poi passati alla barra laterale che, di default, è piuttosto semplice. Utilizzando le stesse tecniche utilizzate per modificare la nostra sezione della mano sinistra, siamo stati in grado di applicare rapidamente un bordo curvo e uno sfondo scuro che aiutano questa sezione a saltare fuori dalla pagina. Abbiamo modificato i font del titolo in modo che corrispondessero alle nostre attuali personalizzazioni e abbiamo dato loro un colore pallido per far risaltare lo sfondo scuro.

Abbiamo modificato i colori dei collegamenti per renderli più chiari e mirati specificamente per quando l'utente si posiziona e imposta un colore diverso. Ci siamo sbarazzati del blu elettrico standard e siamo andati con qualcosa di un po 'più in linea con il tema. Se lo si desidera, è anche possibile impostare un colore diverso per attivo collegamenti e collegamenti che erano stati visitato in passato usando CSS Hero.

La barra laterale

Cosa abbiamo appena fatto?

Attraverso l'utilità di esportazione di CSS Hero siamo in grado di vedere ciò che abbiamo appena creato sul nostro sito, sul lato codice.

Questo può essere utile per coloro che vogliono iniziare a capire il CSS, così come per gli sviluppatori che vogliono solo esportare il codice generato e copiare e incollare dove vogliono.

Frammento dell'intero CSS, generato da CSS Hero

L'ispettore degli eroi CSS

Puoi persino utilizzare il nostro nuovo strumento di ispezione per esaminare attentamente il CSS che hai creato e acquisire familiarità con il modo in cui vengono apportate queste modifiche. Puoi usare inspector anche per apportare piccole modifiche al tuo CSS, come ad esempio la modifica della dimensione del carattere, la curva o lo spessore di un bordo o qualsiasi altra cosa. Più comodo si ottiene con i CSS, più utile diventa lo strumento di ispezione.

Tutto sommato, queste personalizzazioni hanno richiesto poco più di cinque minuti. Cinque minuti per cambiare completamente quasi ogni elemento del post del blog. 

Hero Ready, Configurazione e modalità Rocket

Eroe pronto i temi sono buoni per uscire dalla scatola come discusso in precedenza. La maggior parte dei popolari temi WordPress sono pronte per l'eroe, tra cui Generatepress, Enfold, Genesis framework, Pagelines DMS, plugin WooCommerce e LayersWP.

Ciò significa che non è necessaria alcuna configurazione, ma se lo è, è anche facile. Ci sono due modi per farlo.

Modalità missilistica

Una funzionalità relativamente nuova e che ci piace molto, modalità Rocket, cercherà automaticamente i fogli di stile del tuo tema per selettori validi. Una volta trovato, lo aggiungerà a CSS Hero e consentirà al tema non-hero ready di funzionare estremamente bene senza ulteriori configurazioni. Se per qualsiasi motivo il tuo tema risulta incompatibile con la modalità Rocket, puoi aggiungere i selettori con lo strumento di configurazione integrato.

Aggiunta di classi e ID a CSS Hero

Il Quick Configurator

Se conosci le classi e gli ID utilizzati dal tema, puoi aggiungerli manualmente a CSS Hero e selezionarli come se fosse un qualsiasi altro elemento in un tema pronto per l'eroe. Hai bisogno di aiuto per trovarli? Prova lo strumento degli elementi di controllo nella maggior parte dei browser o cerca il foglio di stile del tema per qualsiasi cosa con un punto (.) Davanti o un hashtag (#). In alternativa, la maggior parte dei temi di fascia alta includerà la documentazione, all'interno del tema stesso o sul loro sito Web, con i selettori rilevanti di cui hai bisogno.

Costruttori di pagine, plugin e CSS Hero

Abbiamo menzionato in precedenza i vantaggi strutturali dell'utilizzo di un generatore di pagine per accelerare / semplificare il processo di creazione di pagine in WordPress. Ma vorrai comunque controllare il loro aspetto, giusto? Lo stesso si può dire per i plugin che creano moduli, aggiungono tabelle ecc.
Questo è uno dei motivi per cui abbiamo cercato oltre i temi quando abbiamo creato CSS Hero. Sarai in grado di usarlo subito, proprio come mostrato durante la modifica della pagina del blog, con un sacco di fantastiche risorse per WordPress. Beaver Builder, un generatore di pagine molto popolare è completamente compatibile con CSS Hero, come Visual Composer e Contact Form 7. Controlla se i plugin che stai utilizzando sono compatibili qui.

Quindi è così! Senza mai conoscere il CSS (o qualsiasi altro linguaggio di programmazione) è possibile creare un sito WordPress altamente reattivo e altamente personalizzato. Se lo fai, o hai creato qualcosa usando CSS Hero, assicurati di farcelo sapere nei commenti. Ci piacerebbe vederlo!