Apakah Anda ingin memilikinya isi yang terungkap saat mengarahkan kursor ke tab sudut yang dapat diperluas Divi ?
Menemukan cara baru dan kreatif untuk berinteraksi dengan pengguna menggunakan efek hover selalu menyenangkan. Cara terbaik untuk melakukan ini adalah dengan mengungkapkannya isi saat mengarahkan kursor menggunakan tab sudut yang dapat diperpanjang. Hal ini memungkinkan pengguna untuk mengarahkan kursor ke tab di sudut kolom atau gambar untuk memperluas hamparan dengan a isi kegunaan tambahan bagi pengguna.
Dalam tutorial ini, kita akan membuat layout Divi benar-benar unik yang akan menampilkan konten saat diarahkan menggunakan tab sudut yang dapat diperluas. Faktanya, kami akan menunjukkan cara mendesain mitra sudut yang dapat diperpanjang untuk keempat sudut kolom Divi.
Mari kita mulai!
penelitian
Berikut sekilas tata letak tab sudut yang dapat diperluas yang akan kita buat bersama. Perhatikan betapa indahnya simetris efek hover dan kontennya.
Buat halaman baru dengan Divi Builder
Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
Berikan judul yang masuk akal bagi Anda dan klik Gunakan Divi Builder
kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Membuat Tata Letak Hamparan Konten yang Dapat Diperluas di Divi
Desain mitra sudut yang dapat diperpanjang dari posisi kanan bawah
Untuk memulai, tambahkan baris dua kolom ke bagian reguler.
Sebelum menambahkan modul, perbarui parameter baris sebagai berikut:
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 4
Untuk elemen pertama yang ditampilkan, kita akan membuat gambar latar kolom yang akan memiliki tab sudut (menggunakan modul uraian) di kanan bawah kolom yang membentang dan menutupi seluruh kolom/gambar saat diarahkan.
Baca juga panduan kami di Divi: Cara membuat kisi kolom cair di hover
Mari kita mulai dengan menambahkan modul Blurb.
Tambahkan Modul Blurb ke Kolom 1
Pengaturan kolom 1
Setelah uraian di tempat, buka pengaturan baris, perbarui yang berikut:
- Gambar latar belakang [masukkan gambar]
- Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
CATATAN: Untuk contoh ini kami menggunakan gambar bir latar belakang transparan yang diambil dari paket tata letak « Tempat pembuatan bir“. Mereka adalah 128 piksel kali 359 piksel, jadi kami menggunakan ukuran gambar sebenarnya.
Batas kolom 1
- Sudut Bulat: 10px kanan bawah
- Lebar Batas (Kanan dan Bawah): 2px
- Warna Tepi (Kanan dan Bawah): #e94558
CSS khusus dan overflow
Di bawah tab lanjutan, tambahkan CSS khusus berikut ke elemen utama:
height: 400px;
Opsi tarik-turun 'Visibilitas' dan lakukan perubahan berikut:
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: Tersembunyi
Tambahkan Konten ke Modul Blurb
Kami sekarang siap untuk mulai menyesuaikan modul Blurb di dalam kolom 1. Buka pengaturan modul 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
Kustomisasi Modul Blurb
Berikan blurb warna latar belakang hover sebagai berikut:
- Latar Belakang (Desktop): transparan
- Desktop (Arahkan): rgba (255,255,255,0.9)
Di bawah tab Mendesain, perbarui berikut ini:
- Penempatan Gambar/Ikon: Kanan
- Judul Font: Oswald
- Berat Huruf: Semi Tebal
- Gaya Huruf: TT
- Ukuran Teks: 40px
- Warna Teks Tubuh (Desktop): Jelas
- Warna Teks Tubuh (Hover): #121212
- Lebar Gambar/Ikon: 100px (desktop), 64px (ponsel)
- Lebar Konten: 100%
- Tinggi: 100%
- Padding (Desktop): 15% (Atas dan Bawah), 8% (Kiri dan Kanan)
- Padding (Hover): 8% (Atas, Bawah, Kiri dan Kanan)
- Sudut Bulat (Desktop): 20px kiri atas
- Sudut Bulat (Hover): 10px kiri atas
- Lebar Batas (Atas dan Kiri): 4px (Desktop), 2px (Hover)
- Warna Tepi (Atas dan Kiri): #e94558
Opsi transformasi (Desktop)
- Skala Transformasi (X dan Y): 50%
- Ubah Terjemahan
- Sumbu Y: 50%
- Sumbu X: 30%
Baca juga panduan kami di: Divi: Cara membuat footer lengket dengan efek "Reveal"
- Transform Origin: bawah dan kanan
Opsi transformasi (arahkan kursor)
- Transform Scale (Y dan X) (Hover): 100%
- Transform Terjemahkan(Y dan X) (Hover): 0%
Untuk membalik gambar unggulan di sisi kanan, tambahkan CSS khusus berikut ke area: Konten Buram :
direction: rtl
CATATAN: "rtl" adalah singkatan dari "Kanan ke kiri", yang mengubah urutan konten default (kiri ke kanan).
Hasil
Mari kita lihat hasil akhir tab sudut kita melebar dari posisi kanan bawah. Perhatikan bagaimana ia mengembang untuk mengisi seluruh kolom saat mengarahkan kursor.
Desain mitra sudut yang dapat diperpanjang dari posisi kiri bawah
Kolom duplikat
Untuk membuat tab sudut melebar dari posisi kiri bawah, kita dapat meluncurkan kembali desain dengan menduplikasi seluruh kolom. Buka pengaturan baris dan duplikat kolom 1. Kemudian hapus kolom tambahan sehingga Anda hanya memiliki dua duplikat yang sama persis.
Perbarui pengaturan kolom 2
Selanjutnya, buka pengaturan kolom 2 dan perbarui yang berikut:
- Sudut Bulat: kiri bawah 10 px
- Lebar Batas (Kanan): 0px
- Lebar Batas (Kiri): 2px
- Warna: #e94558
Perbarui parameter modul Blurb
Selanjutnya, perbarui pengaturan Blurb sebagai berikut:
- Perataan Teks: kanan
- Sudut Bulat (Desktop): 20px kanan atas
- Sudut Bulat (Hover): 10px kanan atas
- Lebar Batas Kiri: 0px
- Lebar Batas Kanan: 4px (desktop), 2px (arahkan kursor)
- Warna Batas Kanan: #e94558
- Transformasi Terjemahan (Sumbu X) (Desktop): -30%
- Transform Origin (Desktop): kiri bawah
Kemudian pastikan untuk menghapus CSS khusus di area konten Blurb.
Hasil
Inilah hasilnya. Perhatikan bagaimana yang ini simetris dengan yang pertama dan tumbuh dari posisi kiri bawah kolom.
Desain mitra sudut yang dapat diperpanjang dari posisi kanan atas
Kami sekarang siap untuk memulai dua desain mitra sudut yang berkembang. Untuk memulai, mari gandakan seluruh baris yang berisi uraian yang telah kita rancang.
Perbarui pengaturan kolom 1
Kemudian buka pengaturan untuk baris duplikat, lalu 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
Perbarui parameter modul Blurb
Selanjutnya, buka pengaturan modul Blurb dan perbarui yang berikut:
- Sudut Bulat (Desktop): kiri bawah 20px
- Sudut Bulat (Hover): 10px kiri bawah
- Lebar Batas Atas: 0px
- Lebar Batas Bawah: 4px (Desktop), 2px (Hover)
- Lebar Batas Bawah: #e94558
- Transform Terjemahkan (sumbu Y) (Desktop): -50%
- Transform Origin: kanan atas
CSS khusus
Saat ini kita hanya dapat melihat bagian kiri bawah dari modul presentasi yang tidak menampilkan judul kita seperti dua presentasi lainnya pada baris di atas. Untuk menampilkan judul di tab, kita perlu memposisikan ulang judul ke kiri bawah uraian dengan CSS khusus.
Tambahkan CSS khusus berikut ke area Judul Blurb :
position: absolute;
bottom: 0;
left: 15px;
Kemudian tambahkan CSS berikut ke area konten Konten Buram :
direction: rtl;
height: 100%;
Desain mitra sudut yang dapat diperpanjang 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 kolom 2 dan perbarui yang berikut:
- Sudut Perbatasan: 10 px kiri atas
- Lebar Batas Bawah: 0px
- Lebar Batas Atas: 2px
- Warna Batas Atas: #e94558
Perbarui parameter modul Blurb
Selanjutnya, buka pengaturan teks modul Blurb di kolom 2 dan perbarui yang berikut:
- Sudut Bulat (Desktop): 20px kanan bawah
- Sudut Bulat (Hover): 10px kanan bawah
- Lebar Batas Atas: 0px
- Lebar Batas Bawah: 4px (desktop), 2px (arahkan kursor)
- Warna Batas Bawah: #e94558
Kemudian perbarui opsi transformasi:
- Transformasi Terjemahan (Sumbu Y) (Desktop): -50%
- Transform Origin: kiri atas
CSS khusus
Kemudian tambahkan CSS khusus berikut ke area Judul Blurb :
position: absolute;
bottom: 0%;
right: 0%;
Juga tambahkan CSS berikut di dalam kotak Konten Buram :
height: 100%;
Selesai mendesain tata letak
Warna latar bagian
Tambahkan warna latar belakang bagian sebagai berikut:
- Latar belakang: #efefef
Tambahkan judul
Untuk membuat judul, tambahkan baris ke kolom di tengah dua baris
Kemudian tambahkan modul Teks.
Tambahkan konten: “Musimonal”.
Kemudian perbarui pengaturan berikut:
- Font: Merriweather
- Berat Huruf: Tebal
- Gaya: TT
- Perataan Teks: Terpusat
- Warna Teks: #999999
- Ukuran: 50px (Desktop), 30px (Tablet), 24px (Ponsel)
- Spasi Huruf: 1em
- Padding (Kiri): 50px (Desktop), 30px (Tablet), 24px (Ponsel)
Hasil akhir
Lihat hasil akhir dari tata letak dengan memperluas tab sudut.
Dan inilah desain di ponsel.
Unduh DIVI Sekarang!!!
Kesimpulan
Tab sudut yang ditampilkan dalam tutorial ini pasti akan berfungsi untuk semua jenis konten yang ingin Anda tampilkan di situs jaringan divi.
Anda juga tidak harus menggunakan keempat sudutnya. Misalnya, Anda dapat membuat tata letak kisi untuk gambar hanya menggunakan tab sudut kanan atas untuk menampilkan konten saat mengarahkan kursor.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...