Cara Membuat Garis Waktu dengan Modul Blurb Divi

Dalam posting ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat dengan mudah membuat garis waktu yang sederhana namun elegan dengan Modul Blurb Anda Divi. Kami akan menggabungkan berbagai opsi yang disediakan modul dan baris untuk mencapai hasil yang dapat Anda lihat di bawah. Contoh yang akan kami bagikan didasarkan pada opsi Divi bawaan saja, yang berarti Anda tidak perlu menambahkan kode CSS tambahan apa pun! Kami juga memastikan tampilannya bagus di desktop maupun di seluler.

Hasil

Tampilan garis waktu dicapai dengan dua elemen desain; garis yang melintasi ketiga Modul Blurb dan angka-angkanya. Versi desktop terlihat seperti ini:

Dan versi selulernya terlihat seperti ini:

Mari kita mulai!

Cara Membuat Garis Waktu dengan Modul Blurb Divi

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Standar

Bagian Warna Latar Belakang

Mulailah dengan menambahkan bagian standar baru dan menggunakan 'rgba(0,0,0,0.12)' sebagai warna latar belakangnya.

Bagian Padding

Buka tab Design dan gunakan padding atas '300px'.

Tambahkan Baris Tiga Kolom (Garis Waktu)

Latar Belakang Kolom

Setelah Anda membuat bagian, tambahkan baris tiga kolom ke dalamnya. Di dalam tab Konten pada baris tersebut, gunakan '#e09900' sebagai warna latar Kolom 1, '#0c71c3' sebagai warna latar Kolom 2 dan '#8300e9' sebagai warna latar belakang Kolom 3.

Perekat

Pindah ke tab Desain dan gunakan pengaturan berikut untuk subkategori Ukuran:

• Jadikan Lebar Baris Ini Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Margin & Padding Kustom

Selanjutnya, tambahkan Custom Padding dan Custom Margin berikut ke baris:

• Padding Atas: 1px
• Padding Bawah: 0px
• Margin Bawah: -200px

Dan tambahkan '3px' ke padding atas dan bawah setiap kolom.

Nonaktifkan di Tablet & Ponsel

Terakhir, nonaktifkan baris di tablet dan ponsel.

Tambahkan Baris Tiga Kolom Lainnya (Modul Blurb)

Latar Belakang Gradien Kolom

Setelah Anda membuat baris tiga kolom pertama, Anda dapat melanjutkan dan membuat baris kedua tepat di bawahnya (mereka berbagi bagian yang sama). Masing-masing kolom membutuhkan latar belakang gradien dengan pengaturan yang sama tetapi dengan warna pertama yang berbeda:

• Warna Pertama: #e09900 (Kolom 1), #0c71c3 (Kolom 2), #8300e9 (Kolom 3)
• Warna Kedua: rgba (255, 255, 255, 0)
• Tipe Gradien: Linier
• Arah Gradien: 180 derajat
• Posisi Awal: 73%
• Posisi Akhir: 92%

Buat Baris Penuh Lebar

Lalu, buka tab Design dan aktifkan opsi 'Make This Row Fullwidth'.

Padding Kustom Baris

Buka subkategori spasi dan gunakan Padding Kustom & Margin Kustom berikut untuk baris:

• Padding Atas: 0px
• Padding Kanan: 60px
• Padding Bawah: 100px
• Padding Kiri: 60px
• Margin Atas: -100px

Tambahkan '5px' ke padding atas setiap kolom juga.

Modul Blurb

Setelah Anda menyelesaikan pengaturan baris, Anda dapat menambahkan Modul Blurb ke kolom pertama dari baris yang baru saja Anda buat. Di dalam subkategori Gambar & Ikon pada tab konten, aktifkan opsi 'Gunakan Ikon' dan pilih ikon pilihan.

Gulir ke bawah tab yang sama dan gunakan '#f4f4f4' sebagai warna latar belakang.

Buka tab Desain dan buat penyesuaian berikut pada subkategori Gambar & Ikon:

• Warna Ikon: #e09900
• Penempatan Gambar/Ikon: Kiri
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 50px

Di dalam subkategori Teks, pastikan Orientasi Teks kiri diaktifkan.

Opsi untuk subkategori Teks Header adalah sebagai berikut:

• Font Tajuk: Bulat Kreta
• Perataan Teks Tajuk: Kiri
• Ukuran Font Tajuk: 32px
• Tinggi Garis Tajuk: 1em

Kemudian, buka subkategori Teks Tubuh dan gunakan pengaturan berikut:

• Perataan Teks Tubuh: Kiri
• Ukuran Font Tubuh: 12px
• Tinggi Garis Tubuh: 1.7em

Kami akan menggunakan perbatasan dengan pengaturan berikut juga:

• Gunakan Perbatasan: Ya
• Warna Perbatasan: #000000
• Lebar Perbatasan: 2px
• Gaya Perbatasan: Bertitik

Selanjutnya, buka subkategori Sizing dan gunakan '279px' untuk Content Width dan '100%' untuk Width.

Terakhir, tambahkan '30px' ke padding atas, kanan, bawah dan kiri.

Modul Teks

Setelah Anda menambahkan dan memodifikasi Modul Blurb, lanjutkan dan tambahkan Modul Teks tepat di bawahnya. Modul Teks akan membutuhkan latar belakang gradien juga:

• Warna Pertama: #e09900
• Warna Kedua: rgba (255, 255, 255, 0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 20%
• Posisi Akhir: 24%

Pindah ke tab Desain dan gunakan pengaturan berikut untuk subkategori Teks:

• Ukuran Font Teks: 21px
• Warna Teks: #FFFFFF
• Tinggi Baris Teks: 1.7em
• Orientasi Teks: Tengah

Buka subkategori Sizing, gunakan lebar '48%' dan pilih Module Alignment yang tepat.

Terakhir, gunakan margin atas '-100px' dan tambahkan '50px' ke padding atas dan bawah.

Clone Blurb & Modul Teks

Setelah Anda menyelesaikan kolom pertama, Anda dapat mengkloning kedua modul dan menempatkannya di dua kolom lainnya. Satu-satunya hal yang harus Anda ubah adalah ikon uraian, warna uraian, dan warna gradien pertama dari Modul Teks menjadi '#0c71c3' untuk kolom kedua dan '#8300e9' untuk kolom terakhir.

Nonaktifkan di Tablet & Ponsel

Setelah Anda menyelesaikan baris kedua ini, pastikan Anda juga menonaktifkannya untuk ponsel dan tablet.

Baris Tiga Kolom Klon (Tablet & Ponsel)

Versi timeline pada tablet dan ponsel sedikit berbeda. Kloning baris dengan uraian yang telah Anda buat di bagian sebelumnya dari posting ini dan ikuti langkah selanjutnya untuk membuatnya pas di ponsel dan tablet.

Tambahkan Latar Belakang Gradien Baris

Baris di tablet dan ponsel akan membutuhkan latar belakang gradien berikut:

• Warna Pertama: rgba (0,0,0,0.7)
• Warna Kedua: rgba (255, 255, 255, 0)
• Tipe Gradien: Linier
• Arah Gradien: 90 derajat
• Posisi Awal: 1%
• Posisi Akhir: 0%

Padding Baris

Hapus semua padding dan margin khusus yang digunakan dalam versi desktop dan tambahkan '100px' ke padding atas.

Nonaktifkan di Desktop

Terakhir, alih-alih menonaktifkan baris di ponsel dan tablet, nonaktifkan di desktop sebagai gantinya.

Hasil

Setelah mengikuti semua langkah di pos, Anda seharusnya dapat mencapai hasil berikut di desktop:

Dan berikut hasilnya di tablet dan ponsel:

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana Anda dapat membuat garis waktu sederhana dari Modul Blurb Anda dengan tidak menggunakan apa pun selain opsi Divi bawaan. Dua faktor yang membantu mengidentifikasi Modul Blurb sebagai garis waktu adalah garis yang menghubungkan ketiga Modul Blurb dan angka. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!