Reka bentuk responsif WordPress: Memastikan laman web kelihatan baik pada telefon dan komputer.

Banyak pemula akan menghadapi masalah: halaman yang dirancang pada komputer akan kelihatan teksnya terhimpit dan gambar tidak sejajar pada telefon - ini kerana mereka tidak melakukan "reka bentuk responsif". Elementor mempunyai fungsi penyuntingan responsif yang kuat, dan dengan sedikit penyesuaian, laman web anda akan kelihatan cantik dan mudah digunakan pada komputer, tablet, dan telefon.

Apa itu reka bentuk responsif?

Secara ringkas,Reka bentuk responsif membolehkan halaman web yang sama menyesuaikan susun atur secara automatik berdasarkan saiz skrin peranti.：

• Di komputer (skrin besar), kandungan mungkin dipaparkan secara berdampingan (seperti tiga lajur gambar);
• Di tablet (skrin sederhana), ia secara automatik berubah menjadi dua lajur;
• Di telefon (skrin kecil), ia akan disusun secara automatik dalam satu lajur untuk mengelakkan teks yang terlalu kecil atau kandungan yang melimpah.

Elementor akan menyesuaikan secara automatik untuk kebanyakan skenario, tetapi masih memerlukan pengoptimuman manual untuk memastikan pengalaman terbaik pada setiap peranti.

Langkah pertama: Memahami mod pengeditan responsif Elementor.

Selepas memasuki antara muka penyuntingan Elementor, terdapat tiga ikon di sebelah kanan bar alat di bahagian atas, yang masing-masing sesuai untuk tiga pandangan peranti:

• 🖥️ Pemandangan desktop(Paparan lalai)
• 📱 \nPandangan tablet(Lebar kira-kira 768px)
• 📱 Pemandangan telefon bimbit(Lebar kira-kira 375px)

Metod operasiKlik ikon yang sepadan, dan anda boleh beralih ke mod pratonton peranti tersebut. Semua pengubahsuaian gaya (seperti saiz fon, jarak, tata letak) boleh ditetapkan secara berasingan untuk setiap peranti, tanpa mempengaruhi yang lain.

Langkah kedua: Penetapan-penetapan utama untuk reka bentuk responsif (3 perkara yang mesti dilakukan)

Saiz teks: Elakkan teks yang terlalu kecil atau terlalu besar pada telefon.

Teks yang kelihatan sesuai pada komputer mungkin tidak jelas (terlalu kecil) atau mempunyai pembungkusan yang kacau-bilau (terlalu besar) pada telefon, dan memerlukan penyesuaian khusus:

1. Pilih modul teks (judul, perenggan, dll.), dan masuk ke panel “Gaya” di sebelah kanan.
2. Cari tetapan “Saiz Fon”, dan klik “Ikon Responsif” di sebelah nilai tersebut (ikon komputer kecil. Setelah diklik, tiga kotak input akan muncul, masing-masing untuk desktop/tablet/telefon).
3. Tukar ke “pandangan telefon” dan masukkan saiz yang sesuai (contohnya, tajuk dalam telefon ditetapkan kepada 24-32px, dan perenggan kepada 14-16px).

Permintaan: Saiz teks harus mengikuti prinsip “saiz skrin semakin kecil, teks tidak boleh terlalu besar tetapi harus jelas”, untuk memastikan ia boleh dibaca tanpa perlu menggunakan fungsi zum pada telefon.

Gambar dan lebar modul: elakkan melebihi skrin.

Gambar yang ditetapkan sebagai “lebar 80%” pada komputer mungkin masih kelihatan terlalu lebar pada telefon, atau mempunyai banyak ruang kosong di kedua-dua sisi:

1. Pilih gambar/modul, dan masuk ke panel “Gaya” di sebelah kanan (gambar berada di “Gaya” → “Lebar”, manakala modul lain mungkin berada di “Lanjutan” → “Lebar”).
2. Klik ikon responsif di sebelah nilai “Lebar”, dan beralih ke “Pemandangan telefon”.
3. Tetapkan lebar kepada “100%” (untuk memastikan gambar/moduI mengisi lebar skrin telefon dan mengelakkan ruang kosong di kedua-dua belah pihak), atau sesuaikan mengikut keperluan (seperti 90% untuk meninggalkan sedikit margin).

Awas!Jika gambar itu sendiri terlalu kecil, mengaturnya kepada 100% akan membuatkannya kabur. Adalah dinasihatkan untuk menyediakan gambar berkualiti tinggi terlebih dahulu (lebar minimum 1000px).

Jarak dan margin: elakkan kandungan berkerumun bersama-sama.

Skrin telefon mempunyai ruang yang terhad, dan jarak antara modul yang terlalu besar akan membazirkan ruang, sementara jarak yang terlalu kecil akan kelihatan sesak:

1. Pilih mana-mana modul (seperti butang, perenggan), dan masuk ke panel “Lanjutan” di sebelah kanan.
2. Untuk mencari “margins luaran” (jarak antara modul dan elemen lain) atau “margins dalaman” (jarak antara kandungan dalam modul dan bingkainya), klik “ikon responsif” di sebelah nilai tersebut.
3. Tukar kepada “pandangan telefon”, dan kurangkan nilai-nilai tersebut (seperti margin atas daripada 50px kepada 20px, untuk membuat modul lebih padat).

\nKemahiran: Tahan Ctrl Dengan menekan beberapa butang secara serentak, anda boleh memilih beberapa modul dan menyesuaikan jaraknya secara beramai-ramai, yang lebih cekap.

Langkah ketiga: Penyesuaian susun atur (penyesuaian susun atur kolom pada telefon)

Jika halaman utama anda menggunakan “tata letak berbilang lajur” (seperti pengenalan perkhidmatan dalam 3 lajur, kombinasi gambar dan teks dalam 2 lajur), ia mungkin kelihatan terlalu padat pada telefon, dan perlu diubah kepada satu lajur:

1. Cari “Section (Block)” yang mengandungi berbilang lajur (klik bingkai biru di luar modul untuk memilih seluruh blok).
2. Masuk ke panel “Tata Letak” di sebelah kanan, dan cari tetapan “Kolom” (seperti yang sekarang ialah “3 Kolom”).
3. Klik pada “Ikon responsif” di sebelah nilai “栏”， untuk beralih ke “pandangan telefon”.
4. Tukar bilangan lajur kepada “1 lajur”, maka kandungan akan disusun secara automatik dalam satu lajur pada telefon, lalu membuatkannya lebih mudah untuk dibaca.

Contoh: Tiga lajur untuk memaparkan produk pada komputer, dua lajur pada tablet, dan satu lajur pada telefon, yang memanfaatkan ruang skrin besar dan memastikan keterbacaan pada skrin kecil.

Langkah keempat: Sembunyikan unsur-unsur yang tidak perlu (untuk skrin kecil)

Beberapa elemen dapat memperkaya halaman di komputer, tetapi mungkin kelihatan berlebihan di telefon (seperti ikon hiasan yang rumit, teks penerangan yang panjang), dan boleh disembunyikan di telefon:

1. Pilih modul yang ingin disembunyikan, dan masuk ke panel “Lanjutan” di sebelah kanan.
2. Scroll ke bawah ke tetapan “Responsif”, dan cari pilihan “sembunyikan pada peranti mudah alih” (atau centang “sembunyikan pada desktop” dan “sembunyikan pada tablet” secara berasingan).
3. Tandai “sembunyikan pada peranti mudah alih”, modul ini akan hilang secara automatik pada paparan telefon, tanpa mempengaruhi paparan komputer dan tablet.

Senario yang terpakaiIkon sisi dekoratif, borang hubungan khusus untuk komputer (boleh diganti dengan borang yang lebih ringkas pada telefon).

Langkah kelima: Pratonton dan ujian (langkah penting)

Selepas penetapan selesai, pastikan untuk menguji pada peranti sebenar (atau periksa dengan teliti menggunakan fungsi pratonton Elementor):

1. Pratonton dalam ElementorKlik ikon “Desktop → Tablet → Telefon” secara berurutan, dan gulung halaman untuk memeriksa setiap modul:
   • Adakah teks ditampilkan sepenuhnya (tanpa dipotong atau bertumpang-tindih)?
   • Adakah gambar tersebut jelas dan meliputi seluruh skrin (tanpa regangan, tanpa deformasi)?
   • Adakah butang itu cukup besar (sekurang-kurangnya 44×44px pada telefon, untuk memudahkan klik)?
2. Ujian peralatan sebenar.Scan “kod QR” di bahagian atas Elementor menggunakan telefon, buka halaman tersebut pada telefon anda, dan rasai kelancaran pengalaman dengan butang-butang interaktif dan kotak input.
3. Membaiki masalah yang sering berlaku.：
   • Jika teks tersebut berakhir dengan cara yang tidak teratur: kurangkan saiz fon untuk peranti mudah alih atau tambahkan lebar modul.
   • Jika gambar berubah bentuk: Dalam telefon, tetapkan “Adaptasi Objek” kepada “Cover” (Gambar → Gaya → Adaptasi Objek).
   • Jika butang terlalu kecil: Pada peranti mudah alih, perbesarkan “margins dalam” butang (sekurang-kurangnya 15px di atas dan bawah, dan 20px di kiri dan kanan).

Prinsip-prinsip reka bentuk responsif yang mesti diingat oleh pemula.

1. Mudah alih dahulu.: Semasa merancang, pertimbangkan dahulu pandangan pada telefon, kemudian luaskan ke komputer (untuk mengelakkan pengubahsuaian besar-besaran di kemudian hari).
2. Kurang adalah lebihSkrin telefon mempunyai ruang yang terhad, jadi hanya simpan kandungan utama dan buang unsur-unsur yang berlebihan.
3. KonsistensiWarna dan gaya fon mesti konsisten pada semua peranti, untuk mengelakkan kekeliruan pelawat.
4. Memeriksa secara regularSetiap kali anda menambah modul baru, beralih ke pandangan telefon untuk memastikan paparan normal.

Dengan langkah-langkah di atas, laman web anda akan kelihatan profesional pada komputer, tablet, dan telefon. Reka bentuk responsif nampak rumit, tetapi setelah menggunakan Elementor beberapa kali, anda akan mendapati bahawa anda hanya perlu menyesuaikan beberapa parameter utama untuk peranti yang berbeza, dan ini akan menyelesaikan masalah paparan 90%. Berlatih dan menguji lebih banyak, dan anda akan menguasainya dengan cepat!