الكتلة الصفرية

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

إنشاء موقع إلكتروني باستخدام Zero Block في Mavibot أداة الإنشاء هو طريقة سريعة ومريحة لبناء موقع إلكتروني احترافي دون أي معرفة بالبرمجة. لا تتردد في التجربة وتخصيص التصميم وإضافة المحتوى لجعل موقعك فريدًا وناجحًا.

الـ Zero Block هو محرر تصميم ويب قابل للتخصيص بالكامل داخل Mavibot، ويتيح لك إنشاء تصاميم فريدة للكتل الفردية أو للموقع بأكمله دون أي قيود.

كيفية إضافة الكتلة

لإضافة Zero Block إلى الصفحة، انقر على زر "+" في شريط أدوات التحرير.

بعد النقر على زر "+"، ستظهر قائمة "إضافة كتلة جديدة" على اليمين.

حدد "Zero Block" وتابع عملية التحرير.

توجد قائمة إعدادات الكتلة.

ارتفاع المحتوى

يمكنك استخدام هذا الحقل لتغيير حجم الكتلة. القيمة الافتراضية هي 550 بكسل.

تغيير مقياس منطقة الشبكة

يُستخدم لتكييف تصميم الموقع مع أحجام الشاشات المختلفة.

وهو معطّل افتراضيًا، ولكن يمكنك أيضًا اختيار "التحجيم التلقائي حسب عرض النافذة".

إعدادات الخلفية

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

يمكنك إضافة ملف خلفية بصيغ SVG أو PNG أو JPG أو GIF. يجب ألا يتجاوز حجم الملف 30 ميغابايت.

مثال 1. إضافة ملف JPG.

يتم ضبط محاذاة الصورة الافتراضية على Center Center. يمكنك تحديد موضع مختلف من القائمة أو تحديد الموضع بنفسك بالنقر على الأيقونة الموجودة على اليمين.

مثال 1. العرض الافتراضي للصورة في موضع Center Center.

مثال 2. عرض الصورة في موضع Top Left. يتم ضبط الوضع الافتراضي لـ "behavior" على "scroll"، ويمكنك اختيار الوضع "fixed". عند تغيير الموضع، تتحرك الخلفية.

إضافة العناصر

انقر على زر "Add element" على اليسار. توجد طبقات في أسفل الزر، ويمكنك تغييرها فيما بينها من خلال تراكب عنصر فوق آخر.

ينشئ زر Add Element طبقة جديدة مع العنصر المحدد:

يفتح كل عنصر قائمة إعداداته الخاصة.

انقر على زر "Save" بعد إعداد العنصر.

نص

يمكنك إضافة عنصر يحتوي على نص.

مثال على إضافة نص إلى كتلة

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

صورة

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

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

مثال على إضافة صورة إلى كتلة

يمكن تغيير الخلفية في أي وقت.

شكل

يمكنك إضافة شكل إلى الكتلة (افتراضيًا يكون مستطيلًا). في الإعدادات، يمكنك اختيار شكل آخر: دائرة أو خط. يمكنك أيضًا تخصيص الشكل كما ترغب: المحاذاة، إضافة تأثيرات، تغيير اللون، الخلفية، النمط، إلخ.

إعدادات الشكل:

مثال على إضافة شكل إلى كتلة

زر

لإضافة زر، انقر على "Add item" واختر "Button":

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

لكي يكون الزر نشطًا، تحتاج إلى إضافة رابط إلى الصفحة المطلوبة في إعدادات العنصر ضمن قسم Button. عند النقر على الزر، سيتم الانتقال إلى الرابط.

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

فيديو

يمكنك استخدام هذه الأداة لإضافة أي فيديو وتكوين طريقة عرضه داخل الكتلة.

يمكنك إضافة مقاطع فيديو من مصادر متنوعة إلى كتلة الصفر:

للقيام بذلك، ما عليك سوى تحديد مكان الفيديو بدقة (Youtube أو Vimeo أو MP4)، ثم لصق الرابط في حقل الروابط.

يمكنك أيضًا إضافة مقاطع فيديو من وحدة التخزين. للقيام بذلك، انسخ رابط الفيديو من وحدة التخزين:

ثم حدد نوع فيديو MP4 في إعدادات عنصر "Video":

ثم الصق رابط الفيديو من وحدة التخزين.

تلميح

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

يمكنك جعل التلميح شبه شفاف ووضعه فوق النص أو الخلفية أو الصورة:

عند تمرير المؤشر فوق التلميح (في صفحة الموقع، وليس في وضع التحرير)، سيظهر بعض النص:

لا تنسَ حفظ الإجراءات المكتملة في الإعدادات باستخدام وظيفة "Save".

معرض

يمكنك إضافة عنصر جديد إلى كتلة الصفر بالطريقة نفسها كما في العناصر السابقة:

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

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

علاوة على ذلك، يمكنك ضبط الشفافية والدوران وتأثيرات أخرى للصور لجعل عرض المعرض داخل الكتلة أكثر جاذبية.

توجد خياران لحجم الصورة في المعرض: "cover" — العرض الكامل للصورة، و"contain" — مع حدود.

مثال 1. حجم الصورة - "cover"

مثال 2. حجم الصورة - "contain".

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

يمكنك أيضًا تحديد سرعة تمرير الصور والتشغيل التلقائي للتمرير عبر المعرض تلقائيًا.

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

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

أكورديون

يُعد عنصر الكتلة العالمي Accordion حلاً رسوميًا مريحًا لموقع إلكتروني على شكل قائمة من الملاحظات النصية مع عناصر منسدلة:

يمكن دمج Accordion بسهولة في موقعك وتخصيصه وفقًا لاحتياجاتك: إذ يمكن تكييفه مع أي متطلبات.

لإضافة عنصر إلى الكتلة، افتح إعدادات الكتلة العالمية. ستجد "Accordion" في قائمة العناصر المتاحة.

لتطبيق معلمات النمط المطلوبة على عنصر ما، تحتاج إلى النقر عليه. بعد ذلك، سيظهر مُنشئ معلمات "Accordion" على اليمين، كما هو الحال مع العناصر الأخرى في كتلة الصفر.

بعد النقر على السهم، ستظهر نافذة منبثقة تحتوي على معلومات على الشاشة، على سبيل المثال، إجابة لسؤال:

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

بعد تحديد النص للتحرير، ستظهر إعدادات النص في أعلى الشاشة، على غرار تلك المستخدمة في أي محرر نصوص.

في قائمة النص الإضافية هذه، يمكنك تغيير إعدادات الخط مثل السمك والميل والارتفاع وغيرها.

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

في إعدادات Accordion، يمكنك إضافة المزيد من أسئلتك وإجاباتك وما إلى ذلك. تحتاج إلى النقر على إضافة:

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

في Zero block، يمكنك دمج عناصر مختلفة لإنشاء أسلوب موقع فريد ولا يُنسى. سيسمح لك هذا بإبهار عملائك بحلول تصميم أصلية.

بعد الانتهاء من العمل على الصفحة، تحتاج إلى تكييفها مع أحجام الشاشات المختلفة.

نموذج

يتيح لك عنصر Zero block "Form" استخدام نموذج جمع الطلبات حيث تكون هناك حاجة فعلية إليه. ستتمكن من جمع الطلبات وبيانات الاتصال بدقة حيث يكون المستخدم أكثر تفاعلًا، دون الحاجة إلى عرضه في نموذج منفصل.

لإضافة نموذج إلى كتلة الصفر، انقر على "+Add item"، ثم اختر "Form" من القائمة المنسدلة التي تفتح.

ستظهر كتلة "Form" على شكل أزرار في تطبيقات المراسلة، ويمكنك إضافة أسئلة إليها وتغيير الأزرار:

لإضافة أسئلة إلى النموذج، مثل "Enter email" و"Describe your question" وما شابه، تحتاج إلى النقر على زر "Set up questions" في قائمة الإعدادات اليمنى:

ثم أنشئ أسئلتك في النموذج:

قد تكون النتيجة كما يلي:

يمكنك إضافة مربع الاختيار "I agree with the personal data processing policy":

يمكنك أيضًا تعديل أزرار وسائل التواصل الاجتماعي:

وتخصيص عنوان النموذج والعنوان الفرعي.

انقر نقرًا مزدوجًا على حقل النص، وبعد ذلك يمكنك إدخال النص المطلوب، وكذلك تغيير الخط، وجعله عريضًا، ولون النص، إلخ:

لمزيد من المعلومات حول أنواع حقول الأسئلة، راجع المقال "إجابات المنتدى".

reCAPTCHA

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

يمكنك اختيار أي خدمة توفر حماية للموقع باستخدام CAPTCHA. في هذا القسم، سنشرح كيفية تثبيت CAPTCHA من Google.

الخطوة 1. الحصول على المفاتيح

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

الخطوة 2. إدخال المفاتيح

ثم سترى زوجًا من المفاتيح تحتاج إلى نسخهما ولصقهما في إعدادات صفحة الموقع في MaviBot. وللقيام بذلك:

1) ابحث عن زر إعدادات صفحة الموقع في اللوحة العلوية:

2) انتقل إلى إعدادات المعلومات الأساسية:

3) في إعدادات المعلومات الأساسية، أدخل قيم زوج المفاتيح الذي حصلت عليه سابقًا:

الخطوة 3. تمكين reCAPTCHA في كتلة الصفر.

انتقل إلى كتلة الصفر حيث قمت بتثبيت نموذج جمع البيانات، أو إلى كتلة الصفر التي تخطط لإنشاء نموذج reCAPTCHA فيها:

انقر على عنصر "Form" في كتلة الصفر لفتح شريط القوائم الأيمن.

لقد وصفنا كيفية إنشاء نموذج جمع البيانات وتحريره في قسم "نموذج" أعلاه.

بعد ذلك، ابحث عن الأزرار الخاصة بتمكين reCAPTCHA:

تمكين reCAPTCHA (إذا لزم الأمر، يمكنك تمكين التحذيرات باللغة الإنجليزية):

ثم احفظ الإعدادات.

تم! الآن تعرف كيف تمكّن reCAPTCHA في Zero block.

تم وصف كيفية تكييف الصفحة في كتلة الصفر في المقالة التي تحمل الاسم نفسه.