Mari kita mulai! Sneak Peek Berikut ini sekilas tentang tata letak tab sudut yang diperluas yang akan kita buat bersama. Perhatikan bagaimana efek hover dan kontennya sangat simetris.
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 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!
Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.
Mari kita ke tutorialnya ya? Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi. Membuat Tata Letak Hamparan Konten yang Diperluas dari Awal Bagian 1: Membuat Tab Sudut yang Memperluas dari Posisi Kanan Bawah Untuk memulai, tambahkan baris dua kolom (satu setengah satu setengah) ke bagian reguler.
Sebelum menambahkan modul, perbarui pengaturan baris dengan lebar talang khusus sebagai berikut:- Lebar Talang: 4
- Gambar Latar Belakang [masukkan gambar]
- Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
- Sudut Bulat: 10px kanan bawah
- Lebar Batas Kanan: 2px
- Warna Batas Kanan: #e94558
- Lebar Batas Bawah: 2px
- Warna Batas Bawah: #e94558
Pembaruan berikut:
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: Tersembunyi
Ketinggian khusus ini diperlukan agar modul uraian kami (tab sudut) memperluas ketinggian penuh kolom. Dan hidden overflow diperlukan agar kita bisa menyembunyikan sebagian besar modul blurb di luar kolom hingga keadaan hover. Menambahkan Konten Modul Blurb Sekarang kita siap untuk mulai menyesuaikan modul uraian di dalam kolom 1. Buka pengaturan uraian dan perbarui yang berikut:
- Judul: IPA Mangga
- Tubuh: <p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
<p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
<p>4.8% ABV / 4 IBUs</p> - Gambar: Tambahkan gambar yang sama yang digunakan untuk latar belakang kolom
Merancang Modul Blurb Beri blurb warna latar belakang saat mengarahkan kursor sebagai berikut:
- Warna Latar Belakang (desktop): transparan
- Warna latar belakang (arahkan kursor): rgba(255.255.255,0.9)
- Penempatan Gambar/Ikon: Kiri
- Judul Font: Oswald
- Judul Font Gaya: TT
- Ukuran Teks Judul: 40px
- Berat Huruf Tubuh: Semi Tebal
- Warna Teks Tubuh (desktop): transparan
- Warna Teks Tubuh (arahkan kursor): #121212
- Lebar Gambar: 100px (desktop), 64px (ponsel)
- Lebar Konten: 100%
- Tinggi: 100%
- Padding (desktop): 15% atas, 15% bawah, 8% kiri, 8% kanan
- Padding (arahkan kursor): 8% atas, 8% bawah, 8% kiri, 8% kanan
- Sudut Bulat (default): 20px kiri atas
- Sudut Bulat (arahkan kursor): 10px kiri atas
- Lebar Batas Atas: 4 piksel (desktop), 2 piksel (arahkan kursor)
- Warna Batas Atas: #e94558
- Lebar Batas Kiri: 4px (desktop), 2px (arahkan kursor)
- Warna Batas Kiri: #e94558
- Transformasi Skala Y Sumbu: 50%
- Transformasi Skala X Sumbu: 50%
- Transformasi Terjemahkan Sumbu Y: 50%
- Transformasi Terjemahkan X Sumbu: 30%
- Transform Origin: Kanan Bawah
- Transform Skala Sumbu Y (arahkan kursor): 100%
- Transform Scale X Axis (arahkan kursor): 100%
- Transformasi Terjemahkan Sumbu Y (arahkan kursor): 0%
- Transformasi Terjemahkan X Sumbu (arahkan kursor): 0%
Untuk membalik gambar blurb ke sisi kanan, tambahkan CSS khusus berikut ke kotak Konten Blurb: direction: rtl CATATAN: Arah "rtl" berarti "kanan ke kiri" yang mengubah urutan default konten (kiri ke kanan).
Hasil Mari kita lihat hasil akhir dari tab sudut yang melebar dari posisi kanan bawah. Perhatikan bagaimana ia mengembang untuk mengisi seluruh kolom saat mengarahkan kursor. Bagian 2: Membuat Tab Sudut yang Diperluas dari Posisi Kiri Bawah Gandakan Kolom Untuk membuat tab sudut yang melebar dari posisi kiri bawah, kita dapat memulai desain dengan menduplikasi seluruh kolom. Buka pengaturan baris dan kolom duplikat 1. Kemudian hapus kolom tambahan sehingga Anda hanya memiliki dua duplikat yang tepat. Perbarui Pengaturan Kolom 2 Selanjutnya, buka pengaturan untuk kolom 2 dan perbarui yang berikut:- Sudut Bulat: kiri bawah 10px
- Lebar Batas Kanan: 0px
- Lebar Batas Kiri: 2px
- Warna Batas Kiri: #e94558
- Perataan Teks: kanan
- Sudut Bulat (desktop): 20px kanan atas
- Sudut Bulat (arahkan kursor): 10px kanan atas
- Lebar Batas Kiri: 0px
- Lebar Batas Kanan: 4px (desktop), 2px (arahkan kursor)
- Warna Batas Kanan: #e94558
- Transformasi Terjemahkan X Sumbu (desktop): -30%
- Transform Origin (desktop): kiri bawah
Kemudian pastikan untuk menghapus CSS khusus di kotak Konten Blurb.
Hasil Inilah hasilnya. Perhatikan bagaimana yang ini simetris dengan yang pertama dan meluas dari posisi kiri bawah kolom. Bagian 3: Membuat Tab Sudut yang Memperluas dari Posisi Kanan Atas Sekarang kita siap untuk memulai dua desain tab sudut yang diperluas. Untuk memulai, mari duplikat seluruh baris yang berisi uraian yang sudah kita rancang. Perbarui Pengaturan Kolom 1 Selanjutnya buka pengaturan baris duplikat dan kemudian buka pengaturan untuk kolom 1 dan perbarui yang berikut:- Sudut Bulat 10px kanan atas
- Lebar Batas Bawah: 0px
- Lebar Batas Atas: 2px
- Warna Batas Atas: #e94558
- Sudut Bulat (desktop): kiri bawah 20 piksel
- Sudut Bulat (arahkan kursor): kiri bawah 10px
- Lebar Batas Atas: 0px
- Lebar Batas Bawah: 4px (desktop), 2px (arahkan kursor)
- Warna Batas Bawah: #e94558
- Transformasi Terjemahkan Sumbu Y (desktop): -50%
- Transform Origin: kanan atas
bottom: 0;
left: 15px;
Kemudian tambahkan CSS berikut ke Kotak Konten Blurb: direction: rtl;
height: 100%; Bagian 4: Membuat Tab Sudut yang Diperluas dari Posisi Kiri Atas Untuk efek hover tab sudut ekspansi keempat dan terakhir kami, kami akan memposisikannya di sudut kiri atas untuk menyelesaikan desain simetris dari seluruh tata letak grid. Perbarui Pengaturan Kolom 2 Di bawah pengaturan baris, buka pengaturan untuk kolom 2 dan perbarui yang berikut:
- Sudut Bulat: 10px kiri atas
- Lebar Batas Bawah: 0px
- Lebar Batas Atas: 2px
- Warna Batas Atas: #e94558
- Sudut Bulat (desktop): 20px kanan bawah
- Sudut Bulat (arahkan kursor): 10px kanan bawah
- Lebar Batas Atas: 0px
- Lebar Batas Bawah: 4px (desktop), 2px (arahkan kursor)
- Warna Batas Bawah: #e94558
- Transformasi Terjemahkan X Sumbu (desktop): -30%
- Transform Origin: Kiri Atas
bottom: 0%;
right: 0%;
Kemudian tambahkan CSS berikut ke kotak Konten Blurb: height: 100%; Bagian 4: Menyelesaikan Desain Tata Letak Bagian Warna Latar Belakang Tambahkan Warna Latar Bagian sebagai berikut:
- Warna Latar Belakang: #efefef
- Judul 2 font: Merriweather
- Judul 2 Berat Font: Tebal
- Judul 2 Gaya Font: TT
- Judul 2 Perataan Teks: Tengah
- Judul 2 Warna Teks: #999999
- Judul 2 Ukuran Teks: 50px (desktop), 30px (tablet), 24px (ponsel)
- Spasi Judul 2 Huruf: 1em
- Padding: kiri 50 piksel (desktop), kiri 30 piksel (tablet), kiri 24 piksel (ponsel)
