Membuat Tampilan Mobile Dua Kolom Elementor


2 menit

Dengan Elementor, kamu dapat membuat berbagai desain dengan mudah, salah satunya adalah membuat tampilan mobile dua kolom Elementor yang akan kita bahas dalam artikel ini.

Membuat Tampilan Mobile Dua Kolom Elementor - 0

Untuk melakukan ini, kamu tidak perlu atau tidak harus menggunakan Elementor Pro dan juga tidak harus memahami basic coding apapun, namun hanya perlu mengikuti artikel ini saja.

Cara Membuat Tampilan Mobile Dua Kolom Elementor

Jadi langsung saja, tanpa penjelesan lebih lanjut yang mungkin kamu tidak perlu, langsung saja kita ke langkah-langkah membuat tampilan mobile dua kolom Elementor.

1. Buat atau Edit Halaman

Lankah pertama yang perlu kamu lakukan tentu saja membuat atau mengedit halaman atau post yang sudah ada melalui Dashboard WordPress.

Namun apabila kamu belum pernah membuat halaman atau post, maka kamu bisa menambahkannya dari menu Pages > Add New Page untuk halaman, atau Posts > Add New Post untuk menambahkan artikel atau post.

Membuat Tampilan Mobile Dua Kolom Elementor - 1-1

Setelahnya, kamu bisa mengedit halaman tersebut menggunakan Elementor dengan cara klik tombol Edit with Elementor.

Membuat Tampilan Mobile Dua Kolom Elementor - 1-2

2. Buat Kontainer

Setelah berada diahalaman Elementor, selanjutnya kamu bisa membuat kontainer baru, dan karena disini kita akan membuat 2 kolom pada tampilan mobile, maka kamu perlu memilih setidaknya 2 kontainer atau lebih. Misalnya disini menggunakan 4 kontainer awal

Membuat Tampilan Mobile Dua Kolom Elementor - 2-1

3. Tambahkan Konten pada Kontainer

Selanjutnya kamu bisa menambahkan konten apapun didalam kontainer tersebut. Misalnya disini kontainer 1 dan 3 berisi gambar, kemudian kontainer 2 dan 4 akan berisi teks.

Membuat Tampilan Mobile Dua Kolom Elementor - 3-1

4. Ubah Tampilan ke Mobile

Karena disini kita membuat tampilan mobile dua kolom Elementor, maka kita perlu mengubah tampilannya menjadi tampilan mobile.

Untuk melakukan ini, kamu bisa membuka opsi Resposive Mode, kemudian pilih tampilan mobile

Membuat Tampilan Mobile Dua Kolom Elementor - 4-1

5. Sesuaikan Setiap Kontainer

Sekarang karena kamu sudah berada didalam tampilan mobile, maka kamu bisa menyesuaikan tampilan dari setiap kontainer supaya menjadi 2 kolom dengan cara klik opsi Edit Container yang berada di pojok kiri-atas setiap kontainer

Membuat Tampilan Mobile Dua Kolom Elementor - 5-1

Selanjutnya, ubah ukurang Width dari px menjadi persen (%)

Membuat Tampilan Mobile Dua Kolom Elementor - 5-2

Sekarang, kamu hanya perlu mengubah semua ukuran kontainernya menjadi 50% dan tampilan akan berubah menjadi 2 kolom

Membuat Tampilan Mobile Dua Kolom Elementor - 5-3

Sebenarnya, kamu tidak harus menggunakan ukuran 50%, tapi kamu bisa juga mengubahnya dengan ukuran lain sehingga ketika dijumlahkan dari 2 kolom tersebut akan menjadi 100%, misalnya membuat ukuran 20% + 80%

Membuat Tampilan Mobile Dua Kolom Elementor - 5-4

6. Publish Halaman

Apabila kamu sudah yakin dengan desain yang kamu buat, maka kamu bisa langsung menerbitkan halaman tersebut, atau bisa juga menambahkan desain lain supaya lebih menarik, misalnya menambahkan hero slider menggunakan Elementor.

Ngebantu gak nih??

0 / 0


Terima kasih telah berkunjung ke WPGan.com. Dapatkan saldo $100 di Vultr gratis dan deploy servermu sendiri melalui [Halaman Ini]
Share: