5 cele mai utile extensii Google Chrome pentru creatorii de site-uri WordPress

Optimizarea fluxului de lucru este crucială pentru succesul proiectului. Economisește timp, bani, îmbunătățește comunicarea cu colegii, clienții și îmbunătățește calitatea site-ului WordPress finit.

În zilele noastre, există întotdeauna o aplicație, un plugin sau un add-on, care vă poate ajuta să vă faceți sarcina mai eficient. În acest articol, am vrut să vă arăt ce fel de extensii folosim în browsere (în special Google Chrome) la ProteusThemes pentru a comunica, edita și analiza multe tipuri de conținut.

Toate cele 5 extensii Chrome pe care le folosesc sunt disponibile gratuit și le puteți seta în doar câteva minute. Să aruncăm o privire la ele:

– WhatFont

– Riglă de pagină

– ColorZilla

– Captură de ecran minunată

– Stylebot

Puteți instala toate extensiile din Magazinul web Chrome . După instalarea extensiei, pictograma acesteia va fi vizibilă în colțul din dreapta sus al barei de instrumente a browserului, lângă câmpul URL. Rulați extensia sau vizualizați toate opțiunile făcând clic pe pictograma acesteia.

Toate extensiile instalate pot fi văzute, modificate, activate sau dezactivate, dacă faceți clic pe meniul de la sfârșitul câmpului URL și selectați Mai multe instrumente sau pur și simplu faceți clic dreapta pe pictograma extensiei pentru a alege opțiunea necesară.

Să ne aprofundăm în detaliile fiecărei extensii.

WhatFont

Obțineți extensia WhatFont

Ați fost vreodată pe un site web și ați dorit să utilizați același font? Ai putea merge pe calea grea, căutând fontul în cod, sau poți folosi WhatFont. Această extensie identifică fonturile utilizate pe diferite pagini web făcând clic pe text. Fereastra pop-up arată toate informațiile despre font. De asemenea, puteți trece cursorul peste text pentru a obține numele fontului utilizat.

Folosesc acest instrument atunci când caut inspirație pentru următorul proiect sau verific versiunea finală a site-ului WordPress înainte de a intra în direct. Este adesea folosit de designeri și dezvoltatori web atunci când testează fonturi în diferite rezoluții de browser.

Extinderea arată următoarele caracteristici ale fontului:

• Greutate și stil font (afișează greutatea și stilul selecției).

• Familia de fonturi (afișează colecția completă de fonturi din care provine fontul, astfel încât să îl puteți urmări).

• Dimensiunea fontului (este dimensiunea fontului utilizat în rezoluția vizualizată curent. Rețineți că, atunci când două fonturi diferite sunt setate în aceeași dimensiune, unul pare adesea mai mare decât celălalt din cauza diferențelor sale. Mărimea este afișată în pixeli și, din păcate, extensia nu are alte măsurători tipografice).

• Înălțimea fontului (este înălțimea de la partea de sus a literei majuscule până la partea de jos a celui mai jos descendent, plus un spațiu tampon mic).

• Culoare font (modelul de culoare HEX al fontului. Aveți grijă când citiți culoarea textului link-urilor. În unele cazuri, selecția arată culoarea linkului în modul de trecere cu mouse-ul).

• Google Fonts, Font Squirrel sau TypeKit link (în unele cazuri, fontul este conectat la o colecție de interfețe interactive de programare a aplicațiilor, care vă permite să răsfoiți și să utilizați fonturi web de pe site-ul lor . Căutați același font sau obțineți un tip întreg) .
• Caractere (un eșantion de litere mari și mici este afișat în fontul selectat).

De asemenea, rețineți că, în timp ce utilizați WhatFont, nu veți putea interacționa cu pagina web, doar derularea pe pagină este activă. Puteți face clic pe mai multe fonturi pentru a le compara, fără a pierde fereastra pop-up anterioară.

Riglă de pagină

Obțineți extensia riglă de pagină

Page Ruler vă permite să desenați o riglă pe orice pagină și să afișeze lățimea și înălțimea elementului și poziția acestuia pe pagina web. Nu va mai trebui niciodată să vizualizați codul sau să faceți capturi de ecran și să le măsurați în Photoshop. Instrumentul este util atunci când verificați dimensiunea și poziția elementelor mai mari pe pagina web. De exemplu, puteți verifica toate umpluturile și marginile cu acesta. Se pot măsura și elemente sau detalii mai mici.

Cum se utilizează rigla de pagină

Începeți să utilizați instrumentul riglă, făcând clic pe pictograma din dreapta sus a barei de instrumente a browserului sau apăsând ALT + P . Bara de riglă albastră apare, care afișează lățimea, înălțimea și poziția selecției - stânga, sus, dreapta, jos.

Pentru a face o selecție, pur și simplu faceți clic, trageți și eliberați. Datele de selecție sunt văzute instantaneu în bara de instrumente albastră. Făcând clic și mutând laturile și colțurile riglei, modificați dimensiunea selecției riglei. De asemenea, puteți introduce manual dimensiunea sau poziția dorită, în câmpurile de pe bara de riglă albastră. O altă opțiune este să faceți clic pe săgețile mici din câmpuri pentru a redimensiona sau a muta selecția. Acest lucru vă permite să faceți modificări precise. De asemenea, este disponibilă mutarea selecției, trăgând-o din centru.

Când doriți să măsurați detalii mai mici, măriți pagina web. Cel mai mare avantaj al acestui instrument este că rigla nu va adăuga niciun pixel suplimentar la selecție atunci când măriți.

Culoarea riglei poate fi schimbată, pentru a crea un contrast mai bun între selecția riglei și culorile utilizate pe elementul de pagină, astfel încât să puteți face măsurători mai precise.

Pentru a măsura spațiul dintre două elemente care sunt îndepărtate, activați opțiunea „Afișați ghiduri”, pentru a afișa liniile directoare care se extind de la marginile riglei.

Puteți andoca bara de instrumente în partea de jos a paginii web dacă vă deranjează, în timp ce efectuați măsurători.

Activați „Modul Element” (faceți clic pe săgețile albastre deschise din partea stângă a barei de instrumente) pentru a contura elementele de pe pagină, în timp ce mutați mouse-ul peste ele. Făcând clic pe elemente, obțineți o selecție constantă. Extensia afișează și vă permite să vă deplasați între elemente conform codului site-ului.

Găsirea și deplasarea între elemente în Modul Element

Singurul dezavantaj al pluginului: dacă trebuie să obțineți dimensiunea elementului în vizualizarea mobilă, va trebui să utilizați Page Ruler simultan cu un alt plugin Chrome de redimensionare (de ex. Window Resizer), deoarece Page Ruler nu funcționează atunci când sunteți pe pagina web în modul dezvoltator.

ColorZilla

Obțineți extensia ColorZilla

ColorZilla este o extensie care ajută dezvoltatorii web și designerii grafici cu sarcini legate de culoare. Este de obicei folosit pentru a face palete de culori, pentru a te inspira din combinații de culori sau pentru a verifica culoarea unui anumit element. Puteți obține o citire de culoare din orice parte a paginii web, puteți ajusta acea culoare și o puteți lipi într-un alt program, fără a fi nevoie să deschideți o altă aplicație.

Acest instrument oferă citiri de culoare în format RGB și hexazecimal. Faceți clic pe pictograma pipetă a ColorZilla pentru a deschide un meniu cu multe opțiuni.

Cum să utilizați ColorZilla

Cea mai comună utilizare a ColorZilla este de a citi culoarea unui element. Făcând clic pe „Alege culoarea din pagină” vă permite să alegeți orice culoare din pagina afișată în prezent. Deschide o bară de instrumente în partea de sus a paginii web, care vă arată o mostră de culoare, formatul de culoare RGB și HEX, precum și dimensiunea și codul elementului colorat. Bara de instrumente oferă, de asemenea, opțiuni pentru a selecta pete mai mari de culori, pentru a calcula culoarea medie.

Selectați și copiați formatul HEX al culorii făcând clic pe el. Lipiți codul de culoare HEX cu butoanele CTRL + V sau CMD + V . Pentru o singură copiere într-un format diferit, puteți deschide meniul drop-down, selectați „Copy To Clipboard” și alegeți formatul dorit.

Formatul poate fi schimbat pentru toate următoarele culori alese din opțiuni. Acolo puteți dezactiva formatul # (66CAA6) și puteți face codul HEX cu litere mici (66caa6). Nu uitați să salvați modificările.

Ultima culoare aleasă este salvată în meniul drop-down al pictogramei ColorZilla, sub „Color Picker”. Color Picker stochează istoricul culorilor alese, are o opțiune de editare a culorii și o puteți copia de aici.

„Webpage Color Analyser” citește toate culorile CSS utilizate pe pagina dvs. web curentă. Făcând clic pe culoare, evidențiază fiecare element în această culoare și arată formatul RGB și HEX al culorii.

Browserul de paletă încorporat vă permite să alegeți culori din seturi de culori preexistente. Una dintre opțiunile legate de culoare este, de asemenea, „CSS Gradient Generator”, o opțiune avansată pentru crearea degrade.

Captură de ecran minunată

Obțineți o extensie minunată pentru captură de ecran

Această extensie facilitează capturarea și înregistrarea paginilor web. De asemenea, este posibil să importați imaginile locale, să le editați și să le exportați. La ProteusThemes îl folosim zilnic pentru a comunica intern, precum și pentru suportul WordPress pe care îl oferim. Instrumentul este foarte util, dacă lucrați de la distanță. Da, există multe alte extensii, care pot face aceeași treabă, dar ne place Awesome Screenshot pentru că este simplu și puternic.

Cum să utilizați captură de ecran minunată

Această extindere vă permite:

– pentru a captura o parte vizibilă a paginii web (opțiune pentru subtitrări întârziate),

– pentru a captura zona selectată (selectați o zonă pe care o doriți ca imagine),

– pentru a captura întreaga pagină web,

– pentru a face o captură de ecran de pe desktop,

– pentru a importa și edita imaginea locală și

– pentru a înregistra un videoclip al ecranului.

Pentru a selecta una dintre modalitățile de a captura ecranul unei pagini web, faceți clic pe pictograma lentilei camerei din bara de instrumente a browserului. Rețineți că toate acțiunile, cu excepția captării întârziate a Capturii de ecran Awesome, vor fi efectuate instantaneu. Capturile de ecran pe care le faceți vor fi salvate ca imagine PNG sau JPEG. Formatul dorit pentru imagine poate fi ales în opțiunile extensiei, unde aveți și alte setări, cum ar fi timpul de captură întârziată, coduri scurte și un folder, în care doriți ca imaginile să fie salvate automat.

Dacă doriți o vizualizare mobilă a paginii web sau să faceți o captură de ecran a paginii dvs. web WordPress într-o altă rezoluție, puteți intra în modul dezvoltator pentru a o modifica sau pentru a activa mai întâi orice altă extindere de redimensionare (de exemplu, Website Resizer).

Înainte de a salva captura de ecran, aveți șansa să o editați și să o comentați. Derulați prin captură, decupați-o și estompați ușor porțiunile care conțin date private. Puteți adnota imaginea cu text, cercuri, săgeți și linii în culori diferite, pentru accentuare și claritate. Măriți și micșorați cu pictogramele lupă pentru a vizualiza imaginea înainte de salvare.

Bara de instrumente și opțiunile de editare a capturii de ecran cu Awesome Screenshot

Odată ce sunteți mulțumit de rezultat, salvați imaginea pe computer, cloud, partajați-o sau imprimați-o.

Această expansiune are, de asemenea, opțiunea de a înregistra video gratuit pe ecran de 30 de secunde. Puteți face videoclipuri cu filă sau fereastră. Videoclipurile pot fi salvate în format WebM, transferate pe Google Drive sau încărcate direct pe YouTube. Înregistrările dvs. pot fi găsite în meniul drop-down Awesome Screenshot sub „Înregistrările mele”.

Singurele două dezavantaje ale extensiei sunt că, atunci când măriți browserul, capturarea zonei selectate nu funcționează și mulți utilizatori nu pot obține capturi de ecran frumoase ale site-urilor web cu elemente lipicioase.

Fapt distractiv: majoritatea capturilor de ecran și videoclipurilor pe care le urmăriți în acest articol au fost realizate cu Awesome Screenshot.

Stylebot

Obțineți extensia Stylebot

Stylebot vă permite să editați și să manipulați CSS-ul site-ului web numai pentru vizualizare. Veți avea nevoie de anumite cunoștințe CSS pentru a face modificări precise și pe termen lung în CSS-ul site-ului web . Dacă aveți nevoie de el doar pentru o previzualizare mai rapidă a modificărilor de pe pagina dvs. WordPress, nu sunt necesare cunoștințe CSS avansate. Acest instrument este folosit pentru a modifica toate elementele posibile, pentru a adăuga altele noi, pentru a le șterge și pentru a face un aspect diferit al site-ului web, astfel încât să puteți face o captură de ecran perfectă, să remediați greșelile nedorite sau să salvați acel CSS al site-ului, astfel încât modificările vor fi de asemenea văzut în următoarea vizită. Stilul site-ului web pe care l-ați creat, poate fi importat sau exportat și partajat cu alții.

Pentru o editare mai avansată, Stylebot este folosit în combinație cu modul dezvoltator pentru a identifica elementele de pe pagină.

Cum să utilizați Stylebot

Pentru a deschide Stylebot, faceți clic pe pictograma CSS din bara de instrumente a browserului sau apăsați ALT + M . Dacă nu aveți prea multe abilități de programare, vă sugerez să alegeți modul Basic din partea de jos a coloanei nou deschise.

Modul Avansat deschide un câmp de text, în care scrieți codul CSS pentru elementul selectat. Aici, este mai ușor să lucrați în combinație cu modul dezvoltator pentru a găsi numele elementului pe care doriți să îl schimbați din elementele imbricate și pentru a continua editarea în Stylebot. Dacă doriți să utilizați mai multe moduri de editare în același timp, puteți. Editările simple vor fi traduse în cod, vizibil în modul Advance sau Edit CSS.

Opțiunea „Editați CSS” deschide un câmp pentru codul CSS, care va fi aplicat întregului site web și poate fi salvat, partajat și utilizat data viitoare când vizitați site-ul. Toate modificările pe care le-ați făcut vor fi vizibile. Rețineți că toate modificările pe care le faceți vor rămâne, dacă reîmprospătați site-ul. Pentru a elimina stilul, faceți clic pe pictograma Stylebot și alegeți „Eliminați stilul”.
Modul de bază are secțiuni simple pentru o editare mai rapidă și mai ușoară a site-ului web. Uneori îl folosim ca instrument de previzualizare rapidă (de exemplu, pentru a testa cum ar arăta un titlu mai mare, pentru a schimba culoarea fundalului etc.). Începătorii l-ar putea folosi cu ușurință de la început.

Aici poți schimba:

– text,

– culori, fundal,

– granițe,

– aspect și vizibilitate.

Alegeți manual un element de pe site (evidențiat cu chenar verde) cu un cursor. Numele elementului va fi afișat în partea de sus a coloanei Stylebot. Pentru o nouă selecție, faceți clic pe pictograma din stânga sus din coloană. Săgeata drop-down de la titlul elementului vă oferă secțiunile selectate anterior. Când este selectat elementul potrivit, puteți începe să schimbați site-ul web prin introducerea valorilor și alegerea opțiunilor pre-stilizate. Opțiunile de editare în modul de bază sunt limitate. Puteți modifica dimensiunea fontului, culoarea textului, umpluturile și marginile etc.

Pentru a vă face experiența de editare sau vizionare Stylebot mai plăcută, faceți clic pe pictograma Stylebot și alegeți Opțiuni. Aici puteți face comenzi rapide personalizate, alegeți modul de editare preferat, activați și dezactivați stilurile aplicate pe diferite site-uri web, importați și exportați stiluri etc.

Așadar, iată doar 5 extensii, cele mai esențiale și puternice, pe care le folosim zilnic la ProteusThemes și vă pot face și fluxul de lucru mai ușor. crezi altfel? Ați recomanda alternative mai bune? Lasa un comentariu.