Untuk membuat tombol berdampingan di Elementor dengan cara mudah menggunakan container bukan kolom, dengan mengikuti langkah-langkah dibawah ini kami bisa membuat tombol berdampingan menggunakan elementor.
Manfaat Tombol berdampingan pada website.
1. Penggunaan Ruang yang Efisien: Menempatkan tombol berdampingan membantu memanfaatkan lebar ruang layar dengan lebih baik, terutama pada desain responsif.
2. Aksesibilitas: Memudahkan pengunjung website untuk melakukan tindakan dengan lebih cepat, seperti mengonfirmasi, memilih dan lainya.
3. Desain yang Menarik: Memberikan estetika yang lebih baik dan modern pada tampilan website, menciptakan kesan profesional dan tidak kaku.
4. Peningkatan Konversi: Dengan menempatkan tombol-tombol yang relevan berdekatan, pengguna lebih cenderung melakukan tindakan yang diinginkan, seperti membeli, mendaftar atau login.
5. Konsistensi UX: Memudahkan untuk bernavigasi dan pemahaman fungsi setiap tombol.
Dengan mempertimbangkan manfaat ini, desain tombol berdampingan bisa sangat efektif dalam meningkatkan interaksi pengguna di website. Berikut adalah langkah-langkah membuat tombol berdampingan menggunakan elementor.
1. Buka Halaman di Elementor: Masuk ke halaman yang ingin kamu edit lalu klik Edit with Elementor.
2. Tambahkan Container: Seret widget container dari panel widget ke area yang ingin kamu tempatkan tombol.
3. Tambahkan Tombol
Seret tombol atau button kedalam container.
Ulangi langkah ini di kolom kedua untuk menambahkan tombol kedua, atau ketiga dan ke empat dan anda tidak perlu membuat kolom karena kita akan menggunakan container.
Hasil sementara secara default tombol atau button akan berada atas bawah tidak berdampingan.
4. Sesuaikan Tombol
Klik pada masing-masing tombol untuk mengedit teks, tautan, dan gaya tombol (warna, ukuran, dll.) sesuai keinginanmu. Pastikan untuk mengatur margin dan padding agar tombol terlihat rapi dan berdampingan dan jangan lupa memberikan link agar ketika di klik tombol tersebut berfungsi.
5. Klik Direction
Setelah selesai melakukan pengaturan tombol, klik pada container kemudian atur direction pilih row horizontal. Maka tombol akan berjejer secara horizontal.
6. Simpan Perubahan: Setelah semua sesuai, jangan lupa untuk menyimpan atau menerbitkan perubahan yang telah kamu buat.
Dengan langkah-langkah ini, kamu seharusnya bisa membuat tombol berdampingan di Elementor menggunakan container dengan mudah dan cepat Jika ada yang ingin ditambahkan atau butuh bantuan lebih lanjut, silakan beri tahu.
Cara mengembalikan elemen widget kolom/inner section yang hilang pada elementor dengan mudah dan cepat. Bagi anda yang terbiasa menyusul halaman website dengan kolom/inner section tentunya merasa kehilangan dikarenakan masih awam dengan container dan grid yang sekarang menggantikan inner section. Meskipun dengan container kita dapat lebih cepat dan fleksibel, namun jika sudah terbiasa bertahun-tahun menggunakan inner section maka akan dirasa cukup aneh dan membingungkan.
Inner Section di Elementor dapat untuk membagi konten dalam layout, membuat kolom yang lebih kompleks. Dengan menggunakan Inner Section, kamu bisa menempatkan beberapa kolom di dalam satu kolom utama untuk menempatkan widget sesuai keinginan anda. Berikut adalah beberapa fungsi dan manfaatnya:
Pengaturan Tata Letak: Memungkinkan kamu untuk membuat struktur yang lebih fleksibel, seperti menempatkan beberapa elemen dalam satu kolom.
Desain Responsif: Memudahkan pengaturan tampilan di berbagai perangkat dengan memungkinkan penyesuaian untuk setiap kolom menggunakan Inner Section.
Kustomisasi Kolom: Setiap kolom dalam Inner Section bisa diatur secara individual, baik dari segi lebar, margin, padding dan pengaturan gaya masing-masing kolom.
Pengelompokan Konten: Membantu dalam mengorganisasi konten secara visual, sehingga lebih mudah bagi pengunjung untuk memahami informasi yang disajikan.
Dengan menggunakan Inner Section, kamu bisa membuat desain yang lebih dinamis dan menarik sesuai kebutuhan situs webmu. Namun fitur ini secara default sudah digantikan dengan container dikarenakan menggunakan inner section tidak dapat membalik tata letak dalam mode responsive. Selain itu inner section adalah metode lama yang membuat website anda mengalami loading yang lebih lama karena harus membaca banyak kolom.
Cara Mengembalikkan Inner Section Pada Elementor
Mengembaikan inner section sangatlah mudah dan mempercepat pekerjaan anda bagi yang sudah terbiasa menggunakanya. Berikut langkah-langkah nya :
1. Masuk kemenu elementor lalu klik setting
2. Klik tab features
Selanjutnya klik tab feature seperti gambar dibawah ini
3. Deactivated Flexbox
Scroll kebawah kemudian cari Grid Container kemudian klik deactivated, lalu jangan lupa menyimpan perubahan.
Setelah melakukan penyimpanan kemudian anda kembali masuk ke halaman edit dengan elementor maka inner section akan muncul kembali. Selamat mencoba..
Saat ini teknologi desain website lebih memanjakan karena dalam pembuatanya lebih mudah, cepat dan tidak memakan waktu yang lama hasilnya juga keren dan bisa dipelajari juga tanpa harus memahami coding. Cara cepat dan mudah membuat halaman website yaitu menggunakan plugin elementor yang tersedia gratis maupun ada juga yang berbayar.
Pada artikel kali ini UltraWeb akan memberikan Panduan Bikin Website Dengan Elementor 2024, bagaimana cara install, menggunakan dan mengisi konten setiap halaman website. Ok, kami menganggap anda sudah memiliki domain hosting dan sudah terinstall cms WordPress, selanjutnya langkah pertama anda harus menginstall plugin elementor.
1. Install Plugin Elementor
Arahkan mouse anda ke menu plugin lalu klik tambahkan plugin, setelah itu kemudian cari plugin dengan memasukkan kata kunci dipencarian yaitu elementor.
setelah muncul “elementor website builder – more than just a page builder” kemudian klik install kemudian aktifkan dan tunggu proses nya hingga proses install selesai.
2. Buat Halaman Baru
Langkah kedua setelah elementor terinstall yaitu kita membuat halaman dimana halaman ini nanti berguna untuk membuat desain website anda.
Arahkan mouse ke menu pages kemudian klik add new pages.
Isi judul halaman seperti contoh diatas misalkan “Beranda”
Kolom template pilih Elementor Full Width
Klik Publish
Klik Edit with elementor
Setelah selesai proses diatas, tunggu sebentar anda akan diarahkan ke edit halaman dengan elementor kemudian bisa kita mulai membuat desain nya.
3. Membuat Desain Halaman
Membuat halaman desain dengan elementor kita bisa menambahkan berbagai block yang sudah disediakan seperti gambar, tulisan, icon, kolom, pengaturan responsive dan lainya.
3.1 Pilih struktur
Pertama kita tentukan struktur halaman website yang ingin kita bangun, pilih struktur atau kolom dengan cara klik tanda + seperti gambar berikut :
kita akan mencoba membuat dengan struktur 1 kolom, atau anda juga bisa mencoba stryktur lain sesuai gambar diatas. Klik struktur kolom yang anda pilih kemudian akan muncul halaman tambah block elementor.
3.2 Tambahkan Elemen Block
klik icon + seperti gambar diatas, kemudian akan muncul pilihan block disisi kiri, pilih block yang ingin anda tambahkan. Kita akan mencoba block elementor image carrousel, langsung saja kita klik image carrousel.
tambahkan beberapa gambar/upload gambar dengan cara klik icon + lalu kita cari gambar dari laptop kita kemudian upload.
setelah gambar terupload, jangan lupa pilih image resulution large agar gambar bisa tampil bagus dan tidak pecah.
3.3 Ulangi lagi langkah pada nomor 3.1 untuk menambahkanelementor block lain dan juga struktur yang berbeda seperti text, heading, gambar, icon dan masih banyak lagi yang sudah disediakan elementor.
Untuk menyimpan pengaturan anda silakan klik Update seperti pada gambar diatas. Setelah itu anda dapat melihat hasil tata letak/desain halaman yang anda buat dengan klik preview / icon mata disebelah tombol Update berwarna pink.
Apabila anda masih bingung, silakan simak video berikut untuk lebih jelasnya. Semoga Bermanfaat
