Cara Membuat Katalog Fashion Bergulir dengan Divi

Dalam posting ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat membuat katalog fashion bergulir. Menggunakan metode ini akan membantu Anda terhubung dengan audiens Anda seperti yang Anda lakukan dengan memberi mereka katalog kertas. Membuat katalog busana bergulir online dapat membantu meningkatkan hasil yang Anda dapatkan dari katalog. Dengan menyertakan tautan langsung ke item toko, misalnya, proses pembelian juga akan ditingkatkan.

Hasil

Hasilnya kami akan menunjukkan cara membuat, langkah demi langkah, terlihat seperti ini di desktop:

Dan seperti ini di ponsel dan tablet:

Cara Membuat Katalog Fashion Bergulir dengan Divi

Berlangganan Saluran Youtube Kami

Tambahkan Bentuk Transparan ke Gambar dengan Photoshop

Hal pertama yang akan kami tunjukkan kepada Anda adalah bagaimana menambahkan bagian transparan ke gambar dengan Photoshop. Ada alternatif gratis untuk Photoshop yang disebut GimpShop, tetapi di bagian tutorial ini, kita hanya akan menggunakan Photoshop. Kita membutuhkan dua gambar dengan masing-masing dua bentuk berbeda; satu untuk desktop dan satu untuk ponsel dan tablet. Di bagian ini, kami hanya akan menunjukkan cara menambahkan bentuk transparan ke gambar. Setelah itu, Anda dapat membuat semua gambar yang Anda butuhkan sendiri.

Buka Photoshop

Mulailah dengan membuka Photoshop di komputer Anda.

Buka Gambar

Selanjutnya, buka gambar pertama yang ingin Anda edit. Metodenya tetap sama untuk ketiga gambar yang akan Anda gunakan sepanjang tutorial ini. Itu sebabnya kami hanya akan menjelaskannya sekali.

Klik dua kali pada Gambar & Buat Lapisan

Setelah Anda membuka gambar yang ingin Anda edit, klik dua kali pada gambar dan buat layer baru untuk itu.

Tambahkan Lapisan Lain

Lanjutkan dengan menambahkan lapisan kosong lain di atasnya.

Pilih Layer 1 & Polygonal Lasso Tool

Pilih Layer 1 dan mulai gunakan Polygonal Lasso Tool.

Membuat Bentuk

Saat Polygonal Lasso Tool diaktifkan, lanjutkan dan buat bentuk transparan di dalam gambar Anda.

Jadikan Layer 1 Tidak Terlihat & Tekan Hapus Saat Memilih Layer 0

Setelah Anda memilih area yang ingin Anda jadikan transparan, buat Layer 1 tidak terlihat, pilih Layer 0 lagi dan tekan tombol Delete pada keyboard Anda.

Pilih Rectangular Marquee Tool & Klik Somewhere on Image

Setelah Anda selesai melakukannya, pilih Rectangular Marquee Tool dan klik di suatu tempat pada gambar Anda.

Simpan Gambar sebagai PNG

Terakhir, Anda harus menyimpan gambar sebagai PNG dan mengulangi proses yang sama untuk keempat gambar yang akan Anda gunakan di seluruh tata letak.

Pengaturan Bilah Menu Utama

Pengaturan Bilah Menu Utama yang kita butuhkan untuk tata letak yang kita buat adalah sebagai berikut:

• Sembunyikan Gambar Logo: Aktifkan
• Tinggi Menu: 30
• Ukuran Teks: 15
• Spasi Huruf: -1
• Font: Lato
• Gaya Font: Tebal & Huruf Besar
• Warna Teks: #FFFFFF
• Warna Tautan Aktif: #FFFFFF
• Warna Latar Belakang: rgba(255,255,255,0)
• Warna Latar Menu Dropdown: rgba(255,255,255,0)

Edisi Pendahuluan

Setelah Anda memodifikasi Bilah Menu Utama, Anda dapat melanjutkan dan menambahkan halaman baru, menggunakan Divi Builder dan beralih ke Visual Builder.

Tambahkan Bagian Baru

Di dalam halaman itu, mulailah dengan menambahkan bagian standar.

Bagian Warna Latar Belakang

Latar belakang warna itu harus '#d6d6d6'.

Padding Kustom

Pindah ke tab Desain di bagian itu. Di dalam subkategori Spasi, tambahkan '24px' ke padding atas dan 0px ke padding bawah.

Tambahkan Baris Satu Kolom

Setelah selesai, Anda dapat melanjutkan dan menambahkan baris satu kolom ke bagian tersebut.

Perekat

Buka tab Desain dan ubah subkategori Ukuran:

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: 1

Padding Kustom

Gulir ke bawah dan tambahkan '0px' ke padding atas baris.

Modul Teks Pertama

Setelah selesai, Anda dapat menambahkan Modul Teks ke baris. Setelah memasukkan teks yang ingin Anda tampilkan, buka tab Desain dan pastikan perubahan berikut berlaku untuk subkategori Teks:

• Font Teks: TT Standar Lama
• Gaya Font: Huruf Besar
• Ukuran Font Teks: 72 (Desktop), 41 (Tablet), 29 (Telepon)
• Warna Teks: #000000
• Spasi Huruf Teks: 11px
• Tinggi Baris Teks: 1em
• Orientasi Teks: Tengah

Buka subkategori Spacing dan tambahkan '30px' ke padding atas dan bawah.

Modul Pembagi

Tepat di bawah Modul Teks, tambahkan Modul Pembagi dan aktifkan opsi 'Tampilkan Pembagi'.

Buka tab Design dan pilih '#FFFFFF' sebagai warna pembagi.

Selanjutnya, pilih 'Solid' sebagai Gaya Pembagi dan 'Top' sebagai Posisi Pembagi dalam subkategori Gaya.

Kemudian, buka subkategori Ukuran dan buat pengaturan berikut berlaku:

• Berat Pembagi: 10px
• Tinggi: 23px
• Lebar: 100%
  

Modul Teks Kedua

Tepat di bawah Modul Pembagi, tambahkan Modul Teks lainnya. Pilih ikon apa pun yang Anda inginkan dalam Peta Karakter (Windows) atau Palet Karakter (Mac) dan letakkan di tab Konten. Untuk contoh ini, kami telah menggunakan simbol berikut: '↓'. Lalu, buka tab Desain dan buat pengaturan berikut berlaku:

• Ukuran Font Teks: 42px
• Warna Teks: #000000
• Orientasi Teks: Tengah

Katalog Mode Desktop (Bagian Baru)

Sekarang, tambahkan bagian standar lainnya. Bagian ini akan berisi dua baris yang akan menampilkan bagian katalog yang berbeda di desktop.

Pengaturan Bagian

Warna latar belakang

Gunakan '#FFFFFF' sebagai warna latar belakang bagian ini.

Padding Kustom

Lalu, buka tab Design dan tambahkan '15px' ke padding atas.

Baris pertama

Struktur Kolom

Setelah Anda membuat perubahan pada pengaturan, tambahkan baris dengan struktur kolom berikut:

Warna latar belakang

Buka pengaturan baris dan tambahkan 'rgba(255,255,255,0.14)' sebagai warna latar belakang.

Gambar latar belakang

Tambahkan salah satu gambar yang Anda buat di bagian Photoshop dari posting ini dan gunakan 'Hue' sebagai Background Image Blend.

Perekat

Terakhir, buat perubahan berikut pada subkategori Ukuran:

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Modul Teks Pertama

Setelah Anda menyelesaikan pengaturan baris, tambahkan Modul Teks ke kolom kedua. Gunakan pengaturan berikut untuk subkategori Teks:

• Font Teks: Pahit
• Ukuran Font Teks: 63px
• Warna Teks: #000000
• Orientasi Teks: Tengah

Modul Pembagi

Tepat di bawah Modul Teks pertama, tambahkan Modul Pembagi dan aktifkan opsi 'Tampilkan Pembagi'.

Pindah ke tab Desain dan gunakan '#000000' sebagai warna pembagi.

Di dalam subkategori Gaya, gunakan 'Padat' sebagai Gaya Pembagi dan 'Atas' sebagai Posisi Pembagi.

Gulir ke bawah tab yang sama dan buat pengaturan berikut berlaku untuk subkategori Ukuran:

• Berat Pembagi: 3px
• Tinggi: 23px
• Lebar: 57%
• Penyelarasan Modul: Kiri

Terakhir, tambahkan margin atas '30px' dan margin bawah '50px'.

Modul Teks Kedua

Setelah Pembagi berada di tempatnya, lanjutkan dan tambahkan Modul Teks kedua yang akan berisi judul. Pertama-tama, gunakan '#000000' sebagai warna latar belakangnya di tab Konten.

Kemudian, lanjutkan ke tab Desain dan buat pengaturan berikut berlaku untuk subkategori Teks:

• Font Teks: Pahit
• Ukuran Font Teks: 92px
• Warna Teks: #000000
• Tinggi Baris Teks: 1em
• Orientasi Teks: Kiri

Buka subkategori Perbatasan dan gunakan batas berikut:

• Gunakan Perbatasan: Ya
• Warna Perbatasan: #000000
• Lebar Perbatasan: 3px
• Gaya Perbatasan: Padat

Selanjutnya, gunakan Lebar '77%' dan Alignment Modul kiri.

Terakhir, tambahkan '15px' ke padding atas, kanan, bawah dan kiri Modul Teks.

Modul Teks Ketiga

Tambahkan Modul Teks lain tepat di bawah yang sebelumnya. Yang ini akan mewakili deskripsi. Buka tab Desain dan gunakan pengaturan berikut untuk Subkategori Teks:

• Font Teks: Lato
• Ukuran Font Teks: 16px
• Warna Teks: #000000
• Tinggi Baris Teks: 1em
• Orientasi Teks: Kiri

Buka subkategori Sizing, gunakan '70%' untuk Width dan pilih Module Alignment kiri.

Terakhir, tambahkan margin atas '20px'.

Modul Teks Kelima

Modul Teks kelima berfungsi sebagai tombol minimalis. Di dalam tab Konten, gunakan simbol '→' + teks dan letakkan tautan di belakangnya.

Lalu, buka tab Desain. Gunakan pengaturan berikut untuk subkategori Teks:

• Font Teks: Pahit
• Ukuran Font Teks: 23px
• Warna teks: #000000
• Tinggi Baris Teks: 1em
• Orientasi Teks: Kiri

Gulir ke bawah tab yang sama hingga Anda menemukan subkategori Ukuran. Dalam subkategori itu, gunakan Lebar '49%' dan Penyelarasan Modul yang tepat.

Terakhir, tambahkan margin atas '80px'.

Modul Teks Keenam

Modul keenam dan terakhir yang kita butuhkan hampir sama dengan modul sebelumnya. Gunakan teks '→' + dan letakkan tautan di belakangnya.

Pengaturan untuk Subkategori Teks adalah sebagai berikut:

• Font Teks: Pahit
• Ukuran Font Teks: 23px
• Warna Teks: #e02b20
• Tinggi Baris Teks: 1em
• Orientasi Teks: Kiri

Ubah Width menjadi '39%' dan gunakan juga Module Alignment yang tepat.

Baris kedua

Warna latar belakang

Buka pengaturan baris dan tambahkan 'rgba(255,255,255,0.14)' sebagai warna latar belakang.

Gambar latar belakang

Tambahkan salah satu gambar yang Anda buat di bagian Photoshop dari posting ini dan gunakan 'Hue' sebagai Background Image Blend.

Struktur Kolom

Baris kedua yang perlu Anda tambahkan ke bagian standar adalah kebalikan dari yang sebelumnya.

Modul Klon

Modul yang kita gunakan di baris sebelumnya sama dengan yang kita butuhkan untuk baris ini, jadi lanjutkan, kloning dan tempatkan di kolom pertama, bukan di kolom kedua. Kita perlu membuat beberapa perubahan penyelarasan di bagian selanjutnya dari posting ini.

Modifikasi Modul Teks Pertama

Buka Modul Teks pertama dan tambahkan margin atas '20px'.

Modifikasi Modul Pembagi

Kemudian, buka Modul Pembagi dan ubah Penyelarasan Modul di dalam subkategori Ukuran ke kanan.

Modifikasi Modul Teks Kedua

Atur Orientasi Teks dari Modul Teks kedua ke kanan.

Dan pilih juga Penyelarasan Modul yang tepat di subkategori Ukuran.

Modifikasi Modul Teks Ketiga

Modul Teks ketiga akan membutuhkan Orientasi Teks yang tepat juga.

Dan Penyelarasan Modul yang tepat juga.

Modifikasi Modul Teks Kelima

Satu-satunya hal yang harus Anda lakukan untuk Modul Teks kelima adalah mengubah Lebar menjadi '82%'.

Modifikasi Modul Teks Keenam

Jumlah yang sama untuk Modul Teks keenam tetapi gunakan '87%' sebagai gantinya.

Sembunyikan Bagian untuk Tablet & Ponsel

Setelah Anda menyelesaikan dua baris, Anda dapat melanjutkan dan menonaktifkan seluruh bagian di ponsel dan tablet.

Katalog Tablet & Telepon (Bagian Baru)

Untuk membuat semuanya tampak hebat di tablet dan ponsel juga, kita akan membuat bagian standar baru.

Pengaturan Bagian

Warna latar belakang

Tambahkan '#FFFFFF' sebagai warna latar belakang bagian itu.

Padding Kustom

Pindah ke tab Desain dan tambahkan padding atas '15px'.

Baris pertama

Struktur Kolom

Kemudian, tambahkan baris dua kolom ke bagian tersebut.

Perekat

Buka subkategori Ukuran dari baris itu dan buat perubahan berikut:

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Modul Gambar

Alih-alih menggunakan gambar latar belakang, kita akan menggunakan Modul Gambar sebagai gantinya. Dengan begitu, kita akan yakin bahwa teks dan gambar tidak akan tumpang tindih. Lanjutkan dan tambahkan modul gambar ke kolom pertama dari baris dan unggah gambar.

Modul Klon Baris Pertama dalam Versi Desktop

Kemudian, kloning semua modul yang telah Anda gunakan di baris pertama versi desktop dan letakkan di kolom kedua.

Ubah Ukuran Font Modul Teks Kedua

Hanya ada satu hal yang perlu diubah; ukuran font Modul Teks kedua. Ubah menjadi 65px.

Baris kedua

Struktur Kolom

Kemudian, lanjutkan dan tambahkan baris dua kolom lainnya ke bagian tersebut.

Perekat

Baris ini juga memerlukan subkategori Sizing yang dimodifikasi:

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Modul Gambar

Tambahkan Modul Gambar ke kolom pertama juga dan unggah gambar.

Modul Klon Baris Kedua dalam Versi Desktop

Kemudian, lanjutkan dan klon modul yang ditempatkan di baris kedua versi desktop. Setelah Anda mengkloningnya, letakkan di kolom kedua dari baris ini.

Ubah Ukuran Font Modul Teks Kedua

Ukuran teks dari Modul Teks kedua perlu diubah juga. Silakan dan berikan ukuran font '65px'.

Sembunyikan Bagian untuk Desktop

Setelah Anda menyelesaikan kedua baris, Anda dapat melanjutkan dan menonaktifkan seluruh bagian di desktop.

Hasil

Et voila, setelah mengikuti semua langkah dalam posting ini, Anda akan mencapai hasil berikut di desktop:

Dan berikut ini di ponsel dan tablet:

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana Anda dapat membuat katalog fashion bergulir yang bagus. Untuk membuat desain kami berfungsi, pertama-tama kami menunjukkan kepada Anda cara membuat bentuk transparan di dalam gambar Anda dengan Photoshop. Setelah itu, kami menggunakan gambar-gambar ini dalam tutorial Divi kami untuk membuat desain. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh Rvector / shutterstock.com