Baru-baru ini salah satu pembaca kami bertanya kepada kami bagaimana cara menambahkan efek paralaks ke tema WordPress apa pun?

Efek Paralaks adalah tren populer akhir-akhir ini di web di mana gambar latar belakang bergulir lebih lambat daripada konten latar depan.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara menambahkan efek paralaks dengan mudah ke tema WordPress apa pun.

Tetapi, jika Anda belum pernah menginstal WordPress, temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda 

Tapi kembali ke alasan kita ada di sini.

Bagaimana cara menambahkan efek paralaks ke tema wordpress apapun e1567702269161

Apa itu efek paralaks?

Efek Paralaks adalah teknik desain web modern di mana elemen latar belakang menggulir lebih lambat daripada konten latar depan. Efek ini menambah kedalaman gambar latar belakang dan membuatnya interaktif.

Temukan kami 25 WordPress themes dengan paralaks untuk membuat situs web

Efek Parallax dapat digunakan halaman arahan, halaman penjualan, atau beranda situs web bisnis. Ini cara yang bagus untuk menyorot berbagai bagian pada halaman yang panjang.

banyak tema WordPress premium memiliki efek paralaks bawaan di beranda mereka. Anda juga dapat menggunakan efek paralaks dengan sebagian besar plugin WordPress pembuatan halaman secara visual.

Namun, semua Tema WordPress tidak menawarkan efek paralaks bawaan dan Anda mungkin tidak ingin menggunakan pembuat halaman visual hanya untuk efek paralaks.

Mari kita lihat cara menambahkan efek paralaks ke tema WordPress dengan mudah.

Metode 1: Tambahkan efek paralaks ke tema WordPress apa pun menggunakan plugin

Metode ini tidak memerlukan penambahan kode apa pun ke tema WordPress Anda. Lebih mudah dan direkomendasikan untuk sebagian besar pengguna.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Latar Belakang WordPress Tingkat Lanjut. Untuk lebih jelasnya, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.

Setelah mengaktifkan plugin, Anda perlu mengedit halaman tempat Anda ingin menambahkan efek paralaks. Anda akan melihat tombol baru "Latar Belakang WordPress Tingkat Lanjut»Pada toolbar editor visual.

Tambahkan latar belakang wordpress tingkat lanjut

Mengkliknya akan memunculkan jendela pop-up di mana Anda dapat mengubah berbagai pengaturan latar belakang yang ingin Anda tambahkan.

Pertama-tama, Anda perlu memilih gambar sebagai latar belakang dan kemudian centang opsi " Stretch'.

Latar belakang jendela wordpress tingkat lanjut

Maka Anda harus mengklik tombol Pilih Gambar Untuk mengunduh atau memilih gambar yang ingin Anda gunakan. Pastikan Anda menggunakan gambar besar jika tidak akan tampak pixelated.

Setelah itu, Anda harus mengaktifkan efeknya Parallax Dengan memilih jenis efek paralaks. Ada sejumlah gaya yang tersedia yang dapat Anda coba. Efek paralaks yang paling umum digunakan adalah menggulir.

Klik tombol Menyisipkan untuk melanjutkan.

Plugin akan menambahkan Kode pendek pada Anda penerbit. Ini akan terlihat seperti ini:

[nk_awb awb_type = "gambar" awb_stretch = "true" awb_image = "22" awb_image_size = "penuh" awb_parallax = "gulir" awb_parallax_speed = "0.5" awb_mouse_parallax = "true" awb_mall_pertama_memilikibesarbesar_peringkat_memiliki " di sini [/ nk_awb]

Ganti " konten ini Dengan konten Anda sendiri, lalu simpan halaman Anda.

Anda dapat mengunjungi situs web Anda untuk melihatnya beraksi.

Efek paralaks pada wordpressMetode 2: Tambahkan efek "Parallax" ke semua tema WordPress dengan CSS

Metode ini mengharuskan Anda memiliki pengetahuan tentang "HTML / CSS" serta cara kerja tema dan plugin WordPress.

Pertama, Anda perlu mengunggah ke perpustakaan media WordPress Anda, gambar yang ingin Anda gunakan untuk efek paralaks dengan mengunjungi " media> Tambahkan baru '.

Melangkah lebih jauh dengan menemukan Cara mengatur media pada blog WordPress Anda

Setelah mengunggah gambar, Anda perlu menyalin URL gambar dengan mengedit gambar di perpustakaan media WordPress.

Salin url gambar ke wordpress

Kemudian Anda perlu menambahkan kode HTML berikut di halaman tempat Anda ingin menampilkan efek paralaks. Anda juga dapat menambahkan kode HTML ini ke Tema WordPress atau tema anak Anda.

div class = "parallax"> Konten Anda di sini ...

Maka Anda perlu menambahkan kode CSS khusus berikut ke tema WordPress Anda.

.parallax {background-image: url ( "http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: penutup; margin-left: -410px; margin-right: -410px; } .parallax-konten {width: 50%; margin: 0 auto; Warna: # fff; padding-top: 50px; }

Ingatlah untuk mengganti URL gambar latar belakang dengan gambar Anda sendiri.

Anda sekarang dapat menyimpan perubahan dan mengunjungi situs web Anda.

Contoh efek paralaks Wordpress

Disini adalah ! Sekarang Anda dapat menambahkan efek paralaks ke situs WordPress Anda.

Temukan juga beberapa tema dan plugin WordPress premium  

Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.

Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.

1. Sumbangan WooCommerce

Terima melalui sumbangan ekstensi ini di situs web WooCommerce Anda dengan jumlah yang ditentukan oleh pelanggan. Mereka akan bisa memberi sebanyak yang mereka mau. Setiap donasi dapat disajikan sebagai produk biasa dari WooCommerce


Plugin donasi Woocommerce

Jika pelanggan melewatkan halaman keranjang atau langsung pergi ke checkout tanpa menyumbang, link akan muncul di atas halaman checkout sehingga mereka dapat menyumbang.

Setiap langkah menggunakan Donasi WooCommerce dijelaskan dalam dokumentasi dengan tangkapan layar. Cukup aktifkan plugin dan Anda akan menemukan kolom "Tambahkan donasi" di keranjang.

Download | Demo Hébergement Web

2. LinkedIn Lebih Banyak

LinkedIn Plus adalah WordPress Plugin yang memungkinkan Anda menampilkan profil LinkedIn di blog Anda. Ini juga berfungsi untuk blog multi-penulis. Itu menambahkan tombol Ikuti dan Bagikan ke posting, halaman, atau widget WordPress Anda.Linkedin ditambah plugin wordpress LinkedIn

Ini adalah cara terbaik untuk menambahkan semua fitur LinkedIn ke blog Anda dan memvalidasi merek Anda dengan konsumen. Ini memberi Anda kemampuan untuk menyesuaikan tampilannya, mengonfigurasi pengaturan, dan mengaktifkan opsi lanjutan lainnya untuk mempromosikan profil Anda ke perekrut atau pemberi kerja potensial. 

Download | Demo | Hébergement Web

3. YouTuber

YouTubeR adalah WordPress Plugin platform unik, yang memungkinkan Anda mengunggah video ke YouTube dari situs web Anda dan dengan mudah menyematkan video, daftar putar, dan saluran YouTube di situs web Anda.

Plugin wordpress youtube youtuber

Dengan plugin ini, Anda memiliki kesempatan untuk membuat galeri video yang luar biasa di situs web Anda.

Fitur lainnya adalah: kemungkinan unggah video dengan mudah ke YouTube dari situs WordPress Anda, integrasi video mudah, daftar putar dan saluran YouTube ke situs web Anda, dukungan untuk Visual Composer, yang bergulir tak terbatas dalam daftar putar, caching yang sangat baik, tata letak responsif, dokumentasi terperinci dan banyak lagi.

Download | Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.

Kesimpulan

Itu semuanya! Kami berharap ini sangat membantu. Jangan sungkan berbagi dengan teman-teman Anda di jejaring sosial favorit Anda

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.

Dan jika Anda memiliki saran atau komentar, tinggalkan di bagian kami komentar.

...