30/05/2019 لالكسندر ماروتيل
هل تعلم أن موقع الويب البديهي والمريح من المرجح أن يزيد معدلات التحويل؟ هذا هو السبب وراء تجربة المستخدم،تجربة المستخدم، يلعب دورًا مهمًا هذه الأيام. ولهذا السبب، تعد أشرطة التمرير أدوات مفيدة للتنقل، ولكن قبل كل شيء لترك انطباع أول جيد لدى الزوار.
لذلك، ستهتم هذه المقالة بعنصر أساسي في الصفحة الرئيسية: Silder الذي يوجد في معظم الحالات بعد قائمة التنقل مباشرة. في الواقع، هذا هو الجزء الثاني، بعد قائمة التنقل، الذي سيكون الزوار على اتصال به وتأثيره على قرارهم بمواصلة الزيارة كبير.
لذلك يجب عليك ألا تهمل إنشائها وسأهتم بإرشادك “خطوة بخطوة” طوال العملية. علاوة على ذلك، لا تتردد في مشاهدة الفيديو المصاحب لهذه المقالة والذي يدعم الخطوات الموضحة هناك.
شريط تمرير الثورة
اليوم اقدم لكم في قناتيفيديو كيفية إنشاء وتكوين شريط تمرير الثورة. سأقوم بذلك كجزء من إنشاء موقع الويب الخاص بي لوكالة Twaino الخاصة بتحسين محركات البحث:
ما هي ثورة المنزلق؟
شريط التمرير هو وظيفة يمكن من خلالها عرض معلومات متنوعة في حلقة أم لا. يمكن أن تتكون هذه المعلومات من نصوص وصور ومقاطع فيديو وروابط وما إلى ذلك، ويتم تجميعها حسب “الشريحة”.
وبالتالي، يمكن أن يشتمل شريط التمرير على “شرائح” واحدة أو عدة يمكن أن تكون عناصر الوسائط المتعددة الخاصة بها متحركة أو تفاعلية للتفاعل مع إجراءات المستخدم.
تتوفر العديد من الأدوات لإنشاء شريط التمرير، لكننا سنستخدم “Slider Revolution” في هذا الدليل. هذا هو في الواقع البرنامج المساعد المتميزووردبريس قوية جدًا وتحظى بشعبية كبيرة لدى أكثر من 4 ملايين مستخدم. تم دمج هذا المكون الإضافي في قالب Avada مجانًا عند شرائه.
خيارات شريط تمرير WordPress المختلفة
باستخدام WordPress Slider، vلديك العديد من أنماط شريط التمرير للاختيار من بينها، وهناك ثلاثة أنماط أساسية. لاحظ أن اختيار أحدهما أو الآخر يعتمد بشدة على المنتجات أو الخدمات التي تريد تسليط الضوء عليها على موقعك.
صورة مع نص متراكب
بشكل عام، يتضمن هذا النمط من ثورة شريط التمرير عناصر مرئية تجمع بين صورة مهيبة ورسالة واضحة وموجزة، بالإضافة إلى دعوة للعمل. إنه الأكثر شيوعًا لأنه يسمح لك بالاحتفاظ بمعظم المعلومات التي تريد تسليط الضوء عليها.
وبالتالي، فهو يستجيب بشكل جيد لموقع الويب الذي يرغب في تقديم منتج أو خدمة رائدة، والذي يقدم عرضًا أو ترويجًا محدودًا بالوقت.
أنا شخصياً أفضل هذا النوع من شريط التمرير الذي يعتبر اقتصاديًا للغاية من حيث الموارد والذي يتيح لك بالتالي الحصول على موقع ويب سريع وفعال.
عرض الشرائح أو دائري
تختار العديد من مواقع WordPress هذا النمط من شريط التمرير الثوري الذي يقدم ديناميكية معينة. لذلك من السهل جدًا الاعتقاد بأن هذا هو الخيار الأفضل لتزويد المستخدمين بواجهة جميلة. بالإضافة إلى ذلك، يوفر هذا الخيار إمكانية التمكن من تسليط الضوء على عدة أجزاء من المعلومات.
من ناحية أخرى، تظهر الأرقام أن هذا ليس الحل الأمثل حيث أن 1% فقط من المستخدمين ينقرون على عروض الشرائح أو الدوارات. وجاءت هذه الملاحظة بعد دراسة على الموقع جامعة إن دي بناءً على 3,755,297 زيارة للصفحة الرئيسية.
علاوة على ذلك، لاحظ أن 89.1% ممن قاموا بالنقر قاموا بذلك في الصفحة الأولى فقط. وبالتالي تشير هذه الإحصائيات إلى أن الرف الدائري ليس الخيار الأفضل لعرضه على صفحاتك على أمل زيادة التحويلات.
ولذلك أوصي بعدم اختياره إلا إذا وجدت أنه ذو صلة بموقعك وما تريد تسليط الضوء عليه. لتحقيق النجاح، اختر ثلاث شرائح كحد أقصى واحرص على تصنيفها حسب أولويتها.
بالإضافة إلى ذلك، اختر التمرير اليدوي للعرض الدائري للسماح للمستخدمين باختيار ما إذا كانوا يريدون التمرير عبر الشرائح أم لا. لكن لا تتوقع أن يهتم الأشخاص حقًا بأحدث الشرائح.
فيديو
أصبح خيار ثورة شريط التمرير هذا أكثر نجاحًا لأنه على عكس عرض الشرائح، يخلق الفيديو تأثيرًا قويًا للغاية على الفور ويحتوي على معدل تحويل أكثر إثارة للاهتمام. ولهذا السبب تختار المزيد والمزيد من الشركات هذا الخيار لتسليط الضوء على منتج مبتكر ومتطور أو عرض خاص. والذي من المرجح أيضًا أن يجذب اهتمام الزوار بسرعة.
للقيام بذلك، يجب عليك التأكد من أن لديك تسلسل فيديو يتوافق تمامًا مع علامتك التجارية وذو جودة احترافية. لا تتردد في تعيين مصور لديه معرفة كبيرة بمقاطع الفيديو أو تعلم كيفية القيام بذلك بنفسك.
أفضل الممارسات لإنشاء ثورة سلايدر جيدة
ضع في اعتبارك أنك تحتاج إلى إبراز النقاط الأكثر صلة عند تصميم صفحتك الرئيسية نظرًا لأن مدى انتباه الأشخاص محدود للغاية في الوقت المناسب. مهما كان هدفك، فأنت بحاجة إلى استخدام المشاهد لتوجيه انتباهه بعد وصوله إلى موقعك.
اختر العناصر المرئية الصحيحة
تستخدم جميع مواقع الويب تقريبًا الصور أو الرسوم التوضيحية أو مقاطع الفيديو لتوصيل ما تقدمه بشكل مرئي. لذلك يجب عليك التأكد من أن العناصر المرئية التي ستستخدمها لتصميم شريط تمرير الثورة الخاص بك تعمل تمامًا في هذا الاتجاه وأنها ذات جودة.
للقيام بذلك، أقترح ألا تقصر نفسك على جمال العناصر المرئية الخاصة بك، بل اخترها لأنها تمثل ما تريد أن يفهمه الزوار في لمحة عند وصولهم إلى موقع الويب الخاص بك.
قم بتحديد المعلومات والرسوم المتحركة باستخدام شريط تمرير الثورة الخاص بك
لا تخلط بين الزائرين عن طريق زيادة تحميل شريط التمرير الخاص بك بالكثير من المعلومات. إذا كانوا في حيرة من أمرهم، فقد يغادرون موقع الويب الخاص بك بسرعة. لذا، بدلاً من ذلك، تفضل رسالة واضحة ودقيقة تحتوي على زر يدعو إلى اتخاذ إجراء.
أقترح عليك أن تأخذ الوقت الكافي للتفكير بعناية وتحديد الرسائل الأكثر صلة بعملك. وكن مدركًا أيضًا أنه بنفس الطريقة التي يمكن بها للكثير من المعلومات أن تخيف مستخدمي الإنترنت، فإن القليل جدًا من المعلومات يمكن أن يؤدي في بعض الأحيان إلى نفس النتيجة.
وفي الواقع، فإن وجود مساحة كبيرة جدًا دون وجود صور ورسائل مؤثرة لا يجذب اهتمام الزوار الذين يخاطرون بمغادرة موقع الويب الخاص بك.
ومن ناحية أخرى، أوصي باستخدام الرسوم المتحركة لموقع الويب الخاص بك بشكل معقول على صفحات الويب الخاصة بك وعدم الإفراط في استخدامها للسماح لمستخدمي الإنترنت بالعثور بسرعة على ما يبحثون عنه على موقعك.
إنشاء شريط تمرير الدقة خطوة بخطوة
نظرًا لنموذج موقع WordPress الخاص بي الذي أتيحت لي الفرصة لإنشائه، فقد أتيحت لي الفرصة لأعرضه لكم في ملفيالمقالة الأخيرة كيفية إنشاء قائمة التنقل على ووردبريس. وبعد ذلك، سأقوم الآن بإعداد شريط تمرير الثورة على الصفحة الرئيسية والذي لا يتضمن واحدًا.
للقيام بذلك، سوف نستخدم البرنامج المساعد Slider Revolution. يعد شريط التمرير هذا مكونًا إضافيًا من بين العديد من المكونات الإضافية الأخرى ويوفر مجموعة واسعة من الخيارات لإنشاء أشرطة التمرير.
لتثبيته، كل ما عليك فعله هو الذهاب إلى منطقة الإضافات لتنزيل الإضافة المنزلقة كأي إضافات أخرى. من الواضح أنه سيكون لديك العديد من المكونات الإضافية بعد البحث.
ومع ذلك، أفضّل أن أحذرك من أن استخدامه ليس سهلاً ويتطلب التدريب للعثور على طريقك بسرعة.
.
علاوة على ذلك، أشير إلى أربع خطوات رئيسية في إنشاء شريط التمرير:
- اختر موقع شريط التمرير وقم بإجراء التكوينات؛
- إعداد العناصر المرئية: لون الخلفية، والنصوص، والأزرار، والصور؛
- تغيير حجم شريط التمرير.
- تحسين شريط التمرير للوسائط المختلفة.
قم بتسجيل الدخول إلى حساب “المسؤول” لموقع WordPress الخاص بك
قبل البدء في إنشاء شريط التمرير، يجب عليك أولاً تسجيل الدخول إلى حساب المسؤول لموقع WordPress الخاص بك. للقيام بذلك، ما عليك سوى إضافة “…./wp-admin” إلى عنوان URL الخاص بموقعك. على الواجهة التي تظهر، املأ المربعات بالمعرفات الخاصة بك وقم بالتحقق من صحة الوصول إلى “لوحة التحكم” الخاصة بـ WordPress.
اختر موقع شريط التمرير وقم بإجراء التكوينات
1) تحرير الصفحة الرئيسية
بمجرد الاتصال بـ “Dashboard”، سأذهب إلى الصفحة الرئيسية لموقع Twaino.com الخاص بي حيث أن هذا هو المكان الذي أريد دمج شريط التمرير الخاص بي فيه.
ثم انقر على نافذة “تحرير الصفحة” المسبوقة برمز القلم الرصاص والموجودة في الأعلى، مباشرة بعد “+ إنشاء”.
على الواجهة التي تظهر، لديك في قسم “Builder” في “Fusion Builder”، ذكر “Slider Revolution” الذي سيسمح لك بإدراج شريط التمرير الخاص بك. لاحظ أنه يمكنك إضافة أشرطة تمرير إلى بعض أو كل صفحاتك حسب احتياجاتك.
في حالة وجود عدة أشرطة تمرير في صفحات مختلفة، يمكنك الوصول إليها جميعًا مباشرة من خلال الانتقال إلى قسم “Slider Revolution” في الشريط الجانبي الأيسر للوحة المعلومات ثم النقر على الخيار الذي يحمل نفس الاسم.
2) انتقل إلى واجهة تكوين شريط التمرير
في قسم “Builder” الذي يحمل علامة “Slider Revolution”، انقر فوق الزر الأزرق “Edit Slider” للدخول إلى مساحة تكوين شريط التمرير.
تعرض الصفحة التي تظهر الخيارات الموجودة في النافذة التي تحمل علامة “Param. شريط التمرير”، انقر على النافذة الأولى على اليسار “جميع أشرطة التمرير”.
3) تكرار silder الافتراضي
للمضي قدمًا بشكل أسرع، أنصحك بتكرار شريط التمرير الافتراضي لإجراء التعديلات اللازمة. لن توفر الوقت فحسب، بل ستتجنب الضياع في الإعدادات المختلفة للأداة.
للقيام بذلك، اضغط على السهم المشير للأسفل الموجود بجوار اسم شريط التمرير الخاص بك مباشرةً، ويسمى “1# avada-seo-hero”.
ثم حدد خيار “Duplicate” للحصول على نسخة من شريط التمرير.
أدخل عنوان شريط التمرير المكرر في مربع الحوار الذي يظهر، وأدخل “Twaino Home Page” على مستواي.
ثم اضغط على زر “تكرار” للتحقق من صحة الازدواجية.
4) واجهة تكوين شريط التمرير
بمجرد اكتمال النسخ، انقر فوق النسخة التي قمت بإنشائها للتو لإجراء التغييرات. في واجهة التكوين، ستشاهد في الموضع الأول عدد الشرائح، لدي ثلاث في مستواي.
في المركز الثاني، هناك خيارات مختلفة:
- صورة الخلفية أو صور الخلفية / الرئيسية؛
- عناوين URL الخارجية؛
- شفاف ؛
- ملونة؛
- فيديو يوتيوب ؛
- فيديو فيميو؛
- فيديو HTML5.
تتيح لك هذه الخيارات المختلفة اختيار نوع الصورة المرئية التي تريد وضعها على الشريحة. على مستواي، تم تحديد “ملون” ومن خلال التعديل، لاحظت أن لون خلفية الشريحة الأولى يتغير.
في المركز الثالث، نجد إسقاطًا لشريط التمرير يوضح بشكل مباشر كيف يبدو مع كل تعديل. في الأسفل، توجد إعدادات العناصر المختلفة التي سيتم ترتيبها وفقًا لاحتياجاتك والتوقيت الذي تريده.
بالضغط على زر “تشغيل”، سيكون لديك معاينة للرسوم المتحركة التي تم تكوينها. يرجى ملاحظة أنه يمكنك تغيير تكوين التوقيتات إلى أقرب ثانية حسب رغبتك، لكنني شخصيًا اخترت عدم القيام بذلك الآن لأنه إعداد يستغرق وقتًا طويلاً لإعداده بشكل صحيح.
5) حذف الشرائح غير الضرورية
على مستواي، لدي ثلاث شرائح بينما أريد الحصول على شريحة واحدة فقط، ولهذا السبب، سأقوم بحذف الشريحة الأخيرة.
للقيام بذلك، انتقل إلى الشرائح المعنية واسحب لأسفل لاختيار “مسح” من القائمة المنسدلة.
وبعد ذلك يمكنك الحفظ بالضغط على الزر الأخضر الذي يحمل أيقونة الحفظ. أقترح عليك الحفظ بشكل متكرر للتحقق من صحة تغييراتك.
بالنسبة للبقية، لدي بالفعل نموذج موقعي الذي يخبرني بالنتيجة التي أريد تحقيقها، لذلك أحتاج فقط إلى استخدامه للحصول على النتيجة النهائية وأنصحك بشدة أن تفعل الشيء نفسه. يمكنك أيضًا تكليف المصممين بالإنشاء من أجل الحصول على علامة تجارية احترافية.
إعداد العناصر المرئية: لون الخلفية، النصوص، الأزرار، الصورة
1) تغيير لون الخلفية
للقيام بذلك، سأقوم مباشرة بنسخ رمز اللون الذي أريد استخدامه في برنامج Adobe Illustrator.
إذا كان لديك أيضًا نموذج موقعك ولا تعرف بالضرورة رمز اللون الذي تريد استخدامه، فما عليك سوى سؤال مصمم الجرافيك الخاص بك. يتكون هذا الرمز بشكل عام من 6 أحرف بما في ذلك الأرقام والحروف.
ثم اضغط على المنطقة الملونة من خيار “ملون” الذي تحدثت عنه في النقطة رقم 4. في هذا المستوى، يمكنك اختيار لون خالص أو تدرج لوني، حسب رغباتك واحتياجاتك.
هذا تدرج يتكون من لونين على مستواي، لذلك قمت بتحديد “لون التدرج” وانقر نقرًا مزدوجًا على كل سهم أسفل التدرج لإدراج رموز الألوان الخاصة بي.
2) أدخل النص على الشريحة
أريد بعد ذلك إدراج النص “هل تريد زيادة حركة المرور العضوية الخاصة بك؟ ” على الشريحة. للقيام بذلك، انقر على النص الافتراضي وهو “نحن نقدم أفضل خدمات تحسين محركات البحث” بالنسبة لي.
ستلاحظ أن نفس الاختبار يظهر على مستطيل أسود في الأعلى وأن النص الموجود على الشريحة محاط بإطار، مما يدل على أنه يمكنني تعديله.
لذا اذهب وانسخ النص الذي ستلصقه في المستطيل الأسود بدلاً من النص الآخر. ستلاحظ أن النص الخاص بك يظهر الآن على الشريحة.
إذا رأيت عبارة “
»، فاعلم أنها منارة تسمح لك بالذهاب إلى الخط. ثم لدي في المستطيل الأسود النص الذي يبدو كالتالي:
“هل ترغب في زيادة حركة المرور العضوية الخاصة بك؟ »
ولكن الذي يقدم نفسه كما أريد على الشريحة:
“تريد الزيادة
حركة المرور العضوية الخاصة بك؟ »
بالضغط على النص، سترى أن هناك خيارات نصية تظهر في أعلى حقل التكوين. لتغيير خط هذا النص، قم بالإشارة إلى اسم الخط الذي تريده في المربع المناسب. في حالتي، أكتب “Gudea” بدلاً من “Source sans pro”.
قم أيضًا بتعديل الحجم وفقًا لما يناسبك، فقد قمت بضبطه على “55” لهذا النص. أفعل نفس الشيء لإضافة النص الثاني “اكتشف منهجيتنا ونصائحنا لزيادة ظهورك”. إلا أن الخط هذه المرة هو “Dosis” وحجمه “25”.
3) تعديل أزرار الشريحة
3-1) تعديل النص وإعطاء اللون الأول للزر
لتعديل أزرار الشرائح، يجب عليك المتابعة في خطوتين:
- استبدال النص؛
- تغيير لون الزر.
للخطوة الأولى، تحتاج إلى النقر على نص الزر. ستجد المستطيل الأسود الذي يحتوي على النص الافتراضي. أقوم بتغييره بكتابة “مدونة” بدلاً من ذلك وللزر الثاني “الخدمات”.
للحصول على اللون الدقيق الموجود في النموذج، انسخ الكود منه. بعد ذلك، انقر فوق الزر نفسه وسيكون لديك في الجزء العلوي من الحقل عدة خيارات بما في ذلك “الخلفية”، الموجودة على يمين “الخط”. قم بتحديده واختيار اللون المطلوب أو لصق الكود للحصول على لون معين بدقة.
وأغتنم الفرصة أيضًا لتعديل الخط وحجم النص في القائمة الموجودة أعلى قائمة “الخلفية”، مع “Gudea” كحرف و”15″ كحجم.
3-2) إعطاء لون تفاعلي ثاني لأزرار الشرائح
بعد إعطاء لون للأزرار، سأضيف لونًا ثانيًا سيتم عرضه عندما يقوم المستخدم بتمرير المؤشر فوق الزر. للقيام بذلك، انتقل إلى “التحويم” الموجود على نفس سطر “الخلفية” وعلى اليمين تمامًا.
لديك بعد ذلك قائمة “التحويم” والتي تتضمن أيضًا “الخط” و”الخلفية” وخيارات أخرى. ثم انقر فوق “الخلفية” و”اللون” لاختيار نوع اللون الذي تريده. يمكنك أيضًا تغيير خط النص، كما فعلت مع خطي.
ثم ارجع إلى قائمة “Idle” الموجودة بجوار “Hover” مباشرةً للعودة إلى إعدادات التكوين السابقة.
احفظ التغييرات وعندما تضغط على الزر ستلاحظ تغير لونه.
بعد ذلك، أفعل نفس الشيء تمامًا بالنسبة للزر الثاني “الخدمات”.
4) تغيير صورة الشريحة الخاصة بك
لتغيير الصورة، ما عليك سوى النقر نقرًا مزدوجًا على الصورة الافتراضية للوصول إلى “مكتبة الوسائط”.
ثم اضغط على “تحميل الملفات” الذي يسمح لك بتحميل صورتك باستخدام خيار “تحديد الملفات”.
لذلك أقوم باستيراد صورتي وأحرص على تسميتها.
لاحظ أنني نظرت مسبقًا إلى حجم الصورة الافتراضية لتكييف حجم الصورة الخاصة بي. للقيام بذلك، يمكنك الانتقال إلى قسم “الوسائط” في الشريط الجانبي الأيسر للوحة التحكم ثم إلى “المكتبة”.
سيكون لديك بعد ذلك معرض لجميع الصور الموجودة على الموقع وكل ما عليك فعله هو البحث عن الصورة المعنية ثم النقر عليها لرؤية تفاصيلها.
بالنسبة لي، لدي أبعاد 613 × 650 بكسل.
5) قم بربط شريط التمرير الجديد بالصفحة الصحيحة
لن تظهر التعديلات السابقة مباشرة على صفحتك الرئيسية عندما تذهب إلى هناك. لرؤية الشكل الذي يبدو عليه، ستقوم بربط شريط التمرير الذي قمت بإنشائه للتو بالصفحة الرئيسية المعنية.
انتقل أولاً إلى الصفحة الرئيسية ثم انقر على نافذة “تحرير الصفحة” المسبوقة برمز القلم الرصاص والموجودة في الأعلى.
لديك بعد ذلك إعدادات “Fusion Builder” وسوف تقوم بالتمرير لأسفل إلى قائمة “Sliders” في قسم “Fusion Slider Options”.
انقر على الشريط المنسدل “Select Slider Revolution Slider” وحدد اسم المظهر الخاص بك. اخترت “Twaino Home Page (#4)” وانقر على زر “Update” الأزرق الموجود في الركن الأيمن السفلي لحفظ التغيير.
انقر مباشرة على “معاينة” الموجودة بجوار “تحديث” مباشرةً لترى كيف تبدو الصفحة الرئيسية.
لقد أخذت في الاعتبار التعديلات التي أجريت على مستواي، لكن شريط التمرير الخاص بي يحتوي على الكثير من المساحات غير الضرورية التي سأقوم بتقليلها.
تغيير حجم شريط التمرير
1) تقليل حجم الشريحة
انتقل إلى قسم “Slider Revolution” الموجود على الشريط الجانبي للوحة القيادة ثم إلى نافذة “Params”. المنزلق”.
لديك بعد ذلك معلمات مختلفة بما في ذلك:
- مصدر المائة ;
- عنوان شريط التمرير والرمز القصير؛
- حدد نوع شريط التمرير؛
- تخطيط المنزلق.
- التخصيص والبناء والتنفيذ؛
يتيح لك إعداد “تحديد نوع شريط التمرير” الحصول على نوع شريط التمرير الذي تريده. اخترت شريط التمرير الذي لا يحتوي على سهم “Hero Scene” ليكون الشريحة الوحيدة الخاصة بي.
تسمح لك المعلمة “Slider Layout” من جانبها بتعديل حجم الشريحة.
أولاً، هناك تخطيط “العرض الكامل” الذي يناسبني جيدًا بالفعل. في الأسفل توجد الأبعاد التي سأقوم بتغييرها، لكني بحاجة إلى معرفة عرض موقع الويب الخاص بي على الأقل للقيام بذلك.
لمعرفة هذا العرض، انتقل إلى خيارات الموضوع الخاص بك.
لذلك قمت بالنقر على “Avada” ثم على “خيارات السمة” وفي “Layout” ستجد “Site Width” الذي يمثل عرض موقع الويب الخاص بك.
انسخ البعد الذي تجده أمام خيار “عرض الموقع” مباشرة، وهو “1260 بكسل”.
بعد ذلك، ما عليك سوى لصقه في معلمة “Slider Layout” وتحديدًا في المستطيل الأول الموجود أسفل تصميم شاشة الكمبيوتر مباشرةً والذي يحمل علامة “Desktop Large”.
قم أيضًا بتقليل ارتفاع الشريحة، لذلك أقوم بتغيير الإعداد الافتراضي “820 بكسل” إلى “600 بكسل”. أفعل نفس الشيء مع الشاشة الموجودة على اليمين والتي تحمل علامة “Portable”، مع الحرص على لصق العرض في المربع المناسب وإدخال “600 بكسل” في المربع الثاني.
لاحظ أنه يمكنك تغيير هذه الأبعاد في أي وقت حسب رغبتك. ثم احفظ تغييراتك للتحقق من صحتها وبمجرد وصولي إلى الصفحة الرئيسية، أستطيع أن أرى أن الأبعاد الجديدة قد تم أخذها في الاعتبار.
ومع ذلك، يجب علينا الآن إعادة تركيز النصوص وصورة الشريحة.
2) أعد تركيز محتوى سيلدر الخاص بك
انتقل إلى قسم “Slider Revolution” الموجود على الشريط الجانبي للوحة المعلومات ثم إلى نافذة “Slide Editor”. في هذا المستوى، كل ما عليك فعله هو النقر على كل عنصر وتحريكه للأعلى.
احفظ هذا التعديل وانتقل إلى الصفحة الرئيسية للاستمتاع بالنتيجة.
أنصحك بالذهاب ذهابًا وإيابًا عدة مرات إذا لزم الأمر للحصول على الشكل المناسب.
لاحظ أن هذا هو بالفعل العرض على شاشة كبيرة وأن العرض التقديمي قد يختلف من وسيلة إلى أخرى.
تحسين شريط التمرير للوسائط المختلفة
لا يتم عرض أشرطة التمرير على أجهزة الكمبيوتر بنفس الطريقة التي تظهر بها على أجهزة الكمبيوتر المحمولة أو الأجهزة اللوحية. للقيام بذلك، انتقل إلى نافذة “Slide Editor” الخاصة بـ “Slider Revolution” وبمجرد دخولك إلى حقل التكوين، ستجد في أعلى اليمين الأيقونات الثلاثة التي ترمز إلى الكمبيوتر المكتبي والكمبيوتر المحمول والهاتف المحمول.
انقر على كل من هذه الرموز لترى كيف يبدو موقع الويب الخاص بك على هذه الوسائط المختلفة. في حالتي، يقدم الأول موقع الويب الخاص بي بشكل جيد على عكس الرمزين الأخيرين حيث لم يتم توسيط المحتوى بعد وتم قطع أجزاء معينة من النصوص.
1- تحسين العرض على الكمبيوتر المحمول
لإعادة تركيز محتوى شريحتك على الكمبيوتر المحمول، انقر فوق الأيقونة المعنية وأعد تجميع كل عنصر كما في الخطوة السابقة.
يمكنك أيضًا تعديل حجم النص إذا كنت تريد ذلك.
ومع ذلك، لاحظ أن هذه التغييرات لا تؤثر على أنواع العرض الأخرى على الإطلاق.
2- تحسين العرض على الهواتف المحمولة
بالنسبة للهاتف المحمول، انقر على الأيقونة المقابلة لمتابعة التحسين.
ألاحظ في مستواي أن هناك صفتين وهماإطار شريط التمرير الخاص بي.
في الواقع، فهي تحدد منطقة العرض وأي عنصر خارجي لا يظهر في النهاية على الدعامة.
للقيام بذلك، أقوم بتقليل حجم النص الفائض وزيادة حجم النص الثاني. أوصي بتكبير الأزرار أكثر قليلًا وللقيام بذلك، انقر فوق كل منها للحصول على الخيارات المختلفة الموجودة أعلى حقل التكوين مباشرةً.
لذا قم بتغيير حجم النص بعد مد الزر. تذكر أيضًا توسيط النص من خلال النقر على سهم زر “النمط” الأزرق الموجود في الزاوية اليسرى العليا ثم على نافذة “المسافة”.
ثم اضغط على القائمة المنسدلة “وراثة” واختر “المركز”.
من ناحية أخرى، هناك أيضًا الصورة التي سأعيد التركيز عليها، مع الحرص على تقليل حجمها قليلاً لتناسبها بشكل جيد.
أحفظ التغييرات ومن خلال تصغير المتصفح الخاص بي لمحاكاة عرض موقعي على الهاتف المحمول، أرى أن كل شيء على ما يرام.
تحقق من التغييرات مرة أخيرة
تتكون هذه الخطوة الأخيرة من التحقق من العرض النهائي لموقع الويب الخاص بك على جميع الوسائط لمعرفة كيف يبدو. للقيام بذلك، لا تتردد في استخدام هاتفك الذكي وكذلك جهازك اللوحي وأي نوع آخر من الدعم لإجراء عملية التحقق.
وهناك تذهب! لقد انتهينا للتو من إنشاء شريط التمرير للصفحة الرئيسية.
ستتاح لي الفرصة لأوضح لك في مقال آخر كيفية ربط أزرار شريط التمرير بعناوين URL أو صفحات محددة لتسهيل التنقل.
خاتمة
بعد إنشاء قائمة التنقل لموقع الويب، تكون الخطوة التالية عادة هي إنشاء شريط تمرير لصفحتك الرئيسية. وكما ذكرت، لديك العديد من الخيارات فيما يتعلق بالمرئيات بما في ذلك الصور الثابتة وعرض الشرائح والفيديو.
ومع ذلك، فأنت مدين لنفسك باختيار شريط تمرير يجمع بين التصميم الجيد وسرعة التحميل السريعة للغاية. لسبب بسيط هو أن شريط التمرير هو أحد العناصر الأولى التي سيتم تقديمها للزوار وله تأثير كبير على قرارهم بمواصلة تصفح موقع الويب الخاص بك أم لا.
لذلك، أقترح عليك استخدام Slider Revolution وهي أداة قوية وفعالة، ولكنها قد تكون معقدة جدًا في الاستخدام وتستغرق وقتًا طويلاً. آمل أن تساعدك الخطوات المذكورة أعلاه بشكل كبير حتى تصبح أسرع بكثير باستخدام الأداة.
نراكم قريبا للبقية!