Cara Membuat Ulang ET's Layout Pack Previews dengan Fan-Out Hover Effects di Divi

Salah satu fitur keren dari desain situs web baru elegantthemes.com adalah pratinjau paket tata letak yang dibuat sebelumnya di halaman produk Divi. Apa yang membuat desain ini unik adalah bagaimana setiap paket tata letak ditampilkan dengan tiga gambar terpisah yang menyebar saat melayang.

Hari ini, kami akan menunjukkan kepada Anda cara membuat ulang desain pratinjau paket tata letak kami dengan efek hover fan-out yang mengesankan di Divi. Karena desainnya sedikit lebih maju, kami akan menggunakan beberapa CSS khusus yang dikombinasikan dengan opsi desain bawaan Divi. Tapi jangan khawatir, pembuatannya tidak memakan waktu lama dan hasilnya pasti worth it.

Mari kita mulai.

Sneak Peek

Berikut ini adalah tampilan pratinjau paket tata letak dengan efek hover fan-out. Perhatikan baris bawah memiliki efek hover sekunder yang memutar gambar secara terpisah pada hover.

Tata letak tiga kolom di desktop akan menyesuaikan dengan satu kolom di tablet dan ponsel.

Unduh Layout Paket Pratinjau Fan-Out Hover Effects Layout 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.

Langsung saja ke tutorialnya ya?

Berlangganan Saluran Youtube Kami

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda harus memiliki pengaturan berikut:

1. Tema Divi diinstal dan aktif
2. Halaman baru dibuat untuk membangun dari awal pada builder (visual) front end Divi.
3. Tiga gambar yang akan digunakan untuk konten tiruan. Gambar harus berukuran sekitar 250px kali 375px untuk hasil terbaik. Karena ini adalah pratinjau halaman web, Anda dapat membuat tangkapan layar sendiri dari desain halaman apa pun dan kemudian memotong/mengubah ukuran setiap gambar yang sesuai.

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai membuat beberapa tab hover di Divi.

Membuat Ulang ET's Layout Pack Previews dengan Fan-Out Hover Effects di Divi

Membangun Bagian dan Baris

Buat bagian reguler baru dengan baris tiga kolom.

Sebelum menambahkan modul apa pun, buka pengaturan baris dan perbarui ukuran dan spasi sebagai berikut:

• Lebar Talang: 2
• Lebar: 90%
• Lebar Maks: 1120 piksel (desktop), 400 piksel (tablet)

Kemudian tambahkan beberapa padding ke baris di tablet untuk lebih banyak ruang di ponsel.

• Kolom 1 Padding: 20% bawah
• Kolom 2 Padding: 20% bawah
• Kolom 3 Padding: 20% bawah

Menambahkan Gambar 1

Sekarang kita siap untuk menambahkan gambar pertama dari tiga gambar yang akan membentuk desain pratinjau paket tata letak kita. Silakan dan tambahkan modul gambar ke kolom 1.

Kemudian unggah gambar ke modul gambar (ukurannya harus sekitar 250px kali 375px).

Kemudian perbarui pengaturan desain sebagai berikut:

• Penjajaran Gambar: tengah
• Lebar: 220 piksel
• Overflow Vertikal: tersembunyi
• indeks Z: 4

Karena kita perlu menargetkan wadah gambar (bukan gambar itu sendiri), kita perlu menambahkan tinggi khusus, bayangan kotak, dan radius batas menggunakan CSS khusus. Tambahkan CSS berikut ke Elemen Utama:

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Ini akan memungkinkan gambar untuk menyesuaikan dengan wadah gambar saat kita menambahkan efek hover nanti. Seperti yang Anda lihat sekarang, gambar telah sedikit terpotong di bagian bawah karena kami memiliki tinggi kustom 240px dan overflow diatur ke "tersembunyi".

Menambahkan Gambar 2

Untuk membuat gambar kedua, tambahkan modul gambar baru di bawah modul gambar pertama di kolom 1. Kemudian unggah gambar baru (250X350) ke modul.

Kemudian kita perlu memposisikan gambar di belakang dan sedikit ke kiri gambar 1. Untuk melakukan ini kita perlu menambahkan lebar dan tinggi khusus dengan limpahan vertikal tersembunyi (seperti yang kita lakukan dengan gambar 1). Perbedaan utama di sini adalah bahwa kita perlu memberikan gambar posisi absolut sehingga ditampilkan di kiri atas kolom di belakang gambar 1.

Untuk melakukannya, perbarui yang berikut ini:

• Lebar: 180px
• Overflow Vertikal: tersembunyi

Kemudian tambahkan CSS khusus berikut ke Elemen Utama:

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Menambahkan Gambar 3

Sekarang kita siap untuk menambahkan gambar ketiga untuk melengkapi pratinjau paket tata letak. Pada titik ini masuk akal untuk menggunakan mode tampilan gambar rangka karena kami memiliki beberapa tumpang tindih yang membuat penggunaan pembuat visual menjadi lebih sulit. Terapkan mode gambar rangka dan duplikat gambar 2.

Kami menggandakan gambar karena kami ingin membawa sebagian besar pengaturan yang kami gunakan untuk gambar 2. Satu-satunya perbedaan (selain gambar baru) adalah kita perlu memposisikan gambar ke kanan, bukan kiri.

Buka gambar duplikat (gambar 3) dan perbarui modul gambar dengan gambar baru (250×375).

Kemudian perbarui CSS khusus dengan mengubah properti posisi left menjadi properti posisi right . Tidak ada perubahan lain pada CSS yang diperlukan.

Jika mau, Anda dapat menyalin dan menempelkan CSS berikut di Elemen Utama untuk menggantikan CSS saat ini.

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Sejauh ini baik

Berikut adalah hasil akhir sejauh ini.

Desainnya sebenarnya sangat indah, tetapi mari kita tingkatkan dengan efek melayang-layang yang menyebar.

Menambahkan CSS Efek Arahkan Arah Kipas Angin

Biasanya, jika kita berurusan dengan hanya satu gambar, kita dapat dengan mudah menambahkan efek hover menggunakan opsi Divi bawaan. Tetapi efek melayang-layang yang menyebar ini mengharuskan kita menggunakan status melayang-layang dari beberapa elemen anak (gambar) sekaligus saat mengarahkan kursor ke kolom induk. Saat mengarahkan kursor ke kolom, kami ingin yang berikut ini menyelesaikan penyesuaian berikut pada gambar.

1. Tambahkan durasi transisi ke setiap gambar untuk transisi yang mulus saat mengarahkan kursor.
2. Sesuaikan Gambar 1 untuk memiliki lebar 180px dan tinggi 240px. Ini akan menyebabkan wadah gambar tumbuh lebih tinggi dan lebih sempit untuk menampilkan lebih banyak gambar.
3. Sesuaikan Gambar 2 dan 3 untuk memiliki lebar 160px dan tinggi 220px. Ini juga akan menyebabkan gambar tumbuh lebih tinggi dan lebih sempit untuk menampilkan lebih banyak gambar.
4. Sesuaikan Gambar 2 untuk memutar 5 derajat berlawanan arah jarum jam dan bergerak sedikit ke kiri. Kita dapat melakukan ini dengan menambahkan nilai -5 derajat pada properti transform:rotate dan menyesuaikan nilai properti posisi left ke 0.
5. Sesuaikan Gambar 3 untuk memutar 5 derajat searah jarum jam dan bergerak sedikit ke kanan. Kita dapat melakukan ini dengan menambahkan nilai 5 derajat ke properti transform:rotate dan menyesuaikan nilai properti posisi yang right ke 0.

Untuk menambahkan CSS khusus yang diperlukan untuk efek hover ini, kita perlu menambahkan kelas CSS khusus ke baris yang berisi gambar. Ini akan memungkinkan kita untuk menerapkan CSS khusus hanya untuk gambar di baris tertentu.

Buka pengaturan baris dan tambahkan Kelas CSS berikut.

• Kelas CSS: fan-out-images

Untuk menambahkan CSS khusus ke halaman, buka pengaturan halaman dan tambahkan CSS Kustom berikut di bawah tab Lanjutan.

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

Saya telah menambahkan komentar di atas setiap potongan css untuk mengingatkan Anda apa yang dilakukan masing-masing.

Setelah Anda selesai. Lihat hasil akhirnya.

Hasil Akhir

Efek Arahkan Arah Opsional: Memutar Gambar 1 dan 2 Secara Terpisah saat Mengarahkan

Untuk menambahkan tingkat keterlibatan lain ke gambar pratinjau paket tata letak, kita dapat membuat rotasi gambar 1 dan gambar 2 terjadi terpisah dari efek hover awal. Ini akan memungkinkan pengguna untuk berinteraksi dengan gambar dengan cara yang unik. Anda bahkan dapat menambahkan tautan terpisah atau pratinjau lightbox ke gambar tersebut jika Anda mau.

Inilah cara Anda melakukannya.

Mengambil Transform Properties dari Pengaturan Halaman CSS Kustom

Pertama, Anda perlu mengeluarkan dua baris CSS khusus yang memutar gambar saat mengarahkan kursor ke kolom. Buka pengaturan halaman CSS khusus dan ambil yang berikut ini:

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

Menambahkan Transform Properties pada Hover untuk Gambar 2

Kemudian buka pengaturan modul gambar untuk gambar 2 dan gunakan opsi transformasi bawaan Divi untuk menambahkan nilai putar transformasi yang sama yang kami hapus sebelumnya untuk status melayang.

• Transform Rotate Z Axis (arahkan kursor): -5deg
• Transformasi Terjemahkan sumbu X (arahkan kursor): -20px

Menambahkan Transform Properties pada Hover untuk Gambar 3

Kemudian perbarui pengaturan modul gambar untuk gambar 3 untuk menambahkan properti transform rotate.

• Transform Rotate Z Axis (arahkan kursor): 5deg
• Transformasi Terjemahkan sumbu X (arahkan kursor): 20px

Sekarang lihat hasil akhirnya.

Hasil Akhir

Menambahkan Tautan ke Gambar

Jika Anda ingin membuat tautan pengalihan untuk menampilkan paket tata letak atau desain halaman tertentu pada halaman terpisah, sebaiknya tambahkan URL Tautan yang sama ke ketiga gambar dalam paket. Untuk melakukan ini, buka setiap modul gambar dan tambahkan URL tautan.

Menambahkan Pratinjau Paket Tata Letak baru ke Kolom Lain

Untuk menyelesaikan desain, kita dapat menyalin tiga gambar di kolom 1 dan menempelkannya ke kolom 2 dan kolom 3.

Setelah itu, yang perlu Anda lakukan adalah memperbarui setiap gambar di kolom 2 dan 3 dengan yang baru.

Itu dia!

Desain Akhir

Berikut adalah desain akhir. Baris atas menunjukkan efek hover fan-out hover saat mengarahkan kursor ke kolom. Baris kedua menunjukkan efek hover fan-out sekunder yang ditambahkan ke gambar 2 dan 3 secara terpisah.

Tata letak tiga kolom di desktop akan menyesuaikan dengan satu kolom di tablet dan ponsel.

Pikiran Akhir

Efek hover fan-out adalah elemen desain yang indah dan menarik yang dapat Anda gunakan untuk menampilkan tata letak halaman di situs web Anda sendiri. Kombinasi CSS khusus dan pengaturan Divi bawaan yang kita bahas dalam tutorial ini akan bekerja secara ajaib. Dan pengaturan ini akan berfungsi sebagai titik awal yang bagus untuk menjelajahi lebih banyak desain menggunakan pembuat Divi. Mudah-mudahan, ini memberi Anda inspirasi untuk membawa portofolio Anda ke tingkat berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!