«صور مربعة (ملاك)» (square images) shows linked images in a slider or a grid, such as category or offer images. Any image in it can open an «نافذة (ملاك)» (Angel window) instead of a link.
#«صور مربعة (ملاك)» (square images)
#Titles and columns
| Setting | Default | What it does |
|---|---|---|
«عنوان القسم الرئيسي» title | Empty | The element's title. Up to 70 characters. |
«عنوان القسم الفرعي» title_p | Empty | A line under the title. Up to 100 characters. |
«عرض على شكل شبكة بدلًا من سلايدر» net | Off | Shows the images in rows and columns instead of a single sliding row. |
«عدد الأعمدة في الكمبيوتر والتابلت» large_view | 6 | From 1 to 8. |
«عدد الأعمدة في الجوال» mobile_view | 3 | From 1 to 6. |
#Slider options
These options do not apply when «عرض على شكل شبكة بدلًا من سلايدر» (grid) is on.
| Setting | Default | What it does |
|---|---|---|
«تفعيل الوضع الحر لسلايدر الصور» freemode | Off | Smoother movement between images. |
«حركة تلقائية للصور» autoplay | On | The images move on their own, without dragging. |
«دوران الصور بلا نهاية» loop | Off | Returns to the first image after the last. The panel warns it may affect the element's performance. |
«تفعيل شريط السكرول أسفل السلايدر» scrollbar | Off | A scroll bar under the images. |
«إظهار جزء من الصورة الأخيرة» left | On | Phones only: shows the edge of the next image so visitors know there is more. |
«إخفاء أسهم التنقل» arrow_show | Off | Desktop and tablet only. |
#Image style
| Setting | Default | What it does |
|---|---|---|
«شكل حواف الصورة» img_border | «حواف مربعة» (square) | Square, curve 1, curve 2 or round edges. |
«توسيط النصوص بالنسبة للصور» center | On | Centers the text under the image. |
«عرض النصوص على الصور بدلًا من تحتها» on_img | Off | Puts the text over the image. |
#Images
The element comes with six sample images and takes from 1 to 100. Keep all images in one element the same size so they line up.
| Field | What it does |
|---|---|
«ارفع الصورة هنا» banners.image | The image, which is required. It shows in full at any size, uncropped. |
«رابط الصورة» banners.url | The page the image opens. |
«النص الرئيسي» banners.title | Text under or over the image. Can be left empty. Up to 100 characters. |
«النص الفرعي» banners.description | A second text. Up to 255 characters. |
«عرض النص الفرعي على شكل زر» banners.btn | Shows the second text as a button. Fill in «النص الفرعي» if you turn it on. |
«ربط الصورة مع نافذة ملاك» banners.is_modal | Drops the image's link and opens an Angel window when the image is clicked. |
«اكتب اسم نافذة ملاك» banners.modal_id | The name of the window the image opens. Up to 20 characters. |
«Add custom classes» banners.classes | For developers: CSS classes for this image. |
#«نافذة (ملاك)» (Angel window)
A pop-up window with a title, an image and linked images. It only shows when someone clicks an image linked to it, so its place in the element order does not matter.
| Setting | Default | What it does |
|---|---|---|
«اكتب اسم نافذة ملاك» modal_id | Empty | The unique name you also type in the image that opens the window. |
«عنوان النافذة الرئيسي» title | Empty | Up to 70 characters. |
«عنوان النافذة الفرعي» title_p | Empty | Up to 100 characters. |
«صورة أعلى النافذة» img | Empty | An image at the top of the window. |
«إزاحة محتوى النافذة لأسفل» m_top | 2 | From 0 to 10. |
«عدد الأعمدة في الكمبيوتر والتابلت» large_view | 3 | From 1 to 8. |
«عدد الأعمدة في الجوال» mobile_view | 1 | From 1 to 6. |
«شكل حواف الصورة» img_border | «حواف منحنية 1» (curve 1) | As in the square images element. |
«توسيط النصوص بالنسبة للصور» center | Off | Centers the text under the image. |
«عرض النصوص على الصور بدلًا من تحتها» on_img | Off | Puts the text over the image. |
The window also has a list of images with the same fields: «ارفع الصورة هنا», «رابط الصورة», «النص الرئيسي», «النص الفرعي» and «عرض النص الفرعي على شكل زر».
#Link an image to a window
- 1
Add the window
Add «نافذة (ملاك)» and give it a name in «اكتب اسم نافذة ملاك», such as
offers. The name must be in English, with no spaces or symbols, and must not repeat. - 2
Fill the window
Type the title and add images to the window's image list.
- 3
Link the image
In «صور مربعة (ملاك)», open the image that should open the window, turn on «ربط الصورة مع نافذة ملاك», and type the same name in «اكتب اسم نافذة ملاك».