كيفية إنشاء موقع ويب سريع الاستجابة في عام 2024 (بدون برمجة)

هل موقعك على الويب لا يعمل بشكل جيد على الأجهزة المحمولة؟ يمكن أن يؤدي التخطيط السيئ أو أوقات التحميل البطيئة إلى مغادرة المستخدمين لموقعك قبل أن يتفاعلوا مع المحتوى الخاص بك. في عالم اليوم الذي يعتمد على الأجهزة المحمولة أولاً، لم يعد موقع الويب سريع الاستجابة مجرد خيار، بل أصبح ضرورة.

سواء كنت تبدأ نشاطًا جديدًا أو تعمل على تحسين موقع ويب حالي، يعد الموقع سريع الاستجابة أمرًا ضروريًا للوصول إلى جمهور أوسع وتحسين المشاركة عبر جميع الأجهزة. لا يبدو موقع الويب سريع الاستجابة احترافيًا فحسب، بل إنه يعمل بسلاسة على الشاشات بجميع أحجامها.

باستخدام Divi، يمكنك بسهولة إنشاء موقع ويب سريع الاستجابة دون أي تعليمات برمجية. يقدم هذا الدليل نهجًا خطوة بخطوة لإنشاء موقع ويب سريع الاستجابة باستخدام Divi، حتى تتمكن من تحسين تجربة المستخدم والتكيف مع جميع الأجهزة وتعزيز التفاعل.

ابدأ البناء مع Divi اليوم

ما هو التصميم سريع الاستجابة؟ ولماذا هو مهم

التصميم سريع الاستجابة هو أسلوب لتصميم الويب يقوم تلقائيًا بضبط تخطيط موقع الويب والصور والمحتوى ليناسب أحجام الشاشات والأجهزة المختلفة. سواء تم عرضه على سطح المكتب أو الجهاز اللوحي أو الهاتف الذكي، يضمن موقع الويب سريع الاستجابة أن يستمتع المستخدمون بتجربة مثالية دون التكبير/التصغير أو التمرير أو تغيير الحجم.

يعد التصميم سريع الاستجابة أمرًا ضروريًا في عام 2024، حيث تهيمن حركة مرور الهاتف المحمول على الويب. يساعدك موقع الويب سريع الاستجابة على الوصول إلى جمهور أوسع مع توفير تجربة مستخدم سلسة عبر جميع الأجهزة. تعطي Google أيضًا الأولوية لمواقع الويب المتوافقة مع الجوّال في نتائج البحث، لذا فإن الحصول على تصميم سريع الاستجابة يمكن أن يحسن ظهورك ويمنعك من فقدان حركة المرور القيمة.

التحديات المشتركة للتصميم سريع الاستجابة

• تخطيطات غير متناسقة عبر الأجهزة: قد يكون الحفاظ على تصميم جذاب بصريًا عبر أحجام مختلفة للشاشات أمرًا صعبًا.
• الترميز اليدوي لنقاط توقف الأجهزة: غالبًا ما يتطلب التصميم سريع الاستجابة التقليدي ترميز استعلامات الوسائط يدويًا، الأمر الذي قد يستغرق وقتًا طويلاً ومعقدًا، خاصة بالنسبة لأولئك الذين ليس لديهم مهارات الترميز.
• مشكلات الأداء: يمكن أن تؤدي الصور والوسائط غير المحسنة إلى إبطاء أوقات التحميل، خاصة على الأجهزة المحمولة، مما يؤدي إلى إحباط المستخدمين وزيادة معدلات الارتداد.
• الاختبار عبر الأجهزة: يتطلب ضمان ظهور موقع الويب بشكل رائع على جميع الأجهزة إجراء اختبارات وتعديلات مستمرة، الأمر الذي قد يكون صعبًا بدون الأدوات المناسبة.

مع Divi، يمكنك مواجهة هذه التحديات دون عناء. يوفر Divi تخطيطات معدة مسبقًا، وتحريرًا سريع الاستجابة، ومعاينات في الوقت الفعلي، حتى تتمكن من تصميم مواقع ويب جميلة ومتوافقة مع الأجهزة المحمولة دون استخدام البرمجة أو الاختبارات المكثفة.

قم ببناء موقع الويب الخاص بك سريع الاستجابة باستخدام Divi

لماذا تستخدم Divi لبناء موقع الويب الخاص بك سريع الاستجابة

Divi هي واحدة من أقوى الأدوات المتاحة لبناء مواقع الويب سريعة الاستجابة. لهذا السبب يعتبر Divi الخيار الأفضل لمصممي الويب:

بنيت لووردبريس

يعد WordPress أحد أكثر المنصات شعبية لبناء مواقع الويب، وذلك لسبب وجيه. عندما يتعلق الأمر بإنشاء موقع ويب سريع الاستجابة، يعد WordPress خيارًا مثاليًا نظرًا لمرونته وسهولة استخدامه ونظامه البيئي الواسع من السمات والمكونات الإضافية المصممة خصيصًا للتصميم سريع الاستجابة.

ومع ذلك، لإطلاق العنان لإمكانات WordPress الكاملة للتصميم سريع الاستجابة، فأنت بحاجة إلى السمة والأدوات المناسبة، وهنا يأتي دور Divi. بينما يوفر WordPress الأساس، فإن Divi يأخذ موقع الويب الخاص بك إلى المستوى التالي من خلال تبسيط عملية التصميم سريع الاستجابة ويمنحك المرونة في إنشاء مواقع ويب مذهلة ومتوافقة مع الأجهزة المحمولة بسهولة.

لا يوجد ترميز مطلوب

يمكّنك منشئ السحب والإفلات الخاص بـ Divi من تصميم مواقع ويب احترافية وسريعة الاستجابة دون أي تعليمات برمجية. ما عليك سوى سحب العناصر إلى صفحتك وتخصيصها بشكل مرئي، مما يسهل على المصممين المبتدئين وذوي الخبرة إنشاء موقع ويب متوافق مع الجوّال.

ابدأ مع ديفي

قوالب استجابة مسبقة الصنع

يقدم Divi الآلاف من التخطيطات المعدة مسبقًا والقوالب سريعة الاستجابة، مما يسمح لك بالبدء في إنشاء موقعك بتصميم تم تحسينه بالفعل للأجهزة المحمولة. تساعدك هذه القوالب على توفير الوقت والجهد، مما يلغي الحاجة إلى إنشاء تخطيطات من البداية.

أدوات تصميم سريعة الاستجابة

هذا هو سبب تميز Divi كحل شامل للتصميم سريع الاستجابة في عام 2024:

• التحرير المستجيب: قم بتخصيص مظهر موقع الويب الخاص بك على أجهزة مختلفة (سطح المكتب، الجهاز اللوحي، الهاتف المحمول) مباشرة داخل Divi Builder. قم بتصميم التخطيطات والصور والمحتوى للحصول على تجربة مستخدم سلسة عبر جميع الشاشات.
• المعاينات المستجيبة: قم بمعاينة تصميم موقع الويب الخاص بك على أحجام شاشات مختلفة دون مغادرة المنشئ. قم بإجراء تعديلات في الوقت الفعلي للتأكد من أن موقعك يبدو رائعًا في كل مكان.
• مدخلات CSS المخصصة: أضف CSS مخصصًا لنقاط توقف محددة باستخدام استعلامات الوسائط. يتيح ذلك تحكمًا متقدمًا وتحسينًا دقيقًا لتصميمك على الأجهزة المختلفة.
• العناصر والأنماط العالمية: قم بتطبيق الإعدادات العامة عبر موقع الويب الخاص بك لتحقيق الاتساق مع تخصيص عناصر محددة لأجهزة مختلفة للحفاظ على تصميم متماسك ومرن.
• الشبكات المرنة وهياكل الأعمدة: استخدم نظام الشبكة المرنة من Divi لإنشاء تخطيطات تتكيف تلقائيًا مع أحجام الشاشات المختلفة، مما يضمن أن يظل المحتوى الخاص بك جذابًا بصريًا وجيد التنظيم.
• الخطوط والطباعة القابلة للتعديل: قم بتخصيص إعدادات الخطوط والطباعة لمختلف الأجهزة للحفاظ على سهولة القراءة والتسلسل الهرمي المرئي عبر جميع أحجام الشاشات.
• استعلامات الوسائط المضمنة: يتضمن Divi نقاط توقف محددة مسبقًا يمكن ضبطها باستخدام استعلامات الوسائط. توفر هذه الميزة تحكمًا دقيقًا في كيفية تكيف موقع الويب الخاص بك مع أحجام الشاشات المختلفة.

بشكل عام، جعلت Divi من السهل التأكد من أن موقعك يبدو جميلًا ويعمل بسلاسة عبر جميع الأجهزة.

ابدأ مع ديفي

دليل خطوة بخطوة: كيفية إنشاء موقع ويب سريع الاستجابة باستخدام Divi

1. احصل على استضافة النطاق وWordPress

يحتاج كل موقع ويب إلى نطاق وموفر استضافة قبل أن تتمكن من إنشاء موقعك سريع الاستجابة. إذا كان لديك واحدة بالفعل، يمكنك تخطي هذه الخطوة.

اِختِصاص

اسم النطاق الخاص بك هو عنوان الويب الخاص بموقعك على الويب (على سبيل المثال، Elegantthemes.com)، لذلك من المهم اختيار اسم يمثل علامتك التجارية ويسهل على الأشخاص تذكره. من الناحية المثالية، يجب أن يوفر المجال الخاص بك فكرة واضحة عن موضوع أعمال التجارة الإلكترونية الخاصة بك.

بمجرد اتخاذ قرار بشأن اسم النطاق، ابحث عن مسجل نطاق حسن السمعة لتأمينه. يعد Namecheap خيارًا شائعًا، أو يمكنك الاستفادة من النطاقات المخفضة من خلال موفري الاستضافة مثل SiteGround.

قم بزيارة NameCheap

إذا كان لديك نطاق بالفعل، فيمكنك ربطه بموفر الاستضافة الخاص بك عن طريق تحديث خوادم الأسماء.

استضافة ووردبريس

يحتاج موقع الويب الخاص بك إلى منزل يمكن الاعتماد عليه عبر الإنترنت، وهنا يأتي دور الاستضافة. نظرًا لأننا سنعمل مع WordPress، فإن اختيار مزود استضافة WordPress المتميز يعد أمرًا ضروريًا. سيعمل المضيف الموثوق على تبسيط إدارة الموقع مع ضمان الأداء الممتاز للسرعة والأمان.

يوفر SiteGround خطط استضافة WordPress تبدأ من 3.99 دولارًا أمريكيًا شهريًا ، مما يجعله خيارًا فعالاً من حيث التكلفة. يعد إعداد استضافة WordPress باستخدام SiteGround أمرًا سهلاً.

ابدأ مع Siteground

شاهد الفيديو أدناه لتتعلم كيفية إعداد نطاقك واستضافتك.

2. تثبيت وتفعيل سمة Divi

يتوفر Divi للشراء من Elegant Themes، مع خيارات للترخيص السنوي بسعر 89 دولارًا أو ترخيصًا مدى الحياة لمرة واحدة مقابل 249 دولارًا . بمجرد قيامك بالشراء، يمكنك تنزيل القالب وتثبيته على موقع WordPress الخاص بك باتباع الخطوات البسيطة التالية:

1. انتقل إلى المظهر > السمات في لوحة تحكم WordPress الخاصة بك.
2. انقر على إضافة جديد، ثم تحميل الموضوع.
3. اختر ملف Divi .zip الذي قمت بتنزيله وانقر فوق التثبيت الآن.
4. بمجرد اكتمال التثبيت، انقر فوق "تنشيط" لجعل Divi سمتك النشطة.

شاهد الفيديو أدناه للحصول على إرشادات مفصلة ومعلومات إضافية.

بمجرد اكتمال الإعداد، تصبح جاهزًا للبدء في إنشاء موقعك. إذا كنت تريد التعرف على العملية قبل البدء، فاطلع على البرنامج التعليمي الخاص بنا حول استخدام Divi Builder.

ابدأ مع ديفي

3. استخدم مواقع Divi السريعة لإنشاء موقع الويب سريع الاستجابة الخاص بك (بالدقائق)

بمجرد تثبيت سمة Divi على WordPress، يمكنك بسهولة البدء في إنشاء موقع الويب سريع الاستجابة الخاص بك. باستخدام Divi Quick Sites، يمكن إنشاء موقعك تلقائيًا، لذلك لا تحتاج إلى البدء من الصفر.

قم بتشغيل معالج الإعداد

بمجرد تنشيط سمة Divi في WordPress، سيتم إرشادك خلال الإعداد باستخدام معالج Divi onboarding. ما عليك سوى النقر فوق الزر لتسجيل الدخول وتنشيط ترخيص Divi الخاص بك.

بمجرد تسجيل الدخول، ستصل إلى لوحة تحكم Divi الرئيسية. من هنا، يمكنك إدارة موقعك والوصول إلى الوثائق المفيدة وطلب الدعم وإنشاء موقع جديد باستخدام Divi Quick Sites. للبدء، ما عليك سوى النقر فوق "إنشاء موقع جديد" في لوحة التحكم.

تفضل بزيارة مواقع Divi السريعة

أنشئ موقعك سريع الاستجابة باستخدام موقع المبتدئين (أو باستخدام الذكاء الاصطناعي)

بعد ذلك، يمكنك إنشاء موقع الويب سريع الاستجابة الخاص بك باستخدام موقع بداية مصمم مسبقًا أو أداة إنشاء مواقع الويب الخاصة بـ Divi's AI. يوفر Divi قوالب بداية جميلة - ما عليك سوى النقر فوق "تحديد قالب موقع ويب" للبدء.

ستجد العديد من قوالب مواقع البدء سريعة الاستجابة على شاشتك. اختر واحدًا يناسب احتياجاتك. لا تقلق إذا كانت ألوان القالب أو خطوطه أو صوره لا تتطابق مع علامتك التجارية، حيث يمكنك تخصيصها بسهولة لاحقًا.

ترشدك Divi Quick Sites خلال عملية إعداد موقع الويب الخاص بك عن طريق جمع التفاصيل الأساسية مثل اسم الموقع والشعار والشعار.

1. أدخل اسم موقعك وشعاره، وقم بتحميل شعارك.
2. إذا كان لديك شعار، قم بتحميله لإضافته إلى موقعك تلقائيًا.
3. اختر الصفحات التي تريدها من موقع Starter أو قم بإنشاء صفحات مخصصة إذا لزم الأمر.
4. بمجرد تعيين كل شيء، انقر فوق "إنشاء ونشر موقع الويب الخاص بي" لإكمال العملية.

ملاحظة: سيؤدي تحديد صفحة الخدمات إلى تثبيت قوالب معدة مسبقًا لعرض عروضك الاستشارية (أوصاف الخدمة والتسعير وما إلى ذلك). في هذه الحالة، يمكن حذف صفحة المتجر نظرًا لأن تركيزنا ينصب على استشارات العملاء بدلاً من المتجر عبر الإنترنت.

بعد إدخال تفاصيل موقع الويب الخاص بك، ستقوم Divi Quick Sites ببناء موقعك في أقل من دقيقتين. بناءً على مدخلاتك، سيقوم تلقائيًا بإنشاء جميع العناصر الضرورية، بما في ذلك الصفحات والقوالب والأنماط وأشرطة التنقل.

بمجرد اكتمال موقعك، سيتم توجيهك إلى صفحة تأكيد تفيد بأن "موقعك جاهز!" ستجد أيضًا قائمة بصفحات موقع الويب وقوالب السمات التي تم إنشاؤها، بالإضافة إلى روابط إلى البرامج التعليمية والوثائق لمساعدتك على بدء العمل على موقعك الذي تم إنشاؤه حديثًا.

على الرغم من أن مواقع Divi السريعة مصممة لتكون سريعة الاستجابة، إلا أنك قد ترغب في إجراء بعض التعديلات الشخصية لتناسب رؤيتك تمامًا. يتيح لك منشئ Divi المرئي التبديل بين طرق عرض سطح المكتب والجهاز اللوحي والجوال في الوقت الفعلي لمعرفة كيف سيبدو موقعك بالضبط على كل جهاز. يمكنك أيضًا تغيير أبعاد المعاينة لتناسب تفضيلاتك.

4. تحقق من تصميماتك من خلال معاينات Divi المستجيبة

الآن بعد أن اخترت قالبًا سريع الاستجابة، فقد حان الوقت لمعاينته لمختلف الأجهزة. أدوات التحرير سريعة الاستجابة المضمنة في Divi تجعل هذه العملية بسيطة. يمكنك تصميم مظهر موقع الويب الخاص بك على أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والأجهزة المحمولة مباشرةً من Divi Builder، مما يضمن تجربة مستخدم سلسة عبر جميع الأنظمة الأساسية.

قم بمعاينة الموقع على الأجهزة الشائعة مع عرض الإعدادات المسبقة

يمكنك استخدام الإعدادات المسبقة الشائعة للأجهزة لمعرفة كيف ستبدو صفحتك على الأجهزة المختلفة. لعرض هذه الخيارات، انقر فوق القائمة المنسدلة الأولية. سيقدم لك هذا مجموعة مختارة من أجهزة Apple و Android المختلفة.

معاينة الموقع باستخدام أوضاع العرض القابلة للتخصيص

إلى جانب الخيارات الافتراضية ومعاينة الجهاز، يمكنك تعيين عرض مخصص لمعاينتك. يوفر Divi أيضًا ميزة تغيير الحجم بالنقر والسحب لإجراء تعديلات سهلة. لتغيير الحجم، انقر واسحب من الجانب الأيسر لمنطقة المعاينة. أثناء السحب، سيتم تحديث العرض تلقائيًا في حقول الأبعاد.

يمكنك تخصيص المعاينة سريعة الاستجابة عن طريق إدخال أبعاد العرض والارتفاع المحددة يدويًا. ما عليك سوى النقر على حقول الأبعاد وإدخال العرض والارتفاع المطلوبين.

بمجرد تعيين الحجم حسب تفضيلاتك، انقر فوق الزر "جعل عرض الهاتف الافتراضي" لحفظ هذا كعرض المعاينة الافتراضي. لتعيين أبعاد معاينة الجهاز اللوحي، اتبع نفس العملية، وانقر فوق الزر "جعل عرض الجهاز اللوحي الافتراضي"، وشاهد التغييرات في وقت واحد.

تحقق من تصميماتك في الجزء العلوي

يشتمل نظام المعاينة سريع الاستجابة في Divi على مؤشر "الجزء المرئي من الصفحة"، والذي يساعدك على معرفة كيف سيظهر الجزء العلوي من صفحتك للزائرين دون التمرير. تعتبر هذه الميزة مفيدة بشكل خاص لوضع المحتوى المهم في الجزء العلوي من التصميم الخاص بك. يتم ضبط المؤشر وفقًا للإعداد المسبق للجهاز الذي تحدده.

تبديل أوضاع العرض الرأسي والأفقي بسهولة

يتيح لك نظام المعاينة سريع الاستجابة من Divi عرض تصميماتك في الوضع الرأسي والأفقي. لاستخدام هذه الميزة، انقر فوق الرمز الموجود بجانب حقول الأبعاد. سيؤدي هذا إلى تبديل اتجاه الصفحة، مما يوضح كيفية ظهور التصميم الخاص بك اعتمادًا على ما إذا كان الجهاز عموديًا أو أفقيًا. يتم تمييز الاتجاه النشط بلون أغمق.

5: تخصيص المحتوى والتصميمات الخاصة بك لكل جهاز

سيكون موقع Divi الخاص بك مستجيبًا بالفعل، لذا لن تكون هناك حاجة إلى تخصيص واسع النطاق. ومع ذلك، من المهم إجراء تعديلات على المحتوى والتصميمات الخاصة بك لكل جهاز (سطح المكتب، الجهاز اللوحي، الهاتف) للتأكد من أنها تنال إعجابك. سأركز أولاً على النصوص والصور. سيؤدي هذا إلى رفع مظهر موقع الويب الخاص بك وأدائه عبر جميع الأجهزة.

تحسين النص لسهولة القراءة عبر الأجهزة

تعد سهولة قراءة النص أمرًا بالغ الأهمية لتجربة المستخدم. يوفر Divi إعدادات طباعة سريعة الاستجابة، مما يسمح لك بضبط أحجام الخطوط وارتفاع الأسطر وتباعد الحروف بشكل فردي لأجهزة سطح المكتب والأجهزة اللوحية والأجهزة المحمولة. لتحسين النص الخاص بك، قم أولاً بتمكين Visual Builder وانقر على أي وحدة نصية.

استخدم خيارات الاستجابة لضبط سمات النص المختلفة لطرق عرض مختلفة، مثل لون النص وحجم النص وتباعد الأحرف وارتفاع الخط. يمكننا البدء بتعيين لون النص لطرق عرض مختلفة ثم الانتقال إلى سمات أخرى. من خلال النقر على خيارات الاستجابة، سيُسمح لك بإعداد الألوان لإصدارات مختلفة. فيما يلي مثال لإعداد لون النص لإصدار الجهاز اللوحي.

ثم تنتقل إلى حجم النص. ستنقر على خيارات الاستجابة قبل تعيين قيم تتعلق بحجم النص لطرق عرض مختلفة. كما هو الحال مع لون النص، فيما يلي مثال لتعيين قيمة حجم النص لعرض الجهاز اللوحي.

كرر هذا مع تباعد الأحرف وارتفاع الأسطر والسمات الأخرى، على التوالي. يضمن هذا المستوى من التحكم أن يكون النص الخاص بك بارزًا في إصدار سطح المكتب وقابل للتعديل ليتناسب بشكل أكثر سلاسة مع الشاشات الصغيرة، مثل الهواتف المحمولة.

تمامًا مثل الوحدات النصية، يمكنك أيضًا جعل عناوين موقع الويب الخاص بك سريعة الاستجابة عن طريق تغييرها لإصدارات مختلفة. لفهم ذلك بشكل أفضل، يمكنك مشاهدة الفيديو أدناه:

تغيير حجم الصور

يمكّنك Divi من ضبط الصور ومقاطع الفيديو وعناصر الوسائط الأخرى لتناسب أحجام الشاشات المختلفة دون فقدان الجودة أو تعطيل التصميم. فهو يسمح لك بتقديم أحجام مختلفة للصور بناءً على نوع الجهاز، مما يضمن تحميل موقع الويب الخاص بك بشكل أسرع على الأجهزة المحمولة مع تقديم صور عالية الدقة على شاشات أكبر.

انتقل إلى الحجم في علامة تبويب التصميم الخاصة بوحدة الصورة الخاصة بك. بشكل افتراضي، لديك مجموعة قوة العرض الكامل وارتفاع قابل للتخصيص للعمل معه. ومع ذلك، يمكنك تعطيل مجموعة العرض الكامل والحصول على المزيد من السمات للعمل عليها، مثل عرض الصورة ومحاذاة الوحدة النمطية.

التركيز على كل سمة من سمات الصورة على حدة. في حالتنا، سنضبط الحد الأقصى للعرض على 80% في إصدار الجهاز اللوحي. تم ضبط محاذاة الوحدة لتكون في المنتصف. سيشغل العرض الأقل والصورة المركزية مساحة أقل على الصفحة الرئيسية ويجعل الصورة أكثر جاذبية على الأجهزة الصغيرة.

يؤدي عرض الصور المحسنة للجهاز إلى تحسين التجربة المرئية وتقليل أوقات التحميل، وهو أمر مهم بشكل خاص لمستخدمي الأجهزة المحمولة الذين لديهم اتصالات إنترنت أبطأ.

ابدأ مع ديفي

لا تنس ضغط ملفات الصور

بينما يساعد تغيير الحجم الديناميكي في الاستجابة، يجب عليك أيضًا ضغط صورك لتقليل أحجام الملفات دون المساس بالجودة. يعد هذا أمرًا ضروريًا لتحسين أداء موقع الويب، خاصة على الأجهزة المحمولة.

يتكامل Divi مع المكونات الإضافية مثل Imagify، والتي تقوم تلقائيًا بضغط الصور عند تحميلها إلى مكتبة وسائط WordPress الخاصة بك. وبدلاً من ذلك، يمكنك ضغط الصور يدويًا باستخدام أدوات مثل TinyPNG قبل تحميلها على موقع الويب الخاص بك. لمزيد من المعلومات، راجع قائمتنا لأفضل المكونات الإضافية لتحسين الصور.

6: (اختياري): تنفيذ CSS مخصص للاستجابة المتقدمة

بينما توفر Divi مجموعة واسعة من الأدوات المدمجة لجعل موقع الويب الخاص بك سريع الاستجابة، هناك أوقات قد ترغب فيها في التحكم بشكل أفضل في مظهر موقع الويب الخاص بك على أجهزة مختلفة. هذا هو المكان الذي يتم فيه تشغيل استعلامات CSS والوسائط المخصصة. يقدم Divi عدة أماكن لإضافة CSS مخصص دون التعمق في ملفات موقع الويب الخاص بك. يمكنك تطبيق CSS مخصص على العناصر الفردية أو عالميًا عبر موقعك بالكامل. تحتوي كل وحدة Divi (مثل وحدات النص أو الصورة أو الأزرار) على علامة تبويب CSS مخصصة حيث يمكنك إضافة CSS الذي ينطبق فقط على تلك الوحدة المحددة.

أضف CSS مخصصًا إلى نقاط التوقف للتصميم سريع الاستجابة

يجعل Divi إضافة CSS مخصصًا عند نقاط توقف مختلفة أمرًا سهلاً. في حالتنا، سنقدم مثالًا مرئيًا لمربعات CSS المخصصة المتاحة لوحدة الحث على اتخاذ إجراء. انتقل إلى العنصر وحدد رمز الجهاز اللوحي لعرض نقاط التوقف الثلاثة الأساسية للتصميم سريع الاستجابة لمربعات إدخال CSS. سيعرض هذا الإجراء علامات التبويب الخاصة بعروض التصميم الثلاثة سريعة الاستجابة.

استخدم علامات التبويب لتطبيق الأنماط على كل طريقة عرض وضبط CSS لشاشات الأجهزة المختلفة (سطح المكتب والجهاز اللوحي والهاتف).

على سبيل المثال، إذا كنت تريد أن يشمل الوصف الترويجي العرض الكامل للوحدة على الجهاز اللوحي والهاتف ولكن ليس على سطح المكتب، فحدد علامة تبويب الجهاز اللوحي ضمن مربع إدخال الوصف الترويجي وأضف العرض: كتلة؛

عندما تختار علامة تبويب الجهاز اللوحي، سيتحول وضع عرض Divi Builder إلى وضع عرض الجهاز اللوحي (بعرض 768 بكسل) لتوفير معاينة في الوقت الفعلي لكيفية ظهور تصميمك.

7. اختبر موقعك المستجيب

بعد تنفيذ تصميمك سريع الاستجابة باستخدام Divi، تعد معاينة موقعك واختباره عبر أجهزة مختلفة أمرًا ضروريًا لضمان أن كل شيء يبدو ويعمل بشكل مثالي. توفر Divi أدوات مدمجة تتيح لك عرض تصميمك عبر أحجام شاشات متعددة، وهناك أدوات خارجية مثل Inspect Tool في Google Chrome لتقديم المزيد من الاختبارات المتعمقة عبر الأجهزة والمتصفحات الحقيقية.

استفد من معاينات Divi المستجيبة

يمكنك الوصول إلى نظام المعاينة المستجيب Divi من أي وحدة أو عمود أو صف أو قسم في Visual Builder. على سبيل المثال، لاستخدامه في وحدة نصية، انقر فوق الوحدة، وانتقل إلى علامة التبويب تصميم، ثم قم بالتمرير إلى إعدادات خط العنوان. قم بالتمرير فوق خيار خط العنوان لرؤية قائمة العرض المستجيبة، ثم انقر فوق أيقونة الجهاز اللوحي أو الهاتف للتبديل إلى العرض المقابل.

استخدم أداة الفحص في Chrome للاختبار المستجيب

في حين أن وضع المعاينة سريع الاستجابة في Divi يوفر فهمًا قويًا لكيفية تكيف التصميم الخاص بك، فإن أداة الفحص في Chrome توفر عرضًا أكثر تفصيلاً لموقعك عبر أحجام الشاشات المختلفة. وإليك كيفية الوصول إليه:

1. افتح موقع الويب الخاص بك في جوجل كروم.
2. انقر بزر الماوس الأيمن في أي مكان بالصفحة وحدد Inspect، أو استخدم الاختصار Ctrl+Shift+I (Windows) أو Cmd+Option+I (Mac).
3. انقر على أيقونة الجهاز المحمول في شريط الأدوات Inspect للتبديل إلى العرض سريع الاستجابة.
4. استخدم القائمة المنسدلة للاختيار من بين خيارات الأجهزة التي تم تكوينها مسبقًا مثل iPhone X أو iPad Pro أو أجهزة Android.

للاختبار عبر المزيد من الأجهزة، يمكنك استخدام أدوات خارجية مثل هذه الأداة للتحقق من كيفية عمل موقعك على الأجهزة والمتصفحات المختلفة. ستضمن هذه الاختبارات أن تصميمك يستجيب بشكل كامل، بغض النظر عن حجم الشاشة أو الجهاز.

تبسيط تصميم الويب سريع الاستجابة باستخدام Divi

يعد إنشاء موقع ويب سريع الاستجابة في عام 2024 أمرًا ضروريًا لضمان تجربة مستخدم سلسة عبر جميع الأجهزة. باستخدام أدوات مثل Divi، أصبح تصميم موقع ويب يبدو رائعًا على أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والهواتف المحمولة أكثر سهولة من أي وقت مضى. يعمل Divi على تبسيط العملية باستخدام القوالب سريعة الاستجابة وخيارات التخصيص والأدوات المضمنة لتحسين مظهر موقعك ووظائفه.

من خلال إعطاء الأولوية للاستجابة وسهولة الاستخدام، يمكنك التأكد من أن موقع الويب الخاص بك يلبي احتياجات جمهور الويب المتنوع اليوم.

هل أنت مستعد لإنشاء أول موقع ويب سريع الاستجابة؟ ابدأ بـ Divi وعزز تواجدك على الإنترنت. تحقق من مجموعتنا المختارة من المكونات الإضافية والأدوات لمساعدتك في إنشاء موقع ويب سريع الاستجابة يوفر تجربة سلسة عبر جميع الأجهزة.

ابدأ مع ديفي