Menambahkan Bayangan yang Diubah ke Salinan Anda dengan Divi

Dengan opsi transformasi baru Divi, Anda dapat membuat desain web yang indah sambil melihat semua pengaturan transformasi terjadi secara real-time. Dan dengan menggabungkan modul yang berbeda satu sama lain, Anda dapat mencapai beberapa efek unik dan mulus yang akan membantu meningkatkan tampilan dan nuansa bagian yang sedang Anda kerjakan. Dalam posting khusus ini, kami akan fokus untuk membuat bayangan yang diubah untuk salinan Anda menggunakan opsi bawaan Divi saja. Anda juga dapat mengunduh file contoh JSON 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 Bagian Pahlawan Bayangan yang Berubah GRATIS

Untuk meletakkan tangan Anda pada tata letak bagian pahlawan bayangan yang diubah secara gratis, Anda harus terlebih dahulu mengunduhnya 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!

Berlangganan Saluran Youtube Kami

Mari Mulai Membuat Ulang Bagian Pahlawan

Tambahkan Bagian Baru

Jarak

Hal pertama yang harus Anda lakukan adalah menambahkan bagian reguler baru ke halaman baru atau yang sudah ada. Buka pengaturan bagian dan hapus semua padding atas dan bawah default.

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

Meluap

Pindah ke tab lanjutan dan pastikan bagian yang meluap disembunyikan. Nanti di postingan ini, kita akan menggunakan beberapa opsi transformasi dan menyembunyikan overflow akan memastikan tidak ada yang melebihi container bagian.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar dengan menerapkan pengaturan berikut:

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

Jarak

Pindah ke pengaturan spasi, hapus padding bawah default dan tambahkan beberapa ruang khusus di sisi kiri dan kanan baris.

• Padding Bawah: 0px
• Padding Kiri: 4vw
• Padding Kanan: 4vw

Tambahkan Modul Teks #1 ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul yang berbeda, dimulai dengan Modul Teks. Masukkan salinan pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Tampilan Playfair
• Perataan Teks: Kanan
• Warna Teks: #ffffff
• Ukuran Teks: 11vw
• Tinggi Baris Teks: 1em

• Panjang Vertikal Bayangan Teks: 0,02em
• Kekuatan Kabur Bayangan Teks: 0.16em
• Warna Bayangan Teks: rgba(0,0,0,0.44)

Modul Teks Klon #1

Ubah Konten

Setelah Anda menyelesaikan Modul Teks pertama, Anda dapat mengkloningnya dan mengubah salinan duplikatnya.

Tambahkan Modul Teks Baru Di Atas Modul Teks #1

Tambah isi

Ke modul berikutnya, yang merupakan Modul Teks lainnya. Kali ini, kami menempatkan modul di bagian atas kolom. Pada langkah selanjutnya, kita akan mengubah Modul Teks ini menjadi bayangan teks yang diubah dari modul berikutnya. Pastikan Anda menggunakan salinan yang sama.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Tampilan Playfair
• Berat Font Teks: Tebal
• Perataan Teks: Kanan
• Warna Teks: rgba(94,150,187,0.28)
• Ukuran Teks: 11vw
• Spasi Huruf Teks: 4.5px
• Tinggi Baris Teks: 1em

Ubah Terjemahan

Saatnya mengubah modul agar terlihat seperti bayangan teks transformasi modul berikutnya! Buka pengaturan spasi dan ubah nilai translasi transformasi.

• Kanan: 13.9vw
• Bawah: -2.1vw

Ubah Putar

Putar modul juga.

• Pusat: 291deg

Transformasi Kemiringan

Dan tingkatkan nilai kemiringan bawah.

• Bawah: 30 derajat

Kloning Modul Teks Transformasi & Tempatkan Di Atas Modul Teks #2

Ubah Konten

Setelah Anda selesai membuat modul bayangan teks yang diubah, Anda dapat mengkloningnya dan menempatkannya di atas Modul Teks ketiga di kolom. Pastikan Anda mengubah salinannya.

Ubah Pengaturan Teks

Pindah ke tab desain dan ubah warna teks.

• Warna Teks: #f3e4df

Tambahkan Spasi

Untuk menebus ruang ekstra yang dibuat oleh modul bayangan teks yang diubah, kita akan menambahkan beberapa margin atas negatif.

• Margin Atas: -12vw

Tambahkan Modul Teks Deskripsi ke Kolom 1

Tambah isi

Modul selanjutnya yang kita butuhkan di kolom 1 adalah Modul Teks lainnya. Masukkan deskripsi pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Buka Sans
• Perataan Teks: Kanan
• Tinggi Baris Teks: 2.3em

Perekat

Ubah lebar modul di berbagai ukuran layar dalam pengaturan ukuran.

• Lebar: 53% (Desktop), 70% (Tablet), 90% (Ponsel)
• Penyelarasan Modul: Kanan

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Ke modul berikutnya dan terakhir di kolom 1, yaitu Modul Tombol. Masukkan beberapa salinan pilihan Anda.

Penyelarasan

Pindah ke tab desain dan ubah perataan tombol.

• Penjajaran Tombol: Kanan

Pengaturan Tombol

Ubah juga pengaturan tombol.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 20px
• Warna Latar Tombol: #5e96bb
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 50px
• Font Tombol: Tampilan Playfair

Jarak

Dan bermain-main dengan pengaturan jarak untuk melengkapi gaya tombol.

• Margin Atas: 2vw
• Margin Bawah: 3vw
• Padding Atas: 20px
• Padding Bawah: 20px
• Padding Kiri: 50px
• Padding Kanan: 50px

Tambahkan Modul Gambar #1 ke Kolom 2

Unggah Gambar 1:1

Ke kolom kedua! Di sini, kita membutuhkan dua Modul Gambar. Mulailah dengan Modul Gambar pertama dan unggah gambar dengan rasio 1:1. Ini berarti lebar dan tinggi harus memiliki nilai piksel yang sama. Memastikan gambar Anda berbentuk persegi akan membantu mengubahnya menjadi lingkaran di langkah-langkah berikutnya.

Perekat

Buka pengaturan ukuran Modul Gambar dan aktifkan opsi 'Paksa Lebar Penuh'.

• Paksa Lebar Penuh: Ya

Jarak

Kami juga menambahkan beberapa margin atas.

• Margin Atas: 2vw

Berbatasan

Untuk mengubah Modul Gambar menjadi lingkaran, kita akan menambahkan '50vw' ke masing-masing sudut. Menggunakan nilai yang sangat tinggi membantu kami mempertahankan bentuk melingkar di berbagai ukuran layar.

Bayangan Kotak

Last but not least, kami juga akan menambahkan bayangan kotak ke Modul Gambar, menggunakan pengaturan berikut:

• Posisi Horizontal Bayangan Kotak: -300px
• Posisi Vertikal Bayangan Kotak: -300px
• Warna Bayangan: rgba (94,150,187,0.28)

Tambahkan Modul Gambar #2 ke Kolom 2

Unggah Gambar 1:1

Ke Modul Gambar kedua di kolom 2. Kami, sekali lagi, memastikan gambar yang kami unggah memiliki rasio 1:1.

Perekat

Pindah ke tab desain dan ubah lebarnya.

• Lebar: 62%

Berbatasan

Tambahkan '50vw' ke masing-masing sudut Modul Gambar ini juga.

Bayangan Kotak

Kami juga akan menambahkan bayangan kotak kustom.

• Posisi Horizontal Bayangan Kotak: -200px
• Posisi Vertikal Bayangan Kotak: 150px
• Warna Bayangan: #d4c1bd

Ubah Terjemahan

Last but not least, ubah posisi Image Module menggunakan opsi transform translate dan selesai!

• Kanan: -13vw
• Bawah: 19vw

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 cara kreatif menggunakan Modul Teks duplikat untuk membuat bayangan teks yang diubah. Ini adalah cara yang menarik untuk menempatkan salinan Anda dalam sorotan dan menggunakan opsi bawaan Divi dari perspektif lain. Kami harap Anda menikmati tutorial ini dan 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.