Unduh Desain Arahkan/Klik Showcase Klien GRATIS & Tingkat Lanjut untuk Divi

Orang berhubungan dengan orang lain. Itu sebabnya di hampir semua situs web yang Anda kunjungi, Anda akan melihat wajah muncul. Dari pelanggan sebelumnya hingga anggota tim dan banyak lagi; semakin cepat Anda menunjukkan kepada klien dan orang-orang di belakang perusahaan Anda, semakin tinggi peluang Anda untuk meyakinkan mereka bahwa perusahaan, merek, atau produk Anda cocok. Dalam posting ini, kami akan fokus untuk menampilkan klien Anda dengan cara yang indah dan canggih. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Desain Arahkan/Klik Showcase Klien secara GRATIS

Untuk mendapatkan desain hover/klik showcase klien gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Hal pertama yang perlu Anda lakukan adalah menambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan.

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Sebelum menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus padding atas dan bawah default dari baris berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Pengaturan Kolom 2

Lanjutkan dengan membuka pengaturan kolom kedua.

Jarak

Tambahkan beberapa nilai padding khusus ke kolom.

• Padding Atas: 9vw
• Padding Bawah: 9vw
• Padding Kiri: 8vw
• Padding Kanan: 8vw

Tambahkan Modul Teks ke Kolom 1

Tambahkan Konten H3 & Paragraf

Setelah Anda menyelesaikan pengaturan baris dan kolom, lanjutkan dengan menambahkan Modul Teks ke kolom 1. Tambahkan informasi klien ke kotak konten.

Latar Belakang Gradien

Buka pengaturan latar belakang berikutnya dan terapkan latar belakang gradien berikut:

• Warna 1: rgba(43,135,218,0)
• Warna 2: rgba(0,0,0,0.55)
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Gambar latar belakang

Unggah juga gambar latar belakang.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Lato
• Warna Teks: #dbdbdb
• Ukuran Teks: 1vw (Desktop), 1,8vw (Tablet), 2,3vw (Telepon)
• Tinggi Baris Teks: 1.5vw (Desktop), 2vw (Tablet), 2.5vw (Telepon)

Judul 3 Pengaturan Teks

Buat beberapa perubahan pada pengaturan teks H3 juga.

• Judul 3 Font: Tampilan Playfair
• Judul 3 Berat Font: Tebal
• Judul 3 Warna Teks: #ffffff
• Judul 3 Ukuran Teks: 3vw (Desktop), 4vw (Tablet), 5vw (Telepon)
• Pos 3 Tinggi Baris: 1.6em

Jarak

Lanjutkan dengan masuk ke pengaturan jarak dan menata bentuk dan posisi modul yang sesuai:

• Margin Atas: 9vw
• Margin Bawah: 9vw
• Margin Kiri: 7vw (Desktop), 16vw (Tablet), 17vw (Telepon)
• Margin Kanan: 7vw (Desktop), 16vw (Tablet), 17vw (Telepon)
• Padding Atas: 32vw (Desktop), 55vw (Tablet), 49vw (Telepon)
• Padding Bawah: 3vw (Desktop), 6vw (Tablet & Ponsel)
• Padding Kiri: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)
• Padding Kanan: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)

Bayangan Kotak

Kami juga menambahkan bayangan kotak warna-warni.

• Posisi Horizontal Bayangan Kotak: 0px
• Posisi Vertikal Bayangan Kotak: 0px
• Kekuatan Penyebaran Bayangan Kotak: 7vw
• Warna Bayangan: #ffcf0f

ID CSS

Selesaikan pengaturan modul dengan menambahkan ID CSS.

• ID CSS: tampilan foto-1

Modul Teks Klon Lima Kali

Setelah Anda menyelesaikan Modul Teks pertama, lanjutkan dan klon 5 kali.

Ubah Konten & Gambar Latar Belakang Setiap Duplikat

Ubah konten dan gambar latar di setiap duplikat.

Ubah Warna Bayangan Kotak Setiap Duplikat

Bersamaan dengan bayangan kotak.

• Warna Bayangan: #9f89ed

Ubah ID CSS dari Setiap Duplikat & Tambahkan Kelas CSS

Setiap Modul Teks di kolom 1 membutuhkan ID CSS yang unik. Modul Teks pertama di kolom berisi ID CSS 'photo-display-1', yang kedua membutuhkan 'photo-display-2', yang ketiga 'photo-display-3', dan seterusnya. Tambahkan kelas CSS ke setiap Modul Teks duplikat juga (pastikan Anda tidak menambahkannya ke Modul Teks asli).

• ID CSS: photo-display-2 (dari 2 hingga 6)
• Kelas CSS: foto-sembunyikan-pertama (setiap Modul Teks di kolom 1 kecuali yang pertama)

Tambahkan Modul Teks #1 ke Kolom 2

Tambahkan Konten H2

Setelah Anda menyelesaikan semua 6 modul di kolom 1, Anda dapat melanjutkan ke kolom kedua. Di sana, modul pertama yang kita perlukan adalah Modul Teks dengan beberapa konten H2.

Pengaturan Teks H2

Buka tab desain dan ubah pengaturan teks H2 yang sesuai:

• Judul 2 Font: Tampilan Playfair
• Judul 2 Warna Teks: #636363
• Judul 2 Ukuran Teks: 3vw (Desktop), 6vw (Tablet & Ponsel)
• Judul 2 Spasi Huruf: 0.1vw
• Pos 2 Tinggi Baris: 1.2em

Tambahkan Modul Teks #2 ke Kolom 2

Tambah isi

Tambahkan Modul Teks lain ke kolom 2 dengan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Lato
• Perataan Teks: Justify
• Ukuran Teks: 0.9vw (Desktop), 2vw (Tablet), 2.7vw (Telepon)
• Tinggi Baris Teks: 2.1em

Jarak

Ubah juga nilai margin dalam pengaturan spasi.

• Margin Atas: 2vw
• Margin Bawah: 2vw
• Margin Kanan: 7vw

Tambahkan Modul Pembagi ke Kolom 2

Visibilitas

Lanjut ke modul selanjutnya yaitu Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Pindah ke tab desain dan ubah warna garis.

• Warna Garis: #636363

Jarak

Ubah nilai margin di berbagai ukuran layar berikutnya.

• Margin Bawah: 7vw
• Margin Kiri: 14vw (Desktop), 39vw (Tablet), 38vw (Telepon)
• Margin Kanan: 14vw (Desktop), 39vw (Tablet), 38vw (Telepon)

Ubah Putar

Putar Modul Pembagi.

• Kiri: 90 derajat

Ubah Terjemahan

Dan reposisi menggunakan beberapa nilai terjemahan transformasi kustom di berbagai ukuran layar.

• Kanan: 2vw (Desktop), 3vw (Tablet & Ponsel)
• Bawah: -17.3vw (Desktop), -43vw (Tablet & Ponsel)

Tambahkan Modul Teks #3 ke Kolom 2

Tambah isi

Modul selanjutnya yang kita butuhkan adalah Modul Teks lainnya. Pastikan Anda menambahkan nama klien yang sesuai ke kotak konten (cocok dengan Modul Teks pertama di kolom 1).

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Lato
• Gaya Font Teks: Huruf Besar
• Ukuran Teks: 1.3vw (Desktop), 2.5vw (Tablet), 3vw (Telepon)
• Spasi Huruf Teks: 1px
• Tinggi Baris Teks: 1.2em

Jarak

Tambahkan beberapa margin atas dan bawah kustom berikutnya.

• Margin Atas: 1em
• Margin Bawah: 1em

ID CSS

Pindah ke tab desain dan tambahkan ID CSS. Pastikan nomornya sama dengan Text Module yang sesuai di kolom 1.

• ID CSS: foto-klik-1

Modul Teks Klon #3 Lima Kali

Setelah Anda menyelesaikan Modul Teks klien pertama, klon 5 kali.

Ubah Isi Setiap Duplikat (Cocokkan dengan Modul Teks di Kolom 1)

Ubah nama klien di setiap Modul Teks duplikat.

Ubah ID CSS dari Setiap Duplikat

Dan cocokkan ID CSS setiap duplikat dengan Modul Teks di kolom 1.

• ID CSS: foto-klik-2 (dari 2 hingga 6)

Tambahkan Modul Kode #1 ke Kolom 2

Masukkan Kode CSS

Bagian terakhir dari tutorial ini berfokus pada membuat fungsi hover berfungsi. Tambahkan Modul Kode pertama ke kolom 2 dan masukkan baris kode CSS berikut:

<style>
.photo-hide-first {
display: none;
}
</style>

Tambahkan Modul Kode #2 ke Kolom 2

Masukkan Kode JQuery

Tambahkan Modul Kode lain tepat di bawah yang sebelumnya dan masukkan kode jQuery berikut untuk membuat fungsi hover berfungsi:

<script>
jQuery(function($){

$('#photo-click-1').css({'color': '#ffcf0f', 'font-weight': 'bold', 'padding-left': '0.5em'});

$('[id*="photo-click"]').hover(function() {

var selector1 = $(this).attr('id').replace('click', 'display');
var $photo = $('#' + selector1);
var $photoColor = $photo.css('box-shadow').replace(/^.*(rgba?([^)]+)).*$/,'$1')

$photo.siblings().hide();
$photo.show();

$('[id*="photo-click"]').css({'color': '', 'font-weight': '', 'padding-left': ''});
$(this).css({'color': $photoColor, 'font-weight': 'bold', 'padding-left': '0.5em'});

});
});
</script>

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat etalase klien yang indah yang dapat Anda gunakan di situs web apa pun yang Anda buat. Kami telah menggabungkan opsi bawaan Divi dengan beberapa kode jQuery untuk membuat pendekatan ini berfungsi. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.