Deploy Halaman Elementor ke Produksi, Semua Element ID Berubah Acak dan Custom CSS Mati? Jebakan Template Library Import

Ini pertama kalinya saya men-deploy sebuah halaman Elementor dari clone lokal ke produksi untuk situs klien. Alurnya kelihatan aman dan textbook: buka halaman di lokal, Save as Template, export JSON-nya, lalu di produksi tinggal Import Template dan Insert. Halaman muncul, semua section dan widget kelihatan lengkap, saya kira urusan selesai. Lalu saya buka halaman produksinya dengan mata sendiri, dan seluruh tampilannya ambyar.

Judul hero membungkus di tempat yang salah, kartu kehilangan bayangan halo-nya, tombol kehilangan ukuran ikonnya, dan yang paling aneh: nongol satu heading besar <h1 class="entry-title"> di paling atas yang tidak pernah saya pasang. Padahal di lokal halaman itu bersih. Strukturnya utuh, tapi seluruh "kulit" visualnya hilang.

Gejalanya

Saya inspect elemennya satu per satu. Setiap element ID custom yang saya set di lokal, misalnya heroouter, berubah jadi hash acak seperti 166157ad di produksi. Dan itu fatal, karena custom CSS halaman ini, sekitar 2198 karakter, ditulis dengan selector yang di-scope ke page ID plus element ID. Begitu ID-nya berganti, setiap selector menunjuk ke elemen yang sudah tidak ada namanya.

Tapi ada yang lebih dasar dari itu: custom CSS-nya sendiri bahkan tidak ikut ter-import. Sama seperti hide_title, opsi yang saya nyalakan di lokal supaya tema tidak merender judul post-nya. Karena hide_title hilang, tema kembali ke default dan mencetak <h1 class="entry-title"> itu. Dua gejala yang tadinya kelihatan beda, ternyata satu akar.

Jalan buntu yang saya coba

Ide pertama: mungkin saya salah alat. Elementor punya fitur Kit Export yang memang ditujukan untuk migrasi antar-site. Rencananya export selektif, cuma halaman ini saja. Ternyata export kit selektif terkunci di plan Expert pada Elementor v4 Free/Pro. Satu-satunya jalur gratis adalah import full-kit, dan itu akan menimpa semua 16+ halaman yang sudah live di produksi. Jelas bukan pilihan.

Jadi dua kandidat "cara resmi" gugur: Template Library import merusak halaman, dan Kit Export yang benar terkunci paywall atau terlalu destruktif.

Akar masalahnya

Begitu saya berhenti menyalahkan CSS dan mulai baca perilaku Template Library, semuanya masuk akal. Insert Template memang dirancang untuk meregenerasi element ID. Itu fitur, bukan bug: supaya kamu bisa menyisipkan template yang sama berkali-kali di satu halaman tanpa ID bentrok. Konsekuensinya, ID lokal yang saya andalkan untuk scoping CSS pasti diacak.

Yang kedua, dan ini bagian yang paling sering bikin orang kejeblos: Template Library hanya membawa isi elementor_data, yaitu pohon section, widget, dan kontennya. Ia sama sekali tidak membawa _elementor_page_settings. Padahal di situlah custom_css, hide_title, dan opsi layout level halaman disimpan. Ini perilaku yang sudah didokumentasikan sejak Elementor v3.x. Jadi dua kerusakan terjadi sekaligus dalam sekali import: ID diacak, dan page settings tidak pernah ikut menyeberang.

Perbaikannya

Kesimpulannya: untuk halaman seperti ini, jangan pakai Template Library maupun Kit Import. Saya deploy lewat injeksi database yang presisi. Alih-alih membiarkan Elementor menulis ulang segalanya, saya tulis meta-nya sendiri dengan update_post_meta, mempertahankan setiap element ID persis seperti di lokal, lalu menulis ulang selector di custom_css, dan me-remap ID attachment gambar.

Kunci pertama: tulis _elementor_data verbatim supaya tidak ada satu ID pun yang berubah.

// pertahankan element ID persis seperti di lokal
update_post_meta( $target_id, '_elementor_data', wp_slash( $elementor_data_json ) );

Kunci kedua: bawa _elementor_page_settings menyeberang, dan karena page ID lokal beda dengan page ID produksi, rewrite bagian selector yang ter-scope ke page ID.

$page_settings['custom_css'] = str_replace(
    '.elementor-' . $source_page_id,
    '.elementor-' . $target_page_id,
    $page_settings['custom_css']
);
update_post_meta( $target_id, '_elementor_page_settings', wp_slash( $page_settings ) );

Karena element ID saya pertahankan verbatim, hanya porsi page ID pada selector yang perlu diganti. hide_title ikut terbawa di dalam page settings yang sama, jadi <h1 class="entry-title"> yang tak diinginkan itu lenyap dengan sendirinya. Langkah terakhir: remap ID attachment, karena ID gambar di media library produksi hampir pasti beda dengan di lokal, supaya gambar tidak putus.

Pohon keputusan sebelum deploy

Sebelum memilih Template Library import untuk men-deploy sebuah halaman, tanyakan tiga hal. Apakah halaman ini punya page settings apa pun? Apakah ada custom CSS yang di-scope ke ID? Apakah ada element ID yang direferensikan dari luar, misalnya lewat custom JS atau hook animasi? Kalau salah satu jawabannya iya, Template Library import akan merusaknya. Deploy lewat level database.

Pelajaran

Insert Template meregenerasi element ID secara sengaja; jangan pakai untuk men-deploy halaman yang punya CSS atau JS yang di-scope ke ID.
custom_css dan hide_title hidup di _elementor_page_settings, dan import Template tidak pernah membawanya.
Kit Export selektif terkunci di plan Expert (Elementor v4 Free/Pro), sedangkan full-kit import menimpa semua halaman produksi.
Untuk deploy presisi: tulis _elementor_data verbatim via update_post_meta, rewrite selector custom_css, lalu remap ID attachment.
Aturan cepat: kalau halaman punya page settings, custom CSS ter-scope ID, atau ID yang direferensikan dari luar, Template Library import bakal merusaknya.