Mari kita lakukan. Pratinjau Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar. Desktop
Seluler Unduh Tata Letak Susunan Baris GRATIS Untuk meletakkan tangan Anda pada tata letak susun baris gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
1. Buat Konsep Baris Pertama Tambahkan Bagian Baru Jarak Di bagian pertama dari tutorial ini, kita akan mulai meletakkan dasar dari baris pertama kita. Setelah selesai menata elemen di baris pertama, kita dapat menggunakannya kembali sepenuhnya untuk membuat efek susun baris. Tambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan terapkan beberapa nilai padding khusus di berbagai ukuran layar.
- Bantalan Atas:
- Desktop: 100px
- Tablet: 40px
- Telepon: 25px
- Bantalan Bawah:
- Desktop: 100px
- Tablet: 40px
- Telepon: 25px
- Gunakan Lebar Talang Kustom: Ya
- Lebar Talang: 1
- Samakan Tinggi Kolom: Ya
- Lebar: 90%
- Lebar Maks: 2580px
- Padding Atas: 0px
- Padding Bawah: 0px
- Warna Latar Belakang: #2b343b
- Ukuran Gambar Latar Belakang: Sesuai
- Bantalan Atas:
- Desktop: 25%
- Tablet: 40%
- Telepon: 50%
- Bantalan Bawah:
- Desktop: 25%
- Tablet: 40%
- Telepon: 50%
- Padding Kiri: 5%
- Padding Kanan: 5%
- Warna Latar Belakang: #394751
- Padding Atas: 13%
- Padding Bawah: 13%
- Padding Kiri: 8%
- Padding Kanan: 8%
- Posisi Vertikal Bayangan Kotak: 20px
- Kekuatan Buram Bayangan Kotak: 50px
- Warna Bayangan: rgba (0,0,0,0.14)
- Judul 2 Font: Alata
- Judul 2 Berat Font: Tebal
- Judul 2 Perataan Teks: Tengah
- Judul 2 Warna Teks: #ffffff
- Judul 2 Ukuran Teks:
- Desktop: 200px
- Tablet: 150 piksel
- Telepon: 100px
- Spasi Judul 2 Huruf: -1px
Posisi Ubah posisi modul di tab lanjutan juga.
- Posisi: Absolut
- Lokasi: Kiri Atas
- Offset Vertikal: 2%
- Offset Horisontal: 2%
- Gunakan Gaya Kustom Untuk Tombol: Ya
- Ukuran Teks Tombol: 20px
- Warna Teks Tombol: #ffffff
- Warna Latar Tombol: #83a5bf
- Lebar Batas Tombol: 0px
- Radius Perbatasan Tombol: 1px
- Font Tombol: Alata
- Padding Atas: 20px
- Padding Bawah: 20px
- Padding Kiri: 50px
- Padding Kanan: 50px
- Posisi: Absolut
- Lokasi: Kanan Bawah
- Judul 3 Font: Alata
- Judul 3 Berat Font: Tebal
- Judul 3 Warna Teks: #ffffff
- Judul 3 Ukuran Teks: 40px
- Tampilkan Pembagi: Ya
- Warna Garis: #f3f0ee
- Berat Pembagi: 5px
- Lebar: 19%
- Tinggi: 5px
- Margin Bawah: 20%
- Font Teks: Montserrat
- Warna Teks: #ffffff
- Ukuran teks:
- Desktop: 15px
- Tablet & Ponsel: 14px
- Tinggi Baris Teks: 2em
2. Ubah Baris menjadi Elemen Penumpukan Pengaturan Baris Indeks Z Sekarang setelah kita memiliki baris pertama di tempat, saatnya untuk menerapkan pengaturan penumpukan baris lengket. Kami akan menerapkan pengaturan ini sebelum mengkloning baris kami untuk digunakan kembali sehingga efek penumpukan terjadi secara otomatis. Buka pengaturan baris, buka tab lanjutan dan terapkan indeks az 1. Indeks z ini akan membantu kami memastikan bahwa setiap baris berikutnya ditempatkan di atas yang sebelumnya.
- Indeks Z: 1
- Posisi Lengket:
- Desktop: Tetap di Atas
- Tablet & Telepon: Jangan Menempel
- Batas Lengket Bawah: Bagian
- Offset Dari Elemen Lengket Sekitarnya: Tidak
- Duplikat 1: #edc1b6
- Duplikat 2: #efe7e2
- Duplikat 3: #f7f6f4
- Duplikat 1: #ffd1c1
- Duplikat 2: #fff8f2
- Duplikat 3: #fffaf7
- Duplikat 1: #c18a7a
- Duplikat 2: #bab5b2
- Duplikat 3: #c98f7d
- Warna Teks: #2b343b
