كيف أقوم بتكييف صفحات موقع الويب الخاص بي مع الهاتف؟

وفقًا لـ Hootsuite و We Are Social، يستخدم 55 ٪ من سكان العالم الإنترنت ، أو ما يقرب من 4.2 مليار شخص. الوسيط التكنولوجي الذي يستنزف أكبر عدد من حركة الإنترنت يظل الهاتف المحمول بنسبة 51.6٪ ، تليها أجهزة الكمبيوتر التي تعرض 44.1٪ مقابل 4.3٪ للوسائط الأخرى. وهذا يعني أن أكثر من نصف مستخدمي الإنترنت يصلون إلى مواقع الويب عبر هواتفهم المحمولة. لهذا السبب ، يجب أن يأخذ مشروع إنشاء موقع الويب الخاص بك في الاعتبار حقيقة تقديم واجهة تتكيف مع الواجهات المختلفة. في الواقع ، يتعلق الأمر بجعله مستجيبًا للاستفادة من حركة المرور القادمة من المستخدمين الذين لا يستخدمون بالضرورة جهاز كمبيوتر. للقيام بذلك ، سأوجهك خلال عملية تكييف صفحة من موقع الويب الخاص بك مع الهاتف. ستعتني هذه المقالة ، وهي جزء من سلسلة طويلة ، بإظهار جميع الخطوات لك “خطوة بخطوة” حتى تتمكن من تحقيقها بنفسك. لا تنسَ متابعة الفيديو الذي يأتي معه ومن المرجح أن يساعدك كثيرًا.

الحصول على صفحات “مستجيبة”!

تجد في هذا فيديو كيفية تكييف صفحات موقع الويب الخاص بك مع الهاتف:

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

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

علاوة على ذلك ، Mobify من خلال دراسة أن 30٪ من مستخدمي الإنترنت يجهضون معاملة عندما لا يتناسب موقع الويب مع تنسيق هواتفهم المحمولة. بالإضافة إلى ذلك ، إذا استغرق تحميل موقع ويب أكثر من 3 ثوانٍ ، فإن 57٪ من عملاء الأجهزة المحمولة يميلون إلى تركه.    

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

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

لماذا تحتاج إلى موقع ويب سريع الاستجابة؟

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

توصي Google بمواقع الويب سريعة الاستجابة   

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

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

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

تحسين المبيعات أو جهات الاتصال الخاصة بك

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

فرنسي بعمليات شراء عبر الهاتف المحمول من إجمالي 37.5 مليون اشتروا عبر الإنترنت.

ما الذي يثير اهتمامك بشكل كبير في هذه الفئة من مستخدمي الإنترنت.

من السهل إدارة موقعك

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

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

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

Site Web Twaino Agence SEO

حتى يكون لديك معرفة كاملة بالخطوات التي يجب اتباعها لتكييف موقع الويب الخاص بك مع الهاتف ، سأستخدم موقع الويب الخاص بوكالة تحسين محركات البحث (SEO) الخاصة بي ، Twaino. كوم.

Site Web Twaino Version ordinateur

إنه يعمل على WordPress CMS والموضوع الذي أستخدمه هو “Avada”.

Version ordinateur methode optimisee

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

Version ordinateur optimisee

1) تحقق من مظهر موقعك على الهاتف المحمول

Site Twaino Slider revolution telephone

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

عندما أفعل ذلك من أجلي ، ألاحظ من بين أشياء أخرى على الصفحة الرئيسية أن

  • العنوان “Twaino: SEO Agency” كبير جدًا بالنسبة للهاتف ؛
Version telephone non optimisée
  • تصميم الصور ليس جيدًا لأن لدي صورتان تتبعان بعضهما البعض وسأقوم بتغيير موضعهما عن طريق وضعها بين كل نص ؛
Version telephone non optimisee
  • الأسهم الموجودة على مستوى “منهجية حملة تحسين محركات البحث” ، لا تتناسب أفقيًا ، ولكنها تتبع بعضها البعض عموديًا ؛
Version telephone non optimisee
  • توجد مربعات صور كبيرة على مستوى “المدونة” ، بينما يمكن أن تجعل دائرتان صغيرتان تجربة المستخدم أكثر إمتاعًا.
Version telephone non optimisee
Version telephone non optimisee

هذه بعض التغييرات التي سأقوم بها. لذا اتبع!

2) قم بتسجيل الدخول إلى لوحة تحكم موقع الويب الخاص بك

لإجراء التغييرات التي تحتاجها ، تحتاج إلى الوصول إلى وحدة تحكم WordPress.

للقيام بذلك ، أكمل ببساطة ، في متصفحك ، الإدخال “…. / wp-admin” على عنوان URL لموقع الويب الخاص بك. لذا فإن منعي هو “https://twaino.com/wp-admin”.

Modifier les pages

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

3) انتقل إلى الصفحة الرئيسية

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

Modifier la page accueil

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

Les blocs de la page accueil

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

Bloc Agence

4 إنشاء كتل للهواتف المحمولة أو لأجهزة الكمبيوتر والأجهزة اللوحية ،

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

في الواقع ، إذا كان لديك عناوين موجودة على صفحتك ، فمن المحتمل أن حجمها لم يتم تحسينه للعرض على الهاتف. هذه حالتي مع العنوان “Twaino: SEO Agency” وهو كبير جدًا من حيث الحجم والذي سأقوم بتقليله.

4-1) قم بتكرار الكتلة المراد تعديلها

لإجراء هذه العملية ، ابحث عن الكتلة التي يوجد بها النص وانقر عليها. الكتلة التي أريد تعديلها هي “Agency” وأنا أنقر على السهم الصغير على اليمين لرؤية محتواها.

Création bloc agence pour mobile

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

Modification blog agence

ثم قم بتسمية هذه الكتلة الجديدة لسهولة الرجوع إليها. أضع “وكالة الجوال”.

Changement de nom agence mobile

4-2) إنشاء الكتلة المخصصة لأجهزة الكمبيوتر والأجهزة اللوحية

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

Option du bloc

يسمح لك هذا الإجراء بحجز الكتلة الأولى فقط للعرض على الكمبيوتر وكذلك على الجهاز اللوحي والكتلة الثانية ، “Mobile Agency” في حالتي ، للعرض على الهاتف.

للقيام بذلك ، انقر فوق رمز التحرير وهو الأول من اليسار. بعد ذلك ، قم بالتمرير لأسفل إلى “رؤية الحاوية” والتي تمنحك ثلاثة خيارات:

20 Container visibulity selection

  • شاشة صغيرة: للشاشات الصغيرة بما في ذلك الهواتف ؛
  • الشاشة المتوسطة: للشاشات المتوسطة التي تتضمن أجهزة لوحية ؛
  • شاشة كبيرة: للشاشات الكبيرة بما في ذلك أجهزة الكمبيوتر.
Container visibulity

نظرًا لأنني أريد أن تكون هذه الكتلة مرئية فقط على الكمبيوتر ، فسوف ألغي تحديد “شاشة صغيرة” وأحتفظ فقط بـ “شاشة متوسطة” و “شاشة كبيرة”.

22 deselectionner small screen

ثم احفظ هذا التغيير للمتابعة.

21 Container visibility Medium Large

4-3) إنشاء الكتلة المخصصة للهواتف المحمولة فقط

24 Changement agence mobile

هذه هي نفس العملية مثل الخطوة السابقة ، باستثناء أنه هنا سوف تقوم بإلغاء التحديد:

26 Small screen uniquement

  • شاشة متوسطة شاشة
  • كبيرة

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

25 Selectionner uniquement small screen

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

5) تغيير حجم خط العنوان الخاص بك

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

27 Editer la partie texte

في الصفحة التي تظهر ، لديك حقل يحتوي على نصك بالإضافة إلى عدة خيارات لتنسيقه.

28 Appuyer pour editer le texte

ثم انقر فوق علامة التبويب “نص” الموجودة في الزاوية اليمنى العليا من حقل النص.

29 Changer le titre de la page pour telephone

لديك تنسيق html للنص الخاص بك وابحث عن النقش “حجم الخط” متبوعًا برقم. هذا هو حجم النص الذي تريد تغييره.

30 Taille du texte avant changement

على مستواي ، لدي “حجم الخط: 50 بكسل” وهو على نفس سطر العنوان الذي أريد تغيير حجمه ، “Twaino: وكالة تحسين محركات البحث”.

31 Taille du texte apres changement

مما يدل على أن حجم العنوان هو 50 بكسل ، والذي أقوم بتعديله بوضع 40 بكسل.

34 Nouveau visuel telephone apres changement

6) انقل صورك

هناك صورتان تتبعان بعضهما البعض في كتلة “Mobile Agency” والتي لا تعطي مظهرًا لطيفًا على الهاتف. للقيام بذلك ، سوف أنقل أحدهم أسفل النص الذي يليه. إليك كيفية القيام بذلك إذا كنت تريد أن تفعل الشيء نفسه.

32 Emplacement de limage

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

33 Modification place image

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

احفظ هذا التغيير بالنقر فوق الزر الأزرق “تحديث” في الزاوية اليمنى السفلية. يمكنك التحقق مما إذا كانت التكوينات قد تم أخذها بالفعل في الاعتبار.

35 Changement image emplacement

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

36 Relocalisation image

7) ترتيب تخطيط الأشكال

على مستوى كتلة “الطريقة” ، لدي أسهم تتناسب جيدًا مع شاشة الكمبيوتر ، ولكنها تعطي نتيجة مختلفة للهاتف.

37 Changement methode

لتنفيذ نفس الإجراء مثلي ، قم بإجراء النسخ أولاً وقم بتسميته. في حالتي ، أكتب “Mobile Method” لأتمكن من تمييزها عن الأولى.

38 Creation page pour telephone

42 Image methode bloc apres changement

بعد ذلك ، كما فعلت في الخطوة 4 ، قم بإلغاء التنشيط:

  • العرض على “شاشة صغيرة” على مستوى الكتلة الأولى.
  • العرض على “شاشة متوسطة” و “شاشة كبيرة” على مستوى الكتلة الجديدة.

يتيح لك هذا الآن إجراء التغييرات على الهاتف.

40 Sauvegarde du bloc

7-1) حذف الأسهم القديمة

انقر على السهم الصغير في أقصى اليمين لرؤية محتوى الكتلة الجديدة التي ترغب في تعديلها ، “الطريقة المتنقلة” على مستواي.

41 Image bloc avant changement

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

7-2) أدخل صورة

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

43 Edit image methode

44 Choix fleches methodes

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

45 Sauvegarde des methodes

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

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

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

46 Resultat methode

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

8) إنشاء مكعب من عدة صور جيدة التنظيم

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

47 Nos services avant changement telephone

لتصحيح هذا ، سوف أقوم بإنشاء مكعب أضع فيه الصور الثلاث بالإضافة إلى صورة مربعة لـ “NATURAL REFERENCE”.

8-1) إنشاء الكتلة الجديدة

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

  • بتكرار الكتلة القديمة ؛
  • إعادة تسمية الكتلة الجديدة ؛
  • تكوين العرض لكلا الكتلتين.
48 Dupliquer le bloc service

في حالتي ، لدي “خدمة” مثل الكتلة القديمة و “خدمة الجوال” ككتلة جديدة.

50 Visibilite pour telephone

8-2) قم بإنشاء مكعب من 4 صور

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

51 Bloc pour le service mobile

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

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

52 Changement des images

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

53 Allocation des images

لقد حصلت للتو على أربع صوري بما في ذلك خدماتي:

  • مرجع طبيعي ؛
  • محرر ويب ؛
  • تمرين؛
  • تدقيقات كبار المسئولين الاقتصاديين.

8-3) قم بتعديل المسافة بين الصور

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

56 Se rendre sur onglet design

لتقليلها ، اضغط على أيقونة تحرير السطر الأول من الصور في كتلة “Mobile Service”. ثم انقر فوق نافذة “تصميم” الموجودة في منتصف “عام” و “رسوم متحركة”.

57 Changement de margin

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

54 Resultat des services mobile

9) إضافة صور دائرية   

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

69 Avant changement telephone partie blog

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

9-1) اختر الرف الدائري وأدخل الصور

ثم افتح محتوى كتلة “مدونة الجوال” بالضغط على السهم الصغير على اليمين. ثم انقر على “+ عنصر” وابحث في الشريط المخصص لهذا الغرض عن المصطلح “دائري”.

63 Ajout du carousel pour images

لديك زر “Image Carousel” الذي يظهر والذي ستضغط عليه. في الصفحة التي تظهر ، اضغط على “تحديد الصور” في “تحميل الصور المجمعة” ، والتي تنقلك إلى “مكتبة الوسائط” لتحديد الصور.

64 Choix des images

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

9-2) تكوين دائري

بعد تحديد الصور ، قم بالتمرير لأسفل إلى المستوى:

من “حجم الصورة” واضغط على “تلقائي” لجعل التحجيم تلقائيا ؛

65 Taille des images automatiques
  • من “نوع التحويم” وحدد “ارفع” ؛
66 Selectionner lift up
  • من “التشغيل التلقائي” وتحقق من “لا” ؛
67 Nombre de colonne 2
  • من “الحد الأقصى للأعمدة” واختر الرقم الذي تريده. ألتقط صورتين.
  • من “إظهار التنقل” وحدد “لا”.
68 Selectionner le bon parametrage

ثم أقوم بحفظ هذه التغييرات لرؤية العرض على الصفحة الرئيسية لموقع الويب الخاص بي.

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

70 Apres changement telephone partie blog

9-3) قم بإنشاء دوارات أخرى

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

71 Images avant changement

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

72 Parametrage images

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

77 Presentation blog avec images

على مستواي ، ألتقط الصورتين المسمى “ROBOT” و “USER EXPERIENCE” للعرض الدائري “إنشاء موقع الويب”.

76 Selection correct image

أفعل الشيء نفسه مع مكتبة صور أخرى ، ولكن هذه المرة أستورد “WORDPRESS” و “SITE WEB”.

75 Choix image pour partie BLOG

أغتنم هذه الفرصة أيضًا لتعيين “هامش” معلمة “التصميم” على “-19٪” بحيث تكون المسافة بين الصور صغيرة.

74 Selection du padding

9-4) اضبط المساحات التي أحفظها

وأقوم بتحديث الصفحة الرئيسية. العرض جيد ، باستثناء المسافة بين كتلة “مدونة الجوال” وكتلة “جهة الاتصال”.

73 Choix images

لتقليلها ، انقر فوق رمز التحرير الموجود على نفس سطر اسم الكتلة وانقر فوق نافذة “تصميم”.

قم بتقليل أو زيادة “المساحة المتروكة” بناءً على ما إذا كنت تريد تقليل المسافة أو زيادتها.

لا تتردد في القيام بعدة رحلات ذهابًا وإيابًا للعثور على العرض المثالي.

78 Telephone apres changement partie blog

10) تحقق من التغييرات للمرة الأخيرة

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

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

وانتهى الأمر! لقد قمت للتو بتكييف موقع الويب الخاص بك مع الهاتف.     

الخلاصة

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

إلى اللقاء !

التصنيفات SEO

أضف تعليق