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

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

<figure><img src="/files/d20fc826b94fa9b25714ed732377924d5ef54f2f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/e512013b206365dc842bd7167b9ae241bb9ff9d1" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/ee525557d4413a68b3bac74211237088173631da" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/a7a78752ff099a6a73f4e1a450deacfdbd6ac411" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/514ef5550792498bd1273683ccef81c3c2f05ccc" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/3c6c1680bb1896b83ad5f48de56e31db930b13ea" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/0e0a4e02c1494654bb4b847fb358eead8a1c1413" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/0a783a62af51744ca2bcef36eeabf9c44d7d0d85" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/d42c0a851b013f20415468b9a54393ce025bdafb" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/d41f34066b19591c6769bc4a55aad9d2715b4046" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/9053da724821ccff12cbedbe781ba6d4acd70da2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/166199e08923c2b5c8113d3d73f2ad770f71ac23" alt=""><figcaption></figcaption></figure>

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

&#x20;انقر على زر "Save" بعد إعداد العنصر.

<figure><img src="/files/691c4633717cdffaf06bb578520a8836e4041df1" alt=""><figcaption></figcaption></figure>

### نص

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

<figure><img src="/files/6e49bf33211b4eec8cce6712582c12a42519a81c" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/11e72fbf41eb3a425c7ecd58459eabc738e5f412" alt=""><figcaption></figcaption></figure>

### صورة

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

<figure><img src="/files/29c307b307dbb6dbb6484f5e3c16b9bdb9730066" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/3bae0d6c9d3385123cec61cbfc43a9ba53212689" alt=""><figcaption></figcaption></figure>

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

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

### شكل

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

<figure><img src="/files/46336716a2c34f9659220da9e5a65c78214a90d7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/900cd68c1ee311189c694cd8d2391c6be617bfd9" alt=""><figcaption></figcaption></figure>

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

### زر

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

<figure><img src="/files/c745fba26527813c3ede81f259cb8d52290aa0ba" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/ba691ac3d49bf81b4786c564119c6723fc1258fc" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/9c6e77a79a55cbbc1724ff133f072e8dbbcdd5bd" alt=""><figcaption></figcaption></figure>

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

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

### فيديو

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

<figure><img src="/files/0517ed60c22c4a715109ed294fc94ba4c7199b79" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/ccedbdbcac5e9a9b98a9e86ba05194da45158098" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/5e9b46c5ae398f9400c6ea10d888f7d7e112dd0a" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/309915132681ce2d722f4970cb439e2748c359cd" alt=""><figcaption></figcaption></figure>

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

### تلميح

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

<figure><img src="/files/dd47e4bc7a494a1155cda9f455eb3af3c4b56b92" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/31f4072c0b07c0c8baeec895ac80a59a36ceaa4f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/7a2b9a2fda40181546193b52fc7ca1344b449db6" alt=""><figcaption></figcaption></figure>

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

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

### معرض

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

<figure><img src="/files/4767e582449ad61dac29c594e36d116fc60a6252" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/c7af148d8e8bd036115064aa8c67101f37bcbd03" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/bf44748e0bfdb34b6e0c35437624de7432908e72" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/60c5a507b14bbc85d18bb25b50e25a4cd2ebcc10" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/b862cb731e4b169f3670161cd1a054e07e47d56a" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/773c97a9d404985044a633c38af38b8820462fc8" alt=""><figcaption></figcaption></figure>

### أكورديون

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

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

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

<figure><img src="/files/a94ed4a54d517dc09c9df46bf6a193a534015c8b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/9b069b950bdc666e7b65849356966ecd472a6110" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/66c7ffefd8f66b29a4a0286da96e6e6851fea752" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/257e1a226042cbb2ee6cef159f7aa3d01e50efcd" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/43994e922c446b9a41f3de3c4c3ca09f5c3f9ebe" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/9f31c00023cdd4a661b8f0872189a78171386f7c" alt=""><figcaption></figcaption></figure>

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

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

### نموذج

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

<figure><img src="/files/ed64869be0f8c73b41bcaf83b5ea04fee5e41862" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/5ab994b19d051fb1a130b17a9368df27bc525e7d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/6b8bd0334e5d4472961ab047527f84812be22adb" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/17b1661413ba566a2828772e152346ecea759063" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/3d9174c94fe8e1a0971457eb7c6802f68545dfe9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/a754e04bead27ad4b5167bf384955652b5567c75" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/f2797cd96275b87e0f65d191a7b1348c4128a409" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/1e809cbd936b6bfcef1ef54603fcd9cea6b6c230" alt=""><figcaption></figcaption></figure>

لمزيد من المعلومات حول أنواع حقول الأسئلة، راجع المقال "[إجابات المنتدى](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/otvety-form)".

### reCAPTCHA

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

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

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

<figure><img src="/files/868afe3e75743828b6eb67d9a096eaba003acc02" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/b4a8435f1184d8ab492d1315cdb62672ac822286" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/9c7558aebb1b36bce887e33cc934fdb640ce730b" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/57eab9836a2fec957c87e62101cade8d240b5574" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/6691a80c76ddd2eb77d474e502fec01fc224a2e3" alt=""><figcaption></figcaption></figure>

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

لقد وصفنا كيفية إنشاء نموذج جمع البيانات وتحريره في قسم "[نموذج](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/sekcii-bloki/universalnyi-blok-zero-block#forma)" أعلاه.

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

<figure><img src="/files/89a4447f3c75a2b555c5d77e53ae1a25ab1018a2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/6e8756e2571e2b38c7a8dff4546e9beed98ffbc8" alt=""><figcaption></figcaption></figure>

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

{% hint style="success" %}
تم! الآن تعرف كيف تمكّن reCAPTCHA في Zero block.
{% endhint %}

{% hint style="info" %}
تم وصف كيفية تكييف الصفحة في كتلة الصفر في [المقالة التي تحمل الاسم نفسه](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/sekcii-bloki/universalnyi-blok-zero-block/kak-adaptirovat-stranicu-v-universalnom-bloke).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/ar/websites/almwaqa/blocks/zero.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.