Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress

Cara Menyesuaikan Situs WordPress Anda Tanpa Harus Memahami CSS

by
Difficulty:BeginnerLength:MediumLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Indonesian (Bahasa Indonesia) translation by Uady (you can also view the original English article)

Kami akan menunjukkan kepada Anda bagaimana Anda dapat membuat perubahan visual yang serius ke website WordPress Anda dengan benar-benar tidak ada pengalaman sebelumnya CSS. Tapi pertama-tama, mari kita luangkan waktu sebentar untuk sedikit apresiasi WordPress.

Antarmuka wordpress Lama

Ingat ini? Ini adalah apa yang tampak seperti ketika kami pertama kali jatuh cinta dengan WordPress. Sebelas tahun kemudian dan kami sedang masih jatuh cinta dengan itu tetapi (untungnya) itu berubah begitu banyak hal diakui.

Dari platform blogging sederhana ke sistem manajemen konten yang paling populer di dunia, WordPress sekarang  adalah dasar dari ratusan ribu situs web populer dengan tentara pengembang yang bekerja pada platform, dan tentara pengembang membangun begitu sekali banyak tema dan plugin untuk itu, yang menjual mereka adalah pekerjaan penuh waktu untuk banyak orang. ThemeForest adalah mungkin paling terkenal tema toko online, dan mereka memiliki hampir 20.000 tema, yang sebagian besar adalah untuk WordPress. Untuk memasukkan ke dalam perspektif, Anda bisa memiliki sebuah situs web yang berbeda setiap hari selama 54 tahun!

Anda akan sulit ditekan untuk menemukan produk yang sebanding, dibayar atau gratis, yang membuatnya begitu mudah bagi non-coders untuk pergi dari nol sampai sebuah situs web yang berfungsi sepenuhnya dengan mudah.

Dalam beberapa tahun terakhir kita telah melihat kustomisasi untuk WordPress yang dibuat lebih mudah, berkat daftar tumbuh builder halaman yang membantu pengguna menarik bersama-sama desain mereka sendiri dengan kemudahan. Menggabungkan alat arsitektur yang kuat dengan daftar semakin keamanan, berbagi dan komentar plugin, itu super sederhana untuk membangun situs yang selalu Anda inginkan.

Segala sesuatu yang disebutkan di atas akan mendapatkan 90% dari jalan; Semua konten yang Anda butuhkan, sebuah platform yang Anda percayai; mencari hampir sempurna terima kasih untuk kerja keras para pengembang bangunan besar tema dan plugin.

Tetapi bahkan dengan tema terbaik Anda selalu akan ingin membuat perubahan kecil. Sedikit suntingan visual untuk membuat tema Anda, berbeda dari apa pun. Apakah itu adalah pembulatan sudut atau penebalan perbatasan atau mengubah bayangan di sekitar objek, itu adalah perubahan yang membuat tema besar sempurna.

Semua perubahan yang disebutkan di atas datang ke menyesuaikan CSS. Mudah cukup jika Anda seorang desainer atau pengembang, tetapi seperti mencoba membaca matriks jika Anda tidak.

Membuat perubahan CSS digunakan untuk berarti menggunakan alat dirancang untuk pengembang, alat-alat seperti Browser Inspectors untuk menemukan relevan CSS selector dan memanipulasi mereka secara manual. Anda kemudian akan memiliki untuk menyalin CSS sebagai teks, menyisipkannya ke editor teks untuk memastikan itu hanya informasi yang Anda diperlukan dan tidak mengambil pilihan browser seperti kotak centang atau nama-nama style sheet. Anda akan kemudian membuat tema child untuk situs WordPress Anda dan menyalinnya di sana, atau menggunakan kotak CSS kustom yang sekarang datang dengan begitu banyak tema. Itu adalah proses yang sangat panjang. Dengan begitu banyak langkah paparan Anda membuat kesalahan akan meningkat dan pemecahan masalah dapat babi waktu.

Memperkenalkan CSS Hero

Hanya sebagai page builder dibuat mengubah struktur situs WordPress lebih mudah, CSS Hero memungkinkan pengeditan visual. Sebagai non-desainer Anda mungkin melihat sudut dan berpikir "membuat melengkung, itu tidak boleh terlalu sulit", tapi kemudian Anda memeriksa kode yang diperlukan untuk membuat perubahan dan itu menakutkan;

Antarmuka CSS Hero

Menggunakan CSS Hero merasa lebih seperti menggunakan Photoshop atau produk serupa. Slider memungkinkan Anda untuk menyesuaikan hal-hal seperti padding, margin, ketajaman sudut dan ukuran font, sementara palet warna memungkinkan Anda menyesuaikan tampilan default untuk lebih cocok dengan tema merek dan gaya Anda.
Bahkan veteran desainer dan CSS guru menghargai real-time yang user-friendly interface. Itu hanya membuat hal-hal yang lebih halus, lebih cepat dan lebih mudah untuk menyesuaikan.

Seberapa mudah? Mudah seperti menginstal plugin.

CSS Hero tidak dengan panjang instruksi manual karena Anda tidak akan membutuhkannya. Kami akan menunjukkan kepada Anda bagaimana Anda dapat menyesuaikan situs Anda dalam beberapa menit.

Memulai

CSS Hero baut tombol

Kustomisasi setiap dimulai dengan mengklik Petir biru. Ini akan membuka menu CSS Hero kustomisasi tepat di bagian depan situs web Anda, tidak main-main di dasbor, membuat perubahan dan kemudian kembali ke depan untuk melihat seperti apa tampilan mereka. Menonton perubahan-perubahan yang terjadi ketika Anda membuat mereka.

Apa yang Anda lakukan dengan CSS adalah terserah Anda, meninggalkannya di CSS Hero dan akan bekerja seperti pesona dengan tidak ada tindakan lebih lanjut diperlukan. Anda juga dapat menyalin itu ke dalam tema anak atau panel CSS kustom Anda. CSS Anda, aturan Anda. Mari kita melompat langsung ke suntingan!

Hover, Target, perubahan

Untuk demonstrasi ini kami menggunakan tema Divi by Elegant Tema. Ini adalah salah satu dari lusinan tema Hero-Ready (yang berarti kami telah menambahkan semua penyeleksi yang Anda butuhkan untuk membuatnya bekerja langsung dari kotak). Jika Anda tidak menggunakan tema hero-ready, Anda masih dapat menambahkan kelas Anda sendiri dan id langsung ke CSS hero, atau menggunakan Mode Roket, tetapi kita akan membahasnya nanti.

Dengan pengecualian menambahkan beberapa halaman dan posting blog, kita sudah mulai dengan Divi cukup banyak 'apa adanya'. Kami ingin menunjukkan kepada Anda apa CSS Hero dengan tema yang segar. Kami menggunakan posting blog sebagai contoh karena mungkin secara default, Bagian terjelas Divi. Itu hanya bagian yang mana Anda tidak dapat menggunakan built-in halaman Pembina, jadi di sini Anda akan paling pasti ingin menambahkan sentuhan pribadi Anda sendiri.

Mengubah desain Header.

Pertama dari kita ingin mengubah bahwa header-itu sangat datar-Simpan untuk garis abu-abu tipis di bawah ini ada sangat sedikit terjadi. Kita akan menggunakan CSS Hero untuk menambahkan drop shadow di bawah ini dan meningkatkan dari halaman. CSS Hero dilengkapi dengan banyak pilihan untuk menambahkan jenis bayangan, yang semuanya dapat men-tweak untuk membantu Anda mendapatkan efek yang diinginkan.

Bayangan kotak

Selanjutnya kita akan mengubah warnanya sedikit menjadi putih. Anda dapat menggunakan pemilih warna built-in untuk membuat perubahan ini, atau jika Anda bekerja dari skema warna, Anda cukup memasukkan nilai RGBA atau HEX. Keduanya didukung dan mudah untuk diinput

Mengubah warna latar belakang Header

Selanjutnya kita akan untuk menargetkan bagian badan blog, dengan mengkliknya jadi CSS Hero dapat menunjukkan pilihan yang tersedia. Dari sini kita akan mengubah warna latar belakang menjadi abu-abu gelap. Sekarang header kami berdiri keluar dan setelah kami melakukan perubahan tambahan, sehingga akan konten kami dan sidebar.

Dengan mengubah latar belakang area kiri menjadi putih, itu benar-benar berada di luar halaman, tetapi warnanya sedikit meluntur ke tepi sehingga kami telah memberikannya batas yang lebih gelap dengan tebal hanya 1 piksel. Sedikit penyesuaian untuk radius perbatasan memberikan bagian kurva bagus dan menyesuaikan padding membuat tepi yang bagus di sekitar isi.

Kami telah mengubah font judul untuk Helvatica. Salah satu dari lebih dari 100 font Google ditampilkan dalam font menu drop-down di CSS Hero, tetapi jika Anda ingin menambahkan salah satu 550+ Google font lain mudah untuk dilakukan.

Mengubah Font: Helvatica
Perubahan latar belakang abu-abu
Tambahkan 1px perbatasan
Menambahkan 20px padding
Menambahkan perbatasan radius

Mengubah ukuran gambar Feature

Secara default, Divi menambahkan fitur gambar dari posting blog di bawah judul di lebar penuh. Ini memakan banyak ruang di atas flip dan mendorong teks keluar dari pandangan. Kami telah menggunakan CSS Hero untuk mengubah lebar sampai 50% dan mengambang kanan gambar. Dengan pengaturan tinggi baru gambar untuk auto itu telah terus dengan rasio aspek dan gambar tampak sempurna di semua perangkat. Kami juga telah menambahkan sedikit sedikit padding untuk gambar sehingga teks tidak duduk di sebelah kanan itu. Menambahkan sudut sedikit melengkung ke gambar menggunakan slider batas radius di CSS Hero adalah semua yang diperlukan untuk membuat gambar ini terlihat sempurna.

Mengubah ukuran gambar menampilkan dan menambahkan radius perbatasan

Beberapa kecil lainnya suntingan menggunakan CSS Hero termasuk kapitalisasi teks meta, perubahan warna dan perbatasan 'submit comment' tombol dan kami cukup senang dengan bagaimana bagian kiri terlihat. Jika kita bandingkan dengan bagaimana itu tampak sebelumnya, Anda dapat melihat kemajuan besar telah dilakukan dalam hitungan menit.

Meta sedang huruf besar

Sidebar

Kami kemudian pindah ke sidebar lagi, secara default, cukup sederhana. Dengan memanfaatkan teknik yang sama digunakan untuk mengedit bagian kiri kami, kami dapat dengan cepat menerapkan tepi melengkung dan latar belakang gelap yang membantu bagian ini melompat dari halaman. Kami mengubah font judul untuk mencocokkan penyesuaian saat ini kami dan memberi mereka pucat untuk membantu menonjol pada latar belakang gelap.

Kami mengubah warna link untuk membuat mereka lebih ringan dan ditargetkan mereka khusus untuk ketika pengguna melayang dan menetapkan warna yang berbeda. Kami berhasil menyingkirkan biru listrik standar dan pergi dengan sesuatu yang sedikit lebih sesuai dengan tema. Jika Anda ingin, Anda juga bisa mengatur warna yang berbeda untuk aktif link dan link yang telah dikunjungi di masa lalu menggunakan CSS Hero.

Sidebar

Apa yang Baru Saja Kita Lakukan?

Melalui utilitas ekspor CSS Hero, kami dapat melihat apa yang baru saja kami buat di situs kami, di sisi kode.

Hal ini dapat berguna bagi mereka yang ingin memulai pengertian CSS, serta untuk devs yang hanya ingin Ekspor dihasilkan kode dan Salin dan paste di mana pun mereka inginkan.

Fragmen dari seluruh CSS, dihasilkan oleh CSS Hero

 Inspector CSS Hero

Anda bahkan dapat menggunakan alat inspektur baru kami untuk meneliti CSS yang telah Anda buat dan kuasai dengan bagaimana perubahan ini dibuat. Anda dapat menggunakan inspektur untuk membuat perubahan kecil untuk CSS Anda juga, seperti menyesuaikan ukuran font, kurva atau ketebalan dari perbatasan, atau apa pun. Comfier Anda mendapatkan dengan CSS, menjadi lebih berguna alat Inspektur.

Secara keseluruhan, penyesuaian ini hanya membutuhkan waktu lima menit. Lima menit untuk benar-benar mengubah hampir setiap elemen dari posting blog.

Hero Ready, Mengkonfigurasi dan Mode roket

Hero Ready tema baik untuk pergi keluar dari kotak seperti yang dibahas sebelumnya. Sebagian besar tema WordPress yang populer adalah hero ready, termasuk Generatepress, Enfold, Genesis framework, Pagelines DMS, WooCommerce plugin dan LayersWP.

Ini berarti tidak ada konfigurasi yang diperlukan, tetapi jika itu, itu mudah juga. Ada dua cara untuk pergi tentang itu.

Roket Mode

Sebuah fitur yang relatif baru dan satu bahwa kami tidak cukup menyukai, roket modus, akan secara otomatis mencari tema Anda style sheet untuk berlaku penyeleksi. Setelah ditemukan, itu akan menambahkannya ke CSS Hero dan memungkinkan non-hero Anda siap untuk bekerja dengan sangat baik tanpa konfigurasi lebih lanjut. Jika untuk alasan apapun Anda tema menunjukkan sebagai tidak padan dengan roket Mode, Anda dapat menambahkan penyeleksi Anda dengan alat konfigurasi built-in.

Menambahkan kelas ID dan CSS Hero

Configurator Cepat

Jika anda tahu classes dan ID yang digunakan tema Anda, Anda dapat menambahkan secara manual ke CSS Hero dan menargetkan mereka seperti Anda akan memiliki elemen lain dalam tema Hero ready. Butuh bantuan menemukan mereka? Coba periksa alat elemen di sebagian besar browser atau mencari gaya Anda untuk apa pun dengan titik (.) Diulusan atau hastag (#). Alternatifnya, sebagian besar tema high end akan mencakup dokumentasi, baik dalam tema itu sendiri atau di situs web mereka dengan pemilih yang relevan yang Anda butuhkan.

Page Builders, Plugin, CSS Hero

Kami sebutkan sebelumnya tentang manfaat struktural menggunakan builder page untuk mempercepat / mempermudah proses membangun page di WordPress. Tetapi Anda tetap ingin mengontrol tampilan mereka, bukan? Hal yang sama dapat dikatakan untuk plugin yang membangun formulir, menambahkan tabel, dll.
Itulah salah satu alasan kami melihat lebih dari sekedar tema ketika membangun CSS Hero. Anda akan dapat langsung menggunakannya, seperti yang ditunjukkan saat mengedit blog home, dengan sumber daya WordPress yang keren. Beaver Builder, page builder yang sangat popular sepenuhnya kompatibel dengan CSS Hero, seperti Visual Composer dan Contack Form 7. Periksa untuk melihat apakah plugin yang Anda gunakan kompatibel di sini.

Jadi begitulah! Tanpa pernah mengetahui CSS ( atau bahasa pemrograman lainnya dalam hal ini), Anda dapat membangun situs WordPress yang sepenuhnya responsif dan sangat disesuaikan. Jika Anda melakukannya, atau telah membangun apa pun menggunakan CSS Hero, pastikan untuk memberi tahu kami di komentar. Kami sangat ingin melihatnya!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.