Cara Membangun Website WordPress Keren dengan Oxygen Visual Website Builder – Anda bosan dengan desain themes WordPress yang biasa atau Anda ingin membuat tampilan website yang keren sesuai dengan keinginan Anda? Tapi masalahnya adalah Anda tidak memiliki pengetahuan lebih tentang coding untuk membuat tema WordPress sendiri? Jawabannya adalah Anda tetap bisa mewujudkan keinginan Anda tersebut karena saat ini sudah banyak pengembang WordPress yang membuat Visual Website Builder untuk memudahkan Anda dalam membangun halaman website yang indah dengan mudah dan cepat tanpa perlu pengetahuan coding yang dalam.

Visual website builder yang akan saya perkenalkan pada artikel ini adalah Oxygen. Dengan Oxygen ini Anda akan dapat membuat website WordPress jauh lebih indah dengan tampilan yang anti mainstream dan oxygen mudah untuk digunakan. Oxygen builder memiliki antarmuka dashboard yang memungkinkan Anda membangun situs dari campuran komponen pre-build dan elemen HTML dasar. Selain desain statis, Anda juga dapat dengan cepat membuat template untuk halaman arsip, blog, single post, konten plugin, dan masih banyak lagi.

Untuk menggunakan Visual Website Builder Oxygen ini, Anda sebenarnya tidak perlu mengetahui pengkodean secara teknis, tapi Anda akan lebih bisa mengeluarkan semua kemampuan dan fleksibilitas Oxygen jika memiliki pengetahuan yang lebih tentang HTML dan CSS. Selanjutnya untuk mengetahui lebih dalam lagi mengenai Oxygen Visual Website Builder, silahkan untuk membaca artikel ini sampai selesai dan pada akhirnya Anda bisa memutuskan apakah alat ini perlu untuk Anda coba.

Baca : Brizy Page Builder – Mudah Membuat Halaman Menarik di WordPress

Apa itu Oxygen?

Oxygen adalah plugin WordPress yang berfungsi sebagai pembangun website dengan cara modern yang sudah dilengkapi dengan elemen-elemen dan komponen yang lengkap sehingga memudahkan pengguna dalam membangun desain situs WordPress mereka dengan cepat dan hasil yang memuaskan. Intinya adalah plugin yang berfungsi untuk tujuan pembuatan tema situs WordPress Anda.

Oxygen ini pada dasarnya diperuntukkan untuk para desainer WordPress yang bekerja membangun proyek website untuk klien. Ini akan memberikan para desainer kemudahan dalam membangun website dengan cepat dan penerapan desain yang lebih mudah. Tapi meskipun Anda menggunakan Oxygen untuk penggunaan pribadi, ini juga merupakan alat yang sangat bagus untuk Anda karena ini cocok untuk pemula, menengah maupun expert. Oxygen juga dilengkapi dengan editor code yang live sehingga pengguna dapat secara langsung mengedit HTML atau CSS.

Harga Oxygen

Oxygen ditawarkan dengan harga yang lumayan terjangkau dan hanya terdapat satu paket yaitu $99. Harga tersebut adalah harga satu kali bayar yang berarti tidak ada biaya bulanan atau tahunan seperti plugin-plugin lain. Kelebihan lain adalah harga $99 tersebut sudah termasuk mendapat dukungan dan update selama-lamanya dan bisa Anda gunakan untuk beberapa situs sekaligus (unlimited site).

Pengguna yang merasa tidak puas juga bisa meminta uang kembali 100% selama 30 hari. Dan uang akan dikembalikan secara penuh dengan alasan apapun. Tapi perlu di ingat bahwa harga ini suatu saat bisa berubah. Jadi tunggu apa lagi..?

Buy Oxygen

Fitur-Fitur Unggulan Oxygen

Dengan harga $99 maka Anda akan mendapatkan alat yang sesuai dengan harga tersebut, dan berikut fitur-fitur keren yang akan Anda dapatkan dari Oxygen :

• Oxygen memiliki tampilan dashboard editor indah dan lengkap yang akan memudahkan setiap pengguna dalam membangun website semudah klik. Hasil ditampilkan secara live dan tidak perlu melakukan refresh untuk melihat setiap perubahan yang Anda lakukan.
• Oxygen memiliki Visual desain situs Anda dengan kontrol tingkat piksel pada semua bagian. Dilengkapi dengan elemen HTML dasar dan properti CSS lengkap. Elemen HTML mencakup section, hedading, column, Div bllock, title, text box, text link, image, icon, code block, dan masih banyak lagi.
• Oxygen benar-benar membiarkan Anda mengedit semua area website Anda, berbeda dengan visual builder lain yang hanya mengijinkan bagian halaman saja, tapi tidak dengan oxygen yang mengijinkan Anda mengedit bagian body, menu, header, sidebars, dan footer.
• Oxygen memiliki Live Preview yang langsung ditampilkan dalam satu layar dan berubah mengikuti perubahan yang Anda lakukan secara real-time tanpa perlu melakukan refresh.
• Oxygen mencakup berbagai komponen yang terdiri dari 160 komponen (blok halaman premade), 50+ halaman (komponen gabungan), dan lima demo situs web prebuilt – semuanya responsif dan dapat disesuaikan. Item prebuilt ini memungkinkan Anda membuat halaman dan keseluruhan situs dengan cepat dan mudah.
• Oxygen mengijinkan pengguna secara bebas dalam mendesain dalam tampilan responsive. Style yang Anda terapkan pada satu perangkat secara otomatis berlaku pada semua resolusi yang lebih rendah. Dan dengan oxygen tidak ada grids, tidak ada framework.
• Oxygen tidak hanya memiliki kemampuan untuk membangun halaman statis saja tapi juga memungkinkan Anda untuk membuat template dan desain pada konten tertentu seperti halaman, posting, e-commerce, jenis posting, arsip, taksonomi, kategori, tag, dan lainnya.
• Tuliskan kode untuk fungsionalitas khusus (CSS, HTML, PHP, dan JavaScript), dan lihat hasil kode itu secara langsung, tanpa harus merefresh halaman Anda. Jalankan custom WordPress loops, gunakan fungsi WordPress API, dan banyak lagi.
• Oxygen juga memiliki fitur block code pre-built yang memungkinkan Anda untuk menampilkan konten dari database WordPress.
• Oxyggen memudahkan Anda dalam mengatur jenis posting kustom dan field custom. Gunakan Oxygen template untuk menerapkan tipe posting. Gunakan shortcode atau blok kode untuk menambahkan field pada desain.
• Reusable Parts memungkinkan Anda memiliki konten yang sama di lebih dari satu tempat, mengedit satu versi, dan meminta semua versi diperbarui secara otomatis di mana saja. Dan part-part ini bisa Anda gunakan kembali untuk kebutuhan dikemudian hari.
• Oxygen memungkinkan Anda untuk menyisipkan keluaran plugin pihak ketiga (mis., Slider, mega menu, e-commerce dan formulir) ke halaman Anda menggunakan shortcode, widget, dan PHP. Lalu, Anda juga dapat mengubah tampilan luar plugin dengan CSS.
• Oxygen memungkinkan Anda untuk menambahkan widget dimanapun Anda mau, tidak hanya di bagian sidebar saja.
• Oxygen memiliki 800+ Font Google dan 500 ikon SVG (dari FontAwesome dan Linearicons). Anda juga dapat mengunggah kumpulan ikon SVG Anda sendiri dari IcoMoon dengan sekali klik. Oxygen juga bekerja dengan Typekit, membiarkan Anda mengimpor font dari berbagai jenis sumber.
• Oxygen menyimpan desain langsung di database WordPress, jadi jika Oygen melakukan update maka desain yang sudah Anda buat akan tetap aman.
• Oxygen kompatibel dengan plugin pihak ketiga, termasuk plugin SEO dan bahkan pembuat halaman pihak ketiga seperti Visual Composer, Beaver Builder, dan Elementor.
• Oxygen sangat SEO Friendly karena dibangun dengan code berkualitas tinggi, bersih dan ramah untuk mesin pencari. Oxygen juga tidak akan membuat situs Anda lambat karena Ini hanya menambahkan kode untuk elemen yang Anda tambahkan ke halaman Anda.
• Oxygen memiliki fitur unguk mengekspor dan mengimpor desain Anda dengan oxygen dari satu situs ke situs Anda yang lain.

Baca : Visual Slide Box Builder – Buat Slider Gallery WordPress yang Indah dan Mudah

Cara Menggunakan Oxygen di WordPress

Untuk menggunakan Oxygen di WordPress hal yang pertama harus Anda lakukan adalah membeli plugin Oxygen langsung melalui website https://oxygenapp.com/. Selanjutnya download file oxygen dan dapatkan lisensinya.

Selanjutnya silahkan install file .zip plugin Oxygen melalui area admin WordPress Anda dengan memilih menu Plugins » Add New » Upload. Install dan aktifkan plugin Oxygen.

Anda akan melihat menu baru bernama “Oxygen” di sidebar admin WordPress Anda dan masukkan lisensi Oxygen di menu Oxygen » License. Dengan memasukkan licensi key ini Anda akan mendapatkan update otomatis untuk Oxygen.

Selain mendapatkan file plugin Oxygen, Anda juga mendapatkan plugin Oxygen Typerkit dan Oxygen Selector Detector. Silahkan install kedua plugin tersebut seperti langkah diatas dan juga masukkan lisensi key pada halaman pengaturan yang sama.

Selanjutnya buat halaman atau page baru melalui menu Pages » Add New Page dan isi judul sesuai keinginan Anda, silahkan simpan dan Anda akan melihat tombol “Edit in Visual Editor”, klik tombol tersebut untuk membangun situs Anda dengan Oxygen.

Sekaran Anda dibawa pada halaman editor visual builder Oxygen, dan sekarang Anda sudah siap untuk merancang situs WordPress Anda dengan cepat dan mudah.

Di bagian sebelah kiri pada gambar diatas, Anda dapat memilih elemen HTML dasar, section konten khusus WordPress, atau pre-built component. Di sebelah kanan, Anda mendapatkan DOM Tree, stylesheet dan Selector.

Di bagian tengah adalah tempat live preview dan bagian untuk mengedit dan membangun halaman Anda. Pada bagian Antarmuka inilah Anda akan gunakan untuk membangun keseluruhan situs WordPress secara visual.

Sekarang mari kita coba untuk membuat contoh sederhana. Saat pertama kali membuka Visual Editor Oxygen, Anda akan melihat kanvas kosong. Untuk mengubahnya, Anda perlu mengklik tombol +ADD besar di kiri atas.

Kemudian, Anda dapat memilih dari berbagai elemen yang berbeda:

• Fundamental – tab ini berisi elemen HTML dasar yang dapat Anda gunakan untuk membangun konten Anda seperti Section,
  div block, Text block, link, image, icon, column dan masih banyak lagi.
• WordPress – tab ini menyimpan banyak fungsi khusus WordPress. Misalnya, jika ingin menambahkan widget atau shortcode WordPress, Anda bisa melakukannya dari sini.
• Re-Usable – tab ini masih terlihat kosong, namun Anda dapat menyimpan elemen Anda sendiri sehingga Anda dapat dengan cepat menggunakan kembali elemen di beberapa template. Penggunaan yang umum adalah menyimpan header dan footer Anda sebagai elemen yang dapat digunakan kembali sehingga Anda tidak perlu membangunnya dari nol setiap saat.
• Components – tab ini berisikan keseluruhan element yang sudah dibawa oleh Oxygen. Dengan memanfaatkan bagian ini Anda akan dengan cepat membangun halaman Anda dari header, body, footer, sidebar dan masih banyak lagi.
• Design Sets – ini adalah desain bertema. Misalnya, Anda dapat dengan cepat mengimpor seluruh halaman. Atau, Anda bisa melihat-lihat banyak tema komponen. Sebagai contoh, Anda dapat dengan cepat memasukkan komponen untuk header dan bagian hero premade untuk menyiapkan kerangka dasar. Dengan ini maka Anda akan benar-benar cepat membuat halaman yang keren dan tampilan yang memuaskan. Styling desain Anda dengan Oxygen Styles.

Selain itu Oxygen juga benar-benar memungkinkan Anda membuat situs Anda sendiri. Anda punya beberapa pilihan. Pertama, Oxygen memberi Anda antarmuka editor di mana Anda dapat dengan cepat mengubah hal-hal seperti:

• Latar belakang
• Posisi dan ukuran (termasuk margin dan bantalan khusus)
• Tipografi
• Perbatasan

Dan kemudian, Anda selalu bisa langsung masuk ke kode untuk menambahkan CSS khusus untuk elemen spesifik yang telah Anda pilih. Memilih elemen tertentu untuk Styles sangat mudah berkat DOM Tree.

Jika Anda mengarahkan kursor ke element di DOM Tree, Oxygen akan menyoroti elemen editor visual. Kemudian, Anda hanya perlu klik untuk memilih elemen itu. Anda juga dapat mengatur ulang urutan dasar dan posisi elemen dengan menyeretnya di sekitar DOM Tree pada posisi yang Anda inginkan.

Dan Anda juga bisa memilih stylesheet tertentu atau bahkan membuat stylesheet baru – semuanya tanpa meninggalkan antarmuka Oxygen Visual Editor.

Selain membangun desain tampilan untuk halaman statis, Anda juga bisa melakukan hal yang sama pada halaman single post, archive, blog maupun halaman yang lain.

Dan itulah ulasan saya tentang Oxygen Visual Website Builder WordPress, Dan Anda bisa mempelajari tentang penggunaan Oxygen app yang sudah disediakan oleh Oxygen baik dalam bentuk tulisan maupun video di Oxygen Documentations.

Baca : Buat Website Super Keren dan Mudah Dengan WP Page Builder

Semoga artikel ini membantu Anda dalam menemukan tool yang hebat untuk membuat desain Website WordPress lebih keren dengan mudah dan cepat. Semoga bermanfaat dan selamat mencoba. 🙂

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.

Daftar isi Tutorial WordPress Terlengkap Gratis