WordPress Web Sitesi Oluşturucuları için En Kullanışlı 5 Google Chrome Uzantısı

İş akışınızı optimize etmek, projenin başarısı için çok önemlidir. Zamandan ve paradan tasarruf sağlar, meslektaşlar, müşterilerle iletişimi geliştirir ve bitmiş WordPress sitesinin kalitesini artırır.

Günümüzde, görevinizi daha verimli bir şekilde yapmanıza yardımcı olabilecek bir uygulama, eklenti veya eklenti her zaman vardır. Bu yazımda sizlere ProteusThemes'de birçok içerik türünü iletmek, düzenlemek ve analiz etmek için tarayıcılarda (özellikle Google Chrome) ne tür uzantılar kullandığımızı göstermek istedim.

Kullandığım 5 Chrome uzantısının tümü ücretsiz olarak sunuluyor ve bunları yalnızca birkaç dakika içinde ayarlayabilirsiniz. Onlara bir göz atalım:

- Yazı Tipi

- Sayfa Cetveli

- ColorZilla

- Harika Ekran Görüntüsü

- stil robotu

Tüm uzantıları Chrome Web Mağazası'ndan yükleyebilirsiniz . Uzantıyı yükledikten sonra, simgesi tarayıcının araç çubuğunun sağ üst köşesinde, URL alanının yanında görünecektir. Uzantıyı çalıştırabilir veya simgesine tıklayarak tüm seçenekleri görüntüleyebilirsiniz.

URL alanının sonundaki menüye tıklayıp Diğer Araçlar'ı seçerseniz veya gerekli seçeneği belirlemek için uzantının simgesine sağ tıklarsanız, tüm yüklü uzantılar görülebilir, değiştirilebilir, etkinleştirilebilir veya devre dışı bırakılabilir.

Her uzantının ayrıntılarına girelim.

Yazı Tipi

WhatFont Uzantısını Alın

Hiç bir web sitesinde bulundunuz ve aynı yazı tipini kullanmak istediniz mi? Zor yoldan gidebilir, koddaki yazı tipini arayabilir veya WhatFont'u kullanabilirsiniz. Bu uzantı, metne tıklayarak farklı web sayfalarında kullanılan yazı tiplerini tanımlar. Açılır pencere, yazı tipiyle ilgili tüm bilgileri gösterir. Ayrıca kullanılan yazı tipinin adını almak için metnin üzerine gelebilirsiniz.

Bu aracı, bir sonraki proje için ilham ararken veya canlı yayına geçmeden önce WordPress web sitesinin son sürümünü kontrol ederken kullanıyorum. Farklı tarayıcı çözünürlüklerinde yazı tiplerini test ederken genellikle web tasarımcıları ve geliştiricileri tarafından kullanılır.

Genişletme, yazı tipinin aşağıdaki özelliklerini gösterir:

• Yazı Tipi Ağırlığı ve Stili (seçimin ağırlığını ve stilini gösterir).

• Yazı Tipi Ailesi (yazı tipinin geldiği yazı tipi koleksiyonunun tamamını gösterir, böylece yazı tipini takip edebilirsiniz).

• Yazı Tipi Boyutu (görüntülenen mevcut çözünürlükte kullanılan yazı tipinin boyutudur. İki farklı yazı tipi aynı boyuta ayarlandığında, farklılıkları nedeniyle genellikle birinin diğerinden daha büyük göründüğünü unutmayın. Boyut piksel olarak gösterilir ve ne yazık ki uzantı başka tipografik ölçüleri yoktur).

• Yazı Tipi Yüksekliği (büyük harfin tepesinden en alttaki alçaltıcının altına kadar olan yükseklik ve ayrıca küçük bir arabellek alanıdır).

• Yazı Tipi Rengi (Yazı tipinin HEX renk modeli. Bağlantıların metin rengini okurken dikkatli olun. Bazı durumlarda seçim, bağlantının rengini fareyle üzerine gelme modunda gösterir).

• Google Yazı Tipleri, Yazı Tipi Sincap veya TypeKit bağlantısı (bazı durumlarda yazı tipi, web sitelerinde gezinmenize ve web yazı tiplerini kullanmanıza olanak tanıyan etkileşimli uygulama programlama arabirimleri koleksiyonuna bağlıdır . Aynı yazı tipini arayın veya tüm yazı tipini elde edin) .
• Karakterler (seçilen yazı tipinde büyük ve küçük harflerden oluşan bir örnek gösterilir).

Ayrıca WhatFont'u kullanırken web sayfasıyla etkileşime geçemeyeceğinizi, yalnızca sayfada kaydırmanın etkin olduğunu unutmayın. Önceki açılır pencereyi kaybetmeden karşılaştırmak için birden fazla yazı tipine tıklayabilirsiniz.

Sayfa Cetveli

Sayfa Cetvel Uzantısını Alın

Sayfa Cetveli, herhangi bir sayfaya bir cetvel çizmenize olanak tanır ve öğenin genişliğini ve yüksekliğini ve web sayfasındaki konumunu görüntüler. Bir daha asla kodu görüntülemeniz veya ekran görüntüleri almanız ve bunları Photoshop'ta ölçmeniz gerekmeyecek. Araç, web sayfasındaki daha büyük öğelerin boyutunu ve konumunu kontrol ederken kullanışlıdır. Örneğin, onunla tüm dolguları ve kenar boşluklarını kontrol edebilirsiniz. Daha küçük elemanlar veya detaylar da ölçülebilir.

Sayfa Cetveli Nasıl Kullanılır

Tarayıcının araç çubuğunun sağ üst köşesindeki simgeye tıklayarak veya ALT + P tuşlarına basarak cetvel aracını kullanmaya başlayın . Seçimin genişliğini, yüksekliğini ve konumunu gösteren mavi cetvel çubuğu açılır - sol, üst, sağ, alt.

Bir seçim yapmak için tıklamanız, sürükleyip bırakmanız yeterlidir. Seçim verileri anında mavi araç çubuğunda görüntülenir. Cetvelin kenarlarını ve köşelerini tıklayıp hareket ettirerek, cetvel seçiminin boyutunu değiştirirsiniz. Ayrıca, mavi cetvel çubuğundaki alanlara istediğiniz boyutu veya konumu manuel olarak da girebilirsiniz. Başka bir seçenek, seçimi yeniden boyutlandırmak veya taşımak için alanlardaki küçük okları tıklamaktır. Bu, hassas değişiklikler yapmanızı sağlar. Seçimi ortasından sürükleyerek taşımak da mümkündür.

Daha küçük ayrıntıları ölçmek istediğinizde, web sayfasını yakınlaştırın. Bu aracın en büyük yararı, yakınlaştırdığınızda cetvelin seçime fazladan piksel eklememesidir.

Cetvelin seçimi ile sayfa öğesinde kullanılan renkler arasında daha iyi bir kontrast oluşturmak için cetvelin rengi değiştirilebilir, böylece daha doğru ölçümler yapabilirsiniz.

Birbirinden uzak iki eleman arasındaki boşluğu ölçmek için, cetvel kenarlarından uzanan kılavuzları görüntülemek için “Kılavuzları Göster” seçeneğini açın.

Ölçüm yaparken sizi rahatsız ediyorsa, araç çubuğunu web sayfasının altına yerleştirebilirsiniz.

Farenizi üzerlerinde hareket ettirirken sayfadaki öğelerin ana hatlarını belirlemek için "Öğe Modu"nu etkinleştirin (araç çubuğunun sol tarafındaki açık mavi oklara tıklayın). Öğelere tıklayarak sabit bir seçim elde edersiniz. Uzantı ayrıca web sitesi koduna göre öğeler arasında hareket etmenizi sağlar ve sağlar.

Öğe Modunda öğeleri bulma ve öğeler arasında gezinme

Eklentinin tek dezavantajı: Mobil görünümde öğenin boyutunu almanız gerekiyorsa, Sayfa Cetveli'ni başka bir yeniden boyutlandırma Chrome eklentisiyle (örn. geliştirici modunda web sayfasında.

ColorZilla

ColorZilla Uzantısını Alın

ColorZilla, web geliştiricilerine ve grafik tasarımcılarına renkle ilgili görevlerde yardımcı olan bir uzantıdır. Genellikle renk paletleri yapmak, renk kombinasyonlarından ilham almak veya belirli bir elementin rengini kontrol etmek için kullanılır. Web sayfasının herhangi bir yerinden bir renk okuması alabilir, bu rengi ayarlayabilir ve başka bir uygulama açmaya gerek kalmadan başka bir programa yapıştırabilirsiniz.

Bu araç, RGB ve onaltılık biçimde renk okumaları sağlar. ColorZilla'nın damlalık simgesine tıklayın, birçok seçenekten oluşan bir menü açar.

ColorZilla Nasıl Kullanılır

ColorZilla'nın en yaygın kullanımı, bir öğenin rengini okumaktır. "Sayfadan Renk Seç"e tıklamak, o anda görüntülenen sayfadan herhangi bir rengi seçmenize olanak tanır. Web sayfasının üst kısmında size rengin bir örneğini, RGB ve HEX renk biçimini ve renkli öğenin boyutunu ve kodunu gösteren bir araç çubuğu açar. Araç çubuğu ayrıca, ortalama rengi hesaplamak için daha büyük renk parçalarını seçme seçenekleri sunar.

Rengin HEX biçimini seçip üzerine tıklayarak kopyalıyorsunuz. HEX renk kodunu CTRL + V veya CMD + V düğmeleriyle yapıştırın . Farklı bir formatta tek seferlik kopyalama için açılır menüyü açıp “Panoya Kopyala”yı seçip istediğiniz formatı seçebilirsiniz.

Seçeneklerde sonraki tüm renkler için format değiştirilebilir. Orada # biçimini (66CAA6) devre dışı bırakabilir ve HEX kodunu küçük harfle (66caa6) yapabilirsiniz. Değişiklikleri kaydetmeyi unutmayın.

Seçtiğiniz son renk, ColorZilla simgesinin açılır menüsünde "Renk Seçici" altına kaydedilir. Renk Seçici, seçilen renklerin geçmişini saklar, rengi düzenleme seçeneğine sahiptir ve buradan kopyalayabilirsiniz.

“Web Sayfası Renk Analizörü”, mevcut web sayfanızda kullanılan tüm CSS renklerini okur. Renge tıklamak, bu renkteki her bir öğeyi vurgular ve rengin RGB ve HEX biçimini gösterir.

Yerleşik palet tarayıcısı, önceden var olan renk kümelerinden renk seçmenize olanak tanır. Renkle ilgili seçeneklerden biri de degradeler oluşturmak için gelişmiş bir seçenek olan “CSS Gradient Generator”.

Harika Ekran Görüntüsü

Harika Ekran Görüntüsü Uzantısı Alın

Bu uzantı, web sayfalarının ekran görüntüsünü almayı ve kaydetmeyi kolaylaştırır. Yerel görüntülerinizi içe aktarmak, düzenlemek ve dışa aktarmak da mümkündür. ProteusThemes'te, sunduğumuz WordPress desteğinin yanı sıra dahili olarak iletişim kurmak için her gün kullanıyoruz. Uzaktan çalışıyorsanız, araç çok kullanışlıdır. Evet, aynı işi yapabilen başka birçok uzantı var, ancak biz Müthiş Ekran Görüntüsü'nü basit ve güçlü olduğu için seviyoruz.

Harika Ekran Görüntüsü Nasıl Kullanılır

Bu genişleme şunları yapmanızı sağlar:

- web sayfasının görünen kısmını yakalamak için (gecikmeli altyazı seçeneği),

- seçilen alanı yakalamak için (görüntü olarak istediğiniz bir alanı seçin),

- tüm web sayfasını yakalamak için,

- masaüstünüzün ekran görüntüsünü almak için,

- yerel resminizi içe aktarmak ve düzenlemek için ve

- Ekranın bir videosunu kaydetmek için

Bir web sayfasının ekran görüntüsünü alma yollarından birini seçmek için tarayıcının araç çubuğundaki kamera merceği simgesine tıklayın. Müthiş Ekran Görüntüsünün gecikmeli olarak yakalanması dışında tüm eylemlerin anında gerçekleştirileceğini unutmayın. Yaptığınız ekran görüntüleri PNG veya JPEG görüntüsü olarak kaydedilecektir. Görüntü için istenen format, gecikmeli yakalama süresi, kısa kodlar ve görüntülerin otomatik olarak kaydedilmesini istediğiniz bir klasör gibi diğer ayarların da bulunduğu uzantı seçeneklerinde seçilebilir.

Web sayfasının mobil görünümünü istiyorsanız veya WordPress web sayfanızın ekran görüntüsünü başka bir çözünürlükte almak istiyorsanız, önce onu değiştirmek veya herhangi bir yeniden boyutlandırma genişletmesini etkinleştirmek için geliştirici moduna geçebilirsiniz (örn. Website Resizer).

Ekran görüntüsünü kaydetmeden önce, düzenleme ve yorum yapma şansınız var. Yakaladığınız görüntüde gezinin, kırpın ve özel veriler içeren kısımları kolayca bulanıklaştırın. Vurgu ve netlik için görüntüye metin, daireler, oklar ve farklı renklerde çizgilerle açıklama ekleyebilirsiniz. Kaydetmeden önce görüntüyü görüntülemek için büyüteç simgeleriyle yakınlaştırın ve uzaklaştırın.

Harika Ekran Görüntüsü ile araç çubuğu ve ekran görüntüsü düzenleme seçenekleri

Sonuçtan memnun kaldığınızda, görüntüyü bilgisayarınıza kaydedin, bulutlayın, paylaşın veya yazdırın.

Bu genişleme aynı zamanda 30 saniyelik ekran videosunu ücretsiz olarak kaydetme seçeneğine de sahiptir. Sekme veya pencere videosu yapabilirsiniz. Videolar WebM formatında kaydedilebilir, Google Drive'a aktarılabilir veya doğrudan YouTube'a yüklenebilir. Kayıtlarınız, “Kayıtlarım” altındaki Müthiş Ekran Görüntüsü açılır menüsünde bulunabilir.

Uzantının yalnızca iki dezavantajı, tarayıcıyı yakınlaştırdığınızda, seçilen alanın yakalanmasının çalışmaması ve birçok kullanıcının yapışkan öğeler içeren web sitelerinin güzel ekran görüntüsünü alamamasıdır.

Eğlenceli bilgiler: Bu makalede baktığınız ekran görüntülerinin ve videoların çoğu Müthiş Ekran Görüntüsü ile yapılmıştır.

stil robotu

Stylebot Uzantısını Alın

Stylebot, web sitesinin CSS'sini yalnızca görüntülemeniz için düzenlemenize ve değiştirmenize olanak tanır. Web sitesinin CSS'sinde kesin ve uzun vadeli değişiklikler yapmak için biraz CSS bilgisine ihtiyacınız olacak . Yalnızca WordPress sayfanızdaki değişikliklerin daha hızlı bir önizlemesi için ihtiyacınız varsa, gelişmiş CSS bilgisi gerekli değildir. Bu araç, olası tüm öğeleri değiştirmek, yenilerini eklemek, silmek ve web sitesinin farklı bir düzenini oluşturmak için kullanılır, böylece mükemmel ekran görüntüsü alabilir, istenmeyen hataları düzeltebilir veya web sitesinin CSS'sini kaydedebilirsiniz, böylece değişiklikler aynı zamanda olacaktır. sonraki ziyarette görülür. Oluşturduğunuz web sitesinin stili, içe veya dışa aktarılabilir ve başkalarıyla paylaşılabilir.

Daha gelişmiş düzenleme için, sayfadaki öğeleri tanımlamak için geliştirici moduyla birlikte Stylebot kullanılır.

Stylebot Nasıl Kullanılır

Stylebot'u açmak için tarayıcı araç çubuğundaki CSS simgesine tıklayın veya ALT + M tuşlarına basın . Çok fazla programlama beceriniz yoksa, yeni açılan sütunun en altındaki Temel modu seçmenizi öneririm.

Gelişmiş mod, seçili öğe için CSS kodunu yazdığınız bir metin alanı açar. Burada, değiştirmek istediğiniz öğenin adını iç içe geçmiş öğelerden bulmak ve düzenlemeye Stylebot'ta devam etmek için geliştirici moduyla birlikte çalışmak daha kolaydır. Aynı anda birçok düzenleme modunu kullanmak isterseniz, yapabilirsiniz. Basit düzenlemeler, Gelişmiş veya CSS Düzenle modunda görülebilecek şekilde koda çevrilecektir.

“CSS'yi Düzenle” seçeneği, tüm web sitesine uygulanacak ve web sitesini bir sonraki ziyaretinizde kaydedilebilecek, paylaşılabilecek ve kullanılabilecek CSS kodu için bir alan açar. Yaptığınız tüm değişiklikler görünür olacak. Web sitesini yenilerseniz yaptığınız tüm değişikliklerin kalacağını unutmayın. Stili kaldırmak için Stylebot simgesine tıklayın ve “Stillemeyi Kaldır”ı seçin.
Temel mod, web sitesinin daha hızlı ve daha kolay düzenlenmesi için basit bölümlere sahiptir. Bunu bazen hızlı bir önizleme aracı olarak kullanırız (örneğin daha büyük bir başlığın nasıl görüneceğini test etmek, arka planın rengini değiştirmek vb. için). Yeni başlayanlar , başlangıçtan itibaren kolayca kullanabilirler.

Burada değiştirebilirsiniz:

- Metin,

- renkler, arka planlar,

- sınırlar,

- düzen ve görünürlük.

Bir imleç ile web sitesinde (yeşil kenarlıkla vurgulanmış) bir öğeyi manuel olarak seçersiniz. Elemanın adı Stylebot sütununun en üstünde gösterilecektir. Yeni bir seçim için sütundaki sol üst simgeye tıklamanız yeterlidir. Öğe başlığındaki açılır ok, size önceden seçilmiş bölümleri sağlar. Doğru öğe seçildiğinde, değerleri girerek ve önceden şekillendirilmiş seçenekleri seçerek web sitesini değiştirmeye başlayabilirsiniz. Temel modda düzenleme seçenekleri sınırlıdır. Yazı tipi boyutunu, metnin rengini, dolguları ve kenar boşluklarını vb. değiştirebilirsiniz.

Stylebot düzenleme veya görüntüleme deneyiminizi daha keyifli hale getirmek için Stylebot simgesine tıklayın ve Seçenekler'i seçin. Burada kişiselleştirilmiş kısayollar oluşturabilir, tercih edilen düzenleme modunu seçebilir, farklı web sitelerinde uygulanan stillerinizi etkinleştirebilir ve devre dışı bırakabilir, stilleri içe ve dışa aktarabilirsiniz, vb.

İşte ProteusThemes'te günlük olarak kullandığımız ve iş akışınızı kolaylaştırabilecek en önemli ve güçlü uzantılardan sadece 5 tanesi. Aksini mi düşünüyorsun? Daha iyi alternatifler önerir misiniz? Yorum Yap.