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

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

اشترك في قناتنا على YouTube

لا يتطلب إنشاء موقع ويب وفقًا لهذا البرنامج التعليمي أي مهارات سابقة ويتم تحقيقه باستخدام سمة Astra المجانية و Elementor و Elementor Pro.

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

باتباع هذا البرنامج التعليمي خطوة بخطوة ، لن تتمكن فقط من إنشاء هذه الصفحة المذهلة:

سكرن 1

سيبدو رائعًا أيضًا على أي جهاز محمول:

سكرن 9

فيما يلي خطوات إعداد تصميم خاص بالجوال:

الخطوة 1: اجعل عناوين الصفحة تستجيب

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

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

سكرن 6

الخطوة 2: ضبط هوامش المحمول والحشوات

يمكن أن يبدو الهامش الأيسر البالغ 20 بكسل شيئًا واحدًا على سطح المكتب وشيء آخر تمامًا على الهاتف المحمول. يتم إجراء تعديلات الهامش والحشو بسهولة باستخدام مقياس الحجم القابل للسحب في Elementor.

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

سكرن 5

الخطوة 3: تعديلات الهاتف المحمول محرر النص

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

الخطوة 4: ضبط الهوامش السالبة للجوال

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

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

سكرن 2

الخطوة 5: عكس الأعمدة على الهاتف المحمول

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

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

ما عليك سوى الانتقال إلى القسم> متقدم> سريع الاستجابة وتشغيل “الأعمدة العكسية”

سكرن 3

الخطوة 6: ضبط عرض العمود المتجاوب

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

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

سكرن 4

الخطوة 7: إخفاء أو إظهار العناصر على الهاتف المحمول

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

الخطوة 8: تعديلات خاصة بالقطعة

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

لماذا اخترنا موضوع Astra؟

هناك العديد من المزايا لاستخدام سمة Astra لإنشاء مواقع ويب مستجيبة للجوال باستخدام Elementor ، بما في ذلك:

البساطة – تركز Astra على البساطة. في الحد الأدنى من الخيارات ، يحصل المستخدمون على المخرجات المرغوبة من خلال إعدادات مصنفة جيدًا في أداة التخصيص.

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

Made for Speed – Astra مصنوع من أجل السرعة! ح # التركيز على البساطة فيما

يلي بعض الحقائق فقط:

تقدم Astra 4 طلبات HTTP فقط (هذا الحد الأدنى ممكن لموضوع ووردبريس وظيفي)

تحميل أقل من 50 كيلوبايت كود

لا يستخدم jQuery افتراضيًا.

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

Freemium – تمامًا مثل Elementor ، Astra مجاني في مستودع ووردبريس. لمزيد من الميزات مثل التسمية البيضاء ، يمكن للعملاء شراء الرؤوس الشفافة امتدادًا مدفوعًا.

Made for Elementor – عند استخدام Elementor ، ينتقل Astra تلقائيًا بالعرض الكامل بدون عنوان وشريط جانبي. لا نقرات أو إعدادات مطلوبة.

العشرات من مواقع العناصر المجانية جاهزة للاستيراد – نعم ، مواقع كاملة. ليست قوالب صفحة واحدة. أنشأ صناع Astra مكونًا إضافيًا مجانيًا يسمح للمستخدمين باستيراد مواقع الويب الجاهزة بنسبة 100 ٪ والتي تم إنشاؤها باستخدام Elementor & Astra بنقرة واحدة.

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

Widget Ready – يمكن للمستخدم وضع عناصر واجهة المستخدم في مناطق سمات مختلفة. حتى في الرؤوس أيضًا!

متعدد اللغات ، RTL وجاهز للترجمة

المطورون – Astra هو “Framework Theme”

إذا كنت مطورًا ، فستستمتع بالعمل مع Astra. يمكن تسميته كموضوع Framework ، لأنه يوفر العديد من أدوات العمل / عوامل التصفية .

يمكنك حتى تصفح التطوير النشط على GitHub أو المساهمة.

من صنع Brainstorm Force – تم بناء Astra بواسطة Brainstorm Force ، وهي منظمة من محترفي ووردبريس يعملون لمدة 8 سنوات. يمكن للشركات والوكالات الاعتماد على مواقع الويب المهمة الخاصة بهم على Astra والتأكد من التطوير النشط والدعم المهني.

انقر فوق لي

استنتاج

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

آمل أن تستفيد من أدوات تحرير الهاتف المحمول في المرة القادمة التي تصمم فيها صفحة أو موقع ويب في ووردبريس. إذا كانت لديك أي أسئلة تتعلق بهذا البرنامج التعليمي ، فلا تتردد في إضافة تعليقاتك أدناه.