كيفية تحسين تخطيط موقع الويب الخاص بك باستخدام Elementor

هل تريد أن تعرف كيفية تحسين تخطيط موقع الويب الخاص بك باستخدام Elementor؟

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

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

يعد أداء موقع الويب أحد أقوى قيمنا كمنشئين على الويب. لهذا السبب أنشأنا هذه الدورة في 5 أجزاء.

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

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

الدرس الأول: أفضل ممارسات تحسين التخطيط

في درسنا الأول، سنتناول الطريقة الأكثر فعالية لإنشاء صفحاتك ومنشوراتك في محرر Elementor. غالبًا ما نلاحظ استخدامًا مفرطًا للأقسام والأعمدة والأقسام الداخلية والأدوات، بينما كان من الممكن تحقيق نفس التصميم باستخدام عدد أقل بكثير من العناصر.

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

سنتناول الموضوعات التالية:

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

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

في نهاية البرنامج التعليمي ، سيتم تقليل صفحتنا المحسّنة إلى ستة أقسام وسبعة أعمدة و 16 عنصر واجهة مستخدم.

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

اختبار الممارسات السيئة

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

الخطوة 1: تحقق من موقع الويب الخاص بك في نافذة التصفح المتخفي

• افتح نافذة جديدة في "وضع التصفح المتخفي" واكتب عنوان URL لصفحة الويب التي تختبرها.

الخطوة 2: تحقق من أنك تستخدم مسار URL المباشر

إذا لم تكن متأكدًا من ارتباط صفحتك ، فيمكنك العثور عليه بسهولة بالانتقال إلى لوحة معلومات WP:

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

اختبار وعرض نتائج الأداء

الخطوة 1: اختبر نتائج الأداء

ربما تكون قد استخدمت Chrome Developer Tools في الماضي.

إذا لم يكن الأمر كذلك ، من أجل فحص وعرض محتوى HTML و CSS لصفحتك:

• انقر بزر الماوس الأيمن في أي مكان على صفحتك وانقر فوق "فحص". سترى العديد من علامات التبويب حيث يمكنك قراءة HTML و CSS والعثور على الأخطاء والحصول على نتائج تحسين محركات البحث وإجراء اختبارات متنوعة.
• حدد علامة تبويب الشبكة واضغط على أزرار cmd أو ctrl + R لتحميل النتائج.

كما ترى ، يستغرق تخطيطنا الحالي 2,88 ثانية للتحميل وينفذ 81 طلبًا.

الخطوة الثانية: عرض نتائج الأداء

• قم بالتبديل إلى علامة التبويب Lighthouse ، حيث يمكننا تشغيل تقرير تدقيق على صفحتنا.

سيعطينا هذا مزيدًا من المعلومات حول الأداء الحالي للصفحة.

• حدد "إنشاء تقرير". بعد لحظات قليلة ، سيظهر تقريرك.

نتلقى حاليًا تصنيف أداء بنسبة 73/100 ، يمكننا بالتأكيد العمل عليه.

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

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

تحسين عناصر الصفحة

الخطوة 1: تحسين الرأس

لنبدأ مع في الراس.

كما ترى في هذا التصميم ، تم تكوين الرأس من ثلاثة أعمدة.

في العمود الأول ، يتكون شعارنا من أداتين:

1. Un صورة القطعة الذي يعرض ملف صورة بتنسيق .png لشعارنا
2. القطعة العنوان.

في العمود الثاني ، تتكون قائمة الرأس من أداة قائمة التنقل الخاصة بنا.

يحتوي العمود الثالث على:

1. عنصر واجهة مستخدم للقسم الداخلي (يتحكم في موضع عنصر واجهة المستخدم للأيقونة).
2. بيانات الاتصال الخاصة بنا للعنوان

دعونا نرى كيف يمكننا تقليل عدد الأقسام والأدوات والأقسام هنا.

الخطوة 2: أنشئ العنوان الجديد

العمود 1:

• أنشئ قسمًا يحتوي على عمود واحد فقط.
• أضف ال القطعة شعار الموقع واسحبه إلى القسم.

أفضل الممارسات للصور:

• امنح كل ملف صورة على موقع الويب الخاص بك عنوانًا ذا صلة ونصًا بديلًا في مكتبة الوسائط.

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

• تحديد أبعاد الصورة داخل القطعة.

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

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

أعمدة 2

العودة إلى لوحة الحاجيات:

• قم بسحب وإسقاط عنصر واجهة قائمة التنقل أسفل الشعار
• اضبط المؤشر على "بلا"
• انتقل إلى علامة التبويب "النمط" وأضف الخط الذي تفضله (بحيث يتطابق مع تصميمنا السابق)

أفضل الممارسات للتصميم العام:

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

الخطوط العامة:

يمكن القيام بذلك باستخدام وظيفة الخطوط العالمية:

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

يمكنك بعد ذلك استخدام هذا النمط في كل عنصر واجهة مستخدم تقوم بإنشائه.

الألوان العالمية:

يمكن استخدام نفس الطريقة لألوانك الإجمالية:

• انقر فوق "عالمي"
• تحوم فوق منتقي الألوان وانقر عليها
• حدد لونًا وأشر إلى رمز علامة الجمع
• انقر فوق "عالمي" >> حدد "رئيسي"

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

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

الخطوة 3: قم بتحرير الرأس

العمود 3

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

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

لحل هذه المشكلة:

• حدد أداة شعار الموقع >> علامة التبويب "متقدم"
• حدد "تحديد الموضع" وتعيين عرضه على "مضمن"

كرر هذه الخطوة بالضبط لعنصر واجهة مستخدم قائمة التنقل وأداة قائمة الرموز.

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

تحديد موضع العمود بعناصر مضمنة

• حدد العمود الخاص بك >> انتقل إلى علامة التبويب "تخطيط"
• في "المحاذاة العمودية" ، اختر "لأسفل"
• "في المحاذاة الأفقية" اختر "مسافة بين"

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

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

يمكننا حل هذه المشكلة بتعديل الهوامش:

• حدد أداة قائمة التنقل >> علامة التبويب "خيارات متقدمة"
• قم بفك تجميع الهامش وإزالة التباعد بقيمة سالبة

الخطوة 4: اجعل الرأس مستجيبًا

الآن دعنا نرى كيف يبدو الإصدار الحالي من موقعنا على الأجهزة المحمولة.

أفضل الممارسات لاستجابة الجوال:

• قم بتبسيط تصميمك وفكر في طرق لجعل نفس الأقسام متجاوبة ، لتجنب استخدام ضعف كمية الشفرة التي ستؤثر على سرعة صفحتك.

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

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

دعونا نرى كيف يمكننا تحقيق ذلك ، باستخدام إعداد "العرض المخصص" لأدواتنا وعناصرنا.

تحديد عرض مخصص للجهاز اللوحي

• انقر على "قائمة التنقل" >> علامة التبويب "متقدم"
• حدد "تحديد الموقع" >> اضبط العرض على "مخصص".
• حدد "٪" >> أعط الأداة نفس العرض (بالنسبة المئوية) للمساحة الفارغة حولها.
• انقر فوق علامة التبويب "المحتوى" >> "تبديل المحاذاة" >> حدد "الحق".

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

لننتهي الآن من تخصيص قائمة التبديل.

• "المحتوى" >> انقر على زر تبديل "العرض الكامل" واضبطه على "نعم".
• "النمط" >> قم بإزالة الخلفية عن طريق سحب شريط "Color Picker" إلى اليسار.

لنرى الآن كيف تبدو الأشياء على شاشة الهاتف المحمول.

تحديد عرض مخصص للجوال

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

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

لحل هذه المشكلة:

وضع قائمة التنقل

• انقر فوق "قائمة التنقل" >> علامة التبويب "خيارات متقدمة"
• حدد "تحديد الموقع" >> اضبط العرض على "مخصص"
• حدد "٪" >> امنح عنصر واجهة المستخدم عرضًا بنسبة 30٪ ، بحيث يتلاءم مع شعارنا

وضع قائمة الأيقونات

• انقر على "قائمة الأيقونات" >> علامة التبويب "متقدم"
• حدد "تعبئة" >> فك تجميع القيم
• أضف مساحة بحجم 12 بكسل إلى "TOP"

هل يمكنك تصديق ذلك؟

تم استخدام رأسنا في الأصل قسمان ، 2 عنصر واجهة مستخدم و 12 أعمدة. الآن يستخدم رأسنا قسم واحد ، 1 عناصر واجهة مستخدم وعمود واحد.

والنتيجة هي نفسها!

الخطوة 5: تحسين قسم Hero

دعنا ننتقل إلى القسم التالي من موقعنا: قسم الأبطال

أفضل الممارسات للأقسام الرئيسية:

• تأكد من أن نص قسم البطل الخاص بك مرئي بسهولة ، خاصةً عندما يحتوي على صورة خلفية.

التحكم في موضع القطعة في عمود

هناك خطأ شائع نراه في محرر Elementor وهو استخدام أعمدة ومسافات إضافية للتحكم في موضع عنصر واجهة المستخدم.

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

لنرى كيف يمكننا إنشاء نفس التصميم بقسم واحد فقط:

• احذف العمود الإضافي الموجود على يمين النص.
• قم بإزالة الفاصل.

بدلاً من ذلك، ولتحديد موضع نص البطل في المكان الذي نريده، سنستخدم خيارات محاذاة الأعمدة:

• حدد العمود.
• اضبط "المحاذاة الرأسية" على "الوسط".
• انتقل إلى علامة التبويب "خيارات متقدمة".
• حدد "تعبئة" >> فك تجميع القيم
• اضبط المساحة المتروكة اليمنى على 50٪.

• حدد القسم.
• حدد "الحد الأدنى للارتفاع" >> اضبطه على 80.

تباين ثابت بين النصوص والخلفيات

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

هناك عدة طرق لتحسين وضوح القسم الذي تكون خلفيته صورة ملونة (كما نرى في هذا القالب):

• انقر فوق رأسك.
• انتقل إلى علامة التبويب "النمط" >> حدد "ظل النص".

سيؤدي ذلك إلى تحسين قابلية قراءة النص بجعله بارزًا عن صورة الخلفية.

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

• حدد القسم >> علامة التبويب "النمط" >> "تراكب الخلفية"
• حدد أحد ألوانك العامة وقم بالتلاعب بالعتامة حتى تحصل على النتيجة التي تريدها

الخطوة 6: قم بتحسين القسم باستخدام مربعات الرموز

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

دعونا نرى كيف يمكننا تبسيط هذا القسم لتحسين أدائه.

محتوى منطقة الأيقونة

• حدد الزر "Widget Icon Box" في قائمة الأدوات واسحبه إلى العمود
• حدد "مربع الرمز"
• أشر إلى صورة الرمز
• اختر "تنزيل SVG"**
• أدخل الرمز المخصص الخاص بك

** ملاحظة: الشارات هي ملفات SVG. إذا لم تقم بذلك ، فانتقل إلى لوحة معلومات WordPress ثم إلى Elementor >> Settings. ستحتاج إلى تمكين تمكين تنزيلات الملفات غير المصفاة.

• اكتب "لقبك"
• اكتب "الوصف" الخاص بك
• حدد "النمط" > اختر لونًا عامًا
• حدد "الحجم" واسحب الشريط إلى الحجم الذي تختاره
• حدد "المساحة المتروكة" واسحب الشريط إلى الرقم الذي تختاره

الخطوة 8: تحسين قسم "الخدمات"

سنقوم الآن بإعادة بناء قسم "الخدمات" ، والذي يستخدم حاليًا عمودين ، وصورتين ، ودجة العنوان وأداة محرر النص.

لنقم بإنشاء نفس التصميم في قسم جديد ، لكن بعمود واحد فقط.

• قم بإنشاء قسم جديد بعمود
• في "التخطيط" >> اضبط "عرض المحتوى" على "العرض الكامل"
• حدد "مربع صورة القطعة" في لوحة الأدوات واسحبه إلى العمود

(سنتمكن من دمج جميع أصول القسم في هذه الأداة)

• اكتب العنوان
• اكتب الوصف

بالنسبة للصورة ، سنحتفظ بالتصميم الحالي الذي استخدمناه لصورنا.

• أدخل نفس الصورة من مكتبة الوسائط
• انتقل إلى علامة التبويب "المحتوى" >> اضبط "موضع الصورة" على "اليمين"

• انتقل إلى علامة التبويب "النمط"
• قم بزيادة المسافة بين العناصر
• زيادة "عرض" الصورة
• قم بتوسيع قسم "المحتوى"
• اختر المحاذاة "الوسط"
• تعيين "محاذاة عمودية" على "وسط"
• حدد الألوان والخطوط العامة التي تختارها
• انتقل إلى علامة التبويب "خيارات متقدمة"
• أضف 10٪ infill إلى القطعة

الآن قسم الخدمات لديه نفس التصميم ، ولكن مع عدد أقل من الأصول.

الخطوة 9: تحسين قسم الدعوة إلى العمل

أفضل الممارسات لروابط الحث على الشراء:

• تأكد من أن جميع روابط الوسائط الاجتماعية الخاصة بك تعمل بشكل صحيح وأن الزر يحتوي على الرابط.
• عند إضافة ارتباط إلى موقع ويب آخر ، قم بتضمين هذه السمة: "rel | noopener"

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

يقدم القسم التالي دعوة للعمل من أجل خدماتنا.

يحتوي القسم حاليًا على عمودين يحتويان على:

1. صورة خلفية مع فاصل
2. رأسان ، قسم داخلي ، محرر نصوص وزر

لنقم بإنشاء نفس التصميم في قسم جديد ، لكن بعمود واحد فقط.

• انتقل إلى علامة التبويب "تخطيط" >> اضبط "عرض المحتوى" على "العرض الكامل"
• انتقل إلى علامة التبويب "خيارات متقدمة" >> أزل أي تعبئة إضافية

• حدد "أداة Call To Action" في لوحة الأدوات واسحبها إلى العمود
• تعيين "موضع الصورة" على "اليسار"
• حدد صورتك من مكتبة الوسائط
• قم بتوسيع قسم "المحتوى"
• اكتب العنوان
• اكتب الوصف
• اكتب نص الزر

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

حتى الآن كان قسمًا مكونًا من عمودين يحتوي على 2 عناصر واجهة مستخدم. الآن هو قسم عمود واحد مع عنصر واجهة مستخدم واحد فقط!

الخطوة 10: تحسين مكتبة الصور

يشتمل التصميم الحالي لقسم Image Carousel الخاص بنا على خطأ شائع في الطريقة التي يعرض بها صورًا متعددة.

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

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

• قم بإنشاء قسم جديد بعمود واحد
• انتقل إلى علامة التبويب "تخطيط" >> اضبط "عرض المحتوى" على "العرض الكامل"
• حدد الزر "Image Carousel Widget" من لوحة عنصر واجهة المستخدم واسحبه إلى العمود
• أضف الصور المطلوبة من مكتبة الوسائط

• انتقل إلى علامة التبويب "المحتوى"
• اضبط "حجم الصورة" على "متوسط ​​- 300 × 300"
• اضبط "عدد الشرائح المراد عرضها" و"عدد الشرائح المراد التمرير خلالها" و"التنقل" وفقًا لتفضيلاتك.

• انتقل إلى علامة التبويب "النمط"
• تعيين "محاذاة عمودية" على "توسيط"
• قم بتخصيص "المسافة"

• انتقل إلى علامة التبويب "خيارات متقدمة"
• أضف الحشوة اللازمة

ما كان في السابق قسمًا مكونًا من 5 أعمدة أصبح الآن عمودًا واحدًا فقط.

دعنا ننتقل إلى القسم التالي ، حيث يمكننا تحسين مقاطع الفيديو على موقعنا.

الخطوة 11: تحسين قسم الفيديو

أفضل الممارسات لمحتوى الفيديو:

• استخدم Lazy Load كلما أمكن ذلك لتحسين أوقات تحميل مواقع الويب الخاصة بك.

ماذا يحدث عندما نطبق خيار "Lazy Load"؟

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

ما سنفعله الآن هو تغيير الطريقة التي نستخدم بها أداة الفيديو ، بحيث لا تؤخر سرعة صفحتنا أو أداء موقع الويب.

• حدد "أداة الفيديو"
• انتقل إلى علامة التبويب "النمط"
• حدد "تحميل كسول"

الخطوة 12: تحسين التذييل وتحديثه باستمرار

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

دعونا نرى كيفية تحسين التذييل والتأكد من تحديثه دائمًا.

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

للقيام بذلك ، سنمضي على النحو التالي:

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

• من القائمة المنسدلة ، حدد عنصر القائمة "التاريخ والوقت الحاليان"
• انقر فوق رمز الأصل للمفتاح
• انقر فوق علامة التبويب "تنسيق التاريخ" وحدد عنصر القائمة "مخصص"
• احذف ما هو موجود حاليًا في حقل "التنسيق المخصص" ، باستثناء "Y"
• حدد علامة التبويب "خيارات متقدمة"
• قم بتمييز الحقل "Forward" مع الاستمرار في الضغط على مفتاحي "option" و "G" في وقت واحد (أو "control" ، alt "و" C "في نفس الوقت) لكتابة الرمز" © ".
• أضف مسافة بعد "©"

• حدد الحقل "بعد"
• اكتب مسافة واكتب النص الذي تريد ظهوره بعد العام ، مثل "جميع الحقوق محفوظة"

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

من الناحية المثالية ، كلما قل عدد الأقسام لديك ، كلما قلت شفرة HTML الإضافية لديك.

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

وهذا كل شيء ، تم تحسين التخطيط الخاص بك!

تقييم أداء الموقع الجديد

سوف نتحقق من النتائج في نافذة DevTools (المفتش):

• حدد علامة التبويب "الشبكة":

هناك بعض التغييرات الجيدة والإيجابية هنا:

• يستغرق موقع الويب الآن 568 مللي ثانية للتحميل
• انتقلنا من 81 طلبًا إلى 46 طلبًا
• حدد علامة التبويب "Lighthouse" ، حيث ستلاحظ ارتفاع درجة أدائنا من 73 إلى 98

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

الخطوة 13: اختبر النتائج باستخدام تأثيرات الحركة

نريد أن نجعل موقعنا أكثر تفاعلية ومتعة ، ولكن كيف سيؤثر ذلك على نتائج أدائنا؟ دعونا نرى ما يمكننا القيام به.

اجعل الرأس عنصرًا "ثابتًا":

• حدد العنوان
• انتقل إلى علامة التبويب "خيارات متقدمة"
• قم بتوسيع علامة التبويب "تأثيرات الحركة".
• اضبط الخيار "مثبت" على "أعلى"

اجعل قسم البطل عنصرًا "ثابتًا":

• حدد قسم البطل
• انتقل إلى علامة التبويب "النمط"
• حدد القائمة المنسدلة "المرفقات" وحدد "ثابت"

استخدام الرسوم المتحركة للمدخل لنص البطل (العنوان):

• حدد أداة الرأس
• انتقل إلى علامة التبويب "خيارات متقدمة"
• قم بتوسيع علامة التبويب "تأثيرات الحركة"
• حدد تأثير الدخول واضبطه على "التلاشي التدريجي".

استخدم رسمًا متحركًا للإدخال لوصف نص البطل (عنصر واجهة مستخدم محرر النصوص):

• حدد أداة محرر النص
• انتقل إلى علامة التبويب "خيارات متقدمة"
• قم بتوسيع علامة التبويب "تأثيرات الحركة"
• حدد "رسوم متحركة للدخول" واضبطها على "تلاشي للداخل".

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

الآن دعنا نجري اختبار الأداء مرة أخرى ، لنرى كيف أثرت تأثيرات الحركة على درجاتنا:

• ارجع إلى نافذة "المفتش"
• حدد علامة التبويب "المنارة"
• انقر فوق "إنشاء تقرير"

والآن نرى أن درجة أدائنا قد انخفضت إلى 97 - وهذا بالتأكيد ليس فرقًا كبيرًا، وهو ما يجعل الموقع الإلكتروني أكثر إثارة للاهتمام ومتعة.

هل تصدق نتيجة أدائنا الجديد؟

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

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

وهذه مجرد البداية - سيغطي الجزء التالي من هذه الدورة التدريبية ما يلي:تحسين الصورة.

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

احصل على Elementor Pro الآن!

خاتمة

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...