كيفية إضافة زر مخصص إلى سكوير سبيس

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

توفر سكوير سبيس (Squarespace) مكوّن زر أساسي، ولكنك تقوم بتصميمه من لوحة “أنماط الموقع” (Site Styles) العامة بدلاً من تحديد الزر نفسه. تأتي الأزرار بثلاثة أنواع: أساسية، وثانوية، ومن الدرجة الثالثة. يتم تصميم كل نوع عبر موقعك بالكامل، لذلك تحصل على ثلاثة تصميمات للأزرار إجمالاً. ينطبق إعادة تصميم الزر الأساسي على كل زر أساسي لديك، وينطبق الشيء نفسه على الأنواع الثانوية ومن الدرجة الثالثة. الإعدادات محدودة في حد ذاتها أيضاً، مع عدم وجود خيارات للأيقونات أو تأثيرات التمرير أو التدرجات اللونية.

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

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

الخيار 1: استخدام المكونات الأساسية مع مقتطفات CSS المخصصة

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

إليك كيفية إضافة زر في سكوير سبيس باستخدام CSS مخصص:

1. افتح الصفحة في المحرر الخاص بك، وقم بالتمرير فوق القسم الذي تريد إضافة الزر إليه، وانقر على إضافة مكوّن (Add Block)، واختر زر (Button).

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

3. بعد ذلك، ابحث عن معرف المكوّن (block ID). يحتوي كل مكوّن في صفحة سكوير سبيس على معرف فريد، ووضعه أمام كود CSS الخاص بك يقصر التغيير على ذلك الزر الواحد بدلاً من تطبيقه على كل زر من نوعه. يمكنك العثور عليه عن طريق فحص الصفحة في متصفحك، بالنقر بزر الماوس الأيمن على المكوّن وتحديد فحص (Inspect)، أو باستخدام إحدى إضافات المتصفح المجانية للبحث عن معرفات سكوير سبيس. 

4. خارج المحرر الخاص بك، انتقل إلى موقع الويب (Website) في الشريط الجانبي، وانقر على الصفحات (Pages)، ثم كود مخصص (Custom Code)، وحدد CSS مخصص (Custom CSS).

5. اكتب قواعدك واحفظها — استهدف معرف المكوّن ذلك، ثم انقر على حفظ (Save). أنماط سكوير سبيس الخاصة محددة بدرجة كافية لدرجة أنك ستحتاج غالباً إلى إضافة !important لكي تسري أنماطك. بمجرد الحفظ، يبدو ذلك الزر الواحد بالطريقة التي تريدها بينما يبقى كل زر آخر في موقعك كما هو.

يعد استهداف المكوّن الخاطئ المشكلة الأكثر شيوعاً، حيث إن المقتطف المكتوب لـ “.sqs-block-button-element” بدون معرف المكوّن أمامه يعيد تصميم كل زر أساسي على موقعك، بما في ذلك زر الدعوة لاتخاذ إجراء في الترويسة وأزرار الدفع. مشكلة شائعة أخرى هي كيفية ظهوره على الهاتف المحمول — يمكن للعروض الثابتة وأحجام الخطوط الكبيرة التي تبدو صحيحة على سطح المكتب أن تدفع الزر خارج شاشة الهاتف أو تقسم النص إلى أسطر من حرف واحد.

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

الخيار 2: إضافة أداة زر مجانية وقابلة للتخصيص (موصى به)

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

قبل أن تبدأ، تحقق من خطة سكوير سبيس (Squarespace) الخاصة بك. تعد إضافة كود تضمين إلى مكوّن كود ميزة استثنائية تتطلب خطة “Core” أو أعلى. في خطة مستوى الدخول، يبقى الكود في المكوّن ولكنه لا يعمل.

فيما يتعلق بالأداة التي يجب اختيارها، فإن أداة الزر (Button Widget) من Jotform هي أداة زر مجانية لسكوير سبيس تمنحك تحكماً مرئياً أكبر من المكوّن الأساسي. يمكنك تخصيص ألوان الخلفية، والنص، والتمرير بشكل مستقل، وإضافة أيقونة قبل أو بعد التسمية، وضبط نصف قطر الزاوية، والارتفاع، والحشوة، وحجم النص، والظل. 

إليك كيفية إضافة زر في سكوير سبيس باستخدام الأداة:

1. في صفحة مساحة عمل Jotform الخاصة بك، انقر على إنشاء (Create)، وحدد أداة موقع الويب (Website Widget)، وابحث عن “Button”، ثم انقر على استخدام الأداة (Use Widget).

2. ضمن علامة التبويب عام (General tab)، اختر ما يفعله الزر — سواء كان ذلك فتح صفحة ويب، أو بدء رسالة بريد إلكتروني، أو فتح محادثة واتساب — ثم أدخل عنوان URL للرابط وتسمية الزر. قم بالتبديل إلى علامة التبويب النمط (Style tab) للألوان، والأيقونات، والأشكال، ثم إلى علامة التبويب التخطيط (Layout tab) لاختيار ما إذا كان الزر مضمناً أو عائماً وما إذا كان يظهر على سطح المكتب أو الهاتف المحمول أو كليهما.

3. انقر على نشر (Publish)، ثم انقر على نسخ الكود (Copy Code) في قسم التضمين (Embed). 

4. في محرر سكوير سبيس (Squarespace editor) الخاص بك، انقر على إضافة مكوّن (Add Block)، واختر كود (Code)، واضبط وضع المكوّن على HTML، واحذف النص النائب، والصق الكود الخاص بك، ثم انقر على حفظ (Save).

نظراً لأن تصميم الزر يتم في Jotform بدلاً من لوحة CSS المخصص الخاصة بك، فلن يتعارض مع “أنماط الموقع” (Site Styles) العامة، ولن تؤثر تغييراتك على الأزرار الأخرى في موقعك. إن تجربة لون أو تسمية مختلفة تعني تعديل الأداة بدلاً من البحث عن معرف مكوّن وإعادة كتابة مقتطف برمجي.

عزز موقع سكوير سبيس الخاص بك بأدوات ذكية لا تتطلب خوادم

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

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

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

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

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

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