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 901.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 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, tidak semua tema WordPress memiliki efek paralaks bawaan, dan Anda mungkin tidak ingin menggunakan konstruktor visual halaman 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 " 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]

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.

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]

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

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

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.

... 

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