5 Ekstensi Google Chrome Paling Berguna untuk Pembuat Situs WordPress

Mengoptimalkan alur kerja Anda sangat penting untuk keberhasilan proyek. Ini menghemat waktu, uang, meningkatkan komunikasi dengan kolega, klien, dan meningkatkan kualitas situs WordPress yang sudah jadi.

Saat ini, selalu ada aplikasi, plugin, atau add-on yang dapat membantu Anda melakukan tugas dengan lebih efisien. Dalam artikel ini, saya ingin menunjukkan kepada Anda jenis ekstensi apa yang kami gunakan di browser (khususnya Google Chrome) di ProteusThemes untuk berkomunikasi, mengedit, dan menganalisis berbagai jenis konten.

Semua 5 ekstensi Chrome yang saya gunakan tersedia secara gratis dan Anda dapat mengaturnya hanya dalam beberapa menit. Mari kita lihat mereka:

– ApaFont

– Penggaris Halaman

– ColorZilla

– Tangkapan Layar Luar Biasa

– Stylebot

Anda dapat memasang semua ekstensi dari Toko Web Chrome . Setelah menginstal ekstensi, ikonnya akan terlihat di sudut kanan atas bilah alat browser, di sebelah bidang URL. Anda menjalankan ekstensi atau melihat semua opsi dengan mengklik ikonnya.

Semua ekstensi yang diinstal dapat dilihat, dimodifikasi, diaktifkan atau dinonaktifkan, jika Anda mengklik menu di akhir bidang URL dan memilih Alat Lainnya, atau cukup klik kanan ikon ekstensi untuk memilih opsi yang diperlukan.

Mari selami detail setiap ekstensi.

ApaFont

Dapatkan Ekstensi WhatFont

Pernahkah Anda mengunjungi situs web dan ingin menggunakan font yang sama? Anda bisa melakukannya dengan susah payah, mencari font dalam kode, atau Anda bisa menggunakan WhatFont. Ekstensi ini mengidentifikasi font yang digunakan pada halaman web yang berbeda dengan mengklik teks. Jendela pop-up menampilkan semua informasi tentang font. Anda juga dapat mengarahkan kursor ke teks untuk mendapatkan nama font yang digunakan.

Saya menggunakan alat ini ketika saya sedang mencari inspirasi untuk proyek berikutnya atau memeriksa versi final situs WordPress sebelum ditayangkan. Ini sering digunakan oleh desainer dan pengembang web saat menguji font dalam resolusi browser yang berbeda.

Perluasan menunjukkan karakteristik font berikut:

• Font Weight & Style (menunjukkan bobot dan gaya seleksi).

• Keluarga Font (menunjukkan koleksi lengkap tipografi dari mana font itu berasal, sehingga Anda dapat melacaknya).

• Ukuran Font (adalah ukuran font yang digunakan dalam resolusi yang dilihat saat ini. Perhatikan bahwa, ketika dua font berbeda diatur dalam ukuran yang sama, yang satu sering terlihat lebih besar dari yang lain karena perbedaannya. Ukuran ditampilkan dalam piksel dan sayangnya ekstensi tidak memiliki pengukuran tipografi lainnya).

• Font Tinggi (adalah tinggi dari atas huruf kapital ke bagian bawah descender terendah, ditambah ruang penyangga kecil).

• Warna Font (Model warna font HEX. Hati-hati saat membaca warna teks tautan. Dalam beberapa kasus, pemilihan menunjukkan warna tautan dalam mode hover).

• Google Fonts, Font Squirrel atau TypeKit link (dalam beberapa kasus, font terhubung ke kumpulan antarmuka pemrograman aplikasi interaktif, yang memungkinkan Anda untuk menelusuri dan menggunakan font web dari situs web mereka . Cari font yang sama atau dapatkan seluruh jenis huruf) .
• Karakter (contoh huruf besar dan kecil ditampilkan dalam font yang dipilih).

Perhatikan juga, bahwa saat menggunakan WhatFont, Anda tidak akan dapat berinteraksi dengan halaman web, hanya pengguliran pada halaman yang aktif. Anda dapat mengklik beberapa font untuk membandingkannya, tanpa kehilangan pop-up sebelumnya.

Penggaris Halaman

Dapatkan Ekstensi Penggaris Halaman

