Cara Membuat Tata Letak Garis Waktu Lengket Vertikal di Divi
Diterbitkan: 2020-10-14Membuat garis waktu lengket vertikal bisa sangat berguna untuk mengkategorikan konten berdasarkan tahun dan/atau bulan saat pengguna menggulir halaman ke bawah. Elemen tanggal lengket tetap diperbaiki di samping konten untuk peningkatan UX yang nyaman yang akan dihargai pengguna.
Dalam tutorial ini, kami akan menunjukkan cara membuat tata letak garis waktu lengket vertikal lengkap di Divi. Kunci dari desain ini adalah (1) untuk memberikan lebar khusus pada kolom Anda sehingga elemen tanggal tidak memakan terlalu banyak ruang horizontal di perangkat seluler dan (2) membuat tahun dan bulan melekat, dengan batas lengket pada bagian (untuk tahun) dan baris (untuk bulan).
Meskipun tata letak ini memiliki aplikasi multi-segi, kami akan membuat tata letak garis waktu untuk menampilkan galeri foto yang dikategorikan berdasarkan bulan dan tahun.
Mari kita mulai!
Sneak Peek
Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.
Unduh Tata Letaknya GRATIS
Untuk mendapatkan desain dari tutorial ini, 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 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.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.
Klik tombol Impor.
Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.
Kemudian klik tombol impor.
Setelah selesai, tata letak bagian akan tersedia di Divi Builder.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Jika belum, instal dan aktifkan Tema Divi.
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
- Pilih opsi "Bangun Dari Awal".
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Bagian 1: Membangun Judul Tongkat
Elemen pertama yang akan kita desain adalah judul lengket yang akan tetap berada di bagian atas halaman saat digulir.
Menambahkan baris
Untuk memulai, tambahkan tata letak kolom dua perlima tiga perlima ke bagian tersebut.
Teks Judul Kiri
Di kolom kiri, kita akan menambahkan judul untuk timeline yang akan berada di sisi kiri halaman. Untuk melakukan ini, tambahkan modul teks ke kolom kiri.
Kemudian tambahkan teks "Timeline" ke badan modul teks.
Di bawah tab desain, perbarui gaya teks berikut:
- Font Teks: Oksigen
- Berat Font Teks: Tebal
- Gaya Font Teks: TT
- Warna Teks Teks: #666666
- Ukuran Teks: 50px (desktop), 30px (tablet), 18px (ponsel)
- Tinggi Baris Teks: 1em
- Perataan Teks: kanan
Kemudian perbarui padding juga:
- bantalan: 5px atas
Teks Judul Kanan
Untuk membuat judul konten galeri di sisi kanan halaman, salin modul teks di kolom kiri dan tempel ke kolom kanan.
Kemudian buka pengaturan modul teks duplikat dan perbarui yang berikut:
- Warna Teks Teks: #c22969
- Perataan Teks: Kiri (desktop), Kiri (tablet)
Pengaturan Baris
Untuk memberi kami ruang yang kami butuhkan di ponsel, kami perlu memperbarui pengaturan baris sebagai berikut:
- Lebar Talang: 1
- Lebar: 100%
- Lebar Maks: 1280px
- Padding: 10px atas, 10px bawah
Di bawah tab lanjutan, tambahkan CSS khusus berikut ke Elemen Utama di tablet:
display:flex; flex-wrap:nowrap;
Pengaturan Kolom Kiri
Karena kita menggunakan lebar talang baris 1, tidak ada jarak antar kolom. Untuk menambahkan spasi yang cukup, buka pengaturan untuk kolom 1 dan perbarui padding sebagai berikut:
- Padding (desktop): 10px atas, 10px bawah, 20px kiri, 20px kanan
- Padding (tablet): 10px bawah, 10px kiri, 10px kanan
Selanjutnya, kami ingin mengganti lebar kolom kiri default pada tablet dan ponsel sehingga menjadi 30% dari lebar baris. Ini akan cocok dengan lebar kolom yang akan kita tambahkan ke kolom di timeline di bawah ini.
Untuk melakukan ini, buka pengaturan untuk kolom kiri (kolom1) dan tambahkan CSS berikut ke Elemen Utama di Tablet:
width: 30% !important;
Untuk kolom kanan, kita ingin menambahkan padding yang sama seperti yang kita lakukan di kolom 1. Dan kita akan menambahkan batas kiri ke kolom untuk berfungsi sebagai pembagi sebagai berikut:
- Padding (desktop): 10px atas, 10px bawah, 20px kiri, 20px kanan
- Padding (tablet): 10px bawah, 10px kiri, 10px kanan
- Lebar Batas Kiri: 2px
- Warna Batas Kiri: #333333
Kami juga ingin lebar kolom kanan menjadi 70% dari lebar baris. Untuk memperbarui lebar kolom, buka pengaturan kolom 2 dan tambahkan CSS berikut ke Elemen Utama di tablet:
width: 70% !important;
Pengaturan Bagian
Untuk menyelesaikan desain heading, buka pengaturan bagian, dan perbarui warna latar belakang:
- Warna Latar Belakang: #222222
Kemudian perbarui padding bagian:
- Padding: 0px atas, 0px bawah
Untuk membuat bagian lengket, buka tab Lanjutan dan perbarui yang berikut ini:
- Posisi Lengket: Menempel ke Atas
Bagian 2: Membuat Garis Waktu Lengket
Bagian desain selanjutnya adalah tempat kita membuat bagian timeline lengket dari tata letak. Kuncinya di sini adalah mendesain bagian pertama, baris, dan modul dengan semua elemen di tempatnya. Kemudian kita dapat menggandakan setiap bagian atau baris sesuai kebutuhan.
Tambahkan Bagian
Untuk memulai, tambahkan bagian reguler baru di bawah bagian heading yang baru saja kita selesaikan.
Sebelum kita mulai menambahkan baris dan konten kita, buka pengaturan bagian dan perbarui yang berikut:
- Padding: 0px atas, 0px bawah
Tambahkan Baris, Gaya Baris, dan Struktur Kolom
Selanjutnya, buat baris kolom seperlima seperlima tiga perlima ke bagian tersebut.
Untuk memulai desain baris, salin gaya baris di bagian judul di atas dan tempel ke baris baru.
Kemudian buka pengaturan baris baru dan perbarui yang berikut:
- Padding: 50px atas, 50px bawah
Kemudian tambahkan CSS khusus ke Elemen Utama di tablet sebagai berikut:
display:flex; flex-wrap:nowrap;
Menciptakan Tahun yang Lengket
Elemen tanggal lengket pertama untuk garis waktu adalah tahun. Elemen teks "tahun" ini akan menempel di bagian atas pada scroll.
Untuk membuat elemen teks tahun, tambahkan modul teks baru ke kolom 1.
Kemudian tambahkan teks "2020" ke badan.
Di bawah tab desain, perbarui gaya teks sebagai berikut:
- Font Teks: Oksigen
- Berat Font Teks: Tebal
- Ukuran Teks Teks: 40px (desktop), 24px (tablet), 18px (ponsel)
- Perataan Teks: kanan
Untuk membuat tahun menempel di bagian atas, perbarui yang berikut ini:
- Posisi Lengket: Menempel ke Atas
- Offset Atas Lengket: 50px
- Batas Lengket Bawah: Bagian
Membuat Bulan Lengket
Untuk membuat teks bulan tempel, salin modul teks yang berisi tahun tempel dan tempel ke kolom 2.
Kemudian buka pengaturan untuk modul teks baru di kolom 2 dan perbarui isi teks dengan “des” (singkatan bulan).
Teks bulan harus menempel di bagian atas baris, bukan bagian, jadi perbarui batas tempel sebagai berikut:
- Batas Lengket Bawah: Baris
Menambahkan Konten Galeri
Di kolom paling kanan (kolom 3), kita akan menambahkan konten yang berhubungan dengan bulan/tahun tertentu. Dalam hal ini, kita akan menambahkan modul galeri untuk menampilkan galeri gambar.
Untuk membuat galeri, tambahkan modul galeri di kolom 3.
Kemudian tambahkan setidaknya 6 gambar ke galeri (atau berapa pun yang Anda inginkan) dan perbarui yang berikut:
- Jumlah Gambar: 6
- Tampilkan Judul dan Keterangan: TIDAK
- Bagaimana Paginasi: TIDAK
Di bawah tab desain, perbarui yang berikut ini:
- Padding: 3% kiri, 3% kanan
Untuk membuat beberapa spasi khusus di antara item galeri, tambahkan CSS khusus berikut ke CSS Item Galeri:
padding: 0 1% 2% 1%;
Perbarui Lebar dan Spasi Kolom
Seperti yang kita lakukan untuk kolom di bagian heading, kita akan memberikan jarak dan lebar kustom kolom kita (satu ponsel) sehingga sejajar dengan heading dan terlihat bagus di tablet dan ponsel.
kolom 1
Buka pengaturan untuk kolom 1 dan perbarui yang berikut ini:
- Padding: 1% kiri, 2% kanan
Di bawah tab lanjutan, tambahkan CSS khusus berikut ke Elemen Utama di tablet:
width: 15% !important;
Kemudian buka pengaturan untuk kolom 2 dan tambahkan padding dan CSS yang sama sebagai berikut:
- Padding: 1% kiri, 2% kanan
Elemen Utama CSS (tablet):
width: 15% !important;
Kemudian buka pengaturan untuk kolom 3 dan perbarui padding dan Elemen Utama CSS sebagai berikut:
- Padding: 1% kiri, 2% kanan
Elemen Utama CSS (tablet):
width: 70% !important;
Gandakan Baris untuk Bulan Tambahan
Setelah baris pertama selesai, kita dapat menduplikasi baris untuk bulan tambahan.
Gandakan baris.
Di baris duplikat, keluarkan teks untuk tahun tersebut. Kami hanya membutuhkan satu tahun per bagian karena tahun akan menempel di bagian atas dan bawah bagian.
Kemudian buka teks untuk bulan dan perbarui singkatan bulan dengan bulan baru.
Gandakan Bagian untuk Tahun Tambahan
Dengan cara yang sama kami menggandakan baris untuk bulan tambahan, kami dapat menduplikasi seluruh bagian untuk tahun tambahan.
Lanjutkan dan duplikat bagian yang baru saja kita buat untuk konten 2020.
Pada bagian duplikat, perbarui teks tahun pada baris 1, kolom 1 dengan tahun “2019”.
Anda dapat melanjutkan proses ini untuk membuat tahun dan bulan tambahan sesuai kebutuhan untuk tata letak garis waktu Anda.
Hasil Akhir
Lihat hasil akhirnya.
Pikiran Akhir
Beban kerja desain untuk tata letak garis waktu ini adalah membuatnya responsif dengan memberikan ukuran teks dan lebar kolom gaya khusus seluler. Namun, posisi lengket elemen tanggal sangat mudah dengan opsi bawaan Divi. Mudah-mudahan, ini akan berguna untuk proyek-proyek masa depan. Saya dapat melihat ini berguna untuk menampilkan garis waktu riwayat untuk halaman tentang atau bahkan untuk halaman sumber daya, halaman unduhan, atau pembaruan produk.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!