Webflow: كيفية إنشاء زر CTA خارج القائمة؟

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

لماذا تضع زر CTA خارج القائمة؟

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

تشمل مزايا وضع زر CTA خارج القائمة ما يلي:

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

خطوات إنشاء زر CTA خارج القائمة في Webflow

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

1. قم بإعداد مشروع Webflow الخاص بك

قبل أن تبدأ، تأكد من إعداد مشروع Webflow ومن وجودك في عرض "المصمم".

• الخطوة 1.1 : افتح مشروع Webflow الخاص بك وانتقل إلى الصفحة التي تريد إضافة زر CTA إليها.
• الخطوة 1.2 : في وضع المصمم، تأكد من أن تخطيط صفحتك جاهز، مع وجود قائمة التنقل الخاصة بك في مكانها (أو في أي مكان تريد إضافة الزر فيه).

2. قم بإنشاء زر CTA جديد

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

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

3. ضع زر CTA خارج القائمة

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

الخيار 1: زر CTA العائم

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

• الخطوة 3.1 : حدد الزر الذي قمت بإنشائه وانتقل إلى إعدادات Position في لوحة النمط اليمنى.
• الخطوة 3.2 : اضبط الموضع على Fixed . وهذا يضمن بقاء الزر في مكانه على الشاشة أثناء قيام المستخدم بالتمرير.
• الخطوة 3.3 : اضبط الموضع عن طريق تعيين القيم Top أو Right أو Bottom أو Left لوضع الزر في المكان الذي تريده على الشاشة (على سبيل المثال، الزاوية اليمنى السفلية أو الزاوية العلوية اليسرى).
• الخطوة 3.4 : أضف قيمة z-index لضمان ظهور الزر فوق العناصر الأخرى، مثل القائمة. يمكنك ضبط مؤشر z على قيمة أعلى، مثل 10 أو 100 ، للتأكد من وجوده في الأعلى.

الخيار 2: وضعه في قسم الرأس

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

• الخطوة 3.1 : انتقل إلى لوحة Navigator وحدد قسم الرأس الخاص بك.
• الخطوة 3.2 : قم بإنشاء Div Block جديد ليكون بمثابة حاوية لزر CTA الخاص بك. سيساعد هذا في تحديد موضع الزر بالنسبة للعناصر الأخرى.
• الخطوة 3.3 : اسحب الزر إلى حاوية Div Block .
• الخطوة 3.4 : استخدم إعدادات Margin أو Padding في لوحة النمط لنقل الزر إلى الموقع المطلوب داخل الرأس (على سبيل المثال، خارج القائمة الرئيسية ولكن لا يزال محاذيًا للرأس).

الخيار 3: زر CTA على شريط التنقل الثابت

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

• الخطوة 3.1 : حدد عنصر شريط التنقل واضبط Position على Sticky في لوحة النمط.
• الخطوة 3.2 : أضف Div Block جديدة بجوار عناصر القائمة حيث تريد أن يظهر الزر.
• الخطوة 3.3 : ضع الزر داخل Div Block واضبط موضعه باستخدام الهامش أو الحشو.

4. اجعل الزر تفاعليًا

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

• الخطوة 4.1 : حدد الزر وانتقل إلى لوحة Interactions في Webflow.
• الخطوة 4.2 : أضف تفاعل التمرير، مثل تغيير لون الخلفية أو تغيير حجم الزر قليلاً عندما يحوم المستخدم فوقه.
• الخطوة 4.3 : قم بإعداد رابط للزر. يمكنك ربطه بصفحة أخرى أو عنوان URL خارجي، أو إعداد إجراء مثل فتح نموذج أو نموذج.

5. المعاينة والنشر

بعد إعداد زر CTA، من المهم معاينة كيفية عمله على الصفحة.

• الخطوة 5.1 : انقر فوق الزر Preview في الزاوية العلوية اليمنى لترى كيف يبدو الزر ويتصرف على الصفحة.
• الخطوة 5.2 : اختبر استجابتها على أحجام مختلفة للشاشات للتأكد من وضعها بشكل صحيح.
• الخطوة 5.3 : بمجرد أن تصبح راضيًا عن النتيجة، انقر فوق Publish لتفعيل الزر على موقع الويب الخاص بك.

أفضل الممارسات لأزرار CTA خارج القائمة

على الرغم من أن وضع زر CTA خارج القائمة يمكن أن يكون فعالاً للغاية، فمن الضروري اتباع بعض أفضل الممارسات للتأكد من أنه يعمل بشكل جيد:

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

خاتمة

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