Hai Buibu!
Selamat datang di kelas #JikaIbuMenjadi Web Developer (No Coding)
Pada topik ini, silakan Buibu gunakan untuk upload challenge, bertanya ataupun berdiskusi seputar Web Developer (No Coding)
Selamat berproses Bu!! 
Hai Bu Rani, salam kenal saya Nia, terimakasih sharing ilmunya, kukira akan butuh proses yang sangat menantang dan “njelimet” ternyata prosesnya cukup seru ya, berikut hasil kreasi saya Bu, Istania Prindasari https://dev-belajar-rani-ipm.pantheonsite.io/
Hai Bu Rani,
Perkenalkan saya Nindi. Terima kasih banyak ya, Bu atas ilmu yang sudah dishare serta tutorial lengkapnya menggunakan elementor dan pantheon 
Berikut link roleplay yang saya coba buat https://dev-belajar-rani-ipm.pantheonsite.io/nindia-happy-snack-kids/
Bu Rani, ada beberapa pertanyaan teknis yang muncul ketika saya membuat landing page, dan berdasarkan pengalaman yaitu :
-
Bagaimana memilih plugin yang tepat untuk kebutuhan kita? plugin wordpress banyak sekali. So far, saya tanya ke chatgpt dan mencoba masing2 plugin tersebut, namun sering tidak menemukan yang sesuai. Plugin apa saja yang biasanya selalu dibutuhkan secara umum bila menggunakan tools wordpress elementor?
-
Bagaimana cara membuat navbar dengan elementor free agar responsive di tampilan tablet dan handphone? Saya mencoba menggunakan plugin, dari video tutorial, 2 plugin sama2 membutuhkan creating menu pada dashboard > appearance > menu. Namun di dashboard tidak ada menu. Saya ingin membuat tampilan pada tablet dan handphone menjadi hamburger/kebab menu. Saya sertakan screenshootnya ya, Bu
a. SS menu yang ingin saya buat :
b. SS dashboard wordpress Bu Rani :
c. SS tampilan appearance agar dapat membuat menu menggunakan plugin yang aku coba :
-
Pada tampilan handphone, container gambar berada di bawah title & tagline. Saya coba mengubah gambar di atas container text, namun ternyata mengubah tampilan desktop dan tablet. Bagaimana mengubah posisi container ini di tampilan HP tanpa mengubah posisi di tablet dan desktop?
Berikut screenshootnya :
-
Bagaimana membuat harga jasa untuk penawaran membuat sebuah website menggunakan wordpress elementor? Apakah biaya elementor pro (bila membutuhkan pro) dibebankan kepada klien? Posisi kita belum tau membutuhkan plugin apa saja sesuai kebutuhan klien dan ada kemungkinan butuh plugin yang berbayar. Apakah bisa dishare berdasarkan pengalaman Ibu?
Demikian Ibu Rani. Terima kasih banyak sebelumnya
Halooo Bu Rani, salam kenal saya Ancilla, Terimakasih untuk sharing ilmunya. Tampak perlu latihan lagi supaya membuat web nya lebih luwes ^^;
Berikut hasil kreasi saya: Tugas Roleplay Ancilla
Hai bu Rani,
Berikut hasil roleplay saya: https://dev-belajar-rani-ipm.pantheonsite.io/happy-snack-kids/
Pada awal membuat page, saya pakai nama Happy Snack Kids, akibatnya domainnya happy snack kids juga 
Apakah domain ini bisa diganti jika page sudah dipublish?
Terima kasih sebelumnya, bu
Hai Bu Rani, salam kenal.
Perkenalkan aku Devi. Berikut hasil challenge role play:
Tugas Roleplay Devi
Sebelumnya saya mohon maaf karena sudah terlanjur membuat di domain ini. Disini saya coba kreasikan ulang from the scratch.
Terima kasih.
Halo Bu Rani, perkenalkan saya indah,
berikut hasil roleplay saya.
Roleplay Indah
saya ingin bertanya bu
- apabila pengaturan membaca disetting menjadi alamat situs, berarti domain hanya bisa mengarah ke halaman situs yang disetting ya bu? kemudian bagaimana dengan page lainnya?
- Apakah sebaiknya membuat website itu 1 hosting 1 domain? atau bisa beberapa domain seperti di roleplay ini, namun dengan domain yang membubuhkan nama page dibelakangnya?
- Bagaimana cara mengubah template website? apakah ada link yang berisi template-template website?
Terima kasih banyak bu
Hai Bu Rani…
Mengerjakan ini terasa challenging sekali. Menggunakan iPad seperti kurang support, karena beberapa tombol seringkali menghilang kadang tidak bisa di scroll. Apakah betul begitu ya Bu?
Tapi alhamdulillah selesai juga
Beberapa pertanyaan saya
- Bagaimana membuat tampilan desktop yang kita buat tetap responsif saat diakses melalui tablet atau hp, tanpa mengalami distorsi atau perubahan layout yang signifikan?
- Adakah tips mengatur jarak antar komponen Bu? Karena kan containernya tidak bisa di geser-geser
- Dalam pembuatan landing page, adakah best practice atau urutan elemen yang sebaiknya diikuti untuk memastikan pengalaman pengguna yang optimal?
Hai Bu Rani,
Sebelumnya saya minta maaf telat submit tugasnya karena kelupaan 
.
Berikut hasil roleplaynya:
Link: Happy Snack Kids - JIM (RainyK)
Terimakasih.
Hai Bu Nia!
Terima kasih sudah berbagi hasil kreasinya! Senang mendengar bahwa prosesnya terasa seru. Landing page yang Ibu buat sudah tampak rapi dan sesuai dengan brief.
Keunggulan:
- Struktur halaman sudah tertata dengan baik sesuai template yang diberikan.
- Hero section jelas dan informatif dengan tagline serta tombol CTA yang sudah berfungsi.
- Galeri produk tersaji dengan baik, dan gambar yang digunakan berkualitas tinggi.
Saran perbaikan kecil:
Bisa dilihat di gambar ya buu 
Secara keseluruhan, hasilnya sudah sangat baik untuk tahap awal! Jika ingin eksplorasi lebih lanjut, bisa coba bermain dengan efek transisi di Elementor. Semangat terus belajar, Bu Nia! 
1 Like
Hai Bu Nindi,
Waah terima kasih sudah explore banyak hal untuk pengerjaan roleplay ini.
Secara keseluruhan sudah bagus sekali hasil roleplaynya. Mungkin untuk lebih interaktif, bisa ditambahkan animation yang bisa ibu akses di bagian Advanced ya bu, saya sertakan screenshotnya di bawah
untuk testimonial, bisa dibuat lebih menarik juga dengan tampilan carousel. Tapi secara keseluruhan sudah bagus sekali bu, terima kasih
Untuk pertanyaannya saya jawab satu per satu ya bu
-
Untuk plugin memang banyak sekali bu, saat memilih plugin, chat GPT mungkin akan menyarankan beberapa plugin yang bisa ibu coba, namun ibu bisa pilih yang paling banyak diunduh dan paling baik “star” nya. Contohnya seperti gambar di bawah ini
Jika kita mengetikkan “form” pada pencarian, pasti akan keluar banyak sekali hasilnya, kalau dari screenshot, yang paling banyak diunduh dan paling baik ratingnya adalah “WP Form” ya bu, itu bisa menjadi pertimbangan ibu untuk memilih plugin. Dan juga pastikan ada check “Kompatibel dengan versi WordPress Anda” ya
Untuk plugin tambahan, kalau saya seringnya menggunakan Essential Addons for Elementor dan WPForm, plugin lain akan menyusul sesuai dengan request klien bu. -
Untuk menu memang hanya tampil jika ibu sudah install tema wordpress, misal “Astra” atau “Hello Elementor”, untuk caranya, bisa mengikuti tutorial di video ini yaa https://www.youtube.com/watch?v=CRVu_cqNnzE&pp=ygUldHV0b3JpYWwgaW5zdGFsbCB0ZW1hIGFzdHJhIHdvcmRwcmVzcw%3D%3D
-
Untuk mengganti posisi konten di mobile view, ibu bisa menggunakan perintah “order”. Klik container yang ingin ibu ubah posisinya, kemudian Advanced->Order
-
Membuat harga jasa untuk penawaran biasanya disesuaikan dengan kebutuhan klien. Akan lebih mudah jika klien sudah memiliki benchmark atau contoh website yang akan dibuat bu, jadi dari sana ibu bisa menganalisis kira-kira plugin apa yang dibutuhkan, apakah perlu berlangganan plugin pro atau tidak, dan sebagainya. Jika menggunakan elementor pro, biaya dibebankan kepada klien ya bu, namun jika klien tidak ingin menggunakan elementor pro bisa menggunakan tambahan plugin seperti elementor addons, dsb. Gunakan juga tema yang lengkap bu, seperti Astra contohnya.
Jika diringkas, sebagai berikut ya bu:
- Biaya dasar pembuatan website (misal, mulai dari Rp 1-3 juta untuk landing page sederhana).
- Tambahan fitur (e-commerce, membership, booking, dsb.).
- Hosting & domain (bisa direkomendasikan ke klien atau disertakan dalam paket).
- Plugin premium (Elementor Pro, Rank Math Pro, dsb.).
Semoga menjawab pertanyaan Bu Nindi ya
Haloo bu Ancila.
Makasih buu sudah submit tugas roleplaynya. Meskipun belum luwes tapi udah kece dan sesuai dengan brief
Ibu juga sudah explore dengan memberikan slide show image di bagian CTA bawah. Hanya saja mungkin opacity gambarnya bisa diperkecil bu agar tombol Pesan Sekarang nya lebih terlihat oleh pengunjung
Terus semangat belajar, Bu Ancilla! 
Halo Bu Hasni, terima kasih sudah berbagi tugasnya
Waah pemilihan warnanya menyenangkan dan ceria sekali. Cocok untuk produknya yang memang ditujukan untuk anak-anak
Hanya beberapa poin yang mungkin bisa menjadi perhatian ya bu
- Di bagian header section, setelah tagline, mungkin bisa disisipkan deskripsi singkatnya saja, karena jika terlalu panjang, akan nampak “penuh” dan tidak tersampaikan maksudnya
- Pemilihan warna font pada “Keunggulan Produk” mungkin perlu dipertimbangkan lagi karena agak “nyamari” dengan background. Ibu bisa memilih warna font yang lebih tua, atau mengubah backgroundnya menjadi sedikit lebih muda agar tulisan lebih mudah dibaca.
- Pemilihan warna untuk latar belakang tombol “CTA” di bagian bawah sudah bagus sekali, bu. Sehingga tombol kontras terlihat oleh pengunjung.
Jawaban untuk pertanyaan ibu, untuk domain tidak bisa diganti ya bu. Namun ibu bisa membuat domain baru dan mengarahkan website ibu dari domain lama ke domain yang baru ini. Namun untuk judul page bisa diganti bu. Ibu bisa masuk ke Laman-> pilih halaman ibu-> Edit Cepat
lalu tinggal isikan judul halaman ibu dan slug-nya. Slug adalah tulisan di belakang domain ya bu, ibu bisa edit di form di atas.
Semangat terus dalam belajar, Bu Hasni! 
Halo bu Devi
Wah terima kasih buu sudah coba buat di domain sendiri juga. It’s okay buu 
Berikut feedback dari saya ya bu:
Hal yang Sudah Bagus 
- Desain yang Eye-Catching dan Playful
- Ilustrasi header sangat menarik dan cocok untuk branding makanan anak.
- Warna-warna cerah dan elemen grafis memberi kesan ceria dan ramah untuk anak-anak.
- Struktur Halaman yang Jelas dan Menarik
- Hero section dengan ilustrasi besar langsung menyampaikan pesan utama.
- Produk best seller ditampilkan dengan ikon karakter lucu yang menarik perhatian.
- Informasi produk dan CTA (“Order Now”) sudah mudah ditemukan.
- Pemilihan Font yang Sesuai
- Font yang digunakan untuk judul dan deskripsi mudah dibaca serta sesuai dengan tema anak-anak.
- Informasi Produk Jelas
- Harga ditampilkan dengan jelas di bawah setiap produk.
- Tombol “Add to Cart” memiliki warna yang cukup menonjol.
Hal yang Bisa Ditingkatkan 
- Ukuran dan Tata Letak Gambar Produk
- Gambar produk di bagian “Our Product” terlihat kecil dan tidak terlalu menonjol. Bisa diperbesar atau diberikan layout yang lebih simetris.
- Tata Letak Teks pada Hero Section
- Kalimat “YOUR BABY BEST FRIENDS” di bagian kanan bawah bisa lebih diperjelas atau diposisikan ulang agar lebih terlihat.
- Bagian footer terasa agak padat, mungkin bisa diberi lebih banyak ruang untuk membuatnya lebih mudah dibaca.
Tapi secara keseluruhan sudah bagus sekali buu. Terima kasih sudah explore banyak hal
Kerja bagus, Bu Devi! Semangat terus untuk meningkatkan keterampilan desain web-nya!
Hai bu Indah
Terima kasih sudah submit roleplaynya
Beberapa feedback dari saya ya buu:
- Untuk pemilihan color pallete keseluruhan sudah bagus sekali, terlihat ceria dan sesuai dengan target marketnya.
- di Bagian tulisan nama brand dan tagline brand, mungkin perlu dipilih warna font yang lebih kontras bu, agar tidak “nyaru” saat dibaca dan lebih jelas
- tombol CTA di bagian header juga bisa banget dipilihkan warnanya yang lebih “mencolok mata” namun tetap cocok dengan color pallete agar bisa menarik perhatian pengunjung ya bu
- untuk tombol CTA di bagian bawah juga bisa dipilih warna yang lebih kontras, atau bisa menurunkan opacity dari background agar lebih menarik perhatian pengunjung
Secara keseluruhan, website ini sudah bagus dengan desain yang menarik dan sesuai target market. Hanya perlu sedikit perbaikan kecil di kontras warna dan tombol CTA agar lebih user-friendly.
untuk jawaban pertanyaan ibu:
- betul, domain hanya bisa mengarah ke halaman yang di setting. Maka dari itu biasanya yang ditampilkan adalah halaman utama (home). untuk halaman lain, ibu bisa membuat menu atau tombol yang mengarah ke halaman yang ingin dituju, bu.
- Jika untuk klien profesional, sebaiknya 1 hosting 1 domain, yang bisa terdiri dari beberapa page. Seperti dalam roleplay kita kali ini ya bu, 1 hosting, 1 domain (https://dev-belajar-rani-ipm.pantheonsite.io/), namun terdiri dari banyak page hasil roleplay ibu-ibu
- Untuk mengubah template website, ibu bisa ikuti tutorial ini ya bu
https://www.youtube.com/watch?v=k5JrnJK4u-A&pp=ygUeY2FyYSB1cGxvYWQgdGVtcGxhdGUgd29yZHByZXNz0gcJCb0Ag7Wk3p_U
Semoga menjawab Bu Indah
Halo bu Ainul,
Wah meskipun prosesnya menantang, tapi hasilnya kece banget lho bu. Ibu sudah explore banyak banget fungsi bahkan membuat tampilan baru. Masyaa Allah. Salut banget!! Good job bu Ainul
Sejujurnya saya bukan pengguna iPad, bu, sehingga tidak ada gambaran. Namun saya coba buka melalui HP (browser Google Chrome), bisa di klik bagian titik 3, lalu di check di Situs Desktop bisa membuat tampilannya hampir sama seperti jika kita membuka di desktop bu, apakah di browser iPad juga ada fitur tersebut, jika ada mungkin bisa dicoba ya bu
Secara keseluruhan websitenya sudah menarik sekali, pemilihan warna, konten juga sudah pas, hanya mungkin untuk tombol “Coba Sekarang” di bagian header bisa dipilih warna yang lebih kontras, misalnya merah, agar lebih mudah dilihat
Sekarang jawaban pertanyaan ibu ya:
- untuk mengubah layout sesuai device, ibu tidak perlu melakukan drag n drop container untuk mengubah layout, sesuaikan dengan margin, padding, align self, dan order saja ya bu
Begitupula untuk mengatur jarak antar komponen, sesuaikan saja bagian margin dan paddingnya ya - Ibu bisa mengikuti urutan elemen di bawah ini untuk diaplikasikan di landing page ibu ya
1. Hero Section (Bagian Atas)
- Menampilkan headline utama yang jelas & menarik.
- Bisa ditambah subheadline atau sedikit deskripsi.
- Gunakan gambar/foto yang menarik.
2. Value Proposition (Kenapa Harus Memilih Produk Ini?)
- Jelaskan manfaat utama produk/jasa yang ditawarkan.
- Bisa dalam bentuk ikon dengan deskripsi singkat (misalnya “Bahan Alami”, “Tanpa Pengawet”).
3. Produk atau Penawaran Utama
- Tampilkan produk/layanan dengan deskripsi singkat dan harga (jika perlu).
- Gunakan CTA (Call to Action) yang jelas seperti “Pesan Sekarang”.
4. Testimoni atau Social Proof (opsional, jika ada lebih baik)
- Tampilkan testimoni pelanggan atau bukti kepercayaan (misalnya rating, jumlah pelanggan).
5. Call to Action (CTA) yang Jelas
- Bisa berupa tombol “Hubungi Kami”, “Dapatkan Promo”, atau “Coba Sekarang”.
6. Kontak & Footer
- Tampilkan informasi kontak yang mudah diakses (WhatsApp, email, lokasi).
Sekian ya bu Ainul, semoga membantu 
1 Like
Halo bu Fenti,
Wah terima kasih sudah submit hasil roleplay buu.
Berikut feedback dari saya yaa:
-
Untuk pemilihan color pallete sudah bagus buu. Pemilihan warna font juga sudah jelas, hanya saja mungkin di bagian header sectionnya warna font dibuat lebih gelap atau backgroundnya sedikit lebih dimudakan warnanya bisa ya bu agar tulisannya semakin mudah dibaca
-
di bagian galeri produk, untuk harga produknya ada yang bold ada yang regular ni bu tulisannya, hihi. Mungkin bisa jadi catatan kedepannya untuk lebih konsisten yaa untuk konten yang berulang seperti ini
-
di bagian CTA bawah, untuk tulisan Pesan Sekarang mungkin bisa dipilih warna putih ya bu agar tidak “nyaru” dengan button merahnya.
Secara keseluruhan sudah bagus sekali bu, sedikit tambahan detail kecil di atas mungkin bisa jadi perhatian ya
Semangat terus bu Fenti
