5 estensioni di Google Chrome più utili per i creatori di siti Web WordPress

L'ottimizzazione del flusso di lavoro è fondamentale per il successo del progetto. Risparmia tempo, denaro, migliora la comunicazione con colleghi, clienti e migliora la qualità del sito WordPress finito.

Al giorno d'oggi, c'è sempre un'applicazione, un plug-in o un componente aggiuntivo, che può aiutarti a svolgere il tuo compito in modo più efficiente. In questo articolo, volevo mostrarti che tipo di estensioni utilizziamo nei browser (in particolare Google Chrome) su ProteusThemes per comunicare, modificare e analizzare molti tipi di contenuti.

Tutte e 5 le estensioni di Chrome che utilizzo sono disponibili gratuitamente e puoi impostarle in pochi minuti. Diamo un'occhiata a loro:

– WhatFont

– Righello di pagina

– ColorZilla

– Schermata fantastica

– Stylebot

Puoi installare tutte le estensioni dal Chrome Web Store . Dopo aver installato l'estensione, la sua icona sarà visibile nell'angolo in alto a destra della barra degli strumenti del browser, accanto al campo URL. Puoi eseguire l'estensione o visualizzare tutte le opzioni facendo clic sulla sua icona.

Tutte le estensioni installate possono essere visualizzate, modificate, attivate o disattivate, se fai clic sul menu alla fine del campo URL e selezioni Altri strumenti, o semplicemente fai clic con il pulsante destro del mouse sull'icona dell'estensione per scegliere l'opzione necessaria.

Entriamo nei dettagli di ciascuna estensione.

WhatFont

Ottieni l'estensione WhatFont

Sei mai stato su un sito Web e hai voluto utilizzare lo stesso carattere? Potresti andare nel modo più duro, cercando il carattere nel codice, oppure potresti usare WhatFont. Questa estensione identifica i caratteri utilizzati su diverse pagine Web facendo clic sul testo. La finestra pop-up mostra tutte le informazioni sul carattere. Puoi anche passare il mouse sopra il testo per ottenere il nome del carattere utilizzato.

Uso questo strumento quando cerco ispirazione per il prossimo progetto o controllo la versione finale del sito Web WordPress prima di andare in diretta. Viene spesso utilizzato da web designer e sviluppatori durante il test dei caratteri con risoluzioni del browser diverse.

L'espansione mostra le seguenti caratteristiche del font:

• Peso e stile font (mostra il peso e lo stile della selezione).

• Font Family (mostra la raccolta completa di caratteri tipografici da cui proviene il carattere, quindi puoi tenerne traccia).

• Dimensione carattere (è la dimensione del carattere utilizzato nella risoluzione corrente visualizzata. Si noti che, quando due caratteri diversi sono impostati nella stessa dimensione, uno spesso sembra più grande dell'altro a causa delle sue differenze. La dimensione è mostrata in pixel e sfortunatamente l'estensione non ha altre misure tipografiche).

• Altezza carattere (è l'altezza dalla parte superiore della lettera maiuscola alla parte inferiore del discendente più basso, più un piccolo spazio di buffer).

• Colore carattere (modello di colore HEX del carattere. Prestare attenzione durante la lettura del colore del testo dei collegamenti. In alcuni casi, la selezione mostra il colore del collegamento in modalità al passaggio del mouse).

• Link Google Fonts, Font Squirrel o TypeKit (in alcuni casi, il font è collegato a una raccolta di interfacce di programmazione di applicazioni interattive, che ti consentono di navigare e utilizzare i font Web dal loro sito Web . Cerca lo stesso font o ottieni un carattere tipografico intero) .
• Caratteri (nel carattere selezionato viene visualizzato un campione di lettere maiuscole e minuscole).

Tieni inoltre presente che durante l'utilizzo di WhatFont non sarai in grado di interagire con la pagina web, solo lo scorrimento della pagina è attivo. Puoi fare clic su più caratteri per confrontarli, senza perdere il pop-up precedente.

Righello di pagina

Ottieni l'estensione del righello della pagina

Page Ruler ti consente di disegnare un righello su qualsiasi pagina e mostra la larghezza e l'altezza dell'elemento e la sua posizione sulla pagina web. Non dovrai mai più visualizzare il codice o fare screenshot e misurarli in Photoshop. Lo strumento è utile per controllare la dimensione e la posizione di elementi più grandi sulla pagina web. Ad esempio, puoi controllare tutti i padding e i margini con esso. Possono essere misurati anche elementi o dettagli più piccoli.

Come utilizzare il righello di pagina

Inizia a utilizzare lo strumento righello, facendo clic sull'icona in alto a destra nella barra degli strumenti del browser o premi ALT + P . Viene visualizzata la barra blu del righello, che mostra la larghezza, l'altezza e la posizione della selezione: sinistra, in alto, a destra, in basso.

Per effettuare una selezione, fai semplicemente clic, trascina e rilascia. I dati di selezione vengono immediatamente visualizzati nella barra degli strumenti blu. Facendo clic e spostando i lati e gli angoli del righello, si modifica la dimensione della selezione del righello. Puoi anche inserire manualmente la dimensione o la posizione desiderata, nei campi sulla barra del righello blu. Un'altra opzione è fare clic sulle piccole frecce nei campi per ridimensionare o spostare la selezione. Ciò consente di apportare modifiche precise. È anche possibile spostare la selezione, trascinandola dal suo centro.

Quando vuoi misurare dettagli più piccoli, ingrandisci la pagina web. Il più grande vantaggio di questo strumento è che il righello non aggiungerà pixel extra alla selezione quando ingrandisci.

Il colore del righello può essere modificato, per creare un contrasto migliore tra la selezione del righello e i colori utilizzati nell'elemento della pagina, in modo da poter effettuare misurazioni più accurate.

Per misurare lo spazio tra due elementi molto distanti, attiva l'opzione "Mostra guide", per visualizzare le linee guida che si estendono dai bordi del righello.

Puoi ancorare la barra degli strumenti nella parte inferiore della pagina Web se ti dà fastidio mentre esegui le misurazioni.

Abilita "Modalità elemento" (fai clic sulle frecce azzurre sul lato sinistro della barra degli strumenti) per delineare gli elementi sulla pagina, spostando il mouse su di essi. Cliccando sugli elementi, ottieni una selezione costante. L'estensione mostra anche e ti consente di spostarti tra gli elementi in base al codice del sito web.

Trovare e spostarsi tra gli elementi in Element Mode

L'unico aspetto negativo del plug-in: se devi ottenere la dimensione dell'elemento nella visualizzazione mobile, dovrai utilizzare Page Ruler contemporaneamente a un altro plug-in di ridimensionamento di Chrome (es. Window Resizer), perché Page Ruler non funziona quando sei sulla pagina web in modalità sviluppatore.

ColorZilla

Ottieni l'estensione ColorZilla

ColorZilla è un'estensione che assiste sviluppatori web e grafici con attività relative al colore. Di solito viene utilizzato per creare palette di colori, trarre ispirazione da combinazioni di colori o controllare il colore di un determinato elemento. Puoi ottenere una lettura del colore da qualsiasi parte della pagina Web, regolare quel colore e incollarlo in un altro programma, senza dover aprire un'altra applicazione.

Questo strumento fornisce letture del colore in formato RGB ed esadecimale. Fare clic sull'icona del contagocce di ColorZilla per aprire un menu di molte opzioni.

Come usare ColorZilla

L'uso più comune di ColorZilla, è leggere il colore di un elemento. Facendo clic su "Scegli colore dalla pagina" puoi scegliere qualsiasi colore dalla pagina attualmente visualizzata. Apre una barra degli strumenti nella parte superiore della pagina Web, che mostra un campione del colore, il formato colore RGB e HEX e la dimensione e il codice dell'elemento colorato. La barra degli strumenti fornisce anche opzioni per selezionare campioni più grandi dei colori, per calcolare il colore medio.

Seleziona e copia il formato HEX del colore facendo clic su di esso. Incolla il codice colore HEX con i pulsanti CTRL+V o CMD+V . Per copiare una volta in un formato diverso, puoi aprire il menu a discesa, selezionare "Copia negli appunti" e scegliere il formato desiderato.

Il formato può essere modificato per tutti i successivi colori selezionati nelle opzioni. Lì puoi disabilitare il formato # (66CAA6) e rendere il codice HEX in minuscolo (66caa6). Non dimenticare di salvare le modifiche.

L'ultimo colore che hai scelto viene salvato nel menu a discesa dell'icona ColorZilla, sotto "Selettore colore". Color Picker memorizza la cronologia dei colori selezionati, ha un'opzione per modificare il colore e puoi copiarlo da qui.

“Webpage Color Analyser” legge tutti i colori CSS utilizzati nella tua pagina web corrente. Cliccando sul colore si evidenzia ogni elemento in questo colore e si mostra il formato RGB e HEX del colore.

Il browser della tavolozza integrato consente di scegliere i colori da set di colori preesistenti. Una delle opzioni relative al colore è anche "CSS Gradient Generator", un'opzione avanzata per la creazione di sfumature.

Schermata fantastica

Ottieni un'estensione per screenshot impressionante

Questa estensione semplifica lo screenshot e la registrazione di pagine Web. È anche possibile importare le tue immagini locali, modificarle ed esportarle. In ProteusThemes lo usiamo ogni giorno per comunicare internamente e per il supporto WordPress che offriamo. Lo strumento è molto utile, se lavori da remoto. Sì, ci sono molte altre estensioni, che possono fare lo stesso lavoro, ma ci piace Awesome Screenshot perché è semplice e potente.

Come utilizzare Screenshot impressionante

Questa espansione ti permette di:

– per acquisire parte visibile della pagina web (opzione per didascalia ritardata),

– per catturare l'area selezionata (selezionare un'area che si desidera come immagine),

– per catturare l'intera pagina web,

– per eseguire uno screenshot del desktop,

– per importare e modificare la tua immagine locale e

– per registrare un video dello schermo.

Per selezionare uno dei modi per eseguire lo screenshot di una pagina Web, fare clic sull'icona dell'obiettivo della fotocamera nella barra degli strumenti del browser. Tieni presente che tutte le azioni, ad eccezione dell'acquisizione ritardata dello screenshot impressionante, verranno eseguite all'istante. Gli screenshot che crei verranno salvati come immagine PNG o JPEG. Il formato desiderato per l'immagine può essere scelto nelle opzioni dell'estensione, dove hai anche altre impostazioni, come il tempo di acquisizione ritardata, gli shortcode e una cartella, in cui desideri che le immagini vengano salvate automaticamente.

Se desideri la visualizzazione mobile della pagina Web o fare uno screenshot della tua pagina Web WordPress in un'altra risoluzione, puoi andare in modalità sviluppatore per modificarla o per attivare prima qualsiasi altra espansione di ridimensionamento (es. Website Resizer).

Prima di salvare lo screenshot, hai la possibilità di modificarlo e commentarlo. Scorri l'acquisizione, ritagliala e sfoca facilmente le parti che contengono dati privati. Puoi annotare l'immagine con testo, cerchi, frecce e linee in diversi colori, per enfasi e chiarezza. Ingrandisci e rimpicciolisci con le icone della lente di ingrandimento per visualizzare l'immagine prima di salvarla.

Barra degli strumenti e opzioni di modifica degli screenshot con Awesome Screenshot

Quando sei soddisfatto del risultato, salva l'immagine sul tuo computer, cloud, condividila o stampala.

Questa espansione ha anche un'opzione per registrare video su schermo di 30 secondi gratuitamente. Puoi creare video di schede o finestre. I video possono essere salvati in formato WebM, trasferiti su Google Drive o caricati direttamente su YouTube. Le tue registrazioni possono essere trovate nel menu a discesa Awesome Screenshot sotto "Le mie registrazioni".

Gli unici due aspetti negativi dell'estensione sono che quando si ingrandisce il browser, l'acquisizione dell'area selezionata non funziona e molti utenti non possono ottenere schermate piacevoli dei siti Web con elementi appiccicosi.

Curiosità divertente: la maggior parte degli screenshot e dei video che stai guardando in questo articolo sono stati realizzati con Awesome Screenshot.

Stylebot

Ottieni l'estensione Stylebot

Stylebot ti consente di modificare e manipolare i CSS del sito Web solo per la tua visualizzazione. Avrai bisogno di una certa conoscenza CSS per apportare modifiche precise e a lungo termine al CSS del sito web . Se ne hai bisogno solo per un'anteprima più rapida delle modifiche sulla tua pagina WordPress, non è richiesta una conoscenza CSS avanzata. Questo strumento viene utilizzato per modificare tutti i possibili elementi, aggiungerne di nuovi, eliminarli e per creare un layout diverso del sito Web, in modo da poter fare screenshot perfetti, correggere errori indesiderati o salvare quel CSS del sito Web, quindi le modifiche saranno anche visto nella prossima visita. Lo stile del sito web che hai creato, può essere importato o esportato e condiviso con altri.

Per modifiche più avanzate, Stylebot viene utilizzato in combinazione con la modalità sviluppatore per identificare gli elementi sulla pagina.

Come usare Stylebot

Per aprire Stylebot, fai clic sull'icona CSS nella barra degli strumenti del browser o premi ALT + M . Se non hai molte capacità di programmazione, ti consiglio di scegliere la modalità Base in fondo alla colonna appena aperta.

La modalità Avanzata apre un campo di testo, in cui scrivi il codice CSS per l'elemento selezionato. Qui è più facile lavorare in combinazione con la modalità sviluppatore per trovare il nome dell'elemento che vuoi cambiare dagli elementi nidificati e continuare la modifica in Stylebot. Se desideri utilizzare più modalità di modifica contemporaneamente, puoi farlo. Le semplici modifiche verranno tradotte in codice, visibile in modalità Advance o Edit CSS.

L'opzione "Modifica CSS" apre un campo per il codice CSS, che verrà applicato all'intero sito Web e può essere salvato, condiviso e utilizzato alla successiva visita del sito Web. Tutte le modifiche che hai apportato saranno visibili. Nota che tutte le modifiche che apporti rimarranno se aggiorni il sito web. Per rimuovere lo stile, fai clic sull'icona Stylebot e scegli "Rimuovi stile".
La modalità base ha sezioni semplici per una modifica più rapida e semplice del sito web. A volte lo usiamo come strumento di anteprima rapida (ad es. per verificare l'aspetto di un'intestazione più grande, per cambiare il colore dello sfondo, ecc.). I principianti potrebbero usarlo facilmente dall'inizio.

Qui puoi modificare:

– testo,

– colori, sfondi,

– frontiere,

– disposizione e visibilità.

Scegli manualmente un elemento sul sito Web (evidenziato con un bordo verde) con un cursore. Il nome dell'elemento verrà mostrato nella parte superiore della colonna Stylebot. Per una nuova selezione, basta cliccare sull'icona in alto a sinistra nella colonna. La freccia a discesa sul titolo dell'elemento fornisce le sezioni precedentemente selezionate. Quando viene selezionato l'elemento giusto, puoi iniziare a modificare il sito Web inserendo i valori e selezionando le opzioni predefinite. Le opzioni di modifica in modalità base sono limitate. Puoi modificare la dimensione del carattere, il colore del testo, i riempimenti e i margini, ecc.

Per rendere più piacevole la tua esperienza di modifica o visualizzazione di Stylebot, fai clic sull'icona di Stylebot e scegli Opzioni. Qui puoi creare scorciatoie personalizzate, scegliere la modalità di modifica preferita, abilitare e disabilitare i tuoi stili applicati su diversi siti Web, importare ed esportare stili, ecc.

Quindi qui ci sono solo 5, le estensioni più essenziali e potenti, che utilizziamo quotidianamente su ProteusThemes e possono anche semplificare il tuo flusso di lavoro. La pensi diversamente? Consiglieresti alternative migliori? Lascia un commento.