Cara Membuat Template Halaman Penulis dengan Pembuat Tema Divi

Halaman penulis dulu sulit untuk disesuaikan. Dengan Divi Theme Builder, itu tidak lagi menjadi masalah. Anda tidak hanya dapat mempersonalisasi halaman penulis tetapi juga halaman kategori, halaman hasil pencarian, dan lainnya. Dalam posting ini, kami akan menunjukkan cara membuat template halaman penulis dinamis dengan Divi's Theme Builder.

Saat Anda membuat ulang tata letak ini di dalam Divi Theme Builder, Anda akan menggunakan konten dinamis sehingga semua halaman penulis akan terpengaruh sekaligus sambil menjaga konten unik untuk penulis di tempatnya. Yang perlu Anda lakukan adalah memastikan semua penulis telah memperbarui informasi. Jika mereka tidak memiliki gambar Gravatar yang bagus, kami sarankan Anda mengunduh Plugin Avatar Pengguna WP untuk memiliki kontrol lebih. Anda juga dapat mengunduh file JSON template secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita mulai membuat ulang template halaman penulis di dalam Pembuat Tema, mari kita lihat hasilnya di berbagai ukuran layar. Saat membangun template, desain akan terlihat sedikit berbeda di dalam editor template. Kami menyarankan Anda membuka dua jendela, satu dengan editor template dan satu dengan pratinjau langsung.

Desktop

Seluler

Unduh Halaman Penulis Sambutan GRATIS

Untuk mendapatkan template halaman penulis gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Perbarui Pengguna

Optimalkan Gambar Penulis

Tambahkan Plugin Avatar Pengguna WP

Ketika seorang penulis ditambahkan ke WordPress Anda, sistem secara otomatis menarik gambar Gravatar. Beberapa penulis tidak memiliki akun Gravatar atau gambar tidak cocok dengan situs Anda. Menggunakan Plugin Avatar Pengguna WP akan memberi Anda lebih banyak kontrol.

Informasi Penulis Lengkap

Pastikan semua informasi penulis berikut disertakan:

• Nama dan Nama Belakang
• Nama tampilan
• Biodata Penulis
• Gambar Penulis

2. Buat Ulang Tata Letak di Pembuat Tema

Buka Pembuat Tema

Langkah pertama untuk membuat ulang template halaman penulis adalah membuka Theme Builder dan menambahkan template baru. Pilih "Semua Halaman Penulis" di bawah bagian Halaman Arsip dan klik tombol "Buat Template" berwarna biru.

Buat Badan Kustom

Setelah template baru dibuat, klik “Add Custom Body” untuk masuk ke editor template.

Bagian 1 Pengaturan

Jarak

Saatnya membangun tata letak! Di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian dan ubah nilai spasi sebagai berikut:

• Lapisan Atas
  • Desktop: 300px
  • Tablet dan Ponsel: 50px
• Lapisan Bawah
  • Desktop: 0px

Berbatasan

Tambahkan batas bawah ke bagian juga.

• Gaya Perbatasan: Batas Bawah
• Lebar: 2px
• Warna: Hitam #000000

Tambahkan Baris 1

Struktur Kolom

Sekarang, tambahkan baris dengan struktur kolom berikut:

Perekat

Buka pengaturan baris dan ubah ukurannya sebagai berikut:

• Lebar
  • Desktop: 1580px
  • Tablet dan Telepon: otomatis
• Lebar Maks
  • Desktop: 90%
  • Tablet dan Telepon: 80%

Jarak

Ubah pengaturan spasi berikutnya.

• Margin Kiri: otomatis
• Margin Kanan: 79px
• Padding Kanan: 0px

CSS khusus

Last but not least, sejajarkan semua konten kolom menggunakan dua baris kode CSS di elemen utama baris.

• Elemen Utama
  • Desktop: tampilan: fleksibel; align-item: tengah;

display: flex;
align-items: center;

• • Tablet dan Telepon: tampilan: blok;

display: block;

Tambahkan Modul Teks 1 ke Kolom 1

Teks Konten

Saatnya menambahkan modul, dimulai dengan modul teks di kolom 1. Tautkan konten dinamis yang benar.

• Isi: Konten Dinamis – Penulis Posting
• Sebelumnya: <h1>
• Setelah: <h1>
• Format Nama: Nama Depan & Belakang

Teks Judul

Kemudian, gaya teks judul sebagai berikut:

• Tingkat Pos: H1
• Font: Krona One
• Berat: Tebal
• Gaya: TT
• Warna: Hitam #000000
• Ukuran
  • Desktop: 90px
  • Tablet: 60px
  • Telepon: 50px

Jarak

Tambahkan beberapa nilai spasi responsif juga.

• Margin Bawah
  • Desktop: -43px
  • Tablet: -33px
  • Telepon: -27px
• Padding Atas: 19px
• Padding Bawah: 0px

Tambahkan Modul Teks 2 ke Kolom 1

Teks Konten

