Apa Itu Oxygen Builder? Fungsi, Fitur, Kelebihan, dan Kekurangannya

Plugin Oxygen merupakan alat pembuat di WordPress yang memungkinkan kita untuk merancang tata letak halaman atau postingan dengan mudah. Dengan menggunakan Plugin Oxygen, Anda tidak perlu lagi menguasai pemrograman untuk merancang tata letak situs web.

Sebagai seorang pengembang yang bekerja dengan WordPress, kita mendapatkan kemudahan dalam menciptakan tata letak halaman berkat keberadaan plugin pembangun visual ini. Di dalam panduan ini, kami akan menjelaskan salah satu plugin pembangun visual yang sangat mudah digunakan dan dapat menghasilkan halaman yang cukup ringan. Jadi, pada panduan ini, kami akan mengulas plugin Oxygen yang termasuk dalam kategori salah satu plugin pembangun visual terbaik. Berikut adalah informasi lengkapnya.

Definisi plugin Oxygen

Oxygen adalah sebuah plugin visual builder premium untuk WordPress yang berfungsi sebagai alat pembuat website (website builder) berbasis drag and drop. Plugin ini memungkinkan pengguna untuk mendesain dan mengembangkan tampilan situs web secara menyeluruh, mulai dari halaman depan, halaman dalam, hingga elemen kecil seperti tombol, header, dan footer tanpa harus menggunakan tema tambahan.

Berbeda dengan page builder lainnya seperti Elementor atau Divi, Oxygen tidak hanya membuat layout halaman, tetapi juga menggantikan peran tema (theme) di WordPress. Artinya, Oxygen mengontrol seluruh struktur tampilan website dari atas hingga bawah (full site editing).

Fitur plugin Oxygen

1. Visual Drag & Drop Builder

Oxygen menyediakan editor visual interaktif yang memudahkan pengguna mendesain website hanya dengan menarik dan melepas elemen (drag and drop) tanpa harus menulis kode manual. Kamu bisa langsung melihat hasil desain secara real-time.

2. Desain Tanpa Tema (Theme Replacement)

Berbeda dari page builder lain, Oxygen menghapus fungsi tema WordPress, artinya kamu bisa membuat seluruh bagian website (header, footer, halaman, hingga arsip) langsung di Oxygen tanpa bergantung pada tema tertentu. Hal ini memberi kebebasan penuh untuk membuat desain custom dari nol.

3. Reusable Parts (Komponen yang Dapat Digunakan Ulang)

Fitur ini memungkinkan kamu menyimpan elemen desain seperti header, tombol, atau section tertentu untuk digunakan kembali di halaman lain. Efisien dan konsisten dalam desain antar halaman.

4. Responsive Design Controls

Oxygen dilengkapi dengan fitur pengaturan tampilan responsif, yang memungkinkan kamu menyesuaikan desain agar tampil optimal di berbagai perangkat — seperti desktop, tablet, dan ponsel. Kamu dapat mengatur ukuran font, jarak, dan tata letak untuk tiap jenis layar.

5. Dynamic Data Integration

Kamu bisa menampilkan data dinamis dari WordPress seperti judul postingan, gambar unggulan, deskripsi produk WooCommerce, atau field khusus dari ACF (Advanced Custom Fields). Cocok untuk website blog, portfolio, atau toko online yang kontennya sering berubah.

6. Integrasi dengan WooCommerce

Oxygen punya dukungan penuh terhadap WooCommerce, memungkinkan kamu mendesain tampilan toko online secara bebas — mulai dari halaman produk, keranjang, hingga checkout. Tampilan toko bisa benar-benar unik dan sesuai identitas brand.

7. Header & Footer Builder

Fitur ini memungkinkan kamu membuat header dan footer custom tanpa batasan. Kamu juga bisa mengatur kapan dan di mana layout tertentu akan muncul (misalnya hanya di halaman produk atau postingan blog).

8. Global Styles & Design Settings

Kamu dapat mengatur warna utama, tipografi, ukuran font, dan jarak secara global. Setiap perubahan otomatis diterapkan ke seluruh elemen yang menggunakan pengaturan tersebut, sehingga desain tetap konsisten.

9. Integrasi dengan Developer Tools

Untuk pengguna tingkat lanjut, Oxygen mendukung:

• Custom CSS, JavaScript, dan PHP.

• Integrasi WordPress hooks dan custom functions. Sangat fleksibel untuk developer yang ingin menambahkan logika sendiri ke dalam desain.

10. Optimasi Kecepatan & Kode Ringan

Oxygen menghasilkan kode HTML dan CSS yang bersih dan efisien, tidak menambahkan elemen yang tidak perlu. Hasilnya: website lebih cepat dimuat dibanding builder lain seperti Elementor atau WPBakery.

11. Conditions & Visibility Rules

Fitur conditions memungkinkan kamu mengatur kapan elemen tertentu akan muncul, misalnya:

• Hanya tampil untuk pengguna login.

• Hanya tampil di halaman produk tertentu. Sangat berguna untuk membuat website dinamis dan personal.

12. Template System

Kamu bisa membuat template global untuk postingan, halaman arsip, kategori, dan lainnya. Ketika kamu membuat konten baru, template tersebut otomatis digunakan tanpa perlu mendesain ulang.

13. Multilingual & Translation Ready

Oxygen kompatibel dengan plugin penerjemah seperti WPML atau Polylang, sehingga kamu bisa membuat website multibahasa dengan mudah.

14. Role Manager

Kamu bisa mengatur siapa saja yang boleh mengakses Oxygen Builder di dashboard WordPress. Berguna untuk tim atau klien agar tidak mengubah desain tanpa izin.

Fungsi plugin Oxygen

Berikut beberapa fungsi utama dari plugin Oxygen:

• Membangun Tampilan Website Secara Visual

Oxygen memungkinkan kamu membuat dan mendesain website dengan sistem drag and drop, tanpa perlu menulis kode manual.

• Menggantikan Tema WordPress (Theme Replacement)

Oxygen bisa menghapus ketergantungan pada tema, sehingga kamu bisa membuat tampilan website sepenuhnya dari nol (custom).

• Membuat Template Global

Kamu bisa membuat template untuk halaman, postingan, produk, atau arsip agar tampilannya seragam di seluruh situs.

• Mengatur Desain Responsif

Oxygen menyediakan pengaturan agar tampilan website tetap rapi di semua perangkat (desktop, tablet, dan smartphone).

• Menampilkan Konten Dinamis (Dynamic Data)

Dapat menarik data otomatis dari WordPress seperti judul, gambar unggulan, atau field dari plugin ACF (Advanced Custom Fields).

Kelebihan Plugin Oxygen

• Oxygen menghasilkan kode yang bersih dan ringan, sehingga situs bisa dimuat lebih cepat dan memiliki performa yang baik.

• Memberikan kontrol penuh atas desain — kamu bisa mengatur layout, styling, struktur HTML/CSS/JS, membuat template global, dll.

• Tidak bergantung pada tema — Oxygen menggantikan sistem tema dan memungkinkan kamu membangun situs “from scratch”.

• Integrasi bagus dengan fitur-fitur lanjutan seperti data dinamis, custom post types, dan toko online (WooCommerce).

• Model lisensi yang satu kali bayar (lifetime license) untuk beberapa versi, sehingga bisa lebih hemat dalam jangka panjang dibanding model langganan.

Kekurangan Plugin Oxygen

• Kurva pembelajaran cukup tinggi, terutama bagi pengguna yang tidak terbiasa dengan HTML, CSS, atau konsep pengembangan web.

• Jumlah template siap pakai, add-ons pihak ketiga, atau komunitas pengguna mungkin lebih terbatas dibanding builder yang lebih populer (seperti Elementor).

• Karena Oxygen menggantikan tema WordPress, bila ingin berpindah ke builder lain atau tema lain di kemudian hari bisa jadi ribet atau harus membangun ulang.

• Untuk pemula total atau yang ingin cepat “klik-klik drag & drop tanpa coding”, mungkin terasa “terlalu teknis”.

Cara membuat landing page dengan Oxygen

Berikut kami berikan contoh membuat landing page dengan plugin Oxygen.

1. Instal dan Aktifkan Plugin Oxygen

1. Masuk ke Dashboard WordPress → Plugins → Add New

2. Klik Upload Plugin, lalu unggah file ZIP Oxygen (karena ini plugin premium).

3. Klik Install Now → Activate Plugin.

4. Setelah aktif, Oxygen akan menonaktifkan tema WordPress (karena dia menggantikannya).

2. Buat Halaman Baru untuk Landing Page

1. Masuk ke menu Pages → Add New.

2. Beri nama misalnya “Landing Page Produk A”.

3. Klik tombol Edit with Oxygen untuk mulai mendesain.

3. Pilih Template atau Mulai dari Kosong

• Oxygen menyediakan opsi:

  • Blank Page (halaman kosong tanpa header/footer) — cocok untuk landing page.

  • Reusable Part / Template (jika kamu ingin menyimpan desain untuk digunakan ulang).

 Tips: Untuk hasil maksimal, pilih Blank Page agar landing page benar-benar fokus tanpa gangguan navigasi.

4. Tambahkan Struktur Dasar

Gunakan panel kiri Oxygen untuk menambahkan elemen:

• Section → Area utama konten

• Heading → Judul utama

• Text → Deskripsi produk / layanan

• Image → Gambar produk

• Button → Tombol Call To Action (CTA) seperti “Beli Sekarang” atau “Daftar Sekarang”

Gunakan drag and drop untuk mengatur posisi elemen dengan mudah.

5. Atur Desain dan Tampilan

Klik elemen yang ingin diubah, lalu gunakan panel kanan untuk:

• Mengatur warna, font, dan ukuran teks

• Menambahkan padding & margin

• Mengubah background (warna atau gambar)

• Menyesuaikan layout responsif (desktop, tablet, mobile)

Gunakan fitur “Structure Panel” di sisi kiri untuk melihat susunan elemen secara hierarkis.

6. Tambahkan CTA dan Formulir

• Untuk tombol, arahkan ke link WhatsApp, produk WooCommerce, atau form pendaftaran.

• Tambahkan Form element (bisa dari plugin seperti Fluent Forms, Formidable, atau WPForms) untuk menangkap data pengunjung.

7. Optimalkan untuk Mobile

Klik ikon Device (Desktop / Tablet / Mobile) di bagian atas editor Oxygen. Sesuaikan ukuran font, jarak, dan posisi elemen agar tampilan tetap rapi di semua perangkat.

8. Simpan dan Publikasikan

• Setelah selesai, klik Save di kanan atas.

• Kembali ke dashboard, lalu klik View Page untuk melihat hasilnya.

• Jika ingin menjadikannya halaman utama (homepage), buka:
  Settings → Reading → Your homepage displays → A static page → pilih halaman landing page.

Demikian panduan kami tentang plugin Oxygen, selamat mencoba!