Menggunakan Latar Belakang Modul untuk Menampilkan Gambar Paralaks Sebaris dengan Divi

Menggunakan latar belakang paralaks sebaris CSS benar-benar dapat membantu meningkatkan tampilan dan nuansa situs web Anda dan tutorial ini adalah contoh sempurna. Kami akan menggunakan beberapa latar belakang modul untuk membuat hasil yang menakjubkan dan koheren yang menunjukkan beberapa bagian dari gambar latar belakang Anda. 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.

Desktop

Seluler

Unduh Tata Letak Paralaks Sebaris GRATIS

Untuk mendapatkan tata letak paralaks sebaris 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

Mari Mulai Berkreasi

Tambahkan Bagian Baru

Mulailah dengan menambahkan bagian reguler baru ke halaman yang sedang Anda kerjakan.

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Pengaturan Kolom 1

Jarak

Tambahkan nilai padding atas ke kolom pertama.

• Bantalan Atas:
  • Desktop: 2vw
  • Tablet + Telepon: 6vw

Pengaturan Kolom 2

Jarak

Tambahkan nilai padding atas ke kolom kedua juga.

• Bantalan Atas:
  • Desktop: 4vw
  • Tablet + Telepon: 6vw

Pengaturan Kolom 4

Jarak

Lewati kolom 3 dan tambahkan beberapa nilai spasi ke kolom 4.

• Lapisan Atas
  • Desktop: 19vw
  • Tablet: 0vw
  • Telepon: 1vw
• Padding Kiri dan Kanan
  • Desktop dan Tablet: 1vw
  • Telepon: 0vw

Tambahkan Modul Teks 1 ke Kolom 1

Tambahkan Konten H2

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

Teks Judul

Pindah ke tab desain dan ubah pengaturan teks H2 yang sesuai:

• Tingkat Teks Judul: H2
• Font H2: EB Garamond
• Gaya Huruf H2: TT
• Warna Teks H2: Hitam #oooooooo
• Ukuran Teks H2:
  • Desktop: 3.1vw
  • Tablet: 5.4vw
  • Telepon: 10vw
• Tinggi Garis H2:
  • Desktop + Tablet: 1.1em
  • Telepon: 1.3em

Jarak

Kemudian, tambahkan beberapa spasi ke modul.

• Bantalan Atas:
  • Desktop: 4vw
  • Tablet + Telepon: 0vw
• Bantalan Kiri:
  • Desktop dan Tablet: 1vw
  • Telepon: 2vw
• Bantalan kanan
  • Desktop dan Tablet: 1vw
  • Telepon: 0vw

Tambahkan Modul Teks ke-2 ke Kolom 1

Tambah isi

Sekarang, tambahkan modul teks kedua di bawah yang pertama. Sisipkan beberapa konten paragraf.

Teks

Pindah ke tab desain dan ubah pengaturan teks sebagai berikut:

• Font Teks: EB Garamond
• Warna Teks: Abu-abu Gelap #3d3d3d
• Ukuran teks:
  • Desktop: 1vw
  • Tablet: 2.2vw
  • Telepon: 3.8vw
• Tinggi Baris Teks: 1.8em

Jarak

Sesuaikan pengaturan jarak modul berikutnya.

• Bantalan Bawah:
  • Telepon: 4vw
• Bantalan Kiri:
  • Desktop + Tablet: 1.4vw
• Bantalan Kanan:
  • Desktop: 1.3vw
  • Tablet + Telepon: 1.7vw

Tambahkan Modul Tombol ke Kolom 1

Tambah isi

Untuk melengkapi kolom pertama, tambahkan modul tombol. Masukkan beberapa salinan.

Tambahkan Tautan

Tambahkan tautan ke tombol juga.

Tombol

Pindah ke tab desain dan gaya pengaturan tombol yang sesuai:

• Ukuran Teks Tombol:
  • Desktop: 1vw
  • Tablet: 2vw
  • Telepon: 4vw
