Cara Mengungkapkan Konten di Arahkan dengan Memperluas Tab Sudut di Divi (Unduh GRATIS)

Selalu menyenangkan untuk menemukan cara baru dan kreatif untuk melibatkan pengguna dengan konten Anda menggunakan efek hover yang unik. Salah satu cara yang bagus untuk melakukannya adalah dengan mengungkapkan konten saat mengarahkan kursor menggunakan tab sudut yang diperluas. Ini memungkinkan pengguna untuk mengarahkan kursor ke tab di sudut kolom atau gambar untuk memperluas hamparan dengan konten tambahan yang bermanfaat bagi pengguna.

Untuk tutorial ini, kita akan membuat tata letak Divi yang benar-benar unik yang akan mengungkapkan konten saat melayang menggunakan tab sudut yang diperluas. Sebenarnya kami akan menunjukkan cara mendesain tab sudut yang diperluas untuk keempat sudut kolom di Divi.

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.

UNDUH

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:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

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

Untuk item unggulan pertama ini, kita akan membuat gambar latar kolom yang akan memiliki tab sudut (menggunakan modul uraian) di kanan bawah kolom yang mengembang dan melapisi seluruh kolom/gambar saat dilayangkan.

Mari kita mulai dengan menambahkan modul uraian.

Tambahkan Modul Blurb

Tambahkan modul uraian ke kolom 1.

Kami tidak akan menatanya dulu. Kami pada dasarnya membutuhkan beberapa konten sehingga kami dapat menata kolom yang berisi uraian.

Pengaturan Kolom 1

Dengan uraian di tempat, buka pengaturan baris dan kemudian klik untuk mengedit pengaturan kolom 1. Kemudian perbarui yang berikut ini:

• Gambar Latar Belakang [masukkan gambar]
• Ukuran Gambar Latar Belakang: Ukuran Sebenarnya

CATATAN: untuk contoh saya, saya menggunakan gambar bir latar belakang transparan yang diambil dari Paket Tata Letak Brewery. Mereka adalah 128px kali 359px itulah sebabnya saya menggunakan ukuran gambar yang sebenarnya.

Batas Kolom 1

• Sudut Bulat: 10px kanan bawah
• Lebar Batas Kanan: 2px
• Warna Batas Kanan: #e94558
• Lebar Batas Bawah: 2px
• Warna Batas Bawah: #e94558

CSS dan Overflow Khusus

Di bawah tab lanjutan, tambahkan CSS khusus berikut ke elemen utama:

height: 400px;

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)

Di bawah tab desain, perbarui yang berikut ini:

• 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

Opsi Transformasi (Desktop)

• Transformasi Skala Y Sumbu: 50%
• Transformasi Skala X Sumbu: 50%
• Transformasi Terjemahkan Sumbu Y: 50%
• Transformasi Terjemahkan X Sumbu: 30%
• Transform Origin: Kanan Bawah

Opsi Transformasi (Arahkan Arahkan kursor)

• 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

Perbarui Pengaturan Blurb

Selanjutnya, perbarui Pengaturan Blurb sebagai berikut:

• 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

Perbarui Pengaturan Modul Blurb

Selanjutnya, buka pengaturan untuk modul uraian dan perbarui yang berikut:

• 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

Kabur CSS Kustom

Saat ini kita hanya dapat melihat bagian kiri bawah dari modul uraian yang tidak menunjukkan judul kita seperti dua uraian lainnya pada baris di atas. Untuk menampilkan Judul di dalam tab, kita perlu memposisikan ulang judul ke kiri bawah uraian dengan beberapa CSS khusus.

Tambahkan CSS Kustom berikut ke kotak Judul Blurb:

position: absolute;
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

Perbarui Pengaturan Blurb

Selanjutnya, buka pengaturan untuk uraian di kolom 2 dan perbarui yang berikut:

• 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

Kemudian perbarui opsi transformasi:

• Transformasi Terjemahkan X Sumbu (desktop): -30%
• Transform Origin: Kiri Atas

Kabur CSS Kustom

Kemudian tambahkan CSS Kustom berikut ke kotak Judul Blurb:

position: absolute;
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

Menambahkan Judul

Untuk membuat judul, tambahkan baris di tengah dua baris dan tambahkan modul teks ke baris satu kolom.

Tambahkan konten: “Musimonal”.

Kemudian perbarui pengaturan berikut:

• 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)

Hasil Akhir

Lihat hasil akhir dari tata letak dengan memperluas tab sudut.

Dan inilah desain di ponsel.

Pikiran Akhir

Tab sudut yang diperluas yang ditampilkan dalam desain tata letak ini pasti akan berfungsi untuk semua jenis konten yang ingin Anda tampilkan di situs web Divi Anda. Anda juga tidak harus menggunakan keempat sudut. Misalnya, Anda dapat membuat tata letak kisi untuk gambar hanya menggunakan tab sudut kanan atas untuk menampilkan konten saat mengarahkan kursor. Kemampuan desain berlimpah dengan yang satu ini. Selamat bersenang-senang.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!