يعني تصميم الموقع اختيار السمات والألوان لموقعك العام، وتحميل شعار وتحديد التصميم الذي سيؤثر على موقعك بالكامل وجميع الصفحات.
باستخدام أداة المصمم في تيكتور، يمكنك تقريبًا إنشاء أي تصميم أو موقع تتخيله أو يمكنك مطابقة الموقع للحصول على نفس الشكل والأسلوب لموقع آخر أو موقعك الرسمي.
حتى إذا كنت تقوم بدمج أو تضمين التذاكر في موقع موجود، فلا يزال يتعين عليك استخدام أداة المصمم لجعل الموقع له نفس الإحساس والمظهر مثل موقعك الآخر وتحميل شعاراتك وصور الخلفية.
يمكنك تشغيل أداة المصمم من لوحة التحكم> الحساب والإعدادات> التصميم. يمكنك اتباع المعالج للحصول على الإعدادات الأساسية أو تخطي المعالج للانتقال إلى اللوحة الرئيسية.
تفتح اللوحة الرئيسية على صفحتك حتى تتمكن من رؤية تأثير التغييرات التي تجريها على الصفحة على الفور. يمكنك الانتقال إلى صفحات أخرى لمشاهدة التأثير على جميع الصفحات.
يتم حفظ جميع التغييرات التي تم إجراؤها على هذه اللوحة وتطبيقها تلقائيًا ولا تتطلب حفظًا. يمكنك استخدام Ctrl + Z للتراجع.
ملاحظة مهمة: سهولة الاستخدام أهم من المظهر
أهم اعتبار عند تصميم الموقع هو سهولة الاستخدام.
لا تريد أن تضحي أبدًا بقابلية الاستخدام من أجل تصميم أو جمال موقعك. فيما يلي بعض النقاط التي تريد أن توليها مزيدًا من الاهتمام:
- تباين الألوان: يجب أن يحتوي لون النص ولون الخلفية على تباين كافٍ ليكون قابلاً للقراءة بسهولة، ليس فقط بالعين السليمة، ولكن أيضًا بواسطة المستخدمين المعاقين.
- الود المتنقل. ضع في اعتبارك دائمًا حالات استخدام الشاشات الصغيرة والمتحركة عند تصميم الموقع. حاول تجنب الحشوات الكبيرة والهوامش حول الصفحة والتي ستجعل مساحة المحتوى الرئيسي صغيرة جدًا. حاول أيضًا تجنب التصميمات ذات الأعمدة المتعددة لأنها قد لا تتناسب مع الشاشات الصغيرة كما تتوقع.
مع وضع هؤلاء في الاعتبار، لنبدأ في تصميم الموقع:
حدد موضوعًا
ابدأ بتحديد موضوع. يحدد الموضوع اللون العام للموقع. حدد موضوعًا يتناسب بشكل أفضل مع شعارك وعلامتك التجارية. يمكنك تغيير الألوان والخلفيات والحدود والإعدادات الأخرى لمناطق مختلفة لاحقًا. لذلك لا تقلق إذا لم تجد مظهرًا مثاليًا. ما عليك سوى اختيار اللون الذي يستخدم الألوان الأقرب لعلامتك التجارية أو ذوقك.
تأكد من اختيار سمة ذات لون نص فاتح إذا كنت تخطط لتصميم موقع ذي ألوان داكنة واختر سمة ذات لون نص غامق إذا كنت تخطط لإنشاء موقع بخلفية فاتحة.
ارفع شعارك
بعد ذلك، انتقل إلى لوحة شعار الموقع وقم بتحميل شعارك. إذا لم يكن لديك شعار، فيمكنك استخدام شعار النص بدلاً من ذلك.
الشعار بالإضافة إلى التنقل في الموقع هما العنصران الموجودان في منطقة رأس الموقع.
يمكنك تغيير حجم الشعار والتنقل العلوي عن طريق سحب المقبض في الزاوية اليمنى السفلية منها ويمكنك تحريك الشعار والتنقل العلوي في أي مكان في منطقة الرأس.
يمكنك أيضًا ضبط ارتفاع منطقة الرأس عن طريق سحب الجزء السفلي من الرأس.
حدد التخطيط وإعدادات الرأس
بعد ذلك حدد التخطيط الخاص بك. ضع في اعتبارك شاشات العرض الكبيرة جدًا وكذلك شاشات الجوال الصغيرة جدًا عند تحديد التخطيط. قد لا يبدو تخطيط العرض الكامل جيدًا على الشاشات العريضة. قد يضيع تخطيط العرض الثابت (الوسط) الكثير من مساحة الشاشة على الشاشات الكبيرة.
أرغب في اختيار "العرض الكامل مع وجود محتوى في المنتصف". يستخدمون عرض الشاشة بالكامل على الشاشات الصغيرة ويظهرون بشكل جيد على شاشة عريضة.
اعتمادًا على ما إذا كنت تريد ألوان الرأس والوحدة النمطية، التي سنقوم بتعديلها في الخطوات التالية، لتغطية عرض الشاشة بالكامل أو المركز فقط، يجب عليك تحديد أحد التخطيطات التي تحافظ على المحتوى في المركز.
أيضًا، يمكنك اختيار تصميم التنقل العلوي. يمكنك اختيار روابط بسيطة أو نمط مختلف من الصناديق.
ثم يمكنك ضبط محاذاة العناصر في رأس الموقع. يحتوي رأس الموقع على شعارك وأعلى التنقل.
يمكنك سحب الشعار وإفلاته أو شريط التنقل العلوي لنقلهما إلى أي مكان في منطقة الرأس. يمكنك تغيير حجم الشعار أو قائمة التنقل باستخدام المقبض الموجود أسفل اليمين. إذا كانت قائمة التنقل ضيقة جدًا، فستلتف العناصر الموجودة في التنقل إلى سطر ثانٍ.
يمكنك أيضًا ضبط ارتفاع منطقة الرأس عن طريق سحب الحافة السفلية.
قم بتغيير حجم المستعرض الخاص بك للتأكد من أن منطقة الرأس تبدو جيدة على جميع أحجام الشاشة وعرضها ولا تسبب التمرير.
تحميل شعار التذكرة
بعد ذلك، قم بتحميل شعار تذكرتك الإلكترونية. هذا هو الشعار الذي تتم طباعته على التذاكر الخاصة بك. تذكر أن التذاكر تُطبع على أوراق بيضاء لذا يجب أن يتباين شعار التذكرة الإلكترونية مع الأبيض.
عند إنشاء حدث، يمكنك معاينة التذاكر وشعار التذكرة الإلكترونية الذي تقوم بتحميله هنا.
تحميل رأس وتذييل البريد الإلكتروني
سيتم إرسال جميع رسائل البريد الإلكتروني الصادرة من النظام، بما في ذلك رسائل البريد الإلكتروني الترحيبية ورسائل التأكيد الإلكترونية وأي رسالة إخبارية ترسلها مع رأس وتذييل البريد الإلكتروني الذي تقوم بتحميله هنا.
ملاحظة: يمكنك أيضًا إضافة توقيع بريد إلكتروني من لوحة التحكم> الحساب والإعدادات> تحرير رسائل البريد الإلكتروني والتأكيدات> توقيع البريد الإلكتروني
تخصيص السمات والألوان لكل قسم صفحة
في هذه المرحلة، يمكنك تخصيص النسق المحدد أو تغيير بعض الألوان أو الحدود أو تحميل صور الخلفية.
انتقل إلى علامة التبويب "الأقسام". تتضمن علامة التبويب هذه لوحات متعددة لأقسام مختلفة من الصفحة. يتشابه محتوى اللوحات إلى حد كبير مع كل قسم ويسمح لك بتخصيص هذا القسم.
تتكون كل صفحة على موقعك من الأقسام التالية:
- الصفحة: هي الصفحة العامة. يمكنك استخدام هذا القسم لتعيين صورة خلفية أو لون للصفحة وإجراء إعدادات أخرى
- رأس الصفحة: عنوان الصفحة حيث يوجد شعارك وأعلى قائمة التنقل. يمكنك استخدام هذا القسم لتغيير لون شريط التنقل العلوي أو تغيير خلفية رأس الصفحة
- تذييل الصفحة: يتحكم في لون وتصميم تذييل الموقع. يحتوي تذييل الموقع عادةً على شعارات بطاقة الائتمان ورابط لشروطك ويمكنك إضافة أي محتوى إلى تذييل الموقع من لوحة التحكم> الحساب والإعدادات> تحرير المحتوى> تذييل الموقع
- الوحدة النمطية: الوحدة النمطية هي المنطقة التي يوجد بها المحتوى الرئيسي للصفحة. على سبيل المثال، منطقة "البحث عن التذاكر"، منطقة "عربة التسوق"، منطقة "قائمة الأحداث"، منطقة "اتصل بنا" كلها وحدات. قد تحتوي كل صفحة على وحدة نمطية واحدة أو أكثر. تتكون الوحدة النمطية من رأس وجسم. يحتوي العنوان على عنوان الوحدة ويحتوي النص الأساسي على المحتوى الرئيسي للوحدة. قد يكون عرض الوحدة هو العرض الكامل للشاشة أو قد يقتصر على المنطقة المركزية اعتمادًا على التخطيط الذي تختاره. إذا كنت ترغب في الحصول على صورة خلفية للوحدات النمطية التي تغطي عرض الشاشة بالكامل أو إذا كنت تريد أن ينتقل رأس الوحدة إلى حواف الشاشة، فاختر التنسيق "العرض الكامل - محتوى الوحدة النمطية في المركز "لذلك يقتصر محتوى الوحدة (الجسم) فقط على المركز بينما يكون الرأس والوحدة بعرض كامل. بخلاف ذلك، إذا كنت تريد أن يقتصر رأس الوحدة على المنطقة المركزية، فاختر "العرض الكامل - الوحدة النمطية في المركز" أو "العرض الكامل - كل المحتوى في المركز" لقصر رأس الموقع على المركز أيضًا.
- نص الوحدة: هو جزء من الوحدة يحتوي على المحتوى الرئيسي، باستثناء رأس الوحدة (العنوان)
- عنوان الوحدة: هو الجزء العلوي من الوحدة بعنوان الوحدة. يمكنك ضبط ارتفاع رأس الوحدة عن طريق سحب الحافة السفلية ويمكنك ضبط حجم خط عنوان الوحدة أو اللون ولون الخلفية.
- المحتوى: هذا ليس منطقة أو قسمًا معينًا من الصفحة ولكنه يشير إلى المحتوى العام للصفحة. يمكنك تغيير لون المحتوى الرئيسي ولون "الإبرازات والتكملات" المستخدم كلون ثانوي للعناوين أو الإبرازات في النص.
- العناصر القابلة للنقر: هنا يمكنك ضبط الألوان والإعدادات للمناطق القابلة للنقر من الصفحة بما في ذلك الروابط والأزرار وعلامات التبويب ورؤوس اللوحة. يمكنك تعيين "الحالة الافتراضية" أو كيف تبدو العناصر القابلة للنقر بشكل طبيعي، و "حالة التمرير" عند تحريك الماوس فوق منطقة قابلة للنقر، و "الحالة النشطة"، مثل علامة التبويب النشطة في لوحة، و "الزر الأساسي" و "الأداة المساعدة زر "ألوان وأنماط مستخدمة في جميع أنحاء الموقع.
في كل لوحة، يمكنك تعيين الإعدادات التالية أو الكتابة فوقها:
- لون أو نمط الخلفية (خالص أو متدرج). يمكنك اختيار ألوان شبه شفافة لإنشاء مساحات شفافة. على سبيل المثال، يمكنك تحديد لون خلفية رمادي أو أبيض شبه شفاف للوحدة النمطية أو خلفية جسم الوحدة النمطية لجعل منطقة الوحدة منفصلة عن باقي الصفحة وإعطاء تباين كافٍ للنص، مع إظهار صورة خلفية صفحتك. يمكن استخدام هذه التقنية لإنشاء وحدة نمطية حديثة المظهر بدون حدود ومربعات
- صورة الخلفية التي يمكنك تحميلها أو تحديدها من المعرض
- عرض ولون الحدود التي يمكن ضبطها لكل جانب من جوانب القسم: أعلى، أسفل، يسار ويمين. لإزالة الحد لمنطقة تأتي افتراضيًا بحد، ما عليك سوى تعيين عرض الحد على صفر لجميع الجوانب الأربعة.
- الحشو هو المساحة الداخلية الفارغة للمنطقة، بين محتوى المربع وحدود المربع. يمكن ضبطه لكل جانب من جوانب الصندوق بشكل مستقل.
- الهامش، وهو المساحة الخارجية للمربع، من حد المربع إلى المربع التالي في الصفحة. يمكن ضبطه لجميع الجوانب الأربعة للصندوق بشكل مستقل.
- يمكن أن يضبط لون الظل وحجمه ظل الصندوق. إذا كان المظهر الخاص بك يأتي بظل وتريد إزالته، فما عليك سوى تعيين الحجم على صفر.
- يمكن ضبط نصف قطر الزاوية لإنشاء مربعات بزاوية مستديرة. يمكن ضبط نصف قطر الزاوية لكل زاوية على حدة. يمكنك استخدام نصف قطر كبير في بعض الزوايا لإنشاء صناديق غير منتظمة.
- يسمح لك الخط ولون الخط وظل الخط بتعيين الخط للقسم.
باستخدام علامة التبويب "الأقسام"، يجب أن تكون قادرًا على تخصيص تصميم موقعك بالكامل.
سي إس إس
CSS هي تقنية يستخدمها مصممو الويب لتصميم موقع. باستخدام CSS، يمكن للمصمم إخفاء أو تغيير نمط كل عنصر فردي على الصفحة بطريقة دقيقة للغاية أو عامة.
نظرًا لأن علامة التبويب "الأقسام" في لوحة المصمم تمنحك تحكمًا جيدًا جدًا في نمط الموقع، فمن غير المرجح أن تحتاج إلى كتابة أي كود CSS. في الواقع، لا يشجع تيكتور استخدام CSS على الموقع إلا في حالات نادرة جدًا.
إذا كنت مطور ويب وقررت استخدام قسم CSS لإضافة نمط إلى الموقع، فتأكد من قصر المحددات الخاصة بك بعناية على العنصر المحدد الذي تستهدفه ولا تستخدم المحددات العامة لتجنب أي عواقب غير متوقعة قد تؤثر على الموقع وظائف.