Penggaris Halaman memungkinkan Anda menggambar penggaris ke halaman mana pun dan menampilkan lebar dan tinggi elemen, serta posisinya di halaman web. Anda tidak perlu lagi melihat kode atau membuat tangkapan layar dan mengukurnya di Photoshop. Alat ini berguna saat memeriksa ukuran dan posisi elemen yang lebih besar di halaman web. Misalnya, Anda dapat memeriksa semua padding dan margin dengannya. Elemen atau detail yang lebih kecil juga dapat diukur.

Cara Menggunakan Penggaris Halaman

Mulai gunakan alat penggaris, dengan mengeklik ikon di kanan atas bilah alat peramban atau tekan ALT + P . Bilah penggaris biru muncul, yang menampilkan lebar, tinggi, dan posisi pilihan – kiri, atas, kanan, bawah.

Untuk membuat pilihan, cukup klik, seret dan lepaskan. Data seleksi langsung terlihat di toolbar biru. Dengan mengklik dan memindahkan sisi dan sudut penggaris, Anda mengubah ukuran pilihan penggaris. Anda juga dapat memasukkan ukuran atau posisi yang diinginkan secara manual, di bidang pada bilah penggaris biru. Pilihan lain, adalah mengklik panah kecil di bidang untuk mengubah ukuran atau memindahkan pilihan. Ini memungkinkan Anda untuk membuat perubahan yang tepat. Memindahkan pilihan, dengan menyeretnya dari pusatnya, juga tersedia.

Saat Anda ingin mengukur detail yang lebih kecil, perbesar halaman web. Manfaat terbesar alat ini adalah, penggaris tidak akan menambahkan piksel tambahan apa pun ke pilihan saat Anda memperbesar.

Warna penggaris dapat diubah, untuk menciptakan kontras yang lebih baik antara pemilihan penggaris dan warna yang digunakan pada elemen halaman, sehingga Anda dapat melakukan pengukuran yang lebih akurat.

Untuk mengukur jarak antara dua elemen yang berjauhan, aktifkan opsi “Show Guides”, untuk menampilkan garis pedoman yang memanjang dari tepi penggaris.

Anda dapat memasang bilah alat ke bagian bawah halaman web jika itu mengganggu Anda, saat melakukan pengukuran.

Aktifkan "Mode Elemen" (klik panah biru muda di sisi kiri bilah alat) untuk menguraikan elemen pada halaman, saat Anda menggerakkan mouse ke atasnya. Dengan mengklik elemen, Anda mendapatkan pilihan yang stabil. Ekstensi juga menampilkan dan memungkinkan Anda untuk berpindah antar elemen sesuai dengan kode situs web.

Menemukan dan berpindah antar elemen dalam Mode Elemen

Satu-satunya kelemahan plugin: jika Anda perlu mendapatkan ukuran elemen dalam tampilan seluler, Anda harus menggunakan Penggaris Halaman secara bersamaan dengan plugin Chrome pengubahan ukuran lainnya (mis. Pengubah Ukuran Jendela), karena Penggaris Halaman tidak berfungsi saat Anda di halaman web dalam mode pengembang.

ColorZilla

Dapatkan Ekstensi ColorZilla

ColorZilla adalah ekstensi, yang membantu pengembang web dan desainer grafis dengan tugas terkait warna. Biasanya digunakan untuk membuat palet warna, mendapatkan inspirasi dari kombinasi warna atau memeriksa warna elemen tertentu. Anda bisa mendapatkan pembacaan warna dari bagian mana pun dari halaman web, menyesuaikan warna itu dan menempelkannya ke program lain, tanpa harus membuka aplikasi lain.

Alat ini menyediakan pembacaan warna dalam format RGB dan heksadesimal. Klik pada ikon eyedropper ColorZilla untuk membuka menu dengan banyak pilihan.

Cara Menggunakan ColorZilla

Penggunaan ColorZilla yang paling umum, adalah untuk membaca warna suatu elemen. Mengklik "Pilih Warna Dari Halaman" memungkinkan Anda memilih warna apa pun dari halaman yang sedang ditampilkan. Ini membuka bilah alat di bagian atas halaman web, yang menunjukkan contoh warna, format warna RGB dan HEX, serta ukuran dan kode elemen berwarna. Bilah alat juga menyediakan opsi untuk memilih tambalan warna yang lebih besar, untuk menghitung warna rata-rata.

Anda memilih dan menyalin format warna HEX dengan mengkliknya. Tempel kode warna HEX dengan tombol CTRL + V atau CMD + V . Untuk satu kali copy dalam format yang berbeda, Anda dapat membuka menu dropdown, pilih “Copy To Clipboard” dan pilih format yang diinginkan.

Format dapat diubah untuk semua warna pilihan berikutnya dalam opsi. Di sana Anda dapat menonaktifkan # format (66CAA6) dan membuat kode HEX dalam huruf kecil (66caa6). Jangan lupa untuk menyimpan perubahan.

Warna terakhir yang Anda pilih disimpan di menu tarik-turun ikon ColorZilla, di bawah "Pemilih Warna". Color Picker menyimpan riwayat warna yang dipilih, memiliki opsi untuk mengedit warna dan Anda dapat menyalinnya dari sini.

“Penganalisis Warna Halaman Web” membaca semua warna CSS yang digunakan pada halaman web Anda saat ini. Mengklik warna menyoroti setiap elemen dalam warna ini dan menunjukkan format warna RGB dan HEX.

Peramban palet bawaan memungkinkan Anda, untuk memilih warna dari set warna yang sudah ada sebelumnya. Salah satu opsi terkait warna juga "CSS Gradient Generator", opsi lanjutan untuk membuat gradien.

Tangkapan Layar Luar Biasa

Dapatkan Ekstensi Tangkapan Layar yang Luar Biasa

Ekstensi ini memudahkan untuk screenshot dan merekam halaman web. Dimungkinkan juga untuk mengimpor gambar lokal Anda, mengeditnya, dan mengekspornya. Di ProteusThemes kami menggunakannya setiap hari untuk berkomunikasi secara internal serta untuk dukungan WordPress yang kami tawarkan. Alat ini sangat berguna, jika Anda bekerja dari jarak jauh. Ya, ada banyak ekstensi lain, yang dapat melakukan pekerjaan yang sama, tetapi kami menyukai Tangkapan Layar yang Luar Biasa karena sederhana dan kuat.

Cara Menggunakan Tangkapan Layar yang Luar Biasa

Perluasan ini memungkinkan Anda:

– untuk menangkap bagian halaman web yang terlihat (opsi untuk teks tertunda),

– untuk menangkap area yang dipilih (pilih area yang Anda inginkan sebagai gambar),

– untuk menangkap seluruh halaman web,

– untuk screenshot desktop Anda,

– untuk mengimpor dan mengedit gambar lokal Anda dan

– untuk merekam video dari layar.

Untuk memilih salah satu cara screenshot halaman web, klik ikon lensa kamera di bilah alat browser. Perhatikan bahwa semua tindakan, kecuali penangkapan Tangkapan Layar Luar Biasa yang tertunda, akan dilakukan secara instan. Tangkapan layar yang Anda buat, akan disimpan sebagai gambar PNG atau JPEG. Format yang diinginkan untuk gambar dapat dipilih dalam opsi ekstensi, di mana Anda juga memiliki pengaturan lain, seperti waktu pengambilan tertunda, kode pendek dan folder, di mana Anda ingin gambar disimpan secara otomatis.

Jika Anda ingin tampilan halaman web seluler atau membuat tangkapan layar halaman web WordPress Anda dalam resolusi lain, Anda dapat masuk ke mode pengembang untuk memodifikasinya atau mengaktifkan ekspansi pengubahan ukuran lainnya terlebih dahulu (mis. Pengubah Ukuran Situs Web).

Sebelum menyimpan tangkapan layar, Anda memiliki kesempatan untuk mengedit dan mengomentarinya. Gulir melalui tangkapan Anda, potong dan dengan mudah mengaburkan bagian, yang berisi data pribadi. Anda dapat membubuhi keterangan gambar dengan teks, lingkaran, panah, dan garis dalam warna yang berbeda, untuk penekanan dan kejelasan. Perbesar dan perkecil dengan ikon kaca pembesar untuk melihat gambar sebelum disimpan.

Opsi pengeditan bilah alat dan tangkapan layar dengan Tangkapan Layar Luar Biasa

Setelah Anda puas dengan hasilnya, simpan gambar ke komputer Anda, cloud, bagikan atau cetak.

Perluasan ini juga memiliki opsi untuk merekam video layar 30 detik secara gratis. Anda dapat membuat video tab atau jendela. Video dapat disimpan dalam format WebM, ditransfer ke Google Drive atau langsung diunggah di YouTube. Rekaman Anda dapat ditemukan di menu tarik-turun Tangkapan Layar Luar Biasa di bawah "Rekaman Saya".

Satu-satunya dua kelemahan ekstensi adalah, ketika Anda memperbesar browser, pengambilan area yang dipilih tidak berfungsi dan banyak pengguna tidak bisa mendapatkan tangkapan layar yang bagus dari situs web dengan elemen lengket.

Fakta trivia yang menyenangkan: sebagian besar tangkapan layar dan video yang Anda lihat di artikel ini dibuat dengan Tangkapan Layar yang Luar Biasa.

Stylebot

Dapatkan Ekstensi Stylebot

Stylebot memungkinkan Anda untuk mengedit dan memanipulasi CSS situs web hanya untuk dilihat. Anda akan memerlukan beberapa pengetahuan CSS untuk membuat perubahan yang tepat dan jangka panjang pada CSS situs web . Jika Anda hanya membutuhkannya untuk pratinjau perubahan yang lebih cepat di halaman WordPress Anda, pengetahuan CSS tingkat lanjut tidak diperlukan. Alat ini digunakan untuk mengubah semua elemen yang mungkin, menambahkan yang baru, menghapusnya, dan membuat tata letak situs web yang berbeda, sehingga Anda dapat membuat tangkapan layar yang sempurna, memperbaiki kesalahan yang tidak diinginkan, atau menyimpan CSS situs web tersebut, sehingga perubahan juga akan terjadi. terlihat pada kunjungan berikutnya. Gaya situs web yang Anda buat, dapat diimpor atau diekspor dan dibagikan dengan orang lain.

Untuk pengeditan lebih lanjut, Stylebot digunakan dalam kombinasi dengan mode pengembang untuk mengidentifikasi elemen pada halaman.

Cara Menggunakan Stylebot

Untuk membuka Stylebot, klik ikon CSS di bilah alat browser atau tekan ALT + M . Jika Anda tidak memiliki banyak keterampilan pemrograman, saya sarankan Anda untuk memilih mode Dasar di bagian bawah kolom yang baru dibuka.

Mode Lanjutan membuka bidang teks, di mana Anda menulis kode CSS untuk elemen yang dipilih. Di sini, lebih mudah untuk bekerja dalam kombinasi dengan mode pengembang untuk menemukan nama elemen yang ingin Anda ubah dari elemen bersarang dan melanjutkan pengeditan di Stylebot. Jika Anda ingin menggunakan banyak mode pengeditan sekaligus, Anda bisa. Pengeditan sederhana akan diterjemahkan ke dalam kode, terlihat dalam mode Advance atau Edit CSS.

Opsi "Edit CSS" membuka bidang untuk kode CSS, yang akan diterapkan ke seluruh situs web dan dapat disimpan, dibagikan, dan digunakan saat Anda mengunjungi situs web berikutnya. Semua perubahan yang Anda buat, akan terlihat. Perhatikan bahwa semua perubahan yang Anda buat, akan tetap ada, jika Anda me-refresh situs web. Untuk menghapus styling, klik pada icon Stylebot dan pilih “Remove Styling”.
Mode dasar memiliki bagian sederhana untuk pengeditan situs web yang lebih cepat dan mudah. Kami terkadang menggunakannya sebagai alat pratinjau cepat (misalnya untuk menguji bagaimana tampilan heading yang lebih besar, untuk mengubah warna latar belakang, dll.). Pemula dapat dengan mudah menggunakannya dari awal.

Di sini Anda dapat mengubah:

– teks,

– warna, latar belakang,

– perbatasan,

– tata letak & visibilitas.

Anda secara manual memilih elemen di situs web (disorot dengan batas hijau) dengan kursor. Nama elemen akan ditampilkan di bagian atas kolom Stylebot. Untuk pilihan baru, cukup klik ikon kiri atas di kolom. Drop-down-arrow di judul elemen, memberi Anda bagian yang dipilih sebelumnya. Saat elemen yang tepat dipilih, Anda dapat mulai mengubah situs web dengan memasukkan nilai dan memilih opsi yang telah diatur sebelumnya. Opsi pengeditan dalam mode dasar terbatas. Anda dapat mengubah ukuran font, warna teks, padding dan margin, dll.

Untuk membuat pengalaman mengedit atau melihat Stylebot Anda lebih menyenangkan, klik ikon Stylebot dan pilih Opsi. Di sini Anda dapat membuat pintasan yang dipersonalisasi, memilih mode pengeditan yang disukai, mengaktifkan dan menonaktifkan gaya Anda yang diterapkan di berbagai situs web, gaya impor dan ekspor, dll.

Jadi di sini hanya 5, ekstensi paling penting dan kuat, yang kami gunakan setiap hari di ProteusThemes dan juga dapat membuat alur kerja Anda lebih mudah. Apakah Anda berpikir sebaliknya? Apakah Anda akan merekomendasikan alternatif yang lebih baik? Tinggalkan komentar.