Cara Membuat Bagian Info Produk Gambar Terpisah yang Elegan dengan Divi

Menjadi kreatif dengan gambar pasti dapat membantu menarik perhatian ke CTA Anda. Dalam posting ini, kami akan menunjukkan cara membuat ulang bagian info produk split-image yang indah dengan Divi. Desain yang kami buat ulang indah, menarik, dan dapat disesuaikan dengan kebutuhan Anda. Anda juga dapat mengunduh file JSON desain secara gratis!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Tata Letak Gambar Terpisah Gratis secara GRATIS

Untuk mendapatkan tata letak gambar terpisah gratis, 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!

Berlangganan Saluran Youtube Kami

Buat Efek Gambar Terpisah Dengan Photoshop dan Illustrator

Sebelum memulai dengan Divi, Anda harus memiliki satu set gambar yang siap untuk diunggah. Karena ini adalah efek split-image, Anda memerlukan dua gambar yang cocok satu sama lain. Anda memerlukan dua ukuran gambar yang berbeda: lebar 960 piksel kali tinggi 1200 piksel untuk desktop, dan lebar 600 piksel kali tinggi 1200 piksel untuk tablet dan seluler.

Langkah 1: Pilih Gambar

Pilih dua gambar HD produk Anda.

Langkah 2: Hapus Latar Belakang

Hapus latar belakang untuk membuat potongan. Anda dapat menggunakan program apa pun yang Anda inginkan. Tapi inilah panduan langkah demi langkah untuk Photoshop.

Langkah 3: Buka Proyek Baru di Illustrator

Buka proyek baru di Illustrator, lebar 1920px dengan tinggi 1200px.

Langkah 4: Tambahkan Panduan Vertikal.

Tambahkan panduan vertikal melalui bagian tengah kanvas kosong. Pastikan itu tepat di tengah.

Langkah 5: Impor atau Tempatkan Gambar Cut-Out

Tempatkan kedua gambar yang dipotong di atas kanvas.

Langkah 6: Mulai Memvisualisasikan Split

Buat dua duplikat dari setiap gambar. Gunakan fungsi krop untuk membaginya menjadi dua di tempat yang berbeda. Pertama melalui tengah, dan kemudian sedikit lebih sedikit untuk duplikatnya. Sekarang Anda akan memiliki tiga versi terpisah dari setiap gambar.

Langkah 7: Selesaikan Efeknya

Dengan menggunakan potongan terpisah yang berbeda, temukan komposisi terbaik untuk gambar Anda. Pastikan bahwa tepi lurus setiap gambar berada tepat di panduan tengah di kanvas. Coba ubah ukuran gambar agar lebih pas. Ingat bahwa kanvas memiliki ukuran layar lebar penuh, jadi sesuaikan ukuran gambarnya.

Langkah 8: Pangkas Setengah dan Simpan

Saat desain selesai, singkirkan potongan tambahan. Periksa kembali apakah tepi lurus setiap gambar menyentuh pemandu tengah. Buat dua artboard baru dan ubah ukurannya agar pas di setiap sisi, pastikan keduanya dipisahkan tepat di panduan tengah. Ekspor untuk web, satu artboard pada satu waktu dan simpan sebagai .png. Sekarang, Anda memiliki dua gambar yang berbeda. Lebar 960px dan tinggi 1200px.

Langkah 9: Ubah ukuran untuk Tablet dan Seluler

Ubah ukuran kedua gambar menjadi lebar 960px dengan tinggi 1200px. Pastikan Anda hanya memotong latar belakang transparan, jangan sentuh gambarnya. Saya melakukannya di Photoshop dengan mengubah ukuran kanvas dengan jangkar di sisi gambar.

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Latar belakang

Sekarang kita telah melalui bagian pertama dari tutorial, saatnya untuk memulai dengan Divi! Buat halaman baru atau tambahkan bagian baru ke halaman yang sudah ada. Tambahkan latar belakang gradien ke bagian.

• Latar Belakang: Gradien
• Warna Satu: Putih Mati #f7f7f7
• Warna Dua: Hijau Segar #b7e778
• Arah Gradien: 90 derajat
• Posisi Awal dan Akhir: 50%

Jarak

Ubah pengaturan spasi bagian berikutnya.

• Padding Atas: 5vw
• Padding Bawah: 12vw

Visibilitas

Terakhir, sesuaikan visibilitas.

• Overflow Vertikal dan Horizontal: Tersembunyi

Tambahkan Baris Pertama

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Sesuaikan pengaturan ukuran baris.

• Lebar Talang: 2
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Tambahkan beberapa nilai padding khusus juga.

• Padding Atas dan Bawah: 2vw

Pengaturan Kolom 1

Mengubah

Pergi ke pengaturan kolom 1 berikutnya, dan ubah nilai transform translate.

• Transform Terjemahkan: -2vw sumbu y

Pengaturan Kolom 2

Mengubah

Lakukan hal yang sama untuk kolom 2.

• Transform Terjemahkan: sumbu x 2vw

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul! Tambahkan modul teks ke kolom 1 dengan beberapa konten H2 pilihan Anda.

Teks Judul

Di tab desain, ubah pengaturan teks judul.

• Tingkat Teks Judul: H2
• Huruf H2: Corben
• Keselarasan H2:
  • Desktop: Kiri
  • Tablet + Telepon: Tengah
• Warna Teks H2: Abu-abu Sangat Gelap #3a3a3a
• Ukuran Teks H2:
  • Desktop: 7vw
  • Tablet + Telepon: 16vw

Jarak

Kemudian, sesuaikan jaraknya.

• Margin Kanan:
  • Desktop: -1vw
  • Tablet + Telepon: 0vw
• Bantalan Kanan:
  • Tablet + Telepon: 35vw

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Sekarang, tambahkan modul teks ke kolom kedua. Masukkan beberapa konten H2 pilihan Anda.

Teks Judul

Kemudian, gaya teks judul sebagai berikut.

• Tingkat Teks Judul: H2
• Huruf H2: Corben
• Keselarasan H2:
  • Desktop: Kiri
  • Tablet + Telepon: Kanan
• Warna Teks H2: Abu-abu Sangat Gelap #3a3a3a
• Ukuran Teks H2:
  • Desktop: 7vw
  • Tablet + Telepon: 14vw

Jarak

Terakhir, sesuaikan jarak.

• Batas atas:
  • Tablet: -12vw
  • Telepon: -14vw
• Margin Kiri:
  • Desktop + Tablet: -0.5vw
• Bantalan Kanan:
  • Tablet + Telepon: 17vw

Tambahkan Baris ke-2

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian Anda menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris dan sesuaikan pengaturan ukuran.

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

Jarak

Ubah pengaturan spasi berikutnya.

• Batas atas:
  • Desktop: -15vw
  • Tablet: -36vw
  • Telepon: -40vw
• Padding Atas dan Bawah:
  • Desktop: 0vw
  • Tablet: 9vw
  • Telepon: 12vw

CSS khusus

Selesaikan pengaturan baris dengan menambahkan satu baris kode CSS ke elemen utama baris. Ini akan membantu menjaga gambar tetap bersama.

• Elemen Utama: tampilan: fleksibel;

display: flex;

Tambahkan Modul Gambar ke Kolom 1

Menambahkan gambar

Tambahkan setengah gambar kiri ke kolom 1.

• Gambar:
  • Desktop: Gambar lebar 960px
  • Tablet + Telepon: Gambar lebar 600px

Perekat

Buat modul gambar dengan lebar penuh.

• Paksa Lebar Penuh: ya

Tambahkan Modul Gambar ke Kolom 2

Menambahkan gambar

Tambahkan setengah gambar kanan ke kolom 2.

• Gambar:
  • Desktop: Gambar lebar 960px
  • Tablet + Telepon: Gambar lebar 600px

Perekat

Buat modul gambar ini dengan lebar penuh juga.

• Paksa Lebar Penuh: ya

Tambahkan Baris ke-3

Struktur Kolom

Ke baris berikutnya! Pilih struktur kolom berikut:

Perekat

Sesuaikan ukuran baris sebagai berikut:

• Lebar Talang: 4
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Kemudian, sesuaikan jaraknya.

• Batas atas:
  • Desktop: -38vw
  • Tablet + Telepon: -14vw

Pengaturan Kolom 1

Jarak

Sebelum menambahkan modul, sesuaikan spasi di kolom. Mulai dengan kolom 1.

• Bantalan Kiri:
  • Desktop: 7vw
  • Tablet + Telepon: 12vw
• Bantalan Kanan:
  • Desktop: 15vw
  • Tablet + Telepon: 12vw

Pengaturan Kolom 2

Jarak

Kemudian, sesuaikan pengaturan spasi kolom 2

• Bantalan Kiri:
  • Desktop: 15vw
  • Tablet + Telepon: 12vw
• Bantalan Kanan:
  • Desktop: 7vw
  • Tablet + Telepon: 12vw

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Tambahkan modul teks ke kolom 1 dan tambahkan beberapa konten H3 pilihan Anda.

