«صور مربعة (ملاك)» يعرض صورًا بروابط في سلايدر أو شبكة، مثل صور التصنيفات أو العروض. ويمكن أن تفتح أي صورة فيه «نافذة (ملاك)» بدلًا من رابط.
#«صور مربعة (ملاك)»
#العناوين والأعمدة
| الإعداد | الافتراضي | ما يفعله |
|---|---|---|
«عنوان القسم الرئيسي» title | فارغ | عنوان العنصر. حتى 70 حرفًا. |
«عنوان القسم الفرعي» title_p | فارغ | سطر تحت العنوان. حتى 100 حرف. |
«عرض على شكل شبكة بدلًا من سلايدر» net | متوقف | يعرض الصور في صفوف وأعمدة بدلًا من صف واحد منزلق. |
«عدد الأعمدة في الكمبيوتر والتابلت» large_view | 6 | من 1 إلى 8. |
«عدد الأعمدة في الجوال» mobile_view | 3 | من 1 إلى 6. |
#خيارات السلايدر
لا تعمل هذه الخيارات إذا فعّلت «عرض على شكل شبكة بدلًا من سلايدر».
| الإعداد | الافتراضي | ما يفعله |
|---|---|---|
«تفعيل الوضع الحر لسلايدر الصور» freemode | متوقف | تنقّل أكثر سلاسة بين الصور. |
«حركة تلقائية للصور» autoplay | مفعّل | تتحرك الصور تلقائيًا دون سحب. |
«دوران الصور بلا نهاية» loop | متوقف | يعود إلى أول صورة بعد آخرها. تنبّه اللوحة إلى أنه قد يؤثر في أداء العنصر. |
«تفعيل شريط السكرول أسفل السلايدر» scrollbar | متوقف | شريط تمرير تحت الصور. |
«إظهار جزء من الصورة الأخيرة» left | مفعّل | في الجوال فقط: يظهر طرف الصورة التالية ليعرف الزائر أن هناك المزيد. |
«إخفاء أسهم التنقل» arrow_show | متوقف | في الكمبيوتر والتابلت فقط. |
#شكل الصور
| الإعداد | الافتراضي | ما يفعله |
|---|---|---|
«شكل حواف الصورة» img_border | «حواف مربعة» | «حواف مربعة» أو «حواف منحنية 1» أو «حواف منحنية 2» أو «حواف دائرية». |
«توسيط النصوص بالنسبة للصور» center | مفعّل | يوسّط النص تحت الصورة. |
«عرض النصوص على الصور بدلًا من تحتها» on_img | متوقف | يضع النص فوق الصورة. |
#الصور
يأتي العنصر بست صور تجريبية، ويقبل من 1 إلى 100 صورة. ننصح بأن تكون صور العنصر الواحد بالمقاس نفسه لتظهر بأطوال متناسقة.
| الحقل | ما يفعله |
|---|---|
«ارفع الصورة هنا» banners.image | الصورة، وهي إلزامية. تظهر كاملة دون اقتصاص بأي مقاس. |
«رابط الصورة» banners.url | الصفحة التي تفتحها الصورة. |
«النص الرئيسي» banners.title | نص تحت الصورة أو عليها. يمكن تركه فارغًا. حتى 100 حرف. |
«النص الفرعي» banners.description | نص ثانٍ. حتى 255 حرفًا. |
«عرض النص الفرعي على شكل زر» banners.btn | يعرض النص الفرعي زرًا. اكتب «النص الفرعي» إذا فعّلته. |
«ربط الصورة مع نافذة ملاك» banners.is_modal | يلغي رابط الصورة ويفتح «نافذة (ملاك)» عند الضغط عليها. |
«اكتب اسم نافذة ملاك» banners.modal_id | اسم النافذة التي تفتحها الصورة. حتى 20 حرفًا. |
«Add custom classes» banners.classes | للمطوّرين: أصناف CSS لهذه الصورة. |
#«نافذة (ملاك)»
نافذة منبثقة فيها عنوان وصورة وصور بروابط، ولا تظهر إلا عند الضغط على صورة مربوطة بها. لذلك لا يهم مكانها في ترتيب عناصر الصفحة.
| الإعداد | الافتراضي | ما يفعله |
|---|---|---|
«اكتب اسم نافذة ملاك» modal_id | فارغ | الاسم الفريد الذي تكتبه أيضًا في الصورة التي تفتح النافذة. |
«عنوان النافذة الرئيسي» title | فارغ | حتى 70 حرفًا. |
«عنوان النافذة الفرعي» title_p | فارغ | حتى 100 حرف. |
«صورة أعلى النافذة» img | فارغ | صورة في رأس النافذة. |
«إزاحة محتوى النافذة لأسفل» m_top | 2 | من 0 إلى 10. |
«عدد الأعمدة في الكمبيوتر والتابلت» large_view | 3 | من 1 إلى 8. |
«عدد الأعمدة في الجوال» mobile_view | 1 | من 1 إلى 6. |
«شكل حواف الصورة» img_border | «حواف منحنية 1» | مثل «صور مربعة (ملاك)». |
«توسيط النصوص بالنسبة للصور» center | متوقف | يوسّط النص تحت الصورة. |
«عرض النصوص على الصور بدلًا من تحتها» on_img | متوقف | يضع النص فوق الصورة. |
وفي النافذة قائمة صور بالحقول نفسها: «ارفع الصورة هنا» و«رابط الصورة» و«النص الرئيسي» و«النص الفرعي» و«عرض النص الفرعي على شكل زر».
#اربط صورة بنافذة
- 1
أضف النافذة
أضف «نافذة (ملاك)» واكتب لها اسمًا في «اكتب اسم نافذة ملاك»، مثل
offers. يجب أن يكون الاسم بالإنجليزية، دون مسافات أو رموز، وغير مكرر. - 2
أضف محتوى النافذة
اكتب العنوان وأضف الصور في قائمة صور النافذة.
- 3
اربط الصورة
في «صور مربعة (ملاك)» افتح الصورة التي ستفتح النافذة، وفعّل «ربط الصورة مع نافذة ملاك»، واكتب الاسم نفسه في «اكتب اسم نافذة ملاك».