Loncat ke Konten Utama

Cara menambahkan efek paralaks pada setiap tema WordPress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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

Efek Parallax adalah tren populer saat ini di web di mana gambar latar belakang bergulir lebih lambat daripada konten terkemuka.

Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana 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 Parallax?

Efek Parallax adalah teknik desain Web modern di mana elemen latar belakang bergulir lebih lambat dari konten latar depan. Efek ini menambah kedalaman gambar latar belakang dan menjadikannya interaktif.

Temukan kami 25 WordPress themes dengan paralaks untuk membuat situs web

Efek Parallax dapat digunakan pada halaman arahan, halaman penjualan atau beranda situs web perusahaan. Ini adalah cara terbaik 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, tidak semua tema WordPress memiliki efek paralaks bawaan, dan Anda mungkin tidak ingin menggunakan konstruktor visual halaman hanya untuk efek paralaks.

Mari kita periksa cara mudah menambahkan efek paralaks ke tema WordPress apa pun.

Metode 1: Menambahkan Efek Parallax ke Semua Tema WordPress Menggunakan Plugin

Metode ini tidak perlu menambahkan kode 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 tentang cara memasang plugin WordPress.

Setelah mengaktifkan plugin, Anda harus memodifikasi halaman tempat Anda ingin menambahkan efek paralaks. Anda akan melihat tombol baruLatar Belakang WordPress Tingkat LanjutDi bilah alat editor visual.

Mengkliknya akan menampilkan jendela sembul di mana Anda dapat mengedit pengaturan latar belakang berbeda yang ingin Anda tambahkan.

Pertama, Anda perlu memilih gambar sebagai latar belakang, lalu periksa opsi " Meregang'.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

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 beberapa gaya 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 setiap tema WordPress dengan CSS

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

Pertama-tama, Anda perlu mengunggah di perpustakaan multimedia WordPress Anda gambar yang ingin Anda gunakan untuk efek paralaks dengan mengunjungi media> Tambah baru '.

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

Setelah mengunduh gambar, Anda harus menyalin URL gambar dengan mengedit gambar di Perpustakaan Media WordPress.

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

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

div class = "parallax"> <div class = "parallax-content"> konten Anda di sini ... </ div> </ div>

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.

Voila! Sekarang Anda dapat menambahkan efek paralaks ke situs web WordPress Anda.

Temukan juga beberapa tema dan plugin WordPress premium

Anda dapat menggunakan plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web 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 dapat memberi sebanyak yang mereka inginkan. Setiap donasi dapat disajikan sebagai produk biasa dari WooCommerce.


Jika pelanggan mengabaikan halaman keranjang belanja atau langsung pergi ke checkout tanpa memberikan donasi, sebuah tautan akan ditampilkan di atas halaman checkout sehingga ia dapat memberikan donasinya.

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

Download | Demo | Hébergement Web

2. LinkedIn Lebih Banyak

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

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

Download | Demo | Hébergement Web

3. YouTuber

YouTubeR adalah plugin WordPress unik, yang memungkinkan Anda untuk mengunggah video ke YouTube dari situs web Anda dan dengan mudah mengintegrasikan video, daftar putar, dan saluran YouTube ke 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, sematan 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.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Download | Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

Temukan sumber daya lain yang direkomendasikan yang akan menemani Anda dalam membuat dan mengelola situs web Anda.

Kesimpulan

Itu saja! Kami harap ini sangat membantu. Jangan ragu untuk melakukannya 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.

...

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
6 saham
saham3
menciak
Register3