Pernahkah Anda ingin mempresentasikan membuat kartu produk dengan Elementor ?
Inilah yang akan kami tunjukkan dalam tutorial ini. Untuk mendapatkan gambaran yang cukup tepat tentang apa yang akan kita bicarakan hari ini, kami mengundang Anda untuk menonton video berikut:
Tutorial ini tentang menyajikan produk yang berupa sepatu dengan menonjolkan ukuran, warna dan tombol beli masing-masing. Saat Anda mengarahkan kursor ke setiap kartu, informasi ini akan muncul. Berikut adalah ringkasan singkat dari apa yang akan kami lakukan.
Untuk mengikuti tutorial ini, kami mengundang Anda untuk menemukan gambar sepatu dan memiliki versi Pro dari Elementor. Jika Anda belum memilikinya, klik tautan ini untuk mendapatkannya.
Tapi mari kita kembali ke tujuan kita di sini.
Mari buat halaman dan modifikasi dengan Elementor.
Dalam hal ini, mari kita pilih struktur dengan 3 kolom. Mari kita selesaikan tinggi di tinggi minimal , ketinggian minimum pada VH dan atur kursor ke 100.
Di tab Gaya, pilih warna latar belakang untuk #130640
Di kolom tengah masukkan a widget gambar dengan memilih gambar sepatu dari perpustakaan Anda.
Buka tab Style dan di properti gambar atur lebarnya menjadi 80
Kemudian seret a Widget judul dan masukkan judul sepatu Nike - Ini adalah contoh, bisa jadi merek lain secara keseluruhan -
Baca juga: Cara Mengoptimalkan Tata Letak Situs Web Anda dengan Elementor
Atur Tag HTML ke H3 dan ratakan tengah
Buka tab Style dan ubah warna teks menjadi warna putih
Ubah tipografi juga
Kemudian seret a Widget Bagian Dalam dibawah Widget judul yang Anda masukkan di atas.
Secara default widget ini akan menawarkan Anda 2 kolom, hapus salah satunya. Di dalam Widget Bagian Dalam, Sisipkan Widget judul.
Berikan sebagai judul Potong: dan atur Tag HTML ke Menjangkau.
Di tab Gaya, ubah warna Judul, Ukuran menjadi 15 dan Lemak menjadi 300
Di tab Advanced, atur hanya margin Kanan ke 5 dan di properti positioning memilih Sebaris (Otomatis).
Tambahkan widget Tombol di Bagian Dalam yang sama dengan untuk Teks 8 dan spasi ikon pada 0.
Baca juga: Cara menggulir gambar panjang portofolio dengan Elementor
Di tab Gaya, ubah warna teks dan warna latar belakang tombol masing-masing menjadi Hitam dan Putih dan di Margin Internal masukkan 6-10-6-10 masing-masing untuk margin Kanan Atas-Bawah Internal -Kiri.
Pada tab Tingkat Lanjut, atur hanya margin kiri ke 5, dan di properti Pemosisian, pilih Sebaris (Otomatis).
Gandakan tombol ini 3 kali dan ubah teks dari 3 tombol terakhir menjadi 9,10,11 - Anda dapat melakukannya juga menggunakan huruf S, M, L, XL, XXL-
Klik edit bagian dan atur Horizontal Alignment ke Center
Kemudian duplikat bagian Internal ini -Bagian Dalam- dan ubah Ukuran dengan Warna hapus 3 tombol dan pada tombol yang tersisa hapus teks tombol.
Di tab Isi dari Tombol, pilih ikon Lingkaran dari perpustakaan ikon, klik Sisipkan untuk menambahkannya ke dalam tombol.
Di tab Style, beri ukuran 24 pada tipografi dan tautkan margin Internal dan masukkan 0. Di warna latar belakang atur transparansi ke min dan kemudian Anda dapat mengubah warna teks menjadi biru misalnya.
Kemudian duplikat tombol ini 3 kali dan ubah warna dua lainnya menjadi kuning dan merah. Kemudian klik pada bagian dalam untuk mengeditnya dan pada tab Advanced atur margin Atas dan Bawah ke -5 dan 10.
Sekarang kita akan menambahkan widget Tombol di bawah Widget Bagian Dalam kedua, masukkan sebagai teks Beli sekarang dan Penyelarasan ke Pusat. Di tab Style, atur tombol ke White dan teks tombol ke Black, lalu atur semua radius batas ke 20.
Pilih kolom utama yang kami kerjakan dan atur perataannya Vertikal di Lingkungan, di tab Gaya, pilih jenis Latar Belakang sebagai terdegradasi dan sebagai Jenis pilih Radial kemudian pada warna utama atur transparansi dan lokasi menjadi 94. Untuk warna kedua, atur lokasinya ke 77 dan jari-jari tepi lebih dari 10.
Pada tab Advanced, atur margin menjadi 0-35-0-35 dan margin dalam menjadi 50-20-50-20.
Anda kemudian dapat menyembunyikan panel untuk melihat seperti apa pekerjaan Anda. Anda akan melihat bahwa kartu Anda sangat cantik, tetapi kami akan menghidupkannya dengan menganimasikan bagian-bagian tertentu. Dan untuk itu kita akan menganimasikan Ukuran, Warna dan tombol beli.
Lihat juga: Bagaimana mengubah tajuk pada pengguliran halaman di Elementor
Mari bagian pertama bagian Internal pertama yang menampilkan ukuran produk dan pada tab Lanjutan, tentukan Fade In Up sebagai Efek Gerakan - Animasi Masuk dan penundaan animasi aktif 300.
Mari kita lakukan hal yang sama dengan bagian internal yang menampilkan warna tetapi dengan penundaan animasi 800. Untuk tombol beli, penundaannya adalah 1000
Sekarang kita akan menetapkan kelas sembunyikan dulu Bagian Dalam dan Tombol Beli. Pilih Bagian Dalam pertama, di tab Tingkat Lanjut dan di properti Tingkat Lanjut masukkan sembunyikan-pertama di bidang Kelas CSS. Lakukan hal yang sama untuk Bagian Dalam lainnya dan untuk tombol beli.
Oleh karena itu kita akan menambahkan kode CSS yang akan menganimasikan seluruh kolom. Salin kode berikut:
pemilih {
height: 400px;
display: melenturkan;
}
/ * CSS untuk Tampilkan / Sembunyikan * /
pemilih .sembunyikan-pertama {
display: none;
}
pemilih: arahkan .sembunyikan-pertama {
display: block;
}
/ * Transformasi Gambar * /
pemilih img {
transisi: kemudahan .5s;
}
pemilih: arahkan img {
mengubah: menerjemahkan (-20px, -40px) memutar (-25deg) skala (1.4);
}
/ * Ikhtisar seluler * /
@media (lebar maks: 767 piksel) {
pemilih: arahkan img {
mengubah: menerjemahkan (-20px, 0px) memutar (-10deg) skala (1);
}
pemilih {
margin: 50 piksel 10 piksel;
}
}
Pilih kolom untuk memodifikasinya dan pergi ke tab Advanced dan di bidang Custom CSS, paste kode ini.
NB: Anda harus tahu bahwa opsi ini hanya tersedia jika Anda memiliki versi ProElementor.
Jika sudah selesai, peta Anda akan dianimasikan dengan mouseover sementara secara default menyembunyikan ukuran, warna, dan tombol beli.
Mengenai penjelasan kode, bagian komentar memberikan gambaran. Tetapi dengan memodifikasi nilai, Anda akan memahami untuk apa setiap instruksi.
Lihat juga: Bagaimana cara menambahkan dua tombol berdampingan di kolom yang sama dengan Elementor
Jika semuanya berfungsi normal, duplikat kolom ini dua kali dan hapus kolom kosong lainnya.
Yang harus Anda lakukan adalah mengganti gambar dan judul blok lain dan terakhir melihat pratinjau pekerjaan Anda.
Anda baru saja membuat kartu produk yang indah.
Dapatkan Elementor Pro Sekarang!
Kesimpulan
Jadi ! Itu saja untuk tutorial ini yang menunjukkan cara membuat kartu produk dengan Elementor. Jika Anda memiliki masalah tentang cara menuju ke sana, beri tahu kami di komentar.
Namun, Anda juga bisa 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.
...