• Warna Teks Tombol: Abu-abu Tua #3d3d3d
• Lebar Perbatasan Tombol: 1px
• Font Tombol: EB Garamond

Jarak

Kemudian, sesuaikan pengaturan jarak tombol.

• Batas atas:
  • Desktop + Tablet: 1vw
• Margin Bawah:
  • Telepon: 5vw

Tambahkan Modul Teks 1 ke Kolom 2

Tambah isi

Ke kolom berikutnya! Tambahkan Modul Teks dengan beberapa konten H4 pilihan Anda.

Latar belakang

Lanjutkan dengan menambahkan gambar latar belakang. Unggah gambar latar belakang paralaks CSS untuk desktop dan gunakan gambar biasa pada ukuran layar yang lebih kecil (tanpa paralaks CSS).

• Latar Belakang Desktop: Gambar
  • Paralaks: CSS
• Tablet + Latar Belakang Telepon: Gambar

Arahkan ke Latar Belakang

Selanjutnya, tambahkan latar belakang gradien pada hover saja.

• Arahkan kursor ke Latar Belakang: Gradien Warna
• Gradien Warna 1: Kuning Emas Muda #edba63
• Gradien Warna 2: Kuning Emas #ed9d12
• Arah Gradien: 23 derajat
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Teks Judul

Pindah ke tab desain dan ubah pengaturan teks H4.

• Tingkat Judul Teks: H4
• Font H4: EB Garamond
• Warna Teks H4: Putih #ffffff
• Ukuran Teks H4:
  • Desktop: 2.3vw
  • Tablet: 4.5vw
  • Telepon: 8.5vw

Jarak

Kemudian, sesuaikan jaraknya.

• Batas atas:
  • Telepon: -6vw
• Bantalan Atas:
  • Desktop: 15vw
  • Tablet: 22vw
  • Telepon: 43vw
• Bantalan Bawah:
  • Desktop + Tablet: 1vw
• Bantalan Kiri dan Kanan:
  • Desktop dan Tablet: 1.5vw
  • Telepon: 5vw

Berbatasan

Lanjutkan dengan menata batas.

• Sudut Bulat: 1vw semua sudut
• Gaya Perbatasan: semua sisi
• Lebar Perbatasan: 0.3vw
• Warna Perbatasan: Putih #ffffff

Transform Skala Arahkan

Selesaikan pengaturan modul dengan menambahkan efek zoom saat mengarahkan kursor.

• Transform Skala saat Melayang: 102%

Tambahkan Modul Teks ke-2 ke Kolom 2

Tambah isi

Tambahkan modul kedua ke kolom kedua dengan beberapa konten H4 pilihan Anda.

Latar belakang

Sama seperti modul teks sebelumnya, tambahkan gambar latar paralaks CSS di desktop dan gambar latar biasa pada ukuran layar yang lebih kecil.

• Latar Belakang Desktop: Gambar
  • Paralaks: CSS
• Tablet + Latar Belakang Telepon: Gambar

Arahkan ke Latar Belakang

Tambahkan juga latar belakang gradien hover.

• Arahkan kursor ke Latar Belakang: Gradien Warna
• Gradien Warna 1: Magenta Muda #91463f
• Gradien Warna 2: Magenta #910400
• Arah Gradien: 23 derajat
• Tempatkan Gradien Di Atas Gambar Latar Belakang: Ya

Teks Judul

Gaya pengaturan teks H4 berikutnya.

• Tingkat Judul Teks: H4
• Font H4: EB Garamond
• Warna Teks H4: Putih #ffffff
• Ukuran Teks H4:
  • Desktop: 2.3vw
  • Tablet: 4.5vw
  • Telepon: 8.5vw

Jarak

Dan ubah pengaturan spasi.

• Bantalan Atas:
  • Desktop: 15vw
  • Tablet: 21.1vw
  • Telepon: 43vw
• Bantalan Bawah:
  • Desktop + Tablet: 1vw
• Bantalan Kiri dan Kanan:
  • Desktop dan Tablet: 1.5vw
  • Telepon: 5vw

Berbatasan

Ubah juga pengaturan perbatasan.

• Sudut Bulat: 1vw semua sudut
• Gaya Perbatasan: semua sisi
• Lebar Perbatasan: 0.3vw
• Warna Perbatasan: Putih #ffffff

Transform Skala Arahkan

Last but not least, tambahkan efek zoom ke modul teks.

• Transform Skala saat Melayang: 102%

Duplikat Modul Teks dari Kolom 2 ke Kolom 3

Gandakan dan seret modul teks

Kloning kedua modul teks dan letakkan di kolom ketiga baris.

Sesuaikan Modul Teks 1 di Kolom 3

Ubah Konten H4

Buka modul teks duplikat pertama di kolom 3 dan ubah kontennya.

Ubah Latar Belakang Untuk Tablet dan Ponsel

Ubah gambar latar belakang pada ukuran layar yang lebih kecil berikutnya.

Ubah Gradien Warna saat Melayang

Lanjutkan dengan mengubah warna pada gradien hover.

• Gradien Warna 1: Mawar Merah Muda #cc9293
• Gradien Warna 2: Merah Muda #cc9293

Jarak

Terakhir, sesuaikan jarak sebagai berikut.

• Batas atas:
  • Tablet: -6.4vw
  • Telepon: 0vw

Sesuaikan Modul Teks ke-2 di Kolom 3

Ubah Konten H4

Pertama, ubah isinya.

Ubah Latar Belakang Untuk Tablet dan Ponsel

Kemudian, ubah gambar latar belakang pada ukuran layar yang lebih kecil.

Ubah Gradien Warna saat Melayang

Ubah latar belakang gradien juga.

• Gradien Warna 1: Pinus Lembut #5c755c
• Gradien Warna 2: Hijau Pinus #4D754D

Tambahkan Modul Teks 1 ke Kolom 4

Tambah isi

Pindah ke kolom 4, tambahkan modul teks. Masukkan beberapa konten H3 pilihan Anda.

Teks Judul

Pindah ke tab desain dan ubah pengaturan teks H3 sebagai berikut:

• Tingkat Teks Judul: H3
• Font Teks H3: EB Garamond
• Gaya Huruf H3: TT
• Warna Teks H3: Hitam #oooooooo
• Ukuran Teks H3:
  • Desktop: 3vw
  • Tablet: 5vw
  • Telepon: 12vw
• Tinggi Garis H3
  • Desktop + Tablet: 1em
  • Telepon: 1.1em

Tambahkan Modul Teks ke-2 ke Kolom 4

Tambah isi

Tambahkan modul teks lain di bawah yang pertama. Sisipkan beberapa konten paragraf.

Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: EB Garamond
• Warna Teks: Abu-abu Gelap #3d3d3d
• Ukuran teks:
  • Desktop: 1vw
  • Tablet: 2.2vw
  • Telepon: 3.8vw
• Tinggi Baris Teks: 1.8em

Jarak

Kemudian, sesuaikan jaraknya.

• Bantalan Bawah:
  • Telepon: 4vw
• Padding Kiri: 0.9vw
• Padding Kanan: 2.2vw

Modul Tombol Duplikat dari Kolom 1 ke Kolom 4

Gandakan dan seret modul tombol

• Gandakan modul tombol di kolom 1.
• Seret ke kolom 3 di bawah modul teks.

Jarak

Sesuaikan beberapa nilai spasi dalam modul tombol duplikat dan selesai!

• Margin Bawah: 0vw
• Margin Kiri:
  • Desktop + Tablet: 0.7vw
  • Telepon: 0.9vw

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 desain paralaks sebaris dengan empat kotak teks yang menunjukkan bagian berbeda dari gambar yang sama. Kami harap Anda menikmati desain ini dan jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!