Mengintegrasikan Layout Grid CSS Sederhana ke WordPress

Mendapatkan tata letak grid yang konsisten dan solid ke WordPress bisa menjadi proses yang tidak menyakitkan jika Anda menggunakan alat yang tepat. Dalam tutorial ini, Anda akan belajar langkah demi langkah cara mengatur sistem grid di WordPress yang sangat ringan dan mudah dimodifikasi. Kami akan menjaga desain tetap sederhana agar kami dapat fokus menggunakan alat yang tepat untuk menyiapkan kisi Anda, tetapi perlu diingat bahwa Anda dapat menata kisi sendiri jika diperlukan.

Saya akan menggunakan tema Pool default di WordPress untuk tutorial ini hanya untuk menunjukkan kepada Anda pendekatan "mulai dari awal" untuk mendapatkan grid tepat.

Langkah 1: Tentukan Lebar Kisi Anda

Sebelum memulai, Anda perlu menentukan seberapa luas kisi Anda harus. Untuk situs WordPress saya, saya dapat melihat bahwa lebar kolom utama saya adalah 450px dengan menggunakan fitur "Inspect Element" Google Chrome ketika Anda mengklik kanan pada suatu objek. Ini adalah cara tercepat yang saya temukan yang dapat dengan cepat menentukan lebar dan tinggi suatu objek pada halaman web.

Langkah 2: Perancang Kotak

Daripada membuat sendiri grid, yang bisa Anda lakukan jika Anda mau, saya sarankan menggunakan salah satu dari banyak alat generator grid yang tersedia. Untuk tutorial ini, saya akan menggunakan generator grid oleh MindPlay. Ini adalah generator grid yang sangat sederhana dan ringan.

Saya ingin tampilan tiga kolom dan saya perlu memastikan piksel saya berada di 450. Jadi sesuaikan dan lewati ke tab "Ekspor". Kami tidak akan membahas *tipografi fitur dalam tutorial ini, meskipun hal ini tentunya perlu Anda jelajahi sendiri.

Di tab Ekspor, gunakan bingkai "Lembar Gaya" paling atas dan gulir ke bawah hingga Anda melihat komentar "Kotak". Anda akan menyalin semuanya dari komentar ke bagian bawah bingkai ini. Seharusnya hanya sekitar 30 baris

Langkah 3: Memperbarui Lembar Gaya WordPress Anda

Di kanan bawah panel Editor, Anda akan melihat a Styles.css file (atau yang serupa, tergantung pada tema Anda). Klik ini untuk membukanya.

Gulir ke bagian bawah lembar dan tempel pra Anda dari MindPlay.dk:

Langkah 4: Menerapkan Grid

Untuk menggunakan kisi, Anda cukup membuat a

dengan "grid" kelas. Setiap area kisi didefinisikan dalam CSS. Buka halaman atau posting baru. Buka tab HTML untuk mulai membangun kisi Anda.

Berikut adalah beberapa contoh pra yang dapat Anda tempelkan ke tempatnya untuk memulai:

   Kolom kiri
  Kolom tengah
  Kolom Kanan

Begini tampilannya di WordPress:

Simpan / Perbarui halaman dan lihat hasilnya. Dalam kasus saya, ini adalah beranda situs ini:

Seperti yang dapat Anda lihat dari tangkapan layar di atas, kami memiliki tiga kolom kami dan semuanya ada di tempat yang kami harapkan. Anda dapat menambahkan baris sebanyak yang Anda inginkan dengan hanya memulai dengan yang berikut

    Kolom kiri
  Kolom tengah
  Kolom Kanan
    Baris Kiri # 2
  Baris Tengah # 2
  Baris Kanan # 2

Begini tampilannya sejauh ini:

Sekarang Anda dapat menambahkan gambar atau teks, dan gaya setiap baris persis seperti yang Anda inginkan.

Kiat untuk Tweaking

Anda mungkin mengalami masalah di beberapa browser saat Anda memiliki lebih dari satu baris. Untuk mengatasi masalah ini, Anda harus membuat margin di ujung kanan (.grid-m4, dalam kasus kami) dengan ketinggian yang Anda inginkan untuk setiap baris. Jika Anda menggunakan gambar yang berukuran 250px x 250px, maka buat tinggi baris dalam .grid-m4 menjadi 250px:

.grid-m4 float: left; lebar: 20px; tinggi: 250px;

Ini akan memastikan Anda .grid-m1 di sisi kiri dari baris berikutnya tidak mengapung ke baris di atasnya.

Jika Anda ingin menata latar belakang seluruh kisi, Anda harus menyesuaikan ketinggian .kisi kelas. Jadi katakanlah Anda memiliki empat baris di grid Anda, masing-masing pada 250px. Anda ingin menambahkan tinggi ke kelas .grid di 1000px sehingga elemen styling yang Anda tambahkan akan mencakup seluruh desain kisi.

.kisi lebar: 450px; tinggi: 1000px; margin: otomatis;

Bergantung pada versi generator grid MindPlay.dk yang Anda gunakan, situs mungkin tidak menghasilkan ".grid-m4" dan Anda harus menggunakan .grid-m1 setelah .grid-c3 untuk memastikan kisi Anda meluas ke tempat yang tepat:

  Kolom kiri
  Kolom tengah
  Kolom Kanan

Hasil akhir

Seperti inilah hasil akhir saya dengan dua baris dan beberapa grafik sederhana:

Bersenang-senang merancang dan ingat bahwa Anda dapat menata grid Anda dengan cara apa pun yang Anda inginkan.

Catatan Editor: Posting ini ditulis oleh Tara Hornor untuk Hongkiat.com. Tara memiliki gelar dalam Bahasa Inggris dan menulis tentang pemasaran, periklanan, branding, desain grafis, dan penerbitan desktop. Selain karir menulisnya, Tara juga menikmati menghabiskan waktu bersama suami dan dua anaknya.