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.

Tab sudut yang dapat diperluas di Divi

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
Dapat diperluas di Divi
  • Padding (Kiri): 50px (Desktop), 30px (Tablet), 24px (Ponsel)
Dapat diperluas di Divi

Hasil akhir

Lihat hasil akhir dari tata letak dengan memperluas tab sudut.

Tab sudut yang dapat diperluas di Divi

Dan inilah desain di ponsel.

Tab sudut yang dapat diperluas di Divi

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.

...