Apakah Anda baru mengenal wadah Elementor Flexbox? Jadi struktur tata letak pembuat halaman baru bisa sedikit membingungkan. Tapi kami memiliki apa yang Anda butuhkan.
Elementor Flexbox adalah kerangka tata letak baru yang membuat desain situs web lebih mudah dan ramah pengguna. Kontainer Flexbox menandai pembaruan bertahap pada tata letak kolom bagian lama yang kita semua kenal.
Meskipun tata letak bagian-kolom membuat desain situs web menjadi praktis dengan menggunakan bagian, subbagian, dan kolom, masih terdapat kekurangan fleksibilitas dalam hal desain.
Bagian di Elementor hanya dapat memiliki kolom dan subbagian. Semakin banyak Anda menambahkan ke halaman, semakin lambat memuat situs web Anda.
Belum lagi betapa sulitnya membuat desain mobile-friendly dengan struktur lama ini.
Meskipun tata letak bagian dan kolom telah membantu desainer dengan baik, inilah saatnya beralih ke cara yang lebih baik, lebih efisien, dan lebih fleksibel dalam mendesain situs web menggunakan pembuat halaman Elementor.
Jadi, jika Anda ingin menguasai container Flexbox, tandai blog ini. Dalam panduan Elementor Flexbox ini, kami akan memandu Anda melalui semua detail struktur tata letak baru ini.
Kami juga akan memahami bagaimana ini lebih baik daripada tata letak bagian-kolom yang lama.
Daftar isi
- Apa itu wadah Elementor Flexbox?
- Perbedaan antara bagian lama dan wadah Elementor Flex baru
- Manfaat menggunakan wadah Elementor Flexbox
- Cara Menggunakan Kontainer Elementor Flexbox (Langkah demi Langkah)
- Langkah 1. Aktifkan Flexbox di Pengaturan Elementor
- Langkah 2. Buat Halaman Web Baru
- Langkah 3. Buka Elementor
- Langkah 4. Tambahkan Kontainer Baru
- Langkah 5. Beri gaya pada Wadah
- Langkah 6. Seret dan lepas widget ke dalam wadah
- Langkah 7. Sesuaikan Widget
- Langkah 8. Publikasikan halaman web Flexbox pertama Anda
- Bagaimana cara mengubah halaman Elementor berbasis bagian menjadi wadah Flexbox?
- Bisakah saya menggabungkan add-on Elementor dengan wadah flexbox baru?
- Kesimpulan
- Pertanyaan yang Sering Diajukan
Apa itu wadah Elementor Flexbox?
Kontainer Elementor Flexbox adalah implementasi Elementor dari template Flexbox CSS di pembuat halamannya. CSS Flexbox atau Tata Letak Kotak Fleksibel adalah tata letak web baru yang didukung oleh CSS 3.
Ini dioptimalkan untuk kinerja dan daya tanggap, menawarkan tata letak yang beradaptasi dengan berbagai perangkat dan ukuran layar.
Dirilis dengan pembaruan Elementor 3.6, Elementor Flexbox Containers memungkinkan Anda mendesain halaman web yang ramah perangkat menggunakan container seperti Flexbox CSS.
Wadah Elementor ini berisi semua elemen halaman Anda seperti teks, gambar, widget, dll. Namun inilah bagian terbaiknya: Anda bisa meletakkan wadah di dalam wadah.
Jika Anda pernah menggunakan tata letak bagian-kolom standar, Anda pasti tahu betapa sulitnya bekerja dengan banyak tata letak.
Meskipun kami mendapatkan semua jenis tata letak seperti blok, tabel, inline, dll., bekerja dengannya merepotkan dan sulit untuk memastikan daya tanggapnya.
Namun, dengan Flexbox, Anda dapat menempatkan container di dalam container tanpa batas. Hal ini dapat menciptakan kemungkinan tak terbatas dalam hal tata letak dan desain yang unik.
Sederhananya, container adalah bagian baru Anda, namun fleksibel baik pada tingkat individu maupun global. Fleksibilitas ditemukan di hampir setiap aspek wadah, baik itu penyelarasan, bantalan, atau pemosisian sejajar.
Kasus Penggunaan Umum untuk Kontainer Flexbox
Berikut adalah beberapa kasus penggunaan populer untuk wadah Flexbox:
1. Bagian Reguler
Sebuah situs web terutama dibagi menjadi beberapa bagian seperti pendahuluan, pahlawan, ajakan bertindak, dll. Kontainer memberikan lebih banyak fleksibilitas saat merancang salah satu bagian ini. Anda dapat menambahkan gambar, menempatkan teks, dan tombol yang dapat diklik. Pada saat yang sama, Anda dapat mengontrol arah, perataan, dan jarak konten Anda.
2. Tata Letak Kartu
Karena kontainer Flexbox dapat menampung beberapa kontainer dalam baris dan kolom, kontainer tersebut biasanya digunakan untuk membuat tata letak kartu. Anda memiliki kendali penuh atas penyelarasan, jangkauan, dan berpakaian. Selain itu, wadah Elementor bersarang memungkinkan Anda menempatkan widget konten berbeda di setiap kartu.
3. Galeri Gambar Pahlawan
Kemampuan untuk menyarangkan container anak di dalam container induk tanpa batas waktu menjadikan Flexbox ideal untuk membuat galeri gambar. Anda dapat membuat galeri dengan aliran gambar horizontal atau vertikal. Selain itu, Anda dapat mengontrol spasi antar gambar, ukuran setiap gambar, dan bahkan menambahkan elemen seperti teks, tombol, dll.
4. Templat Pembuat Tema
Kontainer sangat bagus untuk membuat template untuk elemen seperti header, footer, atau halaman tunggal. Anda dapat menggunakan container untuk membuat tata letak dasar untuk elemen ini dan menyimpannya. Kemudian Anda dapat menggunakannya saat Anda membuat lebih banyak halaman. Selain itu, konten dalam penampung bersifat mobile-friendly, sehingga halaman yang dibuat menggunakan template ini akan beradaptasi dengan ukuran layar yang berbeda.
5. Elemen Terpusat
Dalam struktur bagian-kolom, memusatkan elemen secara vertikal pada suatu bagian agak sulit. Namun, container membuat tugas ini lebih mudah. Anda dapat mengatur properti perataan dan pembenaran ke tengah untuk menempatkan elemen di tengah wadah.
Perbedaan antara bagian lama dan wadah Elementor Flex baru
Mari kita lihat perbedaan utama antara wadah Elementor dan bagian berbagai pengaturan.
1. Perbedaan teknis
Bagian elemen menyediakan kerangka struktural untuk mengatur elemen seperti widget, gambar, teks, dll. Anda dapat membagi bagian menjadi beberapa kolom dan menempatkan elemen halaman web di dalamnya.
Sebaliknya, wadah Elementor Flexbox menawarkan cara yang lebih fleksibel dan adaptif untuk mengatur elemen halaman web. Wadah itu seperti bagian tetapi tanpa kisi-kisi yang telah ditentukan sebelumnya.
Sebagai gantinya, Anda memiliki opsi untuk menempatkan kontainer di dalam kontainer.
Selain itu, widget di bagian memiliki lebar penuh, sedangkan di dalam wadah widget tersebut sejajar secara default. Oleh karena itu, Anda dapat menempatkan elemen sebanyak yang Anda inginkan dalam wadah induk.
Dan saat Anda menambahkan lebih banyak elemen, perataan, posisi, dan ukuran wadah akan otomatis berubah untuk mengakomodasi elemen tersebut.
2. Perbedaan visual
Langkah selanjutnya tentang perbedaan antara wadah dan bagian Elementor adalah perubahan visual.
Pembuat halaman elemen dengan wadah Flexbox mempertahankan UI pembuat halaman klasik. Namun ada beberapa perubahan penting.
Anda masih memiliki dasbor di sisi kiri, tempat Anda dapat mengakses semua widget, elemen, dan pengaturan. Namun browser sekarang menampilkan container dan elemen di bawahnya, bukan pemisahan dan bagian.
Anda selalu dapat mengklik ikon tersebut + atau seret dan lepas elemen untuk menambahkannya ke halaman web Anda. Satu-satunya perbedaan adalah Anda harus memilih wadah dan arah, bukan bagian dan jumlah kolom.
Selain itu, Anda juga mendapatkan opsi baru yang berpusat pada wadah seperti arah, penyelarasan, pembenaran, celah elemen, lengkungan, dll…
![Perbedaan Visual Cara Menggunakan Elementor Flexbox Container [Panduan Pemula]](https://blogpascher.com/wp-content/uploads/2024/09/conteneur-Elementor-Flexbox.png "Perbedaan Visual | Add-on Plus untuk Elementor")
3. Perbedaan kinerja
Perbedaan kinerja antara wadah Flexbox dan tata letak bagian-kolom sangat besar, terutama jika desain situs web Anda penuh dengan tata letak dan subbagian yang rumit.
Anda pasti telah memperhatikan bahwa bagian tradisional Elementor memiliki properti tampilan yang disetel sebagai “ blok ". Oleh karena itu, saat Anda menambahkan bagian atau widget baru, bagian atau widget tersebut akan bertumpuk satu sama lain.
Jika Anda ingin menampilkannya secara berdampingan, Anda harus membuat beberapa pemisahan dan DOM, yang memperlambat situs web akhir Anda.
Di sisi lain, kontainer Flexbox menggunakan properti tampilan yang disebut " melenturkan", seperti dalam fleksibel. Jadi saat Anda menambahkan komponen baru ke dalam wadah, Anda dapat menumpuknya secara vertikal atau meletakkannya berdampingan secara horizontal.
Oleh karena itu, tidak perlu membuat divisi tambahan. Dengan cara ini, kode halaman web tetap mudah dieksekusi, sehingga mengurangi waktu pemuatan secara signifikan.
Manfaat menggunakan wadah Elementor Flexbox
Ada beberapa keuntungan menggunakan wadah Flexbox dibandingkan blok tradisional untuk desain situs web. Beberapa manfaat utamanya adalah:
1. Kontrol tata letak granular
Kontainer Flexbox memberikan kontrol tingkat tinggi terhadap posisi dan tata letak konten. Anda dapat dengan mudah membuat tata letak horizontal atau vertikal. Selain itu, Anda dapat mengatur arah konten, perataan, padding, lebar, dll., pada tingkat elemen individual dan pada tingkat global.
2. Tata Letak Responsif Perangkat
Bagian fleksibel baru dirancang untuk perangkat kecil. Anda dapat mengubah tata letak sesuka Anda untuk berbagai ukuran layar, termasuk desktop, tablet, dan seluler. Oleh karena itu, semua konten di halaman web Anda cocok untuk berbagai perangkat dan mudah diakses oleh pengguna akhir.
3. Bersihkan markup
Seperti yang dijelaskan sebelumnya, membuat beberapa bagian atau pembagian horizontal dengan properti tampilan blok akan membuat DOM membengkak dan mengacaukan markup. Namun, wadah Flex memungkinkan penempatan konten secara horizontal tanpa memerlukan kolom dan bagian. Hal ini membuat kode website mudah dijalankan dan dimuat lebih cepat di berbagai perangkat.
4. Bagian Bersarang Tak Terbatas
Keterbatasan terbesar pembuat blok tradisional adalah ia hanya dapat menampung satu subbagian dalam satu bagian. Namun, Flexbox memungkinkan Anda menambahkan wadah di dalam wadah tanpa batas. Jadi Anda dapat membuat tata letak yang lebih kompleks tanpa masalah atau mengacaukan markup dengan DOM yang berlebihan.
5. Bagian yang Dapat Diklik
Sebelumnya, Anda hanya dapat membuat widget di satu bagian dapat diklik, bukan seluruh bagian. Namun dengan Flex Containers, Elementor memungkinkan Anda membuat hyperlink ke seluruh bagian. Ini adalah fitur penting dari sudut pandang pengguna akhir, karena mereka tidak perlu lagi mencari elemen tertentu yang dapat diklik untuk berpindah ke halaman lain, melainkan mengklik bagian tersebut.
Cara Menggunakan Kontainer Elementor Flexbox (Langkah demi Langkah)
Pengalaman pembuat halaman Elementor Flexbox mirip dengan pembuat blok Elementor standar. Jadi apakah Anda benar-benar baru mengenal Elementor atau beralih dari pembuat lama, Anda tidak akan kesulitan untuk membiasakannya.
Anda mungkin memiliki berbagai pertanyaan, seperti: “Bagaimana cara mengaktifkan/mengaktifkan container di Elementor?” Bagaimana cara menggunakan wadah di Elementor? Bagaimana cara menambahkan wadah di Elementor? » Bagian ini akan membantu Anda menjawabnya.
Untuk membantu Anda memulai, berikut langkah-langkah menggunakan wadah Flexbox untuk mendesain situs web:
Langkah 1. Aktifkan Flexbox di Pengaturan Elementor
Langkah pertama untuk menggunakan Flexbox di Elementor adalah mengaktifkan Flexbox. Jadi, buka pengaturan Elementor dari dashboard WordPress. Selanjutnya, klik pada tab Experience, gulir ke bawah, temukan wadah Flexbox dan pilih opsi Aktif dari menu drop-down. Terakhir, simpan perubahan dan lanjutkan ke langkah berikutnya.
Catatan: Di situs web baru, wadah Flexbox aktif secara default.
Langkah 2. Buat Halaman Web Baru
Sekarang kita perlu membuat halaman baru seperti biasa. Buka bagian Halaman, pilih Semua Halaman, dan klik Tambahkan halaman.
Langkah 3. Buka Elementor
Anda sekarang akan memiliki jendela pembuat halaman WordPress di layar Anda. Beri judul pada halaman baru ini dan klik Edit dengan Elementor untuk mengakses kontainer Flexbox.
![Open Elementor: Cara Menggunakan Elementor Flexbox Container [Panduan Pemula]](https://blogpascher.com/wp-content/uploads/2022/11/Modifier-avec-Elementor.png "Buka Elementor | Add-on Plus untuk Elementor")
Langkah 4. Tambahkan Kontainer Baru
Antarmuka pengguna pembuat halaman Elementor yang familier akan muncul di layar Anda. Selain itu, Anda dapat menarik dan melepas penampung dari sidebar untuk menambahkan penampung baru atau mengklik ikon + dan pilih struktur yang diinginkan.
![Tambahkan wadah baru cara menggunakan wadah Elementor Flexbox [panduan pemula]](https://blogpascher.com/wp-content/uploads/2024/09/Ajouter-un-nouveau-conteneur.gif "Tambahkan Kontainer Baru | Add-on Plus untuk Elementor")
Langkah 5. Beri gaya pada Wadah
Setelah Anda menambahkan penampung, Anda dapat mengakses banyak opsi penyesuaian. Anda dapat mengubah opsi seperti jenis wadah, lebar, tinggi, arah, perataan, dll.
![Styling Container Cara Menggunakan Elementor Flexbox Container [Panduan Pemula]](https://blogpascher.com/wp-content/uploads/2024/09/Styliser-le-conteneur.png "Sesuaikan gaya wadahnya » BlogPasCher")
Langkah 6. Seret dan lepas widget ke dalam wadah
Menambahkan widget ke container juga sederhana. Cukup pilih widget yang diinginkan dari tab Elemen, lalu seret dan lepas ke ikon + di dalam wadah.
![Seret dan lepas widget ke dalam wadah cara menggunakan wadah Elementor Flexbox [panduan pemula]](https://blogpascher.com/wp-content/uploads/2024/09/Glisser-deposer-des-widgets-dans-des-conteneurs.gif "Seret dan Lepas Widget ke Kontainer | Add-on Plus untuk Elementor")
Langkah 7. Sesuaikan Widget
Seperti pengaturan penampung global, Anda juga dapat menyesuaikan konten penampung. Anda dapat menyesuaikan opsi seperti arah, perataan, pembenaran, celah, bungkus, dll.
Langkah 8. Publikasikan halaman web Flexbox pertama Anda
Anda dapat membuat banyak container, menduplikasinya, dan menukar lokasinya. Ulangi langkah-langkah tersebut saat Anda menambahkan lebih banyak item, dan setelah selesai, klik tombol menerbitkan untuk membuat halaman web Anda online. Anda juga dapat mengklik tombol Pratinjau untuk berinteraksi dengan halaman web Flexbox baru Anda.
Bagaimana cara mengubah halaman Elementor berbasis bagian menjadi wadah Flexbox?
Anda dapat dengan mudah mengubah struktur bagian-kolom menjadi wadah Flexbox. Cukup ikuti langkah-langkah sederhana ini:
Langkah 1. Pilih bagian tersebut
Pilih bagian yang ingin Anda ubah menjadi wadah dengan mengklik enam titik di bagian atas bagian. Alternatifnya, Anda juga dapat memilih bagian di popup Elementor Navigator.
Langkah 2. Ubah Bagian menjadi Kontainer
Setelah Anda memilih bagian, Anda akan melihat tombol CONVERT di tab Layout. Klik untuk mengubah bagian tersebut menjadi wadah.
Langkah 3. Perbarui Tata Letak
Setelah konversi selesai, Anda akan melihat dua versi terpisah dari bagian yang dipilih. Bagian atas merupakan wadah asli, sedangkan bagian bawah merupakan wadah baru. Hapus bagian asli dan klik Perbarui untuk menyimpan tata letak.
Ulangi langkah-langkah untuk setiap bagian yang Anda rencanakan untuk diubah menjadi wadah.
Bisakah saya menggabungkan add-on Elementor dengan wadah flexbox baru?
Ya, Anda dapat menggabungkan add-on Elementor dengan wadah Flexbox. Tidak diperlukan solusi karena wadah Flexbox terintegrasi secara mulus dengan add-on dan plugin pihak ketiga.
Faktanya, add-on diperlukan untuk mengaktifkan fitur-fitur canggih dan opsi penyesuaian di pembuat halaman Elementor. Anda dapat menginstal
Sumber Daya terkait
- Cara menggunakan font global di Elementor
- Cara Membuat Tombol Mengambang dengan Elementor Z Index
- Cara Membuat Halaman 404 di Elementor
- Cara Membuat Akordeon Gambar dengan JetTabs di Elementor
- Cara Membuat Menu Layar Penuh di Elementor
Kesimpulan
Wadah Flexbox Elementor adalah alat canggih yang mengubah cara Anda mendesain dan menyusun halaman web Anda. Dengan fitur-fiturnya yang fleksibel, Anda dapat mengatur penyelarasan, distribusi danorganisasi elemen Anda dengan presisi luar biasa. Baik Anda ingin membuat tata letak yang rumit atau sekadar meningkatkan daya tanggap desain Anda, Flexbox menawarkan solusi yang elegan dan intuitif.
Dengan menggunakan wadah Flexbox, Anda memiliki akses ke berbagai kontrol yang mempermudah pengelolaan ruang dan perataan, sekaligus menyederhanakan penyesuaian yang diperlukan untuk presentasi yang lancar di semua perangkat. Tingkat penyesuaian ini tidak hanya meningkatkan pengalaman pengguna, namun juga mengoptimalkan proses desain dengan membuat halaman Anda lebih dinamis dan mudah beradaptasi.
Jangan ragu untuk menjelajahi berbagai opsi yang ditawarkan oleh Flexbox untuk mengetahui bagaimana mereka dapat memperkaya proyek Elementor Anda. Dengan penggunaan yang tepat dari alat-alat ini, Anda dapat membuat tata letak yang halus dan profesional yang memikat dan melibatkan pengunjung Anda. Teruslah bereksperimen dan manfaatkan kemungkinan yang ditawarkan oleh Elementor untuk mendapatkan hasil maksimal dari desain web Anda.
Jadi ! Kami baru saja menunjukkan cara menggunakan wadah Elementor Flexbox. Jika Anda memiliki kekhawatiran tentang cara menuju ke sana, beri tahu kami di dalam komentar.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
Pertanyaan yang Sering Diajukan
Apa perbedaan antara Flexbox Container dan Bagian di Elementor?
Bagian elemen menghosting widget lebar penuh di halaman, tetapi dengan wadah Flexbox, widget berada sebaris di dalam wadah. Selain itu, bagian-bagiannya kaku dan hanya dapat memiliki satu bagian interior, sedangkan wadah Flex dapat disarangkan tanpa batas waktu.
Bisakah saya menggunakan Elementor Flexbox Containers dengan tema WordPress apa pun?
Ya, Anda dapat menggunakan wadah Elementor Flexbox dengan wadah apa pun tema WordPress. Yang perlu Anda lakukan hanyalah mengaktifkan wadah Flexbox di pengaturan Elementor, dan wadah tersebut akan tersedia saat berikutnya Anda mengakses pembuat halaman.
Bagaimana saya bisa membuat wadah Elementor Flexbox saya responsif pada ukuran layar yang berbeda?
Dengan wadah Flexbox Elementor, Anda memiliki beberapa opsi untuk memastikan konten halaman web Anda responsif pada berbagai ukuran layar. Misalnya, Anda bisa memilih arah konten kontainer untuk menampilkan konten dalam baris atau kolom. Anda juga dapat menyelaraskan konten secara horizontal dan vertikal dan memutuskan kapan harus menggabungkan konten dalam setiap elemen. Selain itu, Anda juga dapat mengaktifkan/menonaktifkan widget berdasarkan perangkat.
