يأتي Elementor مزوداً بميزات تحرير قوية متجاوبة تسمح لك بجعل موقعك الإلكتروني يبدو جميلاً وسهل الاستخدام على أجهزة الكمبيوتر والأجهزة اللوحية والهواتف المحمولة مع بعض الإعدادات البسيطة. وسهل الاستخدام.
ما هو التصميم سريع الاستجابة؟
باختصار.يعني التصميم المتجاوب أن صفحة الويب نفسها تضبط تخطيطها تلقائيًا حسب حجم شاشة الجهاز.：
- على الكمبيوتر (شاشة كبيرة)، قد يتم عرض المحتوى جنبًا إلى جنب (على سبيل المثال، ثلاثة أعمدة من الصور);
- على شاشة مسطحة (شاشة متوسطة)، تصبح تلقائيًا عمودين;
- على الهواتف المحمولة (الشاشات الصغيرة)، يتم تكديسها تلقائيًا في عمود واحد لتجنب صغر حجم النص أو تكدس المحتوى.
يتكيف Elementor تلقائيًا مع معظم السيناريوهات، ولكن لا تزال هناك تفاصيل تحتاج إلى تحسينها يدويًا لضمان أفضل تجربة لكل جهاز.
الخطوة 1: التعرف على نموذج التحرير المتجاوب في Elementor
عند دخولك إلى واجهة تحرير Elementor، هناك ثلاثة أيقونات على الجانب الأيمن من شريط الأدوات العلوي، تتوافق مع طرق عرض الأجهزة الثلاثة:
- 🖥️ عرض سطح المكتب(العرض الافتراضي)
- 📱 منظر مسطح(عرض 768 بكسل يسار/يمين 768 بكسل)
- 📱 عرض الهاتف المحمول(عرض 375 بكسل يسار/يمين 375 بكسل)
طريقة التشغيل: انقر على الأيقونة المقابلة للتبديل إلى وضع المعاينة لذلك الجهاز. يمكن تعيين جميع تعديلات الأنماط (مثل حجم الخط، والتباعد، والتخطيط) بشكل فردي لجهاز واحد دون التأثير على بعضها البعض.
الخطوة 2: الإعدادات الأساسية للتصميم المتجاوب (3 مطلوبة)
1 - حجم النص: تجنب النصوص الصغيرة جدًا أو الكبيرة جدًا على الهواتف المحمولة
النص الذي يبدو صحيحاً على الكمبيوتر قد لا يمكن قراءته على الهاتف المحمول (صغير جداً) أو قد تكون فواصل الأسطر غير واضحة (كبيرة جداً) وتحتاج إلى تعديلها بشكل فردي:
- حدد وحدة النص (العناوين، الفقرات، إلخ) وانتقل إلى لوحة "الأنماط" على اليمين.
- ابحث عن إعداد "حجم الخط" وانقر على "الأيقونة المتجاوبة" (أيقونة كمبيوتر صغيرة تعرض ثلاثة مربعات إدخال عند النقر عليها، تتوافق مع سطح المكتب/الطاولة/الجوال) بجوار القيمة.
- قم بالتبديل إلى "عرض الهاتف المحمول" وأدخل الحجم المناسب مباشرةً (على سبيل المثال، يتم تعيين العناوين على 24-32 بكسل على الهواتف المحمولة، والفقرات على 14-16 بكسل).
نصيحة::: يتبع حجم النص مبدأ "كلما كان حجم الشاشة أصغر، يجب أن يكون النص أكبر ولكن أوضح" لضمان إمكانية قراءته دون تكبيره على الهاتف المحمول.
2- عرض الصور والوحدات النمطية: تجنب تجاوز الشاشة
قد تظهر الصور التي تم ضبطها على "عرض 80%" على أجهزة الكمبيوتر عريضة جدًا على الهواتف المحمولة، أو تحتوي على مساحة بيضاء كبيرة جدًا على كلا الجانبين:
- حدد الصورة/الوحدة النمطية وانتقل إلى لوحة "الأنماط" اليمنى (الصور في "الأنماط" → "العرض"، وقد تكون الوحدات النمطية الأخرى في "خيارات متقدمة" → "العرض").
- انقر على أيقونة "متجاوب" بجوار قيمة "العرض" للتبديل إلى "عرض الجوال".
- اضبط العرض على "100%" (بحيث تملأ الصورة/الوحدة عرض شاشة الهاتف وتتجنب المساحة البيضاء على الجانبين)، أو اضبطه حسب الحاجة (على سبيل المثال، 90% لترك هامش صغير).
لاحظ:: إذا كان حجم الصورة نفسها صغيرًا جدًا، فإن ضبطها على 100% سيؤدي إلى تشويشها، لذا يوصى بإعداد صور عالية الدقة (بعرض 1000 بكسل على الأقل) مسبقًا.
3 - المسافات والهوامش: تجنب تكدس المحتوى معًا
مساحة شاشة الهاتف المحمول محدودة، والمسافات بين الوحدات كبيرة جدًا بحيث لا تضيع المساحة، أما الصغيرة جدًا فستبدو مزدحمة:
- حدد أي وحدة نمطية (على سبيل المثال زر، فقرة) وانتقل إلى لوحة "متقدم" على اليمين.
- حدد موقع "الهامش الخارجي" (المسافة بين الوحدة النمطية والعناصر الأخرى) أو "الهامش الداخلي" (المسافة بين المحتوى داخل الوحدة النمطية والحدود) وانقر على "أيقونة الاستجابة" بجوار القيمة.
- قم بالتبديل إلى "عرض الهاتف المحمول" وقم بتقليل القيم (على سبيل المثال، قم بتغيير الهامش الخارجي العلوي من 50 بكسل إلى 20 بكسل لجعل الوحدة النمطية أكثر إحكامًا).
البراعة:: اضغط مع الاستمرار Ctrl مفتاح لتحديد وحدات متعددة في نفس الوقت وضبط المسافات بين الوحدات في نفس الوقت وضبط التباعد بين الوحدات على دفعات لتحقيق كفاءة أكبر.
الخطوة 3: تعديل التخطيط (تحسين تخطيط العمود للهواتف المحمولة)
إذا كانت صفحتك الرئيسية تستخدم "تخطيطًا متعدد الأعمدة" (على سبيل المثال 3 أعمدة لأوصاف الخدمة، وعمودين لمجموعات الرسوم البيانية)، فقد تكون مزدحمة على الهواتف المحمولة وتحتاج إلى تغييرها إلى عمود واحد:
- حدد موقع القسم الذي يحتوي على أعمدة متعددة (انقر على المربع المنقط الأزرق خارج الوحدة النمطية لتحديد القسم بأكمله).
- انتقل إلى لوحة "تخطيط" على اليمين وابحث عن إعداد "الأعمدة" (على سبيل المثال حاليًا "3 أعمدة").
- انقر على الأيقونة المتجاوبة بجوار قيمة الأعمدة للتبديل إلى طريقة عرض الجوال.
- قم بتغيير عدد الأعمدة إلى "عمود واحد"، في هذا الوقت، سيتم تكديسها تلقائيًا في عمود واحد على الهاتف المحمول، ويكون المحتوى أكثر وضوحًا.
مثال نموذجيوفيما يلي مثال على ذلك: 3 أعمدة للمنتجات على أجهزة الكمبيوتر، وعمودان على الأجهزة اللوحية، وعمود واحد على الهواتف المحمولة، مما يستفيد من مساحة الشاشة الكبيرة ويضمن سهولة القراءة على الشاشة الصغيرة.
الخطوة 4: إخفاء العناصر غير الضرورية (للشاشات الصغيرة)
يمكن إخفاء بعض العناصر التي تثري الصفحة على الكمبيوتر ولكنها قد تكون زائدة عن الحاجة على الهاتف المحمول (مثل الأيقونات الزخرفية المعقدة والنصوص التوضيحية الكبيرة) على الهاتف المحمول:
- حدد الوحدة النمطية التي تريد إخفاءها وانتقل إلى لوحة "خيارات متقدمة" على اليمين.
- مرِّر لأسفل إلى إعدادات "متجاوب" وابحث عن خيار "إخفاء على الأجهزة المحمولة" (أو ضع علامة "إخفاء على سطح المكتب" و"إخفاء على الجهاز اللوحي" على التوالي).
- من خلال وضع علامة "إخفاء على الأجهزة المحمولة"، ستختفي الوحدة النمطية تلقائيًا في عرض الأجهزة المحمولة ولن تؤثر على عرض الكمبيوتر والأجهزة اللوحية.
السيناريوهات القابلة للتطبيق:: أيقونات جانبية مزخرفة، ونموذج اتصال خاص بالكمبيوتر (يمكن استبداله بنموذج أنظف على الهاتف المحمول).
الخطوة 5: المعاينة والاختبار (الخطوة الرئيسية)
بمجرد اكتمال الإعداد، تأكد من اختباره على جهاز حقيقي (أو تحقق منه بشكل نقدي باستخدام ميزة معاينة Elementor):
- معاينة داخل Elementor:: انقر على أيقونة "سطح المكتب ← الحاسوب اللوحي ← الهاتف المحمول" بالتناوب وقم بالتمرير عبر الصفحات للتحقق من كل وحدة:
- هل يتم عرض النص بالكامل (بدون اقتطاع أو تداخل)؟
- هل الصور واضحة وتملأ الشاشة (لا تمدد ولا تشويه)؟
- هل الأزرار كبيرة بما يكفي (44×44 بكسل على الأقل على الهواتف المحمولة لسهولة النقر عليها)؟
- اختبار المعدات الحقيقيةامسح "رمز الاستجابة السريعة" الموجود أعلى Elementor باستخدام هاتفك المحمول، وافتح الصفحة على هاتفك المحمول الخاص بك، وقم بتشغيل الأزرار ومربعات الإدخال فعليًا لتشعر بسلاسة الانزلاق.
- إصلاح المشاكل الشائعة：
- إذا كانت فواصل الأسطر النصية مربكة: قلل حجم الخط على الهاتف المحمول أو قم بزيادة عرض الوحدة.
- إذا كانت الصورة مشوهة: قم بتعيين "تكييف الكائن" على "تجاوز" على الهاتف المحمول (الصورة → النمط → تكييف الكائن).
- إذا كان الزر صغيرًا جدًا: قم بزيادة "الهامش الداخلي" للزر على الهواتف المحمولة (15 بكسل على الأقل للأعلى والأسفل، و20 بكسل لليسار واليمين).
مبادئ التصميم المتجاوب للمبتدئين
- الهاتف المحمول أولاً:: صُمم مع مراعاة عرض الهاتف المحمول قبل توسيعه إلى الكمبيوتر (لتجنب إجراء تعديلات جذرية في مرحلة لاحقة).
- الأقل هو الأكثر:: مساحة شاشة الهاتف المحمول محدودة، لذا يتم الاحتفاظ بالمحتوى الأساسي فقط وإزالة العناصر الزائدة عن الحاجة.
- الاتساق:: الألوان وأنماط الخطوط متسقة عبر الأجهزة لتجنب ارتباك الزائر.
- الفحص المنتظم:: قم بالتبديل إلى عرض الهاتف المحمول بعد كل إضافة وحدة نمطية جديدة للتأكد من أن العرض على ما يرام.
بهذه الخطوات، سيظهر موقعك الإلكتروني بشكل احترافي على أجهزة الكمبيوتر والأجهزة اللوحية والهواتف المحمولة. قد يبدو التصميم المتجاوب معقداً، ولكن بعد إجراء بعض العمليات باستخدام Elementor، ستدرك أنك تحتاج فقط إلى ضبط بعض المعلمات الرئيسية للأجهزة المختلفة لحل مشكلة العرض 90%. تدرب أكثر، واختبر أكثر، وستتقنه قريباً!
العربية