Cara Menambahkan Efek Paralaks di Tema WordPress

Efek paralaks merupakan desain web yang sedang trendi sekarang ini, dimana gambar latar belakang akan lebih lambat scrollingnya dibandingkan konten di bagian depan. Pada artikel ini kami akan menunjukkan bahwa menambahkan efek paralaks sangat gampang dipasang di seluruh bentuk tema berbasis WordPress.

Pengertian Efek Paralaks

Efek Paralaks merupakan teknik desain situs paling terkini dimana elemen latar akan bergulir lebih lambat dibandingkan konten atau tulisan pada bagian depan. Efek ini akan menambah kedalaman terhadap gambar latar dan membuatnya akan terasa lebih interaktif.

Efek paralaks bisa digunakan sebagai landing page, konten atau tulisannya sangat panjang, halaman penjualan, atau homepage ( halaman depan situs ) dari sebuah situs untuk bisnis. Dengan efek ini berguna untuk menonjolkan sesi atau bagian berbeda pada halaman yang sangat panjang.

Beberapa tema WordPress premium sudah difasilitasi langsung dengan efek ini pada homepagenya. Namun demikian, jika anda tidak menggunakan tema berbayar alias premium, anda juga bisa menggunakan efek ini. Akan tetapi, tidak semua tema telah menjadikan efek paralak ini sebagai bagian dari temanya, dan terkadang tidak mendukung untuk efek ini atau anda tidak ingin menggunakan efek paralaks ini sebagai bagian dari tampilan situs.

Ada dua cara memasang efek paralaks ini di situs berbasis WordPress, yaitu menggunakan plugin dan css.

1. Menambahkan Efek Paralaks di Tema WordPress Menggunakan Plugin

Metode pertama ini tidak perlu menambahkan kode apa pun pada tema WordPress. Cara ini merupakan metode paling gampang dan sangat direkomendasikan untuk pengguna awam.

Pertama sekali, anda harus menginstal dan mengaktifkan plugin Advanced WordPress Backgrounds. Setelah diaktifkan, anda harus mengedit halaman atau postingan dimana anda ingin menambahkan efek paralaks ini. Anda akan melihat tombol Advanced WordPress Background pada visual editor seperti gambar di bawah ini.

Jika di klik tombol tersebut, akan muncul sebuah popup dimana anda bisa merubah setingan berbeda untuk latar belakang yang ingin ditambahkan.

Pertama, anda harus memilih sebuah gambar sebagai latarnya dan kemudian pilih “stretch” agar gambar tersebut bisa memenuhi seluruh tempat halamannya.

Kemudian silakan klik tombol ‘select image” ( memilih gambar ) untuk mengupload atau memilih sebuah gambar yang ingin dipergunakan sebagai latar paralaks. Perlu diperhatikan dan dipastikan bahwa anda harus menggunakan gambar yang pixelnya cukup besar.

Setelah itu anda meng-enablekan efek paralaks dengan memilih tipe paralaks mana yang ingin digunakan. Ada beberapa gaya tampilan untuk dipilih sesuai selera. Efek paralaks paling banyak digunakan adalah scroll.

Kemudian klik tombol insert untuk melanjutkan.

Sekarang plugin ini telah menambahkan sebuah shortcode di dalam editor postingan WordPress. Shortcode ini akan terlihat seperti:

[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″ awb_mouse_parallax_speed=”10000″]

Your Content Here

[/nk_awb]

Silakan ganti “Your content here” dengan tulisan anda dan kemudian simpan halaman tersebut. Sekarang silakan dilihat tampilan websitenya apakah telah berfungsi dengan baik atau belum.

2. Menambahkan Efek Paralaks Menggunakan CSS

Metode dengan menggunakan CSS ini agak sedikit sulit karena anda harus mengerti bagaimana cara menggunakan HTML/CSS seperti mengerti tentang bagaimana cara kerja WordPress.

Pertama anda harus mengupload gambar latar belakang untuk efek paralaks ke media library WordPress dengan mengklik Media > Add New.

Setelah mengupload gambarnya, anda harus mengkopi URL gambar tadi dengan mengeditnya pada media library WordPress.

Kemudian silakan tambahkan HTML berikut ini pada halaman atau postingan dimana efek paralaks ini akan dimunculkan. Anda juga harus menambahkan HTML berikut ke tema WordPress.

 

1

2

3

4

5

6

7

<div class=”parallax”>

<div class=”parallax-content”>

 

Your content goes here…

 

</div>

</div>

Kemudian tambahkan CSS kustom berikut pada tema WordPress.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

.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: cover;

margin-left:-410px;

margin-right:-410px;

}

 

.parallax-content {

width:50%;

margin:0 auto;

color:#FFF;

padding-top:50px;

}

Jangan lupa untuk mengganti URL gambar latar tadi dengan milik anda tadi. Kemudian silakan simpan perubahan tersebut dan silakan periksa apakah sudah berfungsi dengan baik atau belum dengan mengunjungi URL halaman tersebut.

Perlu diperhatikan, anda harus menyesuaikan CSS agar bisa cocok dengan layout situs anda.

Free Hit Counters
Web Site Hit Counters

Silakan sampaikan komentar Anda