Cara Membuat Background Parallax Elementor


3 menit

Apabila kamu menggunakan Elementor untuk mendesain website, mungkin kamu penasaran bagaimana cara membuat background parallax Elementor, karena beberapa website yang pernah kamu kunjungi mungkin sebelumnya pernah menerapkan efek parallax ini.

Tapi, parallax itu apa sih?

Apa itu Efek Parallax?

Parallax merupakan sebuah efek visual yang menciptakan ilusi gerakan antara latar belakang atau background dengan elemen lain yang ada didepan atau diatasnya dalam sebuah tampilan website.

Biasanya background pada efek parallax dibuat bergerak lebih lambat, atau bahkan tidak bergerak sama sekali ketika konten diatasnya bergerak, misalnya ketika kita melakukan scrolling.

Tidak hanya pada website, Parallax biasanya juga digunakan dalam sebuah game untuk meningkatkan pengalaman visual. Namun karena website ini membahas tentang website terutama WordPress, maka disini kita akan membahas cara membuat background Parallax Elementor.

Masih bingung dan penasaran dengan contohnya? Coba lihat animasi dibawah ini

Cara Membuat Background Parallax Elementor - 0-1

Cara Membuat Background Parallax Elementor

Kamu tidak harus menggunakan Elementor versi Pro untuk membuat background dengan efek parallax di elementor, karena sebenarnya trik ini sangat mudah digunakan.

Silahkan kamu bisa mengikuti langkah-langkah dibawah ini untuk membuat background Parallax Elementor.

1. Edit Halaman Dengan Elementor

Langkah pertama yang perlu kamu lakukan adalah dengan mengedit halaman dengan Elementor, baik itu menambahkan halaman baru maupun mengedit halaman yang sudah kamu buat sebelumnya.

Cara Membuat Background Parallax Elementor - 1-1

2. Tambahkan Section dan Konten

Ketika kamu sudah berada dihalaman Elementor, kamu bisa menambahkan section, kemudian menambahkan konten didalamnya.

Cara Membuat Background Parallax Elementor - 2-1

Misalnya kamu ingin membuat pricing table, maka kamu bisa menambahkan konten pricing table dulu sebelum menambahkan background parallax nantinya.

Atau kamu juga bisa menambahkan konten lain seperti Text Editor, Heading, Map, Icon, dan lain sebagainya.

Cara Membuat Background Parallax Elementor - 2-2

3. Tambahkan Background

Setelah kamu selesai menambahkan konten, maka selanjutnya kamu bisa menambahkan background pada section yang sudah kamu buat, bukan pada masing-masing block.

Caranya, kamu bisa klik icon Edit Container → Style → Background Type → Classic → Pilih Gambar

Cara Membuat Background Parallax Elementor - 3-1

4. Tambahkan Efek Parallax Pada Background

Kini kita telah sampai dibagian terpenting dalam tutorial ini. Untuk menambahkan efek parallax pada background, kamu bisa memilih gambar background yang akan kamu gunakan pada kolom pilih gambar.

Selanjutnya, ubah opsi Attachment menjadi Fixed, dan selamat! Kamu berhasil membuat background parallax pertamamu menggunakan Elementor.

Cara Membuat Background Parallax Elementor - 4-1

Selanjutnya kamu bisa melakukan konfigurasi lebih lanjut jika dirasa tampilannya ada yang kurang, atau bisa lanjut menyimpan perubahannya.

5. Simpan Perubahan dan Lihat Hasilnya

Terakhir, untuk melihat hasil dari pembuatan background parallax milikmu, maka kamu bisa menyimpan perubahan, kemudian melihat halaman preview ataupun halaman live, dan ketika berhasil, maka hasilnya akan menjadi seperti ini.

Cara Membuat Background Parallax Elementor - 5-1

Begitulah 5 langkah mudah untuk membuat background parallax Elementor. Bahkan kamu tidak harus menggunakan Elementor versi Pro yang mungkin bisa terbilang mahal, apalagi versi Nulled yang justru menyebabkan website milikmu menjadi lebih rentan terhadap keamanan.


Terima kasih telah berkunjung ke WPGan.com dan membaca Cara Membuat Background Parallax Elementor. Dapatkan saldo $100 di Vultr gratis untuk uji coba VPS dari [Halaman Ini]
Tinggalkan Balasan 0

Your email address will not be published. Required fields are marked *


Share: