5 extensions Google Chrome les plus utiles pour les créateurs de sites Web WordPress

L'optimisation de votre flux de travail est cruciale pour la réussite du projet. Cela fait gagner du temps, de l'argent, améliore la communication avec les collègues, les clients et améliore la qualité du site WordPress fini.

De nos jours, il existe toujours une application, un plugin ou un add-on, qui peut vous aider à faire votre tâche plus efficacement. Dans cet article, je voulais vous montrer quel type d'extensions nous utilisons dans les navigateurs (en particulier Google Chrome) chez ProteusThemes pour communiquer, éditer et analyser de nombreux types de contenu.

Les 5 extensions Chrome que j'utilise sont disponibles gratuitement et vous pouvez les configurer en quelques minutes seulement. Jetons un coup d'œil à eux :

– QuelleFont

– Règle de page

– CouleurZilla

– Superbe capture d'écran

– Stylebot

Vous pouvez installer toutes les extensions du Chrome Web Store . Après avoir installé l'extension, son icône sera visible dans le coin supérieur droit de la barre d'outils du navigateur, à côté du champ URL. Vous exécutez l'extension ou affichez toutes les options en cliquant sur son icône.

Toutes les extensions installées peuvent être vues, modifiées, activées ou désactivées, si vous cliquez sur le menu à la fin du champ URL et sélectionnez Plus d'outils, ou faites simplement un clic droit sur l'icône de l'extension pour choisir l'option nécessaire.

Plongeons dans les détails de chaque extension.

QuelleFont

Obtenir l'extension WhatFont

Avez-vous déjà été sur un site Web et avez-vous voulu utiliser la même police ? Vous pouvez aller à la dure, en recherchant la police dans le code, ou vous pouvez utiliser WhatFont. Cette extension identifie les polices utilisées sur différentes pages Web en cliquant sur le texte. La fenêtre contextuelle affiche toutes les informations sur la police. Vous pouvez également survoler le texte pour obtenir le nom de la police utilisée.

J'utilise cet outil lorsque je cherche de l'inspiration pour le prochain projet ou que je vérifie la version finale du site Web WordPress avant de le mettre en ligne. Il est souvent utilisé par les concepteurs et les développeurs Web lors du test de polices dans différentes résolutions de navigateur.

L'expansion montre les caractéristiques suivantes de la police :