Ke modul berikutnya, yang merupakan modul teks lain. Tambahkan konten dinamis bio penulis.

• Isi: Konten Dinamis – Bio Penulis

Teks

Kemudian, gaya teks di tab desain.

• Font: Buka Sans
• Berat: Ringan
• Warna: Hitam#000000
• Ukuran
  • Desktop: 16px
  • Tablet: 15px
  • Telepon: 14px
• Spasi Huruf: 1px

Jarak

Dan selesaikan pengaturan modul dengan menambahkan beberapa margin atas.

• Margin Atas: 100px

Tambahkan Modul Gambar ke Kolom 2

Konten Gambar

Pindah ke kolom 2 dan tambahkan modul gambar. Hapus placeholder default dan sambungkan konten dinamis gambar profil penulis.

• Gambar: Konten Dinamis – Gambar Profil Penulis

Perekat

Kemudian, sesuaikan pengaturan ukuran gambar.

• Lebar
  • Desktop: 100%
  • Tablet dan Telepon: 50%

Jarak

Tambahkan beberapa margin bawah responsif juga.

• Margin Bawah
  • Desktop dan Tablet: -20%
  • Telepon: -30%

Berbatasan

Selesaikan pengaturan modul dengan menambahkan beberapa sudut membulat ke pengaturan perbatasan. Ini akan membantu mengubah modul menjadi lingkaran.

• Sudut Bulat: 50vw keempat sudut
• Gaya: Keempat sisi
• Lebar: 2px
• Warna: Hitam #000000

Tambahkan Bagian 2

Jarak

Sekarang tambahkan bagian reguler lainnya, buka pengaturan bagian dan ubah nilai padding atas dan bawah.

• Padding Atas dan Bawah: 300px

Tambahkan Baris 2

Struktur Kolom

Tambahkan baris dengan satu kolom berikutnya.

Perekat

Buka pengaturan baris, buka tab desain dan buat beberapa perubahan pada pengaturan ukuran.

• Lebar: 1580px
• Lebar Maks
  • Desktop dan Tablet: 90%
  • Telepon: 95%
• Penjajaran Baris: Pusat

Tambahkan Modul Blog

Isi

Satu-satunya modul yang kita butuhkan di bagian/baris ini adalah Modul Blog. Pastikan Anda mengaktifkan opsi 'Posts For Current Page'. Ini akan memastikan hanya posting yang dibuat oleh penulis yang bersangkutan yang ditampilkan.

• Posting Untuk Halaman Saat Ini: Ya

Elemen

Di bagian elemen, kami mengaktifkan elemen berikut untuk muncul di desain kami:

• Gambar Unggulan
• Pengarang
• Kategori
• Kutipan
• paginasi

Tata Letak

Pindah ke tab desain berikutnya dan ubah tata letak.

• Tata Letak: Kotak

Teks Judul

Kemudian, gaya teks judul sesuai:

• Tingkat Pos: H2
• Font: Krona One
• Gaya: TT
• Warna: Hitam #000000
• Ukuran
  • Desktop: 26px
  • Tablet: 16px
  • Telepon: 18px
• Spasi Huruf: 3px
• Tinggi Garis: 1.3m

Teks Tubuh

Kami juga memodifikasi pengaturan teks isi.

• Font: Buka Sans
• Berat: Ringan
• Warna: Hitam #000000
• Ukuran
  • Desktop: 16px
  • Tablet: 15px
  • Telepon: 14px
• Spasi Huruf: 1px

Teks Meta

Kemudian, kita akan membuat beberapa perubahan pada pengaturan teks meta.

• Font: Buka Sans
• Gaya: TT
• Warna: Hitam #000000
• Spasi Huruf: 2px

Perekat

Lanjutkan dengan memodifikasi pengaturan ukuran modul di berbagai ukuran layar.

• Lebar
  • Desktop: otomatis
  • Tablet: 90%
  • Telepon: 80%

Jarak

Kemudian, tambahkan beberapa padding atas.

• Lapisan Atas
  • Desktop: 60px
  • Tablet & Ponsel: 70px

Berbatasan

Kami juga mengubah pengaturan batas modul.

• Gaya Batas Tata Letak Kotak: Sisi Kiri
• Lebar: 1 piksel
• Warna: Hitam #oooooo

CSS khusus

Dan kita akan menyelesaikan desain dengan dua baris kode CSS ke judul dan isi modul!

• Judul: padding-bottom: 50px;

padding-bottom: 50px;

• Badan: padding-bottom: 50px;

padding-bottom: 50px;

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Itu Bungkus!

Dalam tutorial ini, kami telah membuat template halaman penulis kustom dengan Divi's Theme Builder. Kami telah menggabungkan konten dinamis dengan opsi bawaan Divi untuk membuat desain halaman penulis minimal. Ingat bahwa semua penulis harus memiliki nama depan dan belakang, bio penulis, dan foto profil. Jika Anda telah mengunduh file JSON, Anda dapat mengimpornya ke area utama Divi Theme Builder Anda. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah!