Cara Membuat Website Dua Bahasa Menggunakan Elementor

Cara Membuat Website Dua Bahasa Menggunakan Elementor. Kawan-kawan tentu pernah menemui beberapa website yang menggunakan dua bahasa atau lebih. Dalam artikel ini saya akan berbagi bagaiamana cara membuat website dua bahasa menggunakan Elementor.

Beberapa minggu kemarin saya mendapatkan project untuk membuat website. Klien saya menginginkan untuk membuatnya melalui Elementor. Nah dalam artikel ini Anda membutuhkan:

  1. Elementor
  2. Elementor Pro
  3. Polylang
  4. Polylang Connect for Elementor

Keempat plugin ini yang paling esensial ialah Elementor dan Polylang. Polylang merupakan plugin yang memiliki fungsi untuk membuat website berbasis WordPress menjadi dua bahasa atau lebih. Terlebih lagi Polylang gratis alias tidak berbayar. Polylang for Elementor adalah plugin yang memiliki fungsi untuk menambahkan widget Language Switcher.

Sebagai catatan: Jika Anda menggunakan Woocommerce maka Anda membutuhkan add-on tambahan dari Polylang yaitu Polylang for Woocommerce

Sebagai studi kasus saya menggunakan website milik klien saya. Yang mengiginkan sebuah website dengan Bahasa Jerman dan Bahasa Inggris. Dengan catatan: Bahasa Jerman menjadi Bahasa utama website tersebut.

Instalasi Plugin Yang Dibutuhkan

Langkah pertama Instalasi plugin-plugin yang dibutuhkan. Plugin yang butuh diinstall :

  1. Elementor
  2. Elementor Pro
  3. Polylang
  4. Polylang Connect for Elementor
Cara Membuat Website Dua Bahasa Menggunakan Elementor

Pengenalan Polylang dan Cara Penggunaannya

Letak Polylang bisa ditemukan di Dashboard menggunakan nama Languages. di dalam Menu terdapat beberapa sub-menu yaitu:

  1. Languages
  2. String translations
  3. Setting
  4. Lingotek

1. Languages

Sub-menu languages memiliki fungsi untuk menambahkan bahasa dan mengatur urutan bahasa.

2. String translations

Polylang memungkinkan Anda menerjemahkan string yang dapat Anda tentukan seperti judul situs, tagline, atau judul widget. Selain itu tema dan plugin dapat memungkinkan Anda untuk menerjemahkan.

3. Setting

didalam setting ini terdapat beberapa module:

  1. URL modifications memiliki fungsi untuk mengatur permalink, Anda dapat memilih opsi-opsi yang disediakan oleh Polylang
  2. Detect Browser Languages Module ini memiliki fungsi untuk mengarahkan pengguna secara otomatis, ke Bahasa yang sesuai dengan preferensi Bahasa browser yang digunakan oleh pengguna.
  3. Media mengaktifkan Bahasa dan terjemahan pada media.
  4. Custom post types and Taxonomies Mengaktifkan terjemahan pada CPT (Custom Post Type) dan Custom Taxonomies
  5. WPML compatibility Memberikan kompabilitas kepada WPML (tidak bisa di non-aktifkan)

4. Lingotek

Lingotek merupakan translation management system. Jika Anda ingin menggunakan terjemahan secara otomatis Anda bisa menggunakan fitur ini. Atau Anda dapat hire para professional untuk menerjemahkan bahasa.

Menambahkan dan Mengatur Urutan Bahasa

Menambahkan Bahasa

Setelah mempelajari fungsi sub-menu dan modul. Tambahkan Bahasa yang ingin Anda gunakan di website Anda. Untuk Menambahkan Bahasa buka WordPress Dashboard kemudian Klik menu Languages.

Tambahkan Bahasa Pertama yang inign Anda gunakan. Sebagai contohnya saya menggunakan Bahasa Jerman sebagai bahasa utama website. Klik add new languages kemudian cari bahasa yang ingin Anda gunakan.

Secara otomatis form dibawahnya akan berubah. Mulai dari nama, locale, kode bahasa, dan bendera bahasa akan termuat secara otomatis.

Mengatur Urutan Bahasa

Jangan lupa, untuk mengatur urutan bahasa. Sebagai contoh: Bahasa Jerman sebagai bahasa utama website. Maka input order menjadi 0 (secara default 0).

Kemudian tambahkan Bahasa lagi. Pada bahasa kedua atur urutan order menjadi 1. Begitu pula untuk Bahasa ketiga menjadi 2 dan seterusnya.

Pengaturan Polylang

Setelah melakukan instalasi bahasa. Navigasikan ke WordPress Dashboard > Languages > Setting.

Pada module Custom Post Types. Klik seluruh Custom Post Type agar Anda dapat melakukan penerjemahan ke header, footer, custom post type. Jika Anda tidak memiliki Custom Post Type yang perlu Anda klik adalah My Templates

Menerapkan dan Mengatur Bahasa di Halaman

Setelah Anda melakukan instalasi bahasa dan melakukan pengaturan untuk Polylang. Akan muncul notifikasi di atas yang menyarankan Anda untuk mengatur Halaman Utama Anda. Anda bisa mengabaikannya atau langsung klik notifikasi tersebut kemudian Anda akan diarahkan menuju edit halaman utama.

Ketika Anda masuk ke editor pada bar kanan (right bar) Anda akan menemukan opsi baru yaitu languages. Terapkan bahasa apa yang Anda gunakan saat ini untuk website Anda. Contoh saya menggunakan Bahasa Jerman (Deutsch). Kemudian Klik Update.

Jika Anda ingin menambahkan terjemahan klik tombol + yang berada dibawah Translations

Setelah Anda klik tombol + Anda akan diarahkan menuju ke pembuatan halaman baru. Tapi tenang, Polylang akan secara otomatis menduplikasi halaman baru ini secara otomatis. Masukkan Judul Kemudian Publish.

Mengganti Bahasanya klik edit with Elementor kemudian ganti dengan Bahasa kedua yang Anda pilih.

Mengatur Bahasa pada halaman, post, custom post type

Ketika Anda menavigasikan ke halaman, post, maupun custom post type. Anda akan menemukan kolom baru yaitu beberapa bahasa. Ada tanda cawang, plus dan kosong. Untuk penjelasannya:

  1. Tanpa Simbol Bahasa belum diatur
  2. Tanda Cawang Bahasa sudah diatur
  3. Tanda Plus Anda belum menambahkan bahasa pertama, kedua atau ketiga

Sama halnya dengan menambahkan Bahasa jika masih belum menemukan Tanpa Simbol Anda harus klik salah satu page/post/custom post type kemudian gunakan cara yang sebelumnya saya beri untuk mengatur bahasa.

Jika Anda ingin menambahkan bahasa. Klik Tombol Plus + untuk menambahkan halaman bahasa tertentu

Menambahkan Language Switcher pada Elementor

Menambahkan Menu sesuai Bahasa

Setelah mengatur tiap halaman dan post, Tambahkan Language Switcher. Apa itu Language Switcher? Language Switcher ini digunakan pengguna untuk mengganti Bahasa sesuai kemauan pengguna.

Pertama buka WordPress Dashboard > Appereance > Menus

Kemudian buat dua Menu:

  1. Untuk Bahasa utama
  2. Untuk Bahasa Kedua dan seterusnya

Ketika di menu Anda akan menemukan opsi baru dibawah ini:

Sebagai Contoh: Menu Header Jerman (DE) untuk Bahasa Jerman. Maka terapkan Primary Menu Deutsch. Kemudian Buat Menu baru untuk Bahasa lainnya dan terapkan Primary Menunya agar tampil pada halaman tertentu.

Membuat Header dan Language Switcher

Navigasikan ke WordPress Dashboard > Templates > Theme Builder

Kemudian Klik Header dan tambahkan header baru. Ketika membuat header Anda akan menemukan widget baru di Elementor yaitu Polylang Switcher. Kemudian masukkan widget ke dalam header Anda.

Atur gaya mulai tata letak switcher dan juga ukuran switcher. Setelah itu save header dan apply display condition ke entire site. Refresh Halaman website Anda. Sekarang website Anda menjadi website dua bahasa atau lebih (Multi Language).

Terimakasih, jika ada pertanyaan sertakan di kolom komentar.

Mengatasi Elementor Error Terbaru 2020

Mengatasi Elementor Error. Elementor merupakan salah satu WordPress Page Builder yang memiliki berbagai macam fitur dan kemudahannya dalam membuat website. Terkadang, dalam beberapa kasus Elementor memiliki beberapa masalah. Salah satunya tidak dapat diaksesnya Elementor saat menggunakan live editor atau tidak munculnya hasil editan yang telah dilakukan user. Saya akan membabarkan tiap-tiap masalah yang sering terjadi beserta solusinya.

Kasus Pertama: Elementor Loading Terus Menerus

Elementor Load Terus Menerus

Jika Anda mendapati masalah Live Editor yang loading terus menerus (Elementor Loading Terus Menerus) atau bahkan blank biasanya disebabkan oleh kekurangan WP Memory (PHP Memory). Anda bisa melihat Elementor System Requirement. Pada halaman ini Elementor membutuhkan :

1. Upgrade ke WordPress Terbaru

Pastikan Anda selalu mengaktifkan auto-update pada WordPress Anda. Karena salah satu spesifikasi yang dibutuhkan oleh Elementor ialah WordPress terbaru. Dalam laman resmi spesifikasi minimum. Elementor menyarankan untuk menggunakan WordPress 4.7 keatas.

2. Upgrade PHP 7 Keatas

Pastikan Anda juga menggunakan PHP Versi 7 keatas. Semakin tinggi atau semakin baru PHP semakin cepat dalam memproses data, hal ini juga dapat membantu Anda dalam mempercepat website Anda. PHP terbaru juga jauh lebih aman dibandingkan versi PHP yang lama. Sebelum Anda Upgrade PHP pastikan semua plugin kompatibel dengan Versi PHP yang baru. Saya menyarankan untuk Upgrade ke PHP Versi 7.2. Karena rata-rata plugin WordPress support dengan PHP versi tersebut.

Cara Upgrade PHP Melalui Cpanel

1. Buka Cpanel dan Pilih Select PHP Version
Mengatasi Elementor Error

Langkah pertama, buka cpanel website Anda. Kemudian cari Select PHP Version, dan Klik Select PHP Version. Jika Anda tidak menemukannya, Anda bisa meminta upgrade PHP melalui Penyedia Hosting Anda. Jika Anda menemukannya maka Anda bisa melanjutkan ke tahap selanjutnya.

2. Pilih Versi PHP
Mengatasi Elementor Error

Setelah klik Select PHP Version Anda akan masuk ke halaman ini. Biasanya beberapa hosting di Indonesia menggunakan 5.6 sebagai PHP default. Pilih 7.2 karena lebih stabil dan hampir semua plugin kompatibel dengan versi PHP ini. Ketika Anda memilih versi 7.2 itu akan otomatis tersimpan. Jika Anda tidak menemukannya di dalam hosting atau Cpanel Anda. Harap menghubungi penyedia hosting untuk mengupgrade PHP ver ke 7.2.

3. Mengubah Memory Limit dan Lain sebagainya

Saya menyarankan untuk menggunakan :

1. Melalui Select PHP Version Cpanel

untuk mengubahnya, caranya hampir sama dengan mengupgrade atau merubah PHP

  1. Masuk Ke Cpanel
  2. Kemudian klik Select PHP Version
  3. Kemudian Klik Switch to PHP options
  4. Kemudian sesuaikan dengan diatas
Elementor Error

2. WP-Config

Cara lainnya dengan menambahkan di wp-config

define('WP_MEMORY_LIMIT', '256M');
define( 'WP_MAX_MEMORY_LIMIT', '256M' );

3. Php.ini

Jika Anda belum bisa mengubah melalui wp-config atau Anda tidak dapat menemukan di Select PHP Version. Anda bisa mengubah melalui PHP.ini (PHP Configuration File) dengan catatan : tidak semua web hosting dapat diubah. Dan beberapa kasus lokasi file berbeda-beda pada tiap web hosting. Pastikan Anda telah membaca Knowledge Base pada web hosting yang Anda gunakan.

  1. Pastikan Anda melakukan backup pada website Anda
  2. buka file php.ini
  3. kemudian masukkan kode dibawah ini
memory_limit = 256M
upload_max_size = 64M
max_execution_time = 300
max_input_time = 1000
post_max_size = 64M
upload_max_filesize = 64M

4. Melalui .htaccess

Jika Anda tidak mengetahui lokasi php.ini ataupun web hosting Anda tidak menyediakannya Anda bisa mengganti melalui file .htaccess Anda.

php_value memory_limit 256M
php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 1000

5. Hubungi Web Hosting Anda

Cara terakhir adalah menghubungi web hosting Anda. Sertakan spesifikasi yang saya berikan di atas, dan minta kepada web hosting untuk merubah sesuai dengan spesifikasi yang dibutuhkan.

Kasus Kedua: Hasil Editan Elementor Tidak Muncul

Permasalahan ini salah satu yang sering terjadi. Banyak faktor yang menyebabkannya, bisa dikarenakan plugin caching atau tema bawaannya. Untuk mengatasinya :

  1. Hapus Cache Jika Anda menggunakan plugin cache seperti : Swift Performance, WP Rocket, Breeze, WP Fastest Cache, Autoptimize dan lain sebagainya pastikan Anda telah menghapus caching Anda,
  2. Regenerate CSS Jika masih tidak bisa Anda bisa menuju ke wp-admin (WordPress Dashboard) kemudian klik Elementor
  3. Setelah itu, klik tools dan klik Regenerate CSS
  4. Refresh halaman Anda, jika berhasil Anda bisa melewati tahap selanjutnya
  5. Internal Embedding Jika masih belum muncul buka wp-admin > Elementor > setting>advanced > CSS Print Method rubah ke Internal Embedding
  6. Refresh halaman Anda.

Kasus Ketiga: Website Lemot Gara-Gara Elementor

Jika Anda mendapati website Anda lemot gara-gara Elementor ada dua kemungkinan. Apakah yang lemot adalah live editor dan WordPress Anda atau hasil website Anda tidak memuaskan dimata Gtmetrix maupun Tools Pingdom. Jika Anda mendapati masalah lemot pada live editor dan WordPress pastikan langkah-langkah diatas diterapkan semaksimal mungkin. Jika masih lemot segera ganti hosting yang lebih baik. Jika website Anda lemot saat diakses setelah proses desain oleh elementor saya sarankan untuk membaca artikel tentang cara mempercepat website. Saya membuat Panduan Lengkap Swift Performance Pro yang dapat meningkatkan kecepatan website Anda.

Jika Anda memiliki masalah pada Elementor. Anda bisa masukkan kendala pada kolom komentar dibawah ini. Sangat disarankan untuk Anda pengguna Elementor untuk mengikuti Grup Facebook Ini :

Saya aktif dikedua grup diatas. Jika ada permasalahan Elementor Anda silahkan sertakan gambar beserta link website yang mengalami problem.

Kendala Lain

Jika Anda menggunakan Cloudflare saat proses editing harap mematikan Rocket Loader atau klik Pause Cloudflare on Site. Anda bisa menemukan opsi ini pada Advanced Option yang berada pada kanan bawah dashboard Cloudflare Anda.

Jika Anda masih memiliki masalah coba untuk melakukan editing pada incognito windows. Kemungkinan ada extension Chrome atau Firefox yang menghalangi keduanya.