• Épaisseur et style de la police (affiche l'épaisseur et le style de la sélection).

• Famille de polices (affiche la collection complète de polices de caractères d'où provient la police, afin que vous puissiez la suivre).

• Taille de la police (est la taille de la police utilisée dans la résolution actuellement affichée. Notez que, lorsque deux polices différentes sont définies dans la même taille, l'une semble souvent plus grande que l'autre en raison de ses différences. La taille est indiquée en pixels et, malheureusement, l'extension n'a pas d'autres mesures typographiques).

• Hauteur de la police (est la hauteur entre le haut de la lettre majuscule et le bas du descendant le plus bas, plus un petit espace tampon).

• Couleur de la police (modèle de couleur HEX de la police. Soyez prudent lorsque vous lisez la couleur du texte des liens. Dans certains cas, la sélection affiche la couleur du lien en mode survol).

• Lien Google Fonts, Font Squirrel ou TypeKit (dans certains cas, la police est connectée à une collection d'interfaces de programmation d'applications interactives, ce qui vous permet de parcourir et d'utiliser des polices Web à partir de leur site Web . Recherchez la même police ou obtenez une police complète) .
• Caractères (un échantillon de lettres majuscules et minuscules est affiché dans la police sélectionnée).

Notez également que lors de l'utilisation de WhatFont, vous ne pourrez pas interagir avec la page Web, seul le défilement sur la page est actif. Vous pouvez cliquer sur plusieurs polices pour les comparer, sans perdre la fenêtre contextuelle précédente.

Règle de page

Obtenir l'extension de règle de page

Page Ruler vous permet de tracer une règle sur n'importe quelle page et affiche la largeur et la hauteur de l'élément, ainsi que sa position sur la page Web. Vous n'aurez plus jamais à visualiser le code ou à faire des captures d'écran et à les mesurer dans Photoshop. L'outil est utile pour vérifier la taille et la position d'éléments plus volumineux sur la page Web. Par exemple, vous pouvez vérifier tous les rembourrages et les marges avec. Des éléments ou des détails plus petits peuvent également être mesurés.

Comment utiliser la règle de page

Commencez à utiliser l'outil règle en cliquant sur l'icône en haut à droite de la barre d'outils du navigateur ou en appuyant sur ALT + P . La barre de règle bleue apparaît, qui affiche la largeur, la hauteur et la position de la sélection - gauche, haut, droite, bas.

Pour faire une sélection, cliquez simplement, faites glisser et relâchez. Les données de sélection s'affichent instantanément dans la barre d'outils bleue. En cliquant et en déplaçant les côtés et les coins de la règle, vous modifiez la taille de la sélection de la règle. Vous pouvez également saisir manuellement la taille ou la position souhaitée dans les champs de la barre de règle bleue. Une autre option consiste à cliquer sur les petites flèches dans les champs pour redimensionner ou déplacer la sélection. Cela vous permet de faire des changements précis. Le déplacement de la sélection, en la faisant glisser depuis son centre, est également disponible.

Lorsque vous souhaitez mesurer des détails plus petits, effectuez un zoom avant sur la page Web. Le principal avantage de cet outil est que la règle n'ajoutera aucun pixel supplémentaire à la sélection lorsque vous effectuez un zoom avant.

La couleur de la règle peut être modifiée pour créer un meilleur contraste entre la sélection de la règle et les couleurs utilisées sur l'élément de page, afin que vous puissiez effectuer des mesures plus précises.

Pour mesurer l'espace entre deux éléments éloignés, activez l'option "Afficher les guides", pour afficher les lignes directrices s'étendant à partir des bords de la règle.

Vous pouvez ancrer la barre d'outils au bas de la page Web si cela vous dérange, tout en effectuant des mesures.

Activez le "Mode élément" (cliquez sur les flèches bleu clair sur le côté gauche de la barre d'outils) pour décrire les éléments sur la page, lorsque vous déplacez votre souris dessus. En cliquant sur les éléments, vous obtenez une sélection stable. L'extension affiche également et vous permet de vous déplacer entre les éléments en fonction du code du site Web.

Recherche et déplacement entre les éléments en mode élément

Le seul bémol du plugin : si vous avez besoin d'obtenir la taille de l'élément en vue mobile, vous devrez utiliser Page Ruler simultanément avec un autre plugin Chrome de redimensionnement (par exemple Window Resizer), car Page Ruler ne fonctionne pas lorsque vous êtes sur la page Web en mode développeur.

CouleurZilla

Obtenir l'extension ColorZilla

ColorZilla est une extension qui assiste les développeurs Web et les graphistes dans les tâches liées aux couleurs. Il est généralement utilisé pour créer des palettes de couleurs, s'inspirer de combinaisons de couleurs ou vérifier la couleur d'un certain élément. Vous pouvez obtenir une lecture des couleurs de n'importe quelle partie de la page Web, ajuster cette couleur et la coller dans un autre programme, sans avoir à ouvrir une autre application.

Cet outil fournit des lectures de couleurs au format RVB et hexadécimal. Cliquez sur l'icône de la pipette de ColorZilla pour ouvrir un menu de nombreuses options.

Comment utiliser ColorZilla

L'utilisation la plus courante de ColorZilla est de lire la couleur d'un élément. Cliquer sur "Choisir la couleur de la page" vous permet de choisir n'importe quelle couleur de la page actuellement affichée. Il ouvre une barre d'outils en haut de la page Web, qui vous montre un échantillon de la couleur, du format de couleur RVB et HEX, ainsi que la taille et le code de l'élément coloré. La barre d'outils fournit également des options pour sélectionner de plus grands patchs de couleurs, pour calculer la couleur moyenne.

Vous sélectionnez et copiez le format HEX de la couleur en cliquant dessus. Collez le code couleur HEX avec les boutons CTRL + V ou CMD + V . Pour une copie unique dans un format différent, vous pouvez ouvrir le menu déroulant, sélectionner "Copier dans le presse-papiers" et choisir le format souhaité.

Le format peut être modifié pour toutes les prochaines couleurs sélectionnées dans les options. Là, vous pouvez désactiver le format # (66CAA6) et créer du code HEX en minuscules (66caa6). N'oubliez pas d'enregistrer les modifications.

La dernière couleur que vous avez choisie est enregistrée dans le menu déroulant de l'icône ColorZilla, sous "Color Picker". Color Picker stocke l'historique des couleurs sélectionnées, a une option pour modifier la couleur et vous pouvez la copier à partir d'ici.

"Webpage Color Analyser" lit toutes les couleurs CSS utilisées sur votre page Web actuelle. Cliquer sur la couleur met en surbrillance chaque élément de cette couleur et affiche le format RVB et HEX de la couleur.

Le navigateur de palettes intégré vous permet de choisir des couleurs parmi des ensembles de couleurs préexistants. L'une des options liées à la couleur est également "CSS Gradient Generator", une option avancée pour créer des dégradés.

Superbe capture d'écran

Obtenez une extension de capture d'écran impressionnante

Cette extension facilite la capture d'écran et l'enregistrement de pages Web. Il est également possible d'importer vos images locales, de les éditer et de les exporter. Chez ProteusThemes nous l'utilisons au quotidien pour communiquer en interne ainsi que pour le support WordPress que nous proposons. L'outil est très utile si vous travaillez à distance. Oui, il existe de nombreuses autres extensions, qui peuvent faire le même travail, mais nous aimons Awesome Screenshot parce qu'il est simple et puissant.

Comment utiliser une capture d'écran impressionnante

Cette extension vous permet :

– pour capturer une partie visible de la page Web (option de sous-titrage différé),

– pour capturer la zone sélectionnée (sélectionnez une zone que vous voulez comme image),

– pour capturer une page Web entière,

– faire une capture d'écran de votre bureau,

– pour importer et éditer votre image locale et

– pour enregistrer une vidéo de l'écran.

Pour sélectionner l'une des méthodes de capture d'écran d'une page Web, cliquez sur l'icône de l'objectif de l'appareil photo dans la barre d'outils du navigateur. Notez que toutes les actions, à l'exception de la capture différée de la capture d'écran impressionnante, seront effectuées instantanément. Les captures d'écran que vous faites seront enregistrées au format PNG ou JPEG. Le format souhaité pour l'image peut être choisi dans les options de l'extension, où vous avez également d'autres paramètres, tels que l'heure de la capture différée, les codes abrégés et un dossier, dans lequel vous souhaitez que les images soient automatiquement enregistrées.

Si vous souhaitez une vue mobile de la page Web ou pour faire une capture d'écran de votre page Web WordPress dans une autre résolution, vous pouvez passer en mode développeur pour la modifier ou activer d'abord toute autre extension de redimensionnement (par exemple Website Resizer).

Avant d'enregistrer la capture d'écran, vous avez la possibilité de la modifier et de la commenter. Faites défiler votre capture, recadrez-la et floutez facilement les parties contenant des données privées. Vous pouvez annoter l'image avec du texte, des cercles, des flèches et des lignes de différentes couleurs, pour plus de netteté et de clarté. Effectuez un zoom avant et arrière avec des icônes de loupe pour afficher l'image avant de l'enregistrer.

Barre d'outils et options d'édition de capture d'écran avec Awesome Screenshot

Une fois que vous êtes satisfait du résultat, enregistrez l'image sur votre ordinateur, sur le cloud, partagez-la ou imprimez-la.

Cette extension a également une option pour enregistrer gratuitement une vidéo d'écran de 30 secondes. Vous pouvez créer une vidéo d'onglet ou de fenêtre. Les vidéos peuvent être enregistrées au format WebM, transférées sur Google Drive ou directement téléchargées sur YouTube. Vos enregistrements peuvent être trouvés dans le menu déroulant Awesome Screenshot sous "Mes enregistrements".

Les deux seuls inconvénients de l'extension sont que lorsque vous zoomez dans le navigateur, la capture de la zone sélectionnée ne fonctionne pas et de nombreux utilisateurs ne peuvent pas obtenir une belle capture d'écran des sites Web avec des éléments collants.

Fait amusant : la plupart des captures d'écran et des vidéos que vous regardez dans cet article ont été réalisées avec Awesome Screenshot.

Stylebot

Obtenir l'extension Stylebot

Stylebot vous permet de modifier et de manipuler le CSS du site Web pour votre visualisation uniquement. Vous aurez besoin de quelques connaissances en CSS pour effectuer des modifications précises et à long terme sur le CSS du site Web . Si vous n'en avez besoin que pour un aperçu plus rapide des modifications sur votre page WordPress, des connaissances CSS avancées ne sont pas nécessaires. Cet outil est utilisé pour modifier tous les éléments possibles, en ajouter de nouveaux, les supprimer et faire une mise en page différente du site Web, afin que vous puissiez faire une capture d'écran parfaite, corriger les erreurs indésirables ou enregistrer ce CSS du site Web, de sorte que les modifications seront également à voir lors de la prochaine visite. Le style du site Web que vous avez créé peut être importé ou exporté et partagé avec d'autres.

Pour une édition plus avancée, Stylebot est utilisé en combinaison avec le mode développeur pour identifier les éléments de la page.

Comment utiliser Stylebot

Pour ouvrir le Stylebot, cliquez sur l'icône CSS dans la barre d'outils du navigateur ou appuyez sur ALT + M . Si vous n'avez pas beaucoup de compétences en programmation, je vous suggère de choisir le mode Basic en bas de la colonne nouvellement ouverte.

Le mode Avancé ouvre un champ de texte dans lequel vous écrivez le code CSS pour l'élément sélectionné. Ici, il est plus facile de travailler en combinaison avec le mode développeur pour trouver le nom de l'élément que vous souhaitez modifier parmi les éléments imbriqués et continuer l'édition dans Stylebot. Si vous souhaitez utiliser plusieurs modes d'édition en même temps, vous le pouvez. Les modifications simples seront traduites en code, visible en mode Advance ou Edit CSS.

L'option "Modifier CSS" ouvre un champ pour le code CSS, qui sera appliqué à l'ensemble du site Web et pourra être enregistré, partagé et utilisé la prochaine fois que vous visiterez le site Web. Toutes les modifications que vous avez apportées seront visibles. Notez que toutes les modifications que vous apportez resteront si vous actualisez le site Web. Pour supprimer le style, cliquez sur l'icône Stylebot et choisissez "Supprimer le style".
Le mode de base comporte des sections simples pour une édition plus rapide et plus facile du site Web. Nous l'utilisons parfois comme un outil de prévisualisation rapide (par exemple pour tester à quoi ressemblerait un titre plus grand, pour changer la couleur de l'arrière-plan, etc.). Les débutants pourraient facilement l'utiliser dès le début.

Ici, vous pouvez modifier :

– texte,

– couleurs, arrière-plans,

– les frontières,

– mise en page & visibilité.

Vous sélectionnez manuellement un élément sur le site Web (mis en évidence par une bordure verte) avec un curseur. Le nom de l'élément sera affiché en haut de la colonne Stylebot. Pour une nouvelle sélection, il suffit de cliquer sur l'icône en haut à gauche de la colonne. Flèche déroulante au titre de l'élément, vous fournit les sections précédemment sélectionnées. Lorsque le bon élément est sélectionné, vous pouvez commencer à modifier le site Web en entrant les valeurs et en choisissant des options pré-stylées. Les options d'édition en mode de base sont limitées. Vous pouvez modifier la taille de la police, la couleur du texte, les remplissages et les marges, etc.

Pour rendre votre expérience d'édition ou de visualisation Stylebot plus agréable, cliquez sur l'icône Stylebot et choisissez Options. Ici, vous pouvez créer des raccourcis personnalisés, choisir le mode d'édition préféré, activer et désactiver vos styles appliqués sur différents sites Web, importer et exporter des styles, etc.

Voici donc seulement 5 extensions, les plus essentielles et les plus puissantes, que nous utilisons quotidiennement chez ProteusThemes et qui peuvent également faciliter votre flux de travail. Pensez-vous autrement? Recommanderiez-vous de meilleures alternatives? Laissez un commentaire.