Desain Tema WordPress Anda dengan YellowPencil Visual CSS Editor. WordPress merupakan platform web yang memberikan banyak kemudahan bagi para penggunanya. Salah satunya yaitu tentang tampilan WordPress, begitu banyak pilihan tema yang bisa di pilih untuk mempercantik tampilan website WordPress baik tema gratis maupun premium.

Dan selain itu, ada banyak pilihan lain untuk menyesuaikan desain tema WordPress agar tampil lebih sempurna sesuai dengan keinginan pengguna seperti page builder. Dan ada satu lagi plugin pihak ketiga yang bisa mengubah tampilan tema WordPress Anda dengan mudah yaitu YellowPencil Visual CSS Editor.

YellowPencil

Apa itu YellowPencil Visual CSS Editor?

YellowPencil adalah plugin WordPress yang memberikan kemampuan pengguna untuk dapat menyesuaikan desain tema WordPress dengan cara yang mudah. Bahkan Anda dapat mengubah tampilan situs WordPress tanpa harus menyentuh baris kode.

YellowPencil memberikan cara mudah untuk mendesain web dalam waktu yang singkat. Anda bisa mengedit elemen apa pun di situs web Anda, semua bisa dilakukan langsung di bagian depan secara live sehingga Anda dapat melihat setiap perubahan yang Anda lakukan. Anda bisa menyusun konten dengan mudah sesuai dengan imajinasi Anda, dan apalagi jika Anda memiliki pengetahuan tentang CSS yang baik maka akan jauh lebih mudah bagi Anda ketika menggunakan plugin ini untuk menciptakan desain web yang indah.

Plugin ini menawarkan banyak sekali fitur yang dibutuhkan untuk menyesuaikan desain situs Anda, beberapa fitur canggih dari YellowPencil adalah seperti pengubahan ukuran visual, penyesuaian warna, drag & drop, alat ukur, pola latar belakang, font google, terdapat lebih dari 50 style property, animasi dan masih banyak lagi.

Fitur Utama YellowPencil YellowPencil Visual CSS Editor

Seperti yang sudah saya sebutkan diatas bahwa YellowPencil memiliki banyak fitur untuk membantu Anda dalam mendesain tema WordPress dengan cepat dan mudah. Dan berikut adalah beberapa fitur utama dari YellowPencil Visual CSS editor yang bisa Anda dapatkan :

Element Inspector

Setiap elemen di situs web Anda terdiri dari beberapa lapisan dan YellowPencil memungkinkan Anda menyesuaikan lapisan manapun yang Anda di layout website Anda. Klik elemen apa pun yang ingin Anda sesuaikan dan mulai kustomisasi secara visual! Anda dapat mengedit warna, font, ukuran, posisi, dan banyak gaya lainnya. YellowPencil memiliki lebih dari 50 properti dan juga dilengkapi dengan alat canggih serta fitur unik tentang teknologi web.

50+ Property

Visual Editor YellowPencil memiliki +50 properti CSS, Properti ini memberi Anda kontrol penuh terhadap desain web. Dan setiap pengguna WordPress dapat menggunakan properti ini dengan mudah! Ada deskripsi yang tersedia di setiap properti untuk pemula.

600+ Font Family

YellowPencil dilengkapi dengan banyak font untuk membuat konten teks Anda lebih beragam dan sesuai keinginan Anda. Ada lebih dari 600 Google Font Families dibawa oleh YellowPencil. Anda bisa memilih berbagai macam font yang indah untuk menghasilkan desain web yang menakjubkan.

300+ Pattern Assent

YellowPencil memungkinkan Anda untuk mengunggah gambar latar belakang khusus milik Anda sendiri atau gunakan pilihan dari 300+ Pattern yang sudah disediakan oleh YellowPencil. Berikan tampilan baru ke situs web Anda dengan pola web paling populer.

Palet Warna Tren

Desain web akan selalu dekat dengan pilihan warna, dengan itu maka YellowPencil menyediakan berbagai macam pilihan warna palet yang beragam seperti warna datar, material dan palet warna khusus. Anda bisa membuat tampilan website Anda memiliki warna yang indah dengan mudah.

Live CSS Editor

YellowPencil dikembangkan untuk pemula dan pengguna tingkat lanjut. Bagi pemula yang tidak memiliki pengetahuan code dan ingin membuat tampilan website yang indah, maka YellowPencil merupakan pilihan yang tepat. Tapi bagi pengguna tingkat lanjut yang memerlukan Editor CSS, hal itu masih bisa Anda dapatkan karena YellowPencil menyediakan Live Editor CSS yang sangat baik bagi mereka yang ingin menuliskan code tambahan!

Logika Cerdas

YellowPencil memiliki logika super cerdas! Ini menghasilkan kode seperti pengembang web profesional. Class filtering YellowPencil dan nama tag dengan puluhan algoritme dan temukan Pemilih CSS terbaik untuk elemen yang ditargetkan.

Drag & Drop element

Seret & Jatuhkan elemen apa pun secara real-time, pindahkan elemen ke posisi apa pun yang Anda inginkan. Anda bisa menggunakan fitur ini dengan sangat mudah, menata ulang konten pada berbagai elemen yang tersedia hanya tinggal geser dan lepaskan.

Generator Animasi Visual

Buat animasi kustom dengan adegan! Generator animasi akan merekam gerakan Anda sebagai animasi! Tambahkan lebih banyak adegan, lebih banyak gaya dan bersenang-senang! Sediakan mobilitas untuk situs web Anda dengan animasi khusus Anda sendiri!

Visual Animation Manager

YellowPencil memiliki lebih dari 50 animasi siap pakai yang siap untuk Anda gunakan, atau Anda bisa menggunakan animasi kustom milik Anda sendiri. Dengan fitur ini, Anda bisa membuat webiste Anda memiliki tampilan yang unik, atraktif dan menarik, bahkan Anda dapat membuat film berbasis HTML / CSS dengan YellowPencil.

Resize Element Live

YellowPencil memberikan Anda kemudahan ketika ingin merubah ukuran lebar dan tinggi elemen dari opsi atau ubah ukuran elemen apa pun hanya dengan menggeser dan menyesuaikan ukuran sesuai keinginan Anda secara real-time.

Measuring Tool and Smart Guides

YellowPencil dilengkapi dengan Alat pengukur untuk membantu Anda melihat ukuran elemen dan Smart Guides yang memungkinkan penghitungan persimpangan persimpangan saat Anda menyeret dan mengubah ukuran elemen. Jadi, Anda bisa mengatur element dan konten secara presisi dengan mudah.

Manage All CSS Style

Anda dapat melihat semua halaman yang disesuaikan dan animasi yang dihasilkan dari Panel WordPress dan Anda juga dapat mengekspor semua kode CSS sebagai siap digunakan.

Custimize Any Page

YellowPencil memungkinkan Anda menyesuaikan halaman apa pun di situs web Anda. Ini kompatibel dengan jenis posting khusus, semua tema dan plugin.

Work on Wireframe Mode

YellowPencil dapat bekerja dalam mode Wireframe, dimana mode ini dapat membersihkan warna dari desain dan membantu Anda untuk fokus pada tata letak, dengan cara ini Anda dapat dengan mudah bekerja di situs web Anda.

Learn the theme design detail

Alat informasi desain menyediakan Anda untuk mempelajari informasi dasar dan lanjutan seperti tipografi. Contohnya; keluarga font yang digunakan, warna, HTML Class, lebar kontainer, jumlah elemen yang terpengaruh, nama tag elemen, kode DOM elemen, dan banyak lagi.

Fully Responsive

YellowPencil hadir dengan alat responsif lanjutan yang memungkinkan Anda menyesuaikan situs web untuk perangkat apa pun seperti seluler, tablet, desktop, dan lainnya. Sehingga Anda bisa menggunakan YellowPencil untuk mendesain tema WordPress Anda pada berbagai mode untuk menghasilkan tampilan yang sempurna di berbagai perangkat.

Cara Menggunakan YellowPencil di WordPress

Untuk menggunakan YellowPencil, hal pertama yang perlu Anda lakukan adalah membeli plugin ini di CodeCanyon dengan harga yang murah yaitu $26. Setelah proses pembelian selesai, silahkan unduh file plugin Yellow Pencil untuk di install di WordPress (atau Anda dapat menggunakan versi gratis yang tersedia di WordPress.org) ⇒ YellowPencil Free.

Kemudian buka dashboard WordPress Anda. Pilih ‘Plugins » Add New’.

Di halaman Add Plugins, klik ‘Upload Plugin » Choose File’.

Dan sekarang Install dan aktifkan plugin YellowPencil. Setelah itu, masukkan kode aktivasi yang diberikan saat Anda membeli plugin. Ini akan memberi Anda akses ke pembaruan plugin saat dirilis.

Setelah aktivasi, halaman selamat datang YellowPencil akan muncul di dashboard Anda dan klik ‘Let’s Start’. Ini akan membawa Anda langsung ke mode pengeditan.

Memahami Antarmuka YellowPencil Visual CSS Editor

Ketika Anda berada pada halaman pengeditan dengan YellowPencil, Anda akan melihat antarmuka YellowPencil yang sangat jelas dan intuitif untuk digunakan.

Sebelum Anda memilih elemen di halaman Anda dan mulai mengeditnya, Anda harus terlebih dahulu memilih jenis penyesuaian. Ini ditampilkan di Panel Editor, ketika tidak ada elemen yang dipilih.

Ada tiga jenis untuk dipilih; Global Customize, Customize One Page, dan Customize Templates.

• ‘Global Customize’ berarti bahwa perubahan yang Anda buat akan berlaku untuk setiap halaman situs Anda.
• ‘Customize One Page’, maka semua pengeditan hanya akan mempengaruhi halaman yang sedang Anda kerjakan.
• ‘Customize Templates’ berlaku untuk jenis posting saat ini, opsi yang bagus jika Anda ingin mengonfigurasi semua produk atau halaman blog.

Jenis kustomisasi yang Anda pilih akan ditampilkan di bagian atas Panel Editor. Pastikan Anda memeriksa bahwa Anda sedang mengedit dalam jenis yang tepat sebelum menyimpan pekerjaan Anda.

Selanjutnya, Anda akan melihat beberapa tool yang tersedia di sebelah kiri halaman, tool terdiri dari kursor inspector, pencarian element, CSS editor, responsive mode, measuring tool, wireframe, informasi desain, manajer animasi, undo dan redo.

Alat Toolbar YellowPencil

• Element Inspector – Ini memungkinkan Anda memilih elemen apa pun di halaman untuk disesuaikan.
• Undo and Redo – Coba desain yang berbeda di halaman Anda dengan aman dalam pengetahuan Anda dapat membatalkan atau mengulang pengeditan Anda.
• Layar penuh – Bekerja dalam layar penuh, memberi Anda pandangan yang jelas tentang kustomisasi Anda saat Anda membuatnya.
• Panel Editor menggabungkan tiga tombol penting
• Tombol Panel Editor YellowPencil
• Live Preview – Pratinjau perubahan Anda tanpa antarmuka YellowPencil yang ditampilkan.
• Setel Ulang Perubahan – Tidak suka suntingan Anda? Setel ulang perubahan yang Anda buat.
• Simpan – Setelah Anda mempratinjau karya Anda dan Anda senang dengan hasilnya, cukup tekan tombol simpan.

Panel yang berada di sisi kanan halaman adalah Panel Editor. Ketika tidak ada elemen pada halaman yang dipilih, ini akan menampilkan tiga jenis penyesuaian yang dapat diedit.

Dan ketika ada element yang dipilih maka akan menampilkan berbagai pilihan untuk kustomisasi seperti : Text, Background, Margin, Padding, Border, Border Radius, Position, Size, Animation, Box Shadow, dan Extra.

Kotak biru akan muncul di sekitar elemen yang dipilih, menunjukkan opsi penyesuaian tambahan.

Dibagian bawah halaman, akan memunculkan navigasi ketika ada elemen tertentu yang Anda klik.

Itulah sedikit penjelasan tentang antarmuka YellowPencil, Anda bisa membaca panduan secara lengkap tentang bagaimana menggunakan YellowPencil di WordPress untuk mempercantik desain tema WordPress Anda langsung di halaman dokumentasi YellowPencil, mereka sudah menyiapkan tutorial yang lengkap dari dasar sampai mahir. Silahkan cek disini ⇒ YellowPencil Documentation.

Harga YellowPencil

Plugin YellowPencil WordPress bisa Anda dapatkan secara gratis di WordPress.org, dan untuk versi premium ditawarkan dengan harga $26, Anda bisa membeli plugin di CodeCanyon. Harga $26 sudah termasuk dukungan 6 bulan, tetapi Anda memiliki opsi untuk membayar tambahan $7,88 untuk memperpanjang dukungan hingga 12 bulan.

Anda juga akan mendapatkan garansi uang kembali jika Anda tidak merasa plugin ini tidak sesuai dengan keinginan Anda. Tertarik dengan YellowPencil Visual CSS Editor WordPress?

Buy Yellow Pencil

Kesimpulan

YellowPencil merupakan alat yang hebat yang bisa membantu Anda menyesuaikan tampilan situs WordPress Anda menjadi lebih cantik dengan mudah bahkan tanpa pengetahuan coding sekalipun. Fitur dan kemudahan penggunaan memberi Anda semua yang Anda perlukan untuk membuat situs WordPress khusus dengan tampilan yang sesuai dengan keinginan Anda. Anda bisa membuat tampilan situs WordPress tampak lebih indah tergantung dari bagaimana imajinasi Anda dan mewujudkannya akan terasa sangat mudah dengan bantuan plugin YellowPencil Visual editor WordPress.

Baca : Smart Footer System – Ubah Tampilan Footer WordPress Lebih Keren

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.

Daftar isi Tutorial WordPress Terlengkap Gratis