Cara Membuat Menu Di Luar Kanvas dengan Oxygen Builder

Artikel ini menjelaskan tentang cara pembuatan menu di luar kanvas pada website yang menggunakan CMS WordPress dan plugin Oxygen Builder
Bagikan:
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Loading...
How-to-Make-Off-Canvas-Menu-in-Oxygen-Builder
Updated: 31 Maret 2021
icon divider

Hi Sobat Digital! Ada sebuah desain menu yang saat ini terkadang digunakan di beberapa website baik di perangkat dekstop maupun perangkat seluler yaitu menu di luar kanvas.

Di artikel ini, kami akan membuat tutorial contoh pembuatan menu diluar kanvas yang menggunakan CMS WordPress dan plugin Oxygen Builder.

Latar Belakang

Latar belakang dari penulisan tutorial ini karena ada salah satu anggota dari Facebook Groups Oxygen Builder yang bertanya tentang bagaimana cara membuat menu di luar kanvas seperti yang dia inginkan dengan desain merujuk kepada website lain.

Kemudian kami mencoba membuatnya sebagai contoh bahwa Oxygen Builder (tanpa addons) bisa juga digunakan dalam pembuatan menu canvas seperti itu walaupun tidak 100% mirip karena masih ada kekurangannya. Tetapi orang tersebut mengatakan bahwa contoh yang kami buat sudah sesuai dengan yang dia inginkan dan bertanya bagaimana cara pembuatannya.

Baca juga: Oxygen Builder, Plugin Page Builder WordPress Terbaik?

Kami secara pribadi sudah berdiskusi dan memberikan beberapa petunjuk singkat tentang cara pembuatan canvas menu, namun diluar itu kami juga ingin berbagi lebih detail untuk umum tentang cara pembuatannya melalui artikel ini karena kami merasa bahwa banyak sekali pengetahuan yang dapat kami pelajari dari group tersebut dan itu membuat kami berpikir untuk membagikan kembali sedikit pengetahuan ini kepada orang lain.

Sekilas Tentang Menu di Luar Kanvas

Menu di luar kanvas adalah sebuah desain menu yang akan muncul ketika kita mengklik suatu elemen dan biasanya muncul dengan efek geser (slide) karena itulah dianggap sebagai di luar kanvas.

Kelebihan menu di luar kanvas adalah kita bisa menghemat tempat dari layar yang ada karena hanya perlu 1 elemen kecil sebagai pemicu untuk memunculkan sebuah komponen yang lebih besar dan bisa berisi berbagai banyak elemen lainnya termasuk diantaranya adalah elemen menu.

Website kami ini juga menggunakan menu di luar kanvas 😀

Contoh Desain

Catatan: Desain yang kami gunakan sebagai referensi berasal dari website lain (minifyme.co.uk). Kami menggunakannya sebagai contoh untuk keperluan tutorial ini.

Untuk tutorial ini, desain yang akan menjadi referensi dan telah kami buat sebelumnya adalah seperti video dibawah :

Beberapa Catatan

Ada beberapa catatan yang perlu mendapat perhatian anda pada video tutorial yang kami buat, diantaranya adalah:

  1. Menu diluar kanvas dibuat dengan menggunakan element "Modal"
  2. Efek geser pada modal dibuat menggunakan efek Slide Right pada Animated On Scroll
  3. Tutorial ini hanya contoh sederhana saja untuk mendapatkan gambaran tentang langkah-langkah yang harus dilakukan.
  4. Search form di kustomisasi dengan elemen code block, kami ambil ide dan sebagian kodenya dari video tutorial "How To Make A Search Icon With Animated Field Reveal In Oxygen"

HTML

<!-- --> // mengosongkan elemen HTML dari "Hello World"

CSS

/* menghapus border pada input search */
#s {border:none;}

/* menghilangkan border ketika kita mengklik input search */
#s:focus {outline:none;}

/* menghapus tombol submit pada search (GO button) */
.oxy-search-form input[type="submit"] {display:none;}

/* membuat cursor pada icon search menjadi pointer (dapat di klik) */
#searchicon {cursor: pointer;} 

Javascript

// mengganti fungsi submit button dengan icon yang memiliki id searchicon

jQuery('#searchicon').on('click', function() {

jQuery('#searchsubmit').click();

});

Video Pembuatan Menu di Luar Kanvas

Penutup

Demikian tutorial tentang cara membuat menu di luar kanvas dengan WordPress yang menggunakan plugin Oxygen Builder.

Bagaimanapun juga apa yang telah kami buat hanyalah contoh sangat sederhana yang perlu dimodifikasi sesuai kebutuhan anda, misalnya bisa anda tambahkan ikon sosial media, keranjang belanja, kontak form ataupun elemen lainnya.

Dari tutorial ini, kita bisa melihat bahwa plugin Oxygen Builder adalah salah satu plugin builder yang sangat flexible, tanpa tambahan plugin atau addon lainnya kita sudah bisa membuat menu di luar kanvas.

Kami percaya bahwa pembuatan menu di luar kanvas ini ketika ditambah dengan ide yang orisinil, kreatifitas, imajinasi dan desain yang bagus, bisa menjadi sesuatu yang sangat menarik dan fungsional bagi pengunjung.

Bagaimana menurut anda? Apakah membuat menu di luar kanvas secara manual seperti ini termasuk sulit? Mungkin anda lebih memilih menggunakan plugin jadi ataupun teknik lainnya? Silahkan berikan pendapat anda dibawah.

Salam Digital!

Apakah anda membutuhkan tenaga lepas untuk mendesain, membuat, mengembangkan website atau mengkonversi dari desain website yang lama ke WordPress dengan Oxygen Builder?
Minta Penawaran

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

ARTIKEL TERBARU
Cara Membuat Menu Di Luar Kanvas dengan Oxygen Builder
Artikel ini menjelaskan tentang cara pembuatan menu di luar kanvas pada website yang menggunakan CMS WordPress dan plugin Oxygen Builder
Baca selengkapnya....
Konversi Website ke Oxygen Builder (Studi Kasus)
Apakah anda ingin mengkonversi website yang menggunakan Oxygen Builder? Berikut contoh kasus dan peningkatan kinerja hasil optimasinya.
Baca selengkapnya....
Bagaimana Cara Membuat Slider Dinamis dengan Flickity di Oxygen Builder Repeater?
Tutorial ini menjelaskan cara membuat slider dinamis menggunakan flickity yang digabungkan dengan elemen Oxygen Builder Repeater.
Baca selengkapnya....
PAKET LENGKAP PEMBUATAN WEBSITE
Digitalizer menawarkan jasa pembuatan website untuk company profile, toko online, event organizer, lembaga pendidikan ataupun bidang lainnya. Anda tidak perlu memikirkan tentang domain, webhosting/server, DNS, email, desain, development, security serta masalah teknis lainnya. Cukup siapkan content website anda saja, sisanya kami yang mengerjakannya.
Semua paket pembuatan website sudah termasuk maintenance 1 tahun!
HOT LINK!
logo digitalizer
© 2011 - 2021 Digitalizer My ID - Allright Reserved