Cara Menambahkan Penanda Gambar dengan Opsi Transform Divi

Penanda gambar adalah cara yang bagus untuk menampilkan fitur khusus produk. Dalam posting ini, kami akan menunjukkan cara membuat penanda gambar menggunakan modul teks dan pembagi vertikal. Berkat pengaturan transformasi di dalam kolom, penanda gambar dapat ditempatkan di mana pun Anda membutuhkannya. Untuk menunjukkan kepada Anda betapa serbagunanya teknik ini, kami akan menunjukkan kepada Anda dua contoh desain yang berbeda. 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.

Contoh 1

Desktop

Seluler

Contoh #2

Desktop

Seluler

Unduh Tata Letak Penanda Gambar GRATIS

Untuk mendapatkan tata letak penanda gambar 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 Ulang Contoh #1

Mari kita mulai membuat ulang contoh desain pertama!

Tambahkan Bagian Baru

Tambahkan bagian baru ke halaman yang sedang Anda kerjakan. Sebelum menambahkan baris, sesuaikan pengaturan bagian terlebih dahulu.

Latar belakang

Tambahkan gradien dan kemudian gambar dengan mode campuran layar.

• Latar Belakang: Gradien + Gambar
• Warna Gradien 1: Putih #ffffff
• Warna Gradien 2: Abu-abu Sedang #666666
• Posisi Awal Gradien: 22%
• Campuran Gambar Latar Belakang: Layar

Jarak

Hapus padding atas dan bawah default dari bagian berikutnya.

• Padding Atas dan Bawah: 0vw

Visibilitas

Selesaikan pengaturan bagian dengan menyembunyikan kelebihan bagian.

• Overflow Vertikal dan Horizontal: Tersembunyi

Tambahkan Baris #1

Sekarang, tambahkan baris baru dengan tiga kolom.

Sebelum menambahkan modul apa pun, sesuaikan pengaturan baris.

Perekat

Pertama, sesuaikan ukuran baris.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

CSS khusus

Selanjutnya, tambahkan satu baris kode CSS ke elemen utama baris. Ini akan memungkinkan kolom muncul di samping satu sama lain pada ukuran layar yang lebih kecil juga.

• Elemen Utama CSS: tampilan: fleksibel;

display: flex;

kolom 1

Ubah Terjemahan

Terapkan efek terjemahan transformasi kustom ke kolom pertama untuk memposisikan ulang kolom. Langkah ini akan masuk akal setelah Anda menambahkan modul penanda gambar nanti di pos. Jika Anda menggunakan teknik ini pada desain lain, Anda harus mengubah nilai ini.

• Transform Terjemahkan: sumbu x 2vw, sumbu y 16vw

Indeks Z

Tambahkan nilai indeks z yang lebih tinggi ke tab visibilitas.

• Indeks Z: 10

Kolom 2

Ubah Terjemahan

Terapkan efek terjemahan transformasi ke kolom kedua.

• Transform Terjemahkan: sumbu x -11vw, sumbu y 6vw

Indeks Z

Meningkatkan nilai indeks z.

• Indeks Z: 10

Kolom 3

Ubah Terjemahan

Ubah nilai translasi transformasi dari kolom ketiga.

• Transform Terjemahkan: sumbu x -11vw, sumbu y 8vw

Indeks Z

Dan ubah nilai indeks z.

• Indeks Z: 10

Tambahkan Baris #2

Sebelum menambahkan modul apa pun ke baris pertama, tambahkan baris satu kolom baru. Lakukan ini sebelum menambahkan penanda gambar sehingga Anda dapat melihat apa yang terjadi di layar saat mendesain.

Perekat

Ubah pengaturan ukuran baris.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Tambahkan Modul Gambar

Tambahkan modul gambar berikutnya.

Perekat

Paksa lebar penuh pada modul gambar untuk memastikan desain tetap responsif di semua ukuran layar.

• Paksa Lebar Penuh: Ya

Jarak

Kemudian, tambahkan beberapa padding kiri dan kanan untuk membuat gambar lebih kecil.

• Padding Kiri dan Kanan: 10vw

Tambahkan 3 Modul Teks

Sekarang, kembali ke baris 3 kolom pertama dan tambahkan 3 modul teks.

Gunakan tampilan gambar rangka untuk akses yang lebih mudah.

Tambahkan modul teks ke kolom pertama, klon dua kali dan seret duplikatnya ke kolom lainnya.

Mulai ubah modul teks di kolom 1. Masukkan beberapa konten pilihan Anda dan ubah pengaturannya sebagai berikut.

Latar belakang

Tambahkan latar belakang hitam.

• Warna Latar Belakang: Hitam #000000

Teks

Gaya teks.

• Font Teks: Aldrich
• Warna Teks: Putih #ffffff
• Perataan Teks: Terpusat
• Ukuran teks:
  • Desktop: 1.2vw
  • Tablet: 2vw
  • Telepon: 2.4vw
• Berat Huruf Judul: Tebal

Perekat

Sesuaikan ukuran modul teks.

• Lebar:
  • Desktop: 17vw
  • Tablet: 23vw
  • Telepon: 30vw
• Penyelarasan Modul: Pusat

Jarak

Tambahkan bantalan atas dan bawah.

• Padding Atas dan Bawah: 0.9vw

Berbatasan

Ubah pengaturan perbatasan.

• Sudut Bulat: 14px di semua sudut
• Gaya Bawah: Batas Bawah
• Lebar Batas Bawah: 4px
• Warna Batas Bawah: Merah #E02B20

Bayangan Kotak

Terapkan bayangan kotak.

• Bayangan Kotak: Opsi Ketiga

Perluas Gaya Teks

Untuk menghemat waktu, gunakan opsi perpanjangan gaya untuk menata modul teks lain di bagian tersebut.

• Pertama, klik pada tiga titik di tepi kanan modul teks dan pilih "Perpanjang Gaya Teks."
• Kemudian, di kotak pop-up, klik "Sepanjang" dan pilih "Bagian Ini" saat menu turun.
• Ubah konten di setiap modul teks.

Tambahkan 3 Modul Pembagi

Tambahkan pembagi di bawah modul teks di kolom 1. Kemudian klon dua kali dan seret duplikatnya ke kolom lain.

Buka modul pembagi di kolom 1 dan buat beberapa perubahan.

Garis

Buat pembatas menjadi hitam.

• Warna Garis: Hitam #000000

Perekat

Sesuaikan ketebalan pembagi.

• Berat Pembagi: 3px
• Lebar: 20vw
• Penyelarasan Modul: Pusat

Jarak

Sesuaikan margin atas.

• Margin Atas: 7vw

Mengubah

Tambahkan efek putar transformasi untuk membuat pembagi vertikal.

• Transform Rotate: Opsi Pertama pada 90deg

Perluas Pengaturan Pembagi

Hemat waktu dan gunakan opsi perpanjangan gaya.

• Pertama, klik pada tiga titik di sisi kanan modul pembagi dan pilih "Perpanjang Gaya Pembagi."
• Kemudian, di kotak sembulan, klik "Sepanjang" dan pilih "Bagian Ini" di menu tarik-turun.

Desainnya sekarang akan terlihat seperti ini:

Tambahkan Baris #3

Tambahkan baris ketiga ke bagian menggunakan struktur kolom berikut:

Sekarang, sebelum menambahkan modul apa pun, sesuaikan pengaturan baris yang sesuai.

Perekat

Ubah pengaturan ukuran.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

kolom 1

Mengubah

Terapkan efek terjemahan transformasi ke kolom pertama.

• Transform Terjemahkan: sumbu y -8vw

Indeks Z

Sesuaikan nilai indeks z juga.

• Indeks Z: 10

Kolom 2

Mengubah

Ubah posisi kolom kedua menggunakan beberapa pengaturan terjemahan transformasi kustom.

• Transform Terjemahkan: sumbu x -17vw, sumbu y -14vw

Indeks Z

Sesuaikan nilai indeks z.

• Indeks Z: 10

Tambahkan 2 Pembagi

Tambahkan dua pembagi, satu di setiap kolom.

Perpanjang Gaya Pembagi

Setelah menambahkan pembagi, gunakan pembagi sebelumnya untuk memperluas gaya ke yang baru.

• Pertama, klik tiga titik di modul pembagi di baris pertama di atas dan pilih "Perpanjang Gaya Pembagi."
• Kemudian, di sembulan, pilih "Sepanjang Halaman Ini."

Sekarang, kita akan membuat beberapa perubahan pada pembagi di kolom pertama dari baris ketiga kita.

Perekat

Hapus marginnya.

• Margin Atas: default

Indeks Z

Ubah juga indeks z.

• Indeks Z: -2

Tambahkan 2 Modul Teks

Tambahkan modul teks ke setiap kolom.

Perluas Gaya Teks

Setelah menambahkan modul teks baru, perluas gaya teks dari modul teks di baris pertama.

• Pertama, klik pada tiga titik di modul teks pertama di baris atas dan pilih "Perpanjang Gaya Teks."
• Kemudian, di sembulan, pilih "Sepanjang Halaman Ini."

Sekarang, ubah teks agar sesuai dengan desain. Selanjutnya, tambahkan beberapa margin atas ke kedua modul teks di baris ketiga.

Jarak

• Margin Atas: 7vw

Buat Ulang Contoh #2

Lanjut ke contoh berikutnya!

Tambahkan Bagian Baru

Tambahkan bagian baru ke halaman yang sedang Anda kerjakan. Sebelum menambahkan baris, sesuaikan pengaturan bagian.

Visibilitas

Sembunyikan kelebihan bagian dalam pengaturan visibilitas.

• Luapan Horisontal dan Vertikal: Tersembunyi

Tambahkan Baris #1

Sekarang, tambahkan satu baris dengan lima kolom. Sebelum menambahkan modul apa pun, sesuaikan pengaturan baris sebagai berikut.

Perekat

Pertama, ubah pengaturan ukuran.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Kemudian sesuaikan jarak.

• Padding Kiri dan Kanan: 19.5vw

CSS khusus

Biarkan kolom muncul bersebelahan dengan menambahkan satu baris kode CSS ke elemen utama baris.

• Elemen Utama CSS: tampilan: fleksibel;

display: flex;

Semua Pengaturan Kolom

Kemudian, buat beberapa perubahan pada masing-masing kolom.

CSS khusus

• Elemen Utama: lebar: 20% !penting;

width: 20% !important;

Indeks Z

Sesuaikan nilai indeks z juga.

• Indeks Z: 10

Tambahkan 5 Modul Teks

Tambahkan modul teks ke setiap kolom.

Tambahkan beberapa konten yang relevan ke kotak konten dan lanjutkan dengan memodifikasi pengaturan modul teks dari modul teks di kolom 1.

Latar belakang

Tambahkan warna latar belakang.

• Warna Latar Belakang: Hijau #2f7713

Teks

Gaya konten sebagai berikut.

• Font Teks: Allerta
• Perataan Teks: Tengah
• Warna Teks: Putih #ffffff
• Ukuran teks:
  • Desktop: 1.3vw
  • Tablet: 2vw
  • Telepon: 2.4vw
• Tinggi Baris Teks: 2.9em

Perekat

Sesuaikan ukurannya.

• Lebar:
  • Desktop: 6vw
  • Tablet: 8vw
  • Telepon: 9vw
• Penyelarasan Modul: Pusat

Jarak

Sesuaikan jarak untuk mengubah modul menjadi persegi.

• Margin Bawah: -2vw
• Padding Atas dan Bawah: 1vw
• Padding Kiri dan Kanan: 1vw

Berbatasan

Ubah modul teks menjadi lingkaran di pengaturan perbatasan.

• Sudut Bulat: 50vw keempat sisinya

Bayangan Kotak

Pilih bayangan kotak juga.

• Bayangan Kotak: Opsi Ketiga

Perluas Gaya Teks

Gunakan opsi perpanjangan gaya untuk menyesuaikan pengaturan semua modul teks di baris.

• Pertama, klik titik-titik di sebelah kanan modul teks dan pilih "Perpanjang Gaya Teks."
• Kemudian, di pop-up, klik "Sepanjang" dan pilih "Halaman Ini."
• Terakhir, ubah teks di kotak konten setiap modul.

Desainnya sekarang akan terlihat seperti ini.

Modul Teks 2

Buat lingkaran kedua berwarna kuning.

• Warna Latar Belakang: Kuning #f2e200

Modul Teks 3

Buat lingkaran ketiga berwarna oranye.

• Warna Latar Belakang: Oranye #f2b100

Modul Teks 4

Buat lingkaran keempat oranye-merah.

• Warna Latar Belakang: Merah Oranye

Modul Teks 5

Buat modul kelima berwarna ungu.

• Warna Latar Belakang: Ungu #8e008c

Tambahkan 5 Modul Pembagi

Sekarang, di bawah setiap modul teks, tambahkan modul pembagi.

Sesuaikan pengaturan ke pembagi pertama.

Garis

Beri warna pada pembagi.

• Warna Garis: Hijau #2f7713

Perekat

Sesuaikan lebarnya.

• Lebar Pembagi: 4px
• Lebar: 13vw

Jarak

Tambahkan nilai margin atas.

• Batas atas:
  • Desktop: 7vw
  • Tablet + Telepon: 5vw

Mengubah

Putar pembagi untuk membuatnya vertikal.

• Transform Rotate: 90 derajat di Opsi Pertama

Perluas Pengaturan Pembagi

Gunakan opsi perpanjangan gaya untuk memberi gaya pada pembagi lainnya.

• Pertama, klik titik di sebelah kanan modul pembagi dan pilih "Perpanjang Gaya Pembagi."
• Kemudian, di sembulan, klik "Sepanjang" dan pilih "Bagian Ini."

Cocokkan warnanya

Pembagi 2

Buat pembagi kedua berwarna kuning.

• Warna Garis: Kuning #f2e200

Pembagi 3

Buat pembatas ketiga berwarna oranye.

• Warna Garis: Oranye #f2b100

Pembagi 4

Buat pembagi keempat berwarna oranye merah.

• Warna Garis: Oranye Merah #ef4a21

Pembagi 5

Buat pembagi kelima menjadi ungu.

• Warna Garis: Ungu #8e008c

Tambahkan Baris #2

Tambahkan baris satu kolom baru.

Sebelum menambahkan modul gambar, sesuaikan pengaturan baris.

Perekat

Pertama, sesuaikan ukurannya.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Visibilitas

Kemudian, visibilitas.

• Luapan Horisontal dan Vertikal: Terlihat

Tambahkan Modul Gambar

Tambahkan modul gambar dan unggah gambar jus.

Perekat

Paksa fullwidth pada gambar.

• Paksa Lebar Penuh: Ya

Spasi Baris

Saatnya untuk sentuhan terakhir. Buka pengaturan baris #1 lagi dan tambahkan beberapa margin atas dan bawah.

• Margin Atas: 7vw
• Margin Bawah:
  • Desktop: -24vw
  • Tablet: -31vw
  • Telepon: -35vw

Pratinjau

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

Contoh 1

Desktop

Seluler

Contoh #2

Desktop

Seluler

Itu Bungkus!

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat dua desain penanda gambar yang berbeda. Kami menggunakan opsi kolom untuk menyatukan kolom teks dan pembagi. Kami berharap desain ini akan menginspirasi Anda untuk membuat desain penanda gambar Anda sendiri. Ingatlah untuk menggunakan opsi terjemahkan transformasi di dalam kolom untuk kontrol yang lebih baik dari setiap penanda gambar. Jika Anda memiliki pertanyaan, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah!