التبديل بين المربعات في Squarespace: كيفية لكي زر اللغة

إذن، لقد أنشأت موقعك على Squarespace متعدد اللغات. أحسنت، تهانينا، مبروك— يسعدنا رؤيته!

الآن ما؟

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

أفضل Weglotمواقع Squarespace التي تمت ترجمتها بشكل جيد هي تلك التي واصلت صقل التفاصيل الدقيقة لمواقعها، خاصةً بعد طرح السؤال: «ماذا بعد؟»

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

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

Weglot الأمر لا يسير على هذا النحو — أو، على الأقل، ليس بالضرورة أن يكون كذلك. عند تثبيت Weglot على موقع Squarespace الخاص بك، سترى في البداية زرًا لتبديل اللغة يبدو هكذا، في الزاوية اليمنى السفلية من صفحتك:

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

والكثير من الناس يحبون المظهر العملي، وهذا أمر طبيعي تمامًا. إذا كان المستطيل الأبيض يناسبك وموقعك، فأنت تعرف ما (أو ربما لا تعرف، لكنك ستعرف الآن): "إذا لم يكن هناك عطل، فلا تصلحه." (في الفرنسية، نقول أحيانًا "On ne change pas une équipe qui gagne"— وهذا مناسب أيضًا.)

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

أين يجب أن أضع الزر الخاص بي؟

قد يبدو مفهوم "وضع الأزرار" بسيطًا، ولكن فكر في عدد الأزرار التي تضغط عليها يوميًا. وهذا يشمل مفاتيح لوحة مفاتيح الهاتف الذكي، أيها الأطفال؛ نحن في عام 2019، ومن المحتمل أن أصابعنا تتلامس مع أكثر مما تتلامس مع الماء والصابون (هذا مقرف، ولكنه حقيقي). المقصود هو أن الأزرار موجودة في كل مكان.

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

الأمور الجانبية

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

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

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

قد تسألون: ما تقول الأبحاث ما ؟

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

أصدر خبراء تصميم UI-UX في Material Design دليلاً مفصلاً حول عناصر صفحة الويب التي يجب تعديلها (وتلك التي لا يجب تعديلها) بين اللغات التي تقرألكي("LTR" — مثل الإنجليزية، على سبيل المثال)لكي("RTL"، مثل العربية أو العبرية).

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

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

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

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

بالطبع، إذا كنت تقوم بإنشاء موقعك الأولي بلغة RTL — مثل العربية أو العبرية أو الفارسية —فستحتاج لكي بالعكس، وإبق اء هذا الزر على الجانب الأيسر.

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

ولكن هل يمكنني رؤية القائمة من فضلك؟

ربما لا تزال تفكر، لماذا لا تضعه في منطقة "المنطقة البصرية الأساسية" بدلاً من ذلك؟ -وهذا سؤال وجيه.

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

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

أزرار القائمة على Squarespace: التصميم والتركيب والتركيب والتعريب

إن دمج Weglot زر تبديل اللغة في شريط القوائم على Squarespace (وينطبق هذا على أي نوع من أشرطة القوائم، بغض النظر عن الجانب الذي تظهر فيه — لذا فإن اتجاه الكتابة في لغتك لا يؤثر على طريقة عمل هذا الزر) أمر سهل للغاية.

في محرر موقعك، يمكنك النقر على "الصفحات"، مما سيقودك لكي يشبه ما يلي:

بالنقر على علامة "+" لكي " لكي الرئيسي"، ستتمكن لكي روابط و/أو قوائم منسدلة لكي العناوين الرئيسية.

سواء اخترت لكي اللغات المتاحة لموقعك كخيارات مباشرة في القائمة الرئيسية...

...أو بالأحرى كعناصر قائمة منسدلة متكاملة...

... أنت في أيد أمينة: العملية هي نفسها. إذا قمت بإنشاء قائمة منسدلة، فستتمكن أيضًا لكي روابط (مثل الأمر "+" في قائمة التنقل الرئيسية) — وستكون العملية التالية لكي لغة أضفتها لكي .

بمجرد اختيارك لكي رابط، سواء لكي شريط القائمة الرئيسي أو لكي منسدلة مدمجة، ستظهر لك نافذة منبثقة تبدو كما يلي:

قم بتسمية الرابط باسم اللغة التي ترغب لكي موقعك لكي. يمكنك بالطبع تسمية اللغة باسمها في لغتك الأصلية — على مثل"الإسبانية" بدلاً لكي إذا كنت تنشئ موقعك الأصلي باللغة الإنجليزية — ولكننا نوصيك بوضع الاسم الأصلي للغة كعنوان لها، حتى يتمكن المتحدثون بها لكي عليها أكثر .  Tl;dr: اختر "Español" بدلاً لكي ؛ و"Français" بدلاً لكي ؛ وهكذا دواليك.

بعد ذلك، سيتعين عليك إدخال الرابط الذي تريد أن يؤدي إليه هذا العنوان. وبما أن Weglotموقع Squarespace الذي تمت ترجمته لا يحتوي على صفحات مكررة في مجلدات فرعية، بل يتكون من نطاقات فرعية منفصلة لكل لغة، فلن تقوم في الواقع بالربط بعنوان URL منفصل. بدلاً من ذلك، أدخل السلسلة “#Weglot-” متبوعًا برمز اللغة ISO المكون من حرفين للغة التي تعمل عليها (لدينا قائمة كاملة بهذه الرموز هنا).

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

...مثل هؤلاء الرجال.

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

بالطبع، هذا لا ينبغي أن يمنعك من محاولة لكي مظهر موقعك وجعله ملكك بالفعل.

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

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

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

مشروع سيكو

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

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

السباحة الاستكشافية

يبدو موقع مشروع Siku ما منا على الأرجح لكي مواقع Squarespace — فهو أحادي اللون، مليء بالصور، ونظيف. لكن مواقع Squarespace يمكن أن تكون أيضًا ملونة وغريبة — وهذا هو الطريق لكي مشروع Expedition Swim في بروكسل (أو بالأحرى، السباحة).

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

لقد جعلوا الموقع سهل الاستخدام للغاية من خلال عرض لغاتهم الثلاث - الفرنسية والإنجليزية والهولندية - برموز اللغات المكونة من حرفين والمعروفة عالميًا (FR و EN و NL)، دون الحاجة إلى النقر على قائمة منسدلة. سيتمكن كل سكان بروكسل، لكي يبحثون عن نشاط صيفي رائع لكي لكي الموقع لكي الخاصة في غضون ثانيتين.

سيلزكاندي

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

كيف فعلوا ذلك؟ هناك أمران على وجه الخصوص: أ) قائمة اللغات المنسدلة (نعم لا يمكننا التأكيد على ذلك بما فيه الكفاية) موجودة في مكان مناسب على الجانب الأيمن من الصفحة، و ب) خيارات اللغة مكتوبة باللغة الأصلية، أي لكي ،هكذا:

هل تشعر بالإلهام؟

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