יצירת באנרים ל-1C-Bitrix: מודולים, אינפובלוקים, סליידרים
לעתים קרובות אנו שומעים מלקוחות: "אני צריך באנר בעמוד הבית." זה נשמע פשוט, אבל במציאות מדובר בשלוש שאלות נפרדות: היכן מאוחסן הבאנר (מודול פרסום או אינפובלוק), כיצד הוא מוצג (סטטי, סליידר, אנימציה), ומי מעדכן אותו (מפתח או מנהל דרך פאנל הניהול). בחירה שגויה בשלב הראשון פירושה עבודה חוזרת ברגע שיגידו "אפשר להוסיף עוד סלייד?". הצוות שלנו של מומחי Bitrix מוסמכים עם ניסיון של 8+ שנים ו-100+ פרויקטים מוצלחים מבטיח תהליך חלק ומונע טעויות אלו.
מודול פרסום לעומת אינפובלוק
ל-Bitrix יש מודול advertising מובנה—מערכת באנרים עם מיקוד, סטטיסטיקת חשיפות ורוטציה. עבור רוב אתרי התאגידים זה מיותר, אבל עבור חנויות מסחר אלקטרוני עם מבצעים ובדיקות A/B זה מוצדק.
השתמש במודול advertising כאשר אתה צריך רוטציה (באנרים שונים עם הסתברויות שונות), סטטיסטיקת CTR וחשיפות ייחודיות, מיקוד לפי קבוצות משתמשים (GROUPS_BY_USER), או ביטול אוטומטי לפי תאריך. באנרים מאוחסנים בטבלת b_banner. הרכיב bitrix:advertising.banner מציג באנר לפי הקוד הסמלי של הקבוצה.
אינפובלוק "באנרים" עם סעיפים לפי מיקום (עמוד הבית, קטגוריה, סרגל צד) הוא פתרון אוניברסלי. כל פריט מכיל תמונה, כותרת, כותרת משנה וכתובת URL לגרסאות דסקטופ ומובייל. מנהל תוכן יכול לנהל פריטים בקלות דרך הממשק הסטנדרטי.
למה לבחור באינפובלוק לבאנרים?
אם באנרים מנוהלים על ידי אדם שאינו מפתח, אם יש צורך בקישור לסעיפי קטלוג או מבצעים, או אם יש הרבה סליידים עם קישורים שונים—האינפובלוק מנצח. הוא גמיש יותר: ניתן להוסיף מאפיינים מותאמים אישית לקישורים, מועדי סיום, קבוצות יעד. מודול הפרסום הוא מיותר למשימות כאלה.
דרישות טכניות לבאנרים
לפני יצירת באנר, קבע את הדרישות בבריף:
| פרמטר | דסקטופ | מובייל |
|---|---|---|
| גודל | 1920×600 או 1440×500 | 768×400 או 375×250 |
| פורמט | WebP + JPEG fallback | WebP + JPEG fallback |
| משקל | עד 150 KB | עד 80 KB |
| אנימציה | CSS או GSAP, לא GIF | CSS, ללא אנימציות כבדות |
GIF לבאנרים הוא ארכאי. באנרים מונפשים נעשים עם אנימציות CSS (@keyframes) או GSAP. משקל GIF גדול פי 5–10 עבור אותה תוצאה ויזואלית. לפי מחקר על ביצועי אתרים, החלפת GIF באנימציות CSS מפחיתה את משקל העמוד בממוצע ב-60%.
רספונסיביות: קובץ תמונה אחד לכל הגדלים לא עובד. או שתי תמונות נפרדות (המאוחסנות בשני מאפייני אינפובלוק: BANNER_DESKTOP ו-BANNER_MOBILE) או תג <picture> עם srcset:
<picture> <source media="(max-width: 768px)" srcset="/upload/mobile-banner.webp"> <source srcset="/upload/desktop-banner.webp"> <img src="/upload/desktop-banner.jpg" alt="Описание акции" loading="lazy"> </picture> איך לבחור ספריית סליידר?
סליידר בעמוד הבית הוא המקרה הנפוץ ביותר. Swiper.js הוא הבחירה הרלוונטית ביותר: 65 KB דחוס, תמיכה במגע, טעינה עצלה. לשם השוואה, Bootstrap Carousel הוא מעל 200 KB, מה שהופך את Swiper.js לקטן פי 3. חלופות: Splide (25 KB), Glide.js (מינימלי). אל תשתמש ב-Bootstrap Carousel (כבד) או Slick (לא מתוחזק מאז 2016). חבר ב-Bitrix דרך <picture> <source media="(max-width: 768px)" srcset="/upload/mobile-banner.webp"> <source srcset="/upload/desktop-banner.webp"> <img src="/upload/desktop-banner.jpg" alt="Описание акции" loading="lazy"> </picture> :
\Bitrix\Main\Page\Asset::getInstance()->addJs('/local/assets/swiper.min.js'); \Bitrix\Main\Page\Asset::getInstance()->addCss('/local/assets/swiper.min.css'); או דרך Webpack/Vite אם יש לך הגדרת build.
באנרים HTML5 מונפשים
עבור באנרים עם אנימציית טקסט (הופעת כותרת, כפתור), אנימציות CSS עדיפות על JavaScript:
.banner-title { opacity: 0; transform: translateY(20px); animation: fadeUp 0.6s ease 0.3s forwards; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } GSAP נחוץ רק לתרחישים מורכבים: אנימציות רציפות, מורפינג SVG, אפקטי פרלקס. עבור באנר פרסומי טיפוסי GSAP הוא מיותר.
ניהול באנרים דרך פאנל הניהול
כדי שמנהל יוכל לשנות באנרים ללא מפתח, יש צורך בממשק ברור. ממשק האינפובלוק הסטנדרטי אינו מושלם. שיפורים:
- שנה שמות שדות דרך הגדרות האינפובלוק: "תמונת תצוגה מקדימה" → "תמונת מובייל", "תמונה מפורטת" → "תמונת דסקטופ".
- הוסף רמזים בתיאורי המאפיינים (גודל, פורמט, המלצות).
- הטמע תצוגה מקדימה—רכיב משנה מותאם אישית שמראה איך הבאנר ייראה באתר.
- אפשר מיון גרירה ושחרור ברשימת הפריטים (מיון לפי שדה
Asset).
בדיקות A/B של באנרים
אם באנרים משפיעים על המרות, יש צורך בבדיקות. יישום פשוט ב-Bitrix: שני באנרים באינפובלוק, בחירה אקראית של אחד בכל בקשה. כתוב אירועי חשיפה וקליקים לטבלה מותאמת אישית:
CREATE TABLE b_banner_ab_stat ( ID SERIAL PRIMARY KEY, BANNER_ID INT NOT NULL, VARIANT CHAR(1) NOT NULL, EVENT_TYPE VARCHAR(10) NOT NULL, -- 'show' или 'click' SESSION_ID VARCHAR(40), DATE_INSERT TIMESTAMP DEFAULT NOW() ); סכם תוצאות עם שאילתת SQL המחשבת CTR לכל וריאנט. Swiper.js נטען פי 3 מהר יותר מ-Bootstrap Carousel, מה שמשפר את שיעורי ההמרה.
מה כלול
- עיצוב ופריסה של באנרים (סטטיים ומונפשים).
- אינטגרציה עם Bitrix (מודול פרסום או אינפובלוק).
- הגדרת רספונסיביות (דסקטופ + מובייל).
- התאמת פאנל הניהול (מיון, תצוגה מקדימה).
- בדיקות על כל המכשירים והדפדפנים.
- תיעוד והדרכת מנהלים.
לוח זמנים ועלות
| היקף | מה כלול | לוח זמנים | מחיר |
|---|---|---|---|
| 1–3 באנרים סטטיים | עיצוב + פריסה + פרסום | 3–5 ימים | החל מ-$500 |
| סליידר עם 5–7 סליידים | + אנימציות, רספונסיביות, ניהול אדמין | 1–2 שבועות | החל מ-$1,200 |
| מערכת באנרים | + אינפובלוק, רוטציה, סטטיסטיקות, בדיקת A/B | 3–5 שבועות | החל מ-$2,500 |
העלות מחושבת באופן אישי לאחר ניתוח הדרישות שלך. בקש ייעוץ—צור קשר להערכת פרויקט.
טעויות נפוצות
- שימוש ב-GIF במקום אנימציות CSS—משקל גדול פי 5–10.
- תמונה אחת לכל הרזולוציות—רספונסיביות לקויה.
- בחירת ספריית סליידר מיושנת (Slick, Bootstrap Carousel).
- אין תצוגה מקדימה למנהל—לולאות משוב ארוכות.
- התעלמות מבדיקות A/B עם תנועה גבוהה.
באנר הוא נקודת הכניסה למשפך המכירות. הוא חייב להיטען מהר, להופיע כראוי ולהיות קל לעדכון.