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.
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.
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 " Meregang'.
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.
Metode 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.
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.
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.
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.
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.
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.
- Cara memperbaiki kesalahan "Tidak dapat menulis ke disk" di WordPress
- Bagaimana menjadi blogger yang sukses dan menghasilkan uang dengan WordPress
- Bagaimana untuk mempublikasikan artikel Anda melalui email di WordPress
- Bagaimana menjadi blogger yang sukses dan menghasilkan uang dengan WordPress
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.
...
