Membuat Template Jenis Posting Kustom Acara yang Menakjubkan dengan Divi

Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.

Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang berkelanjutan, kami akan menunjukkan kepada Anda cara membuat templat jenis pos kustom acara yang menakjubkan dengan Divi menggunakan Paket Tata Letak Meetup gratis. Tutorial kasus penggunaan ini dimungkinkan oleh fitur Dukungan Jenis Posting Kustom Divi Builder, salah satu pembaruan terbaru Divi. Kita akan membuat template yang akan cocok dengan Paket Tata Letak Meetup. Setelah membuat template ini, Anda dapat menggunakannya kembali untuk semua acara yang Anda bagikan di situs web Anda.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Instal Plugin Kalender Acara

Buka Plugin & Tambahkan yang Baru

Untuk menambahkan jenis posting kustom acara ke situs web kami, kami akan menggunakan plugin Kalender Acara. Ini adalah plugin gratis yang dapat Anda temukan dengan masuk ke dashboard WordPress > Plugins > Add New > Searching for The Events Calendar plugin .

Aktifkan Plugin

Setelah Anda menginstal plugin, pastikan Anda segera mengaktifkannya sehingga Anda dapat mulai menggunakannya.

Ubah Pengaturan Penyesuai Tema

Ubah Tipografi

Sekarang sebelum kita membuat acara, mari kita mulai dengan mendapatkan dasar-dasar situs web kita dengan benar. Buka Penyesuai Tema Anda dengan masuk ke dasbor WordPress Anda > Penampilan > Sesuaikan . Navigasikan ke tipografi situs web Anda dengan masuk ke Pengaturan Umum > Tipografi berikutnya . Setelah Anda berada di sana, terapkan pengaturan berikut:

• Ukuran Teks Tubuh: 16
• Tinggi Garis Tubuh: 1,9
• Font Tajuk: Roboto

Pengaturan Kalender Acara

Plugin Kalender Acara memiliki beberapa pengaturannya sendiri di Penyesuai Tema juga. Kembali ke menu utama Penyesuai Tema > Kalender Acara > Tema Umum > Dan gunakan warna berikut:

• Warna Aksen: #06c8ff
• Warna Sorotan Unggulan: #06c8ff

Kembali ke pengaturan Kalender Acara > Tema Umum dan gunakan warna '#06c8ff' yang sama untuk semua opsi yang dapat Anda temukan di sana.

Tambahkan Acara Baru

Tambahkan Acara Baru

Kami sekarang siap untuk membuat acara baru. Untuk melakukannya, buka dasbor WordPress Anda > Acara > Tambah Baru . Setelah Anda menambahkan acara baru, pastikan Anda juga memberinya judul.

Tambahkan Detail Acara

Lanjutkan dengan memasukkan detail acara Anda. Ini termasuk:

• Waktu & Tanggal
• Lokasi
• Penyelenggara
• Situs Web Acara
• Biaya Acara

Tambahkan Gambar Unggulan

Tambahkan gambar unggulan ke acara Anda juga. Nanti di postingan ini, kami akan menghapus ini dari frontend tapi kami masih membutuhkannya untuk berbagi sosial.

Ubah Pengaturan Halaman Divi

Di sudut kanan acara Anda, Anda akan melihat Pengaturan Halaman Divi. Di sana, hapus sidebar dengan memilih 'No Sidebar' untuk Page Layout.

Publikasikan Acara

Kami sekarang siap untuk mulai bekerja di frontend. Lanjutkan dan publikasikan acara Anda.

Ini adalah desain halaman default tanpa mengaktifkan Visual Builder:

Buka Halaman Arahan Pertemuan & Simpan Elemen Desain

Cari & Simpan Baris ke Perpustakaan Divi

Bekerja secara efisien lebih penting daripada bekerja keras. Itulah mengapa kita akan menghemat waktu dan tenaga dengan menggunakan kembali elemen dari Paket Tata Letak Meetup. Mulailah dengan membuka halaman arahan menggunakan Divi's Visual Builder. Kemudian, cari baris berikut di halaman Anda dan simpan ke Perpustakaan Divi Anda:

Cari & Simpan Bagian ke Divi Library

Kami juga membutuhkan bagian berikut, jadi lanjutkan dan simpan yang ini juga:

Mulai Membuat Template Jenis Kustom Acara

Tambahkan Baris Kode CSS Khusus untuk Mencocokkan Paket Tata Letak Meetup

Kami dapat menggunakan Visual Builder untuk halaman acara tetapi sayangnya, kami tidak dapat menggunakannya di mana-mana. Untuk memastikan semuanya sejalan dengan Meetup Layout Pack, kita akan menambahkan beberapa baris kode CSS terlebih dahulu:

#tribe-events {
margin: 5%;
}
.tribe-events-single-event-title {
font-weight: 300;
font-size: 60px !important;
}
#tribe-events-content a {
font-family: Roboto !important;
font-weight: 300 !important;
}
.tribe-events-event-image{
display: none;
}

Beralih ke Visual Builder

Kami sekarang dapat beralih menggunakan Visual Builder di acara kami!

Tambahkan Bagian Baru

Gambar latar belakang

Anda akan melihat bahwa ada bagian yang sudah ada di halaman. Itulah tempat di halaman yang bisa kita modifikasi. Mulailah dengan membuka pengaturan bagian dan tambahkan gambar latar belakang ' bg-4.png '. Anda dapat menemukan gambar ini di Perpustakaan Media jika Anda telah mengunggah Paket Tata Letak Meetup ke situs web Anda. Bersamaan dengan gambar latar belakang, gunakan pengaturan berikut:

• Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
• Posisi Gambar Latar Belakang: Kanan Bawah

Jarak

Buka pengaturan Spasi bagian Anda berikutnya dan tambahkan '100px' ke margin atas.

Berbatasan

Kami juga membuat efek timeline semacam ini untuk template kami. Buka pengaturan Perbatasan Anda dan tambahkan batas kiri berikut:

• Lebar Batas Kiri: 7px
• Warna Batas Kiri: #8301e9

Tambahkan Baris Baru

Struktur Kolom

Sekarang setelah kita selesai memodifikasi pengaturan bagian, kita dapat mulai menambahkan baris kita. Tambahkan baris baru dengan struktur kolom berikut:

Perekat

Buka pengaturan baris Anda dan aktifkan opsi 'Jadikan Baris Ini Penuh' di pengaturan Ukuran. Ini adalah sesuatu yang akan kita lakukan untuk setiap baris dalam tata letak ini.

Tambahkan Modul Teks ke Baris

Perekat

Selanjutnya, tambahkan Modul Teks dengan deskripsi acara Anda, lanjutkan ke pengaturan Ukuran dan gunakan Lebar berikut:

• Desktop: 47%
• Tablet & Telepon: 100%

Impor Baris Tersimpan

Tepat di bawah baris yang telah Anda tambahkan, lanjutkan dan impor baris yang telah Anda simpan ke Perpustakaan Divi Anda.

Perekat

Kita perlu memodifikasi beberapa hal tentang baris ini, dimulai dengan pengaturan Ukuran. Aktifkan opsi 'Jadikan Baris Ini Lebar Penuh'.

Hapus Modul Teks Tubuh & Modul Tombol

Selanjutnya, hapus paragraf Modul Teks dan Modul Tombol di kolom pertama.

Modul Teks Klon & Hapus Ukuran

Silakan dan klon Modul Teks di baris pertama Anda dan letakkan di kolom pertama dari baris baru Anda. Buka pengaturan Ukuran berikutnya dan hapus Lebar yang disesuaikan untuk desktop.

Impor Bagian Tersimpan

Kami sudah selesai memodifikasi bagian pertama! Lanjutkan dan impor bagian yang Anda simpan selanjutnya.

Tambahkan Perbatasan

Kami juga menambahkan batas kiri ke bagian ini:

• Lebar Batas Kiri: 7px
• Warna Batas Kiri: #06c8ff

Ubah Ukuran Setiap Baris

Ada beberapa baris dalam bagian yang baru saja Anda impor. Aktifkan opsi 'Make This Row Fullwidth' untuk setiap baris ini.

Ubah Perataan Tombol

Terakhir, ubah juga Button Alignment ke kiri.

Simpan Template ke Perpustakaan Divi

Tambahkan ke Perpustakaan

Template tata letak selesai! Anda sekarang dapat menyimpannya ke Perpustakaan Divi Anda dan menggunakannya kembali untuk acara lain juga.

Pratinjau

Sekarang setelah kita melalui semua langkah yang berbeda, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Pikiran Akhir

Dalam posting blog kasus penggunaan ini, kami telah menunjukkan kepada Anda cara membuat templat jenis posting khusus acara yang menakjubkan. Template yang kami buat cocok dengan gaya Meetup Layout Pack. Setelah membuat template ini, kami juga menyimpannya ke Divi Library sehingga kami dapat menggunakannya kembali untuk acara lain juga. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!