Latar belakang

Ubah warna latar belakang.

• Warna latar belakang
• Warna: Abu-abu Sangat Gelap #333333

Teks Judul

Kemudian, gaya teks judul.

• Tingkat Teks Judul: H3
• Huruf H3: Corben
• Penjajaran H3: Pusat
• Warna Huruf H3: Putih Mati #f7f7f7
• Ukuran Huruf H3:
  • Desktop: 2.2vw
  • Tablet: 6.4vw
  • Telepon: 7vw
• Spasi Huruf H3: 3 px

Jarak

Tambahkan beberapa nilai spasi kustom berikutnya.

• Bantalan Atas:
  • Desktop + Tablet: 0.2vw
  • Telepon: 1vw
• Bantalan Bawah:
  • Desktop: 0.5vw
  • Tablet: 1.2vw
  • Telepon: 1vw

Berbatasan

Selesaikan pengaturan modul dengan menambahkan beberapa sudut membulat.

• Sudut Bulat: 1vw keempat sudut

Duplikat Modul Teks Dan Seret ke Kolom 2

Sekarang, duplikat modul teks dan seret ke kolom 2.

Ubah konten

Tentu saja, Anda harus mengubah konten dalam modul teks duplikat.

Tambahkan Modul Ajakan Bertindak ke Kolom 1

Tambah isi

Di bawah modul teks di kolom 1, tambahkan modul ajakan bertindak dengan beberapa konten pilihan Anda.

• Judul
• Tombol
• Tubuh

Tambahkan Tautan

Lanjutkan dengan menambahkan tautan ke tombol CTA.

Latar belakang

Dan tambahkan warna latar belakang ke tablet dan seluler.

• Warna latar belakang:
  • Tablet + Telepon: Mati Putih #f7f7f7

Teks Judul

Di tab desain, gaya pengaturan teks H4.

• Tingkat Teks Judul: H4
• Font H4: Buka Sans
• Warna H4: Abu-abu Sangat Gelap #333333
• Ukuran Teks H4:
  • Desktop: 1.4vw
  • Tablet: 4.5vw
  • Telepon: 7vw
• Spasi Huruf H3: 2px
• Tinggi Garis H3: 1.5em

Teks Tubuh

Ubah pengaturan teks isi selanjutnya.

• Font Tubuh: Buka Sans
• Perataan Teks Tubuh: Tengah
• Warna Teks Tubuh: Abu-abu Sangat Gelap #333333
• Ukuran Font Tubuh:
  • Desktop: 0.9vw
  • Tablet: 3vw
  • Telepon: 4vw
• Tinggi Garis Tubuh: 1.8em

Tombol

Gaya tombol juga.

• Ukuran Teks Tombol:
  • Desktop: 1vw
  • Tablet: 2.2vw
  • Telepon: 3.8vw
• Warna Huruf Tombol: Abu-abu Sangat Gelap #333333
• Warna Latar Belakang Tombol:
  • Tablet + Ponsel: Hijau Segar #b7e778
• Lebar Perbatasan Tombol:
  • Desktop: 1px
• Warna Perbatasan Tombol:
  • Desktop: Abu-abu Sangat Gelap #333333
• Radius Perbatasan Tombol: 1vw

Jarak

Dan tambahkan beberapa nilai spasi khusus.

• Batas atas:
  • Desktop + Tablet: -2vw
  • Telepon: 3vw
• Bantalan Kiri dan Kanan:
  • Desktop: 0vw
  • Tablet + Telepon: 4vw

Berbatasan

Last but not least, gaya perbatasan di berbagai ukuran layar.

• Sudut Bulat: 1vw semua sudut
• Gaya Perbatasan:
  • Tablet + Telepon: keempat sisinya
• Lebar Perbatasan:
  • Tablet + Telepon: 1px
• Warna Perbatasan:
  • Tablet + Telepon: Abu-abu Sangat Gelap #333333

Gandakan Modul Ajakan Bertindak Dan Seret ke Kolom 2

Gandakan modul ajakan bertindak dan seret ke kolom 2.

Ubah konten

Untuk menyelesaikan desain, ubah konten dalam modul ajakan bertindak yang digandakan dan selesai!

Pratinjau

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

Desktop

Seluler

Kesimpulan

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat bagian info produk gambar terpisah dengan Divi. Kami telah menjelaskan cara membuat gambar terpisah menggunakan perangkat lunak pengedit gambar dan melanjutkan menggunakan file dalam desain Divi kami. Kami berharap desain ini akan menginspirasi Anda untuk berkreasi dengan gambar produk Anda sendiri. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah!