«صور متحركة (ملاك)» is a banner slider for the home page. Each banner is an image or a video, with text, a button, a link and an optional discount countdown. The element comes with two sample banners and takes from 1 to 10.
#Element options
| Setting | Default | What it does |
|---|---|---|
«اختر طريقة انتقال البنرات» effect | «ظهور» (fade) | Slides, fade, cube, coverflow, flip or cards. |
«تكبير حجم البنر بعرض الشاشة» full_view | On | Stretches the banner to the width of the screen. |
«دوران البنرات بلا نهاية» loop | Off | Returns to the first banner after the last. The panel warns it may slow down page loading. |
«تحريك البنرات تلقائيًا» auto | Off | Moves between banners automatically. |
«إخفاء نقاط التنقل أسفل البنرات» bullet_hide | Off | Hides the dots under the slider. |
«إخفاء أسهم التنقل في الكمبيوتر» arrow_show | On | The arrows are hidden by default. Turn this off to show them on desktop. |
#Banner size
Set the banner size so its space is reserved before the image loads and the page does not jump when it opens.
| Setting | Default | What it does |
|---|---|---|
«مقاس البنر الأساسي» canvas_ratio | «تلقائي» (automatic) | The banner ratio on desktop. Leave it on automatic to keep the current display. |
«مقاس البنر في الجوال» canvas_ratio_mob | «تلقائي» (automatic) | The banner ratio on phones for every slide, or «نفس المقاس الأساسي» (same as the main size). |
«عرض البنر كغلاف» banner_cover | On | Appears when a size other than automatic is chosen. The banner fills the whole size and crops the image edges instead of leaving gaps. |
| «مقاس البنر الأساسي» option | Ratio | Image size |
|---|---|---|
| «شريط عريض جدًا» (extra-wide strip) | 4:1 | 1800×450 |
| «شريطي» (strip) | 3:1 | 1800×600 |
| «بانورامي» (panoramic) | 8:3 | 1920×720 |
| «سينمائي» (cinematic) | 5:2 | 1800×720 |
| «متوازن» (balanced) | 2:1 | 1800×900 |
| «مرتفع» (tall) | 16:9 | 1600×900 |
| «مرتفع جدًا» (extra tall) | 3:2 | 1500×1000 |
| «مربّع» (square) | 1:1 | 1200×1200 |
| «مقاس البنر في الجوال» option | Ratio | Image size |
|---|---|---|
| «أفقي» (landscape) | 16:9 | 1080×608 |
| «أفقي» (landscape) | 4:3 | 1200×900 |
| «مربّع» (square) | 1:1 | 1000×1000 |
| «طولي» (portrait) | 4:5 | 1000×1250 |
| «طولي جدًا» (tall portrait) | 5:8 | 1000×1600 |
#Banners
Each banner in the list has these fields:
| Field | What it does |
|---|---|
«أضف رابط صورة أو فيديو» slides.gif | A link to an image or video shown instead of the main banner image. Up to 200 characters. |
«أو ارفع صورة البانر الأساسية» slides.image | The main image. It shows in full at any size, unless «عرض البنر كغلاف» (cover) is on. |
«صورة البنر للجوال» slides.image_mob | An image sized for phones, shown on phones instead of the main one. |
«صورة فوق البانر (بدون خلفية)» slides.image_png | An image with a transparent background shown over the banner. |
«إضافة خلفية سوداء شفافة» slides.overlay | A transparent dark layer over the image. |
Title field (no label) slides.title | The banner's headline, in Arabic and English. Up to 100 characters. |
«لون النص الرئيسي» slides.color_m | The headline color. Default #ffffff. |
Description field (no label) slides.description | Extra text under the headline. Up to 555 characters. |
«لون النص الإضافي» slides.color_p | The color of the extra text. Default #ffffff. |
«عكس اتجاه النصوص» slides.title_res | Puts the extra text above the headline. |
«توسيط النصوص» slides.center | Centers the text on desktop and tablet only. |
«تفعيل عداد الخصم في البانر» slides.countdown | Shows a countdown to a date you set. |
«حدد تاريخ إنتهاء الخصم» slides.time | The countdown date as month-day-year, such as 09-23-2024. The default has passed, so type a future date. |
«رابط البانر أو الزر» slides.link | The page the banner or its button opens. |
Icon field (no label) slides.icon | The button icon from Salla's icon library. Default sicon-cart. |
Button text field (no label) slides.button | Type text here and a button appears on the banner. Up to 30 characters. |
«إخفاء أيقونة الزر» slides.icon_hide | A text-only button. |
«زر بدون لون خلفية» slides.btn_color | An outlined button with no fill. |
«زر مع حواف دائرية» slides.btn_round | A button with rounded edges. |
«عكس اتجاه أيقونة الزر مع النص» slides.icon_res | Swaps the icon and the text. |
#With the header and quick links
- When this element is the first one on the home page, you can turn on «دمج الشريط العلوي مع صورة البانر» (merge the header with the banner) in the header group, so the header sits over the banner.
- If you place «روابط سريعة (ملاك)» (quick links) right after it, turn on «دمج مع العنصر السابق» (merge with the previous element) there so the two show as one.
This element's shared settings, such as device visibility and the tab number, are in Home-page elements.