ספריית הפרומפטים
לעסקים

אתר לבית קפה או מסעדה

תפריט, שעות, ביקורות והזמנת שולחן בוואטסאפ — אתר שמביא סועדים, לא רק מציג.

איפה זה עובד: מסעדות, בתי קפה, קייטרינג, בתי מאפה

מה צריך להכין

• התפריט (מנות ומחירים)
• שעות פתיחה וכתובת
• 5–10 תמונות אוכל
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אתר של עמוד אחד ל-[שם המסעדה], [סוג האוכל] ב-[עיר]: אזור פתיחה עם כותרת ותמונה, תפריט עם לשוניות ([בוקר / צהריים / קינוחים]) וכרטיסי מנות עם מחירים, שעות פתיחה, גלריה, ביקורות, מפה וכפתור צף 'הזמינו שולחן' שפותח וואטסאפ. התפריט: [המנות והמחירים]. דרישות: אתר בקובץ HTML אחד מלא (HTML, CSS ו-JavaScript) שאפשר להעלות כמו שהוא או להעביר לאלמנטור. עברית מימין לשמאל, מובייל קודם ומושלם במחשב. תפריט דביק עם גלילה חלקה לסקשנים, כותרות H1 ו-H2 נכונות, תיאור מטא, וסכמת LocalBusiness ב-JSON-LD. צבעי המותג: [צבעי המותג]. פונט Heebo. תמונות: [קישורים לתמונות] ואם אין — מקומות מסומנים. אנימציות כניסה עדינות בגלילה. כפתור וואטסאפ צף למספר [מספר]. נגיש ומהיר: בלי ספריות חיצוניות. החזר את הקוד המלא בבלוק אחד.

💡 תמונות אוכל אמיתיות מהמסעדה מוכרות יותר מכל עיצוב. צלמו באור יום, ליד חלון.

אתר לקליניקה או רופא

אמון קודם: ביקורות, מספרים, שאלות נפוצות — ופס 'קביעת תור' שתמיד ביד.

איפה זה עובד: רופאי שיניים, קליניקות אסתטיקה, פיזיותרפיה, מטפלים

מה צריך להכין

• שירותים עם שורת הסבר
• דירוג ומספר ביקורות בגוגל
• 4 מספרים אמיתיים (שנים, מטופלים…)
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אתר של עמוד אחד ל-[שם הקליניקה], [תחום] ב-[עיר], שבנוי על אמון: אזור פתיחה עם '[דירוג] ★ [מספר] ביקורות בגוגל', רשת שירותים עם אייקונים ([שירותים]), 4 מונים ([המספרים שלכם] — כתובים ב-HTML ומונפשים ב-JS), לפני/אחרי, שאלות נפוצות עם סכמת FAQ, ופס דביק במובייל 'קביעת תור' לוואטסאפ [מספר]. דרישות: אתר בקובץ HTML אחד מלא (HTML, CSS ו-JavaScript) שאפשר להעלות כמו שהוא או להעביר לאלמנטור. עברית מימין לשמאל, מובייל קודם ומושלם במחשב. תפריט דביק עם גלילה חלקה לסקשנים, כותרות H1 ו-H2 נכונות, תיאור מטא, וסכמת LocalBusiness ב-JSON-LD. צבעי המותג: [צבעי המותג]. פונט Heebo. תמונות: [קישורים לתמונות] ואם אין — מקומות מסומנים. אנימציות כניסה עדינות בגלילה. כפתור וואטסאפ צף למספר [מספר]. נגיש ומהיר: בלי ספריות חיצוניות. החזר את הקוד המלא בבלוק אחד.

💡 מספרים אמיתיים בלבד. 'מאות מטופלים מרוצים' בלי מספר — נראה כמו כולם.

אתר למתווך נדל״ן

חיפוש נכסים, כרטיסי נכס עם תגיות 'חדש' ו'בלעדי', וסוכן זמין בוואטסאפ.

איפה זה עובד: מתווכים, משרדי תיווך, יזמים

מה צריך להכין

• 5–8 נכסים (מחיר, חדרים, מ״ר, תמונה)
• תמונה ופרטי הסוכן
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אתר ל-[שם המשרד], תיווך ב-[אזור]: אזור פתיחה עם שורת חיפוש (עיר, חדרים, תקציב), כרטיסי נכסים עם מחיר, חדרים, מ״ר ותגית 'חדש' או 'בלעדי' ([הנכסים]), כרטיס הסוכן עם וואטסאפ, פס 'נמכר לאחרונה' וטופס יצירת קשר. שהחיפוש יסנן את הכרטיסים בלי טעינה מחדש. דרישות: אתר בקובץ HTML אחד מלא (HTML, CSS ו-JavaScript) שאפשר להעלות כמו שהוא או להעביר לאלמנטור. עברית מימין לשמאל, מובייל קודם ומושלם במחשב. תפריט דביק עם גלילה חלקה לסקשנים, כותרות H1 ו-H2 נכונות, תיאור מטא, וסכמת LocalBusiness ב-JSON-LD. צבעי המותג: [צבעי המותג]. פונט Heebo. תמונות: [קישורים לתמונות] ואם אין — מקומות מסומנים. אנימציות כניסה עדינות בגלילה. כפתור וואטסאפ צף למספר [מספר]. נגיש ומהיר: בלי ספריות חיצוניות. החזר את הקוד המלא בבלוק אחד.

💡 תגית 'בלעדי' על 2–3 נכסים מעלה פניות. לא על כולם — אז זה מפסיק לעבוד.

אתר לעורך דין או יועץ

שקט, סמכותי ומדויק: תחומי עיסוק, תהליך ברור והמלצות — בלי רעש.

איפה זה עובד: עורכי דין, רואי חשבון, יועצים, מגשרים

מה צריך להכין

• תחומי העיסוק
• 3 שלבים בתהליך העבודה
• 3 המלצות אמיתיות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אתר ל-[שם ותפקיד], [תחום] ב-[עיר], בסגנון שקט וסמכותי: כחול כהה וזהב, כותרות בפונט סריף (Frank Ruhl Libre) וגוף ב-Heebo. אזור פתיחה עם משפט אחד חזק, תחומי עיסוק ככרטיסים אלגנטיים ([תחומים]), 'איך זה עובד' ב-3 שלבים, המלצות, פס הסמכות, ואזור יצירת קשר דיסקרטי עם כפתור חיוג צף. דרישות: אתר בקובץ HTML אחד מלא (HTML, CSS ו-JavaScript) שאפשר להעלות כמו שהוא או להעביר לאלמנטור. עברית מימין לשמאל, מובייל קודם ומושלם במחשב. תפריט דביק עם גלילה חלקה לסקשנים, כותרות H1 ו-H2 נכונות, תיאור מטא, וסכמת LocalBusiness ב-JSON-LD. צבעי המותג: [צבעי המותג]. פונט Heebo. תמונות: [קישורים לתמונות] ואם אין — מקומות מסומנים. אנימציות כניסה עדינות בגלילה. כפתור וואטסאפ צף למספר [מספר]. נגיש ומהיר: בלי ספריות חיצוניות. החזר את הקוד המלא בבלוק אחד.

💡 בתחום הזה פחות זה יותר. משפט אחד בפתיחה, בלי סלוגנים.

אתר לסטודיו כושר או פילאטיס

מערכת שעות, מדריכים, מחירון ושיעור ניסיון — כל מה שצריך כדי להירשם.

איפה זה עובד: סטודיו פילאטיס, יוגה, חדרי כושר, מאמנים

מה צריך להכין

• מערכת השעות
• המדריכים
• 3 מסלולי מחיר
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אתר ל-[שם הסטודיו], [סוג האימון] ב-[עיר], אנרגטי ונקי: אזור פתיחה עם תמונה גדולה, מערכת שעות כטבלה (ימים × שעות) שהופכת לכרטיסים במובייל ([המערכת]), שורת מדריכים, 3 מסלולי מחיר ([המסלולים]), כפתור 'שיעור ניסיון' לוואטסאפ ורשת תמונות בסגנון אינסטגרם. דרישות: אתר בקובץ HTML אחד מלא (HTML, CSS ו-JavaScript) שאפשר להעלות כמו שהוא או להעביר לאלמנטור. עברית מימין לשמאל, מובייל קודם ומושלם במחשב. תפריט דביק עם גלילה חלקה לסקשנים, כותרות H1 ו-H2 נכונות, תיאור מטא, וסכמת LocalBusiness ב-JSON-LD. צבעי המותג: [צבעי המותג]. פונט Heebo. תמונות: [קישורים לתמונות] ואם אין — מקומות מסומנים. אנימציות כניסה עדינות בגלילה. כפתור וואטסאפ צף למספר [מספר]. נגיש ומהיר: בלי ספריות חיצוניות. החזר את הקוד המלא בבלוק אחד.

💡 'שיעור ניסיון' הוא ההצעה שממירה. שימו אותו בפתיחה ובסוף.

דף חנות עם סל קניות

מוצרים, הוספה לסל, יתרונות וביקורות — דף מכירה שמרגיש כמו אפליקציה.

איפה זה עובד: חנויות קטנות, מותגי טיפוח, אופנה, מזון

מה צריך להכין

• 3–6 מוצרים עם תמונות ומחירים
• רף למשלוח חינם
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי דף חנות ל-[שם המותג], [סוג המוצרים]: פס הודעה עליון 'משלוח חינם מעל ₪[סכום]', אזור פתיחה עם המוצר המוביל, רשת מוצרים עם 'הוספה לסל' ומונה סל שקופץ ([המוצרים והמחירים]), שורת יתרונות עם אייקונים, ביקורות והרשמה לרשימת תפוצה. מוכן לחיבור לווקומרס. דרישות: אתר בקובץ HTML אחד מלא (HTML, CSS ו-JavaScript) שאפשר להעלות כמו שהוא או להעביר לאלמנטור. עברית מימין לשמאל, מובייל קודם ומושלם במחשב. תפריט דביק עם גלילה חלקה לסקשנים, כותרות H1 ו-H2 נכונות, תיאור מטא, וסכמת LocalBusiness ב-JSON-LD. צבעי המותג: [צבעי המותג]. פונט Heebo. תמונות: [קישורים לתמונות] ואם אין — מקומות מסומנים. אנימציות כניסה עדינות בגלילה. כפתור וואטסאפ צף למספר [מספר]. נגיש ומהיר: בלי ספריות חיצוניות. החזר את הקוד המלא בבלוק אחד.

💡 פס 'משלוח חינם מעל' בראש הדף מגדיל את הסל הממוצע — קבעו אותו קצת מעל ההזמנה הממוצעת.

הירו חלקיקים שמגיב לעכבר

רקע חי שמגיב לתנועה של הגולש — מרגיש טכנולוגי ויוקרתי.

איפה זה עובד: חברות טכנולוגיה, אפליקציות, יועצים, סטארטאפים

מה צריך להכין

• כותרת ומשפט משנה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי הירו עם רקע חלקיקים ב-canvas לאתר של [שם העסק]: נקודות שמתחברות בקווים דקים ומגיבות לעכבר ולמגע (נדחפות הצידה ומתחברות מחדש), מאחורי כותרת גדולה '[הכותרת]' וכפתור. ביצועים: כמות החלקיקים לפי גודל המסך, requestAnimationFrame, עצירה כשהלשונית לא פעילה, ורקע גרדיאנט סטטי למי שביקש פחות תנועה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 פחות חלקיקים זה יותר יוקרתי. אם זה נראה עמוס — בקשו ממנו לחצות את הכמות.

סטוריטלינג בגלילה

המוצר נשאר במקום והסיפור עובר לידו — הגולש קורא בלי להרגיש.

איפה זה עובד: מוצר דגל, שירות פרימיום, דף השקה

מה צריך להכין

• תמונת מוצר על רקע נקי
• 4 מסרים קצרים
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן סטוריטלינג בגלילה ל-[המוצר] של [שם העסק]: התמונה [קישור] נשארת מקובעת במרכז, ו-4 פאנלים של טקסט ([המסרים]) עוברים לידה בגלילה, כשצבע הרקע משתנה בכל פאנל. עם animation-timeline: scroll() ונפילה ל-IntersectionObserver. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 מסר אחד לכל פאנל, עד 8 מילים. זה סיפור, לא עמוד מפרט.

הירו עם כרטיס עולה וכותרת מתחדדת

הכותרת מתחדדת, כרטיס עולה מלמטה, והגולש מדפדף בין המסלולים שלכם כבר במסך הראשון.

איפה זה עובד: מכללות וקורסים, חוגים, חדרי כושר, קליניקות, כל עסק עם 3 מסלולים

מה צריך להכין

• כותרת ראשית קצרה
• 3 מסלולים: שם, תמונה ושלוש עובדות לכל אחד
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה לאתר של [שם העסק]: שורת מותג קטנה, כותרת ראשית '[כותרת]' שמתחדדת מטשטוש מילה אחרי מילה (filter: blur רק בכניסה), ומילה אחת בצבע המותג. אחריה עולה מלמטה כרטיס גדול: תמונה או איור, שם המסלול, שלוש עובדות (מספר גדול ותיאור קטן) וכפתור 'לפרטים והרשמה'. חיצים בצדי הכרטיס מחליפים בין שלושה מסלולים, והתוכן מחליק הצידה ומתחלף. מתחת לכרטיס שלושה פסים דקים: הפעיל מתמלא 5 שניות ואז הכרטיס מתחלף לבד, וריחוף עוצר את הסבב. ברקע קו אופק, חצי עיגול בצבע המשני ורצפת קווים בפרספקטיבה. במחשב כל הסצנה נוטה קלות בתלת-ממד לפי העכבר (perspective ו-rotateX/rotateY, שכבות ב-translateZ, ריכוך ב-requestAnimationFrame), וכשהעכבר נח היא מתנדנדת לאט לבד. במובייל ההטיה כבויה ומחליפים כרטיס בהחלקה באצבע. המסלולים: [3 מסלולים: שם, תמונה ושלוש עובדות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 כותרת של 4 עד 6 מילים. כותרת ארוכה נשברת לשלוש שורות והחידוד מאבד את הקצב.

הירו קונסטלציה של אנשי הצוות

במקום תמונת סטוק, הגולש פוגש מיד את האנשים שמאחורי העסק. אמון מהשנייה הראשונה.

איפה זה עובד: סוכנויות, משרדים, סטודיו, קליניקות, עמוד אודות

מה צריך להכין

• תמונות פנים של 8 אנשי צוות
• שם ותפקיד לכל אחד
• כותרת ומשפט משנה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה בסגנון קונסטלציה לאתר של [שם העסק]: במרכז שורת מותג, כותרת '[הכותרת]', משפט משנה וכפתור. סביבם 8 עיגולי דיוקן של אנשי הצוות בגדלים שונים, מפוזרים כמו כוכבים ומחוברים בקווי SVG דקים שמתקמרים הרחק מהכותרת. בטעינה העיגולים מופיעים והקווים מצטיירים בהדרגה (stroke-dashoffset, החריג היחיד ל-transform ו-opacity). אחר כך העיגולים צפים לאט, הקווים עוקבים ב-requestAnimationFrame ונקודת אור נוסעת על כל קו. בריחוף או בהקשה על אדם: העיגול גדל עם טבעת זוהרת, הקווים שלו נדלקים בצבע המשני, מי שלא מחובר אליו מתעמעם, ולידו תווית עם שם ותפקיד. עד שהגולש נוגע, ההדגשה עוברת לבד מאדם לאדם כל 2.4 שניות. במובייל 5 עיגולים: 3 מעל הכותרת ו-2 מתחת לכפתור, והקווים עוקפים את הטקסט. הצוות: [8 אנשי צוות: תמונה, שם ותפקיד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 צלמו את כולם על אותו רקע ובאותה תאורה. תמונות בסגנונות שונים נראות כמו קולאז׳.

פתיחת ניאון ללוגו

האתר נפתח כמו שלט שנדלק בערב: רגע קצר של מותג שזוכרים, ואז ישר לתוכן.

איפה זה עובד: בתי קפה, ברים, מסעדות, סטודיו, מועדונים, אולמות אירועים

מה צריך להכין

• שם העסק ושורת תחום לשלט
• כותרת, משפט ו-3 מנות עם מחיר
• תמונת אווירה אחת
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מסך פתיחה בסגנון שלט ניאון לאתר של [שם העסק]: בטעינה מסך כהה מכסה את העמוד, ובמרכזו שלט כבוי ועמום: [שם העסק] באותיות ניאון ומתחתיו שורת [תחום]. נורות קטנות סביב מסגרת השלט נדלקות אחת אחת, אחר כך שתי המילים מהבהבות ומתייצבות זו אחרי זו עם הילה חמה, שורת התחום נדלקת ברכות והנורות ממשיכות לנצנץ לסירוגין. אחרי כ-3.5 שניות המסך מתפוגג, השלט גדל מעט, ואזור הפתיחה נכנס בעלייה מדורגת: לוגו קטן, שורת מיקום, כותרת, משפט, שלוש שורות תפריט עם מחיר, כפתור 'הזמינו שולחן' ותמונה. כפתור 'דילוג' ומקש Esc סוגרים מיד, וכפתור 'הפעלה מחדש' בראש העמוד מריץ שוב. הבהוב איטי, עד שני הבזקים בשנייה, ורק opacity משתנה. למי שביקש פחות תנועה השלט מוצג דלוק מיד ונעלם אחרי שנייה. התוכן: [כותרת ומשפט], [3 מנות ומחירים], [קישור לתמונה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 הבהוב איטי נראה כמו ניאון אמיתי. הבהוב מהיר מעייף ועלול להפריע לרגישים לאור.

אזור פתיחה עם רקע חי ב-WebGL

רקע נוזלי שזז לאט בצבעי המותג. האתר מרגיש חי ויוקרתי בלי וידאו כבד ובלי תמונה.

איפה זה עובד: חברות טכנולוגיה, סטארטאפים, סוכנויות, מותגי פרימיום, דפי נחיתה

מה צריך להכין

• כותרת ושורת משנה
• טקסט לשני כפתורים
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה עם רקע חי ב-WebGL לאתר של [שם העסק]: canvas על כל האזור שמצייר ב-fragment shader גרדיאנט נוזלי שזורם לאט בצבעי המותג על בסיס כהה. בעכבר הזרימה נמשכת בעדינות אחרי הסמן וכתם אור רך עוקב אחריו, במגע רק הזרימה. מעליו, בגובה מסך מלא: שם העסק קטן למעלה, ובצד ימין שורת תחום, כותרת גדולה '[הכותרת]', שורת משנה ושני כפתורים שמתרוממים קלות בריחוף: ראשי מלא, ומשני עם מסגרת וחץ למטה שגולל ברכות לאזור הבא. הרקע כהה יותר מאחורי הטקסט, והטקסט נכנס בטעינה בדעיכה מלמטה, שורה אחרי שורה. במובייל הטקסט בתחתית, הכפתורים ברוחב מלא והנוזל בולט למעלה. הצבעים נקראים ממשתני CSS, הציור בחצי רזולוציה, והלולאה נעצרת עם IntersectionObserver כשהאזור מחוץ למסך. בלי WebGL, או למי שביקש פחות תנועה: גרדיאנט CSS סטטי באותם צבעים. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו שני צבעים קרובים על רקע כהה. שלושה צבעים עזים הופכים את הנוזל לקשת צעקנית.

הירו דלת שנפתח בגלילה

הגולש גולל, והתמונה נפתחת כמו דלת עד שהיא ממלאת את המסך. כניסה שזוכרים.

איפה זה עובד: מעצבי פנים, אדריכלים, נדל״ן יוקרתי, מלונות בוטיק, אולמות אירועים

מה צריך להכין

• תמונה רחבה ואיכותית אחת
• כותרת, משפט משנה ושם פרויקט
• 3 שירותים עם משפט לכל אחד
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי הירו דלת שנפתח בגלילה לאתר של [שם העסק]: מסך פתיחה מלא עם שורת מותג, כותרת, משפט משנה וכפתור 'היכנסו פנימה' שגולל ברכות עד שהדלת פתוחה, ולצידם (במובייל מתחתם) התמונה [קישור לתמונה] במסגרת קשת קטנה עם קו מתאר דק. בתחתית רמז 'גללו ופתחו את הדלת' עם חץ שמקפץ. בגלילה ההירו ננעל (position: sticky במסילה של 260vh), הטקסט דועך והקשת גדלה עד שהתמונה ממלאת את כל המסך. הקשת גדלה ב-translate ו-scale לפי scrollY, והתמונה מקבלת transform נגדי כדי שלא תימתח. בסוף התמונה מתכהה למטה ועולה הכיתוב 'ברוכים הבאים הביתה' ומתחתיו [שם הפרויקט]. המשך גלילה משחרר לתוכן הבא: [3 שירותים עם משפט לכל אחד]. בטעינה הדגמה אחת: העמוד גולל לבד עד שהדלת פתוחה, מחכה רגע וחוזר לראש, ונעצר כשהגולש נוגע. למי שביקש פחות תנועה: בלי נעילה והדגמה, והכיתוב מוצג על הקשת. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונה שהמרכז שלה חזק. בקשת הקטנה רואים רק אותו, ובמסך מלא את כל החדר.

קאבר אורורה עם רקע זוהר נוזלי

כתמי אור בצבעי המותג שנעים לאט מאחורי הכותרת. האתר נראה פרימיום כבר במסך הראשון.

איפה זה עובד: סטארטאפים, חברות תוכנה, סוכנויות, דפי נחיתה למוצר דיגיטלי

מה צריך להכין

• כותרת ומשפט משנה
• טקסט לתג ולשני כפתורים
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קאבר אורורה לאתר של [שם העסק]: אזור פתיחה כהה בגובה מסך מלא, וברקע 4 כתמי צבע גדולים בצבעי המותג שנעים לאט ומתמזגים. CSS בלבד: צורות עם mix-blend-mode: screen בתוך עטיפה עם filter: blur קבוע, והתנועה רק ב-transform. מעליהם שכבת גרעיניות עדינה (SVG feTurbulence) והחשכה רכה מאחורי הטקסט. בעכבר הכתמים זזים מעט עם הסמן, כל אחד בעומק אחר. במרכז: שם העסק קטן למעלה, תג עם נקודה פועמת, כותרת גדולה '[הכותרת]' שמילה אחת בה בגרדיאנט נע (background-position), משפט משנה ושני כפתורי זכוכית עם backdrop-filter שמתרוממים בריחוף: ראשי בגוון המותג, ומשני עם חץ למטה שגולל ברכות לאזור הבא. בטעינה הרקע נדלק בדעיכה והטקסט נכנס מלמטה, שורה אחרי שורה. במובייל 2 כתמים, תנועה איטית יותר וכפתורים ברוחב מלא. למי שביקש פחות תנועה הכול קפוא. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 סמנו בגרדיאנט את המילה הכי חשובה בכותרת, ורק אחת. שתיים כבר מתחרות זו בזו.

קאבר מנורה: אור שמדליק את הכותרת

האתר נפתח כמו אור שנדלק מעל הכותרת. העין נמשכת ישר למסר הראשי ולכפתור.

איפה זה עובד: מוסכים, בעלי מקצוע, סטודיו, אולמות אירועים, דפי נחיתה כהים

מה צריך להכין

• לוגו
• כותרת קצרה בשתי שורות
• משפט אחד וטקסט לכפתור
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קאבר מנורה לאתר של [שם העסק]: מסך כהה בגובה מלא, ובראשו הלוגו וכפתור קטן 'הדלקה מחדש'. בטעינה קו אור דק נפתח מהמרכז לרוחב, וממנו יורדת אלומת אור בצורת חרוט שמתרחבת, בהירה ליד הקו ונמוגה בתחתית, עם הילה רכה סביב הקו וגרגרי אבק זעירים שמרחפים בתוכה. מתחת לקו עולים בזה אחר זה שורת [תחום] ו-[עיר], כותרת גדולה בגרדיאנט מלבן לצבע המותג, משפט וכפתור קריאה לפעולה. תזוזת העכבר מטה את האלומה מעט לצדדים בריכוך (lerp בתוך requestAnimationFrame, הקו לא זז), וכשהעכבר נח או במסך מגע היא מתנדנדת לאט לבד. לחיצה על 'הדלקה מחדש' מריצה את הרצף שוב. החרוט: שני טרפזים עם clip-path ו-filter: blur קבוע, והתנועה רק ב-transform ו-opacity. למי שביקש פחות תנועה הכול דלוק מראש, בלי נדנוד ובלי ריחוף. התוכן: [כותרת בשתי שורות], [משפט], [טקסט הכפתור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 הכותרת צריכה להיות קצרה, עד שש מילים. האור מדגיש שורה אחת חזקה, לא פסקה.

קאבר רשת נקודות עם זרקור

הרקע מגיב לעכבר ומאיר את הדרך לכותרת. פתיחה שמרגישה כמו מוצר טכנולוגי.

איפה זה עובד: ראש דף הבית, דפי נחיתה, סוכנויות, סטארטאפים, חברות תוכנה

מה צריך להכין

• כותרת בשתי שורות ומשפט פתיחה
• טקסט הכפתורים ומספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קאבר כהה לאתר של [שם העסק] על רשת נקודות עדינה: זרקור רך עוקב אחרי העכבר בהשהיה קלה ומאיר את הנקודות שסביבו, גדולות ובצבע המותג, מעל הילה עמומה. כשהעכבר לא זז, ובמגע, הזרקור נע לבד במסלול איטי. משבצות אקראיות ברשת נדלקות ודועכות לבד, לא מאחורי הטקסט. בטעינה גל אור טבעתי עובר על הרשת מהמרכז החוצה, וכל לחיצה שולחת גל נוסף משם. במרכז, בכניסה מדורגת: שורת מותג קטנה, כותרת ענקית ששורתה השנייה בגרדיאנט, משפט אחד ושני כפתורים (במובייל ברוחב מלא): מלא לוואטסאפ ושקוף לעבודות. טכנית: שכבת נקודות בהירה שנחשפת דרך mask-image רדיאלי שמיקומו במשתני CSS, מעודכנים ב-requestAnimationFrame (חריגה מותרת מ-transform ו-opacity). פחות תנועה: זרקור קבוע על הכותרת וכמה משבצות דולקות, בלי גל. התוכן: [כותרת בשתי שורות], [משפט פתיחה], [שני כפתורים], [מספר בפורמט 972]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 עובד רק על רקע כהה. שמרו על נקודות קטנות ודלילות: רשת צפופה מתחרה בכותרת.

קאבר עם גלובוס נקודות מסתובב

הגולש רואה בעיניים לאן העסק שלכם מגיע: גלובוס חי עם קשתות אור, שאפשר גם לסובב.

איפה זה עובד: סוכנויות נסיעות, יבוא ושילוח, חברות עם סניפים או לקוחות בעולם

מה צריך להכין

• עיר מוצא ו-6 יעדים בעולם
• כותרת ומשפט משנה
• שלושה מספרים על העסק
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קאבר כהה עם גלובוס נקודות לאתר של [שם העסק]: בצד אחד שורת מותג, כותרת '[הכותרת]', משפט משנה, שלושה מספרים וכפתור, שנכנסים בהדרגה. בצד השני גלובוס תלת-ממדי על canvas 2D שמסתובב לאט: יבשות בנקודות בהירות (מפה גסה בקוד: טווחי קו אורך לכל 5 מעלות רוחב), ים בנקודות עמומות, הצללת אור והילה. [עיר המוצא] ו-6 יעדים מסומנים בנקודה ובשם, ולכל יעד קשת: קו עמום קבוע, ועליו פס אור שנמתח מהמוצא, מפעים את נקודת היעד ודועך. מה שמאחורי הגלובוס מוסתר. גרירה מסובבת ומטה אותו, ובשחרור הוא ממשיך בתנופה וחוזר לקצב האיטי. במובייל הגלובוס עמום מאחורי הטקסט, בלי שמות, והחלקה אופקית מסובבת אותו (touch-action: pan-y). האנימציה נעצרת מחוץ למסך (IntersectionObserver), ובמצב פחות תנועה הגלובוס עומד עם כל הקשתות. היעדים: [6 ערים בעולם]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו יעדים שמפוזרים על פני העולם. שש ערים באירופה נדבקות זו לזו ולא רואים קשתות.

קאבר עם גלים מונפשים

גלים רכים שנעים בתחתית המסך ומגיבים לעכבר. פתיחה רגועה שמרגישה חיה, בלי וידאו.

איפה זה עובד: קליניקות, ספא, מלונות, יועצים, דפי נחיתה, ראש עמוד הבית

מה צריך להכין

• כותרת ומשפט פתיחה
• טקסט לכפתור
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קאבר עם גלים מונפשים לאתר של [שם העסק]: אזור פתיחה בגובה מסך על גרדיאנט בהיר ורגוע, ובתחתיתו canvas שמצייר ארבע שכבות גלים בצבעי המותג, משקופה מאחור עד אטומה מלפנים. כל שכבה נעה במהירות ובכיוון משלה, עם קו רכס בהיר ודק, והקדמית בצבע הרקע של האזור הבא ונשפכת אליו בלי קו מפריד. העכבר מגביה גבעה רכה בגל שמתחתיו, והשכבות האחוריות מגיעות באיחור קל. במגע, וכשהעכבר מחוץ לקאבר, הגבעה נודדת לבד מצד לצד. מעל הגלים, במרכז: שם העסק קטן, שורת תחום ועיר, כותרת '[הכותרת]', משפט אחד וכפתור '[טקסט הכפתור]' שמתרומם בריחוף. בטעינה הגלים עולים מלמטה והטקסט נכנס בדעיכה, שורה אחרי שורה. במובייל שלוש שכבות נמוכות יותר וכפתור ברוחב מלא. devicePixelRatio עד 2, והלולאה נעצרת עם IntersectionObserver מחוץ למסך. למי שביקש פחות תנועה: גלים קפואים. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 הגלים עובדים הכי טוב על רקע בהיר ושקט. תמונה או דוגמה מאחוריהם הופכת הכול לרעש.

קאבר עם קיר תמונות נטוי בתלת-ממד

העבודות שלכם זורמות ברקע מהשנייה הראשונה, והמסר נשאר נקי וקריא מעליהן.

איפה זה עובד: צלמים, אדריכלים, מעצבי פנים, סטודיו, תיק עבודות בדף הבית

מה צריך להכין

• 12 עד 24 תמונות מהעבודות שלכם
• כותרת, משפט ושני כפתורים עם קישורים
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה עם קיר תמונות נטוי בתלת-ממד לאתר של [שם העסק]: ברקע ארבע עמודות של כרטיסי תמונה בגבהים שונים, על משטח שמוטה לאחור ובאלכסון (perspective, rotateX ו-rotateZ). כל עמודה נגללת לאט בלולאה אינסופית בכיוון הפוך מהשכנה ובקצב קצת שונה (סט משוכפל).הכרטיסים מעומעמים מעט, ושכבת גרדיאנט בצבע הרקע מעמעמת את הקיר לכיוון הטקסט שבצד ימין: שם העסק והעיר, כותרת גדולה, משפט ושני כפתורים, ראשי מלא ומשני עם מסגרת. ריחוף על כרטיס מקרב אותו (translateZ), מאיר אותו ועוצר את העמודה שלו, ובמגע נגיעה מרימה אותו לרגע. בטעינה העמודות עולות בדירוג והטקסט נכנס שורה אחרי שורה. במובייל: שתי עמודות, הטיה קלה יותר, הטקסט בתחתית והגרדיאנט עולה מלמטה. למי שביקש פחות תנועה הקיר עומד. התוכן: [12 עד 24 תמונות, כותרת, משפט ושני כפתורים עם קישורים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונות בגוונים דומים. קיר צבעוני מדי מושך את העין מהכותרת אל הרקע.

קאבר מסך שמתיישר בגלילה

הגולש גולל והמסך המוטה מתיישר מולו, עם הממשק שלכם בפנים. רואים את המוצר לפני שקוראים עליו.

איפה זה עובד: יועצים, אפליקציות ותוכנות, משרדים עם אזור לקוחות, דף הבית

מה צריך להכין

• 3 נתונים מרכזיים לתוך המסך
• נתון לאורך זמן ותמהיל באחוזים
• 3 שירותים עם משפט לכל אחד
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קאבר מסך שמתיישר בגלילה לאתר של [שם העסק]: שורת מותג, כותרת גדולה ומשפט משנה, ומתחתם מסך מחשב עם מסגרת דקה ורגל, מוטה לאחור (rotateX של 24 מעלות סביב הקצה התחתון, perspective על ההורה), השתקפות אור על הזכוכית ורמז 'גללו למטה' עם חץ מקפץ. בתוך המסך לוח נתונים ב-HTML ו-CSS: [3 נתונים מרכזיים], גרף עמודות של [נתון לאורך זמן] ופסי [תמהיל באחוזים]. בגלילה הקאבר ננעל (sticky במסילה של 250vh) והכול נגזר מערך התקדמות אחד: המסך מתיישר, גדל מעט ועולה למרכז, הצל מתחזק וההשתקפות נעלמת, הכותרת עולה ודועכת ועמודות הגרף צומחות בזו אחר זו. ואחר כך התוכן: [3 שירותים]. בטעינה גלילה אוטומטית עד שהמסך ישר וחזרה לראש, שנעצרת בנגיעה. במובייל טלפון בפרופורציה 9 על 19.5 עם פס סטטוס, הטיה של 14 מעלות והלוח בטור אחד. בפחות תנועה: מסך ישר ומלא, בלי נעילה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 שימו במסך נתונים שהלקוח באמת מקבל מכם. ממשק אמיתי משכנע יותר מכל משפט שיווקי.

קאבר עם שובל תמונות אחרי העכבר

כל תנועה של העכבר פורשת עוד פרויקט מהתיק. הגולש משחק, ורואה את העבודות בלי לגלול.

איפה זה עובד: מעצבי פנים, אדריכלים, צלמים, סטודיו ומותגי אופנה, דף הבית

מה צריך להכין

• 8 תמונות מפרויקטים, רצוי לגובה
• כותרת קצרה ושלושה שירותים
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה עם שובל תמונות לאתר של [שם העסק]: רקע בהיר, למעלה שם העסק ושורה עם [תחום] ו[עיר], במרכז כותרת ענק '[כותרת]' שמילה אחת בה בצבע המותג, משפט משנה ורמז עם נקודה פועמת 'הזיזו את העכבר על המסך' (במגע: 'העבירו אצבע על המסך'), ובתחתית שלושת השירותים ממוספרים. כשהעכבר נע, כל כ-130 פיקסלים צצה במקומו תמונה קטנה במסגרת לבנה עם צל, בהטיה אקראית קלה, החדשה מעל הקודמת, ותוך שנייה היא שוקעת ונמוגה.במגע השובל עוקב אחרי האצבע. בטעינה הכותרת עולה, וסמן מדומה מקיף את הטקסט בלולאה בלי לעבור עליו (בטלפון נקודת אצבע מציירת אינסוף ברווח מעליו או מתחתיו), עד שהגולש זז או נוגע. בפחות תנועה: בלי שובל, ושלוש תמונות קבועות מוטות מתחת למשפט. מאגר אלמנטים ממוחזר ו-Web Animations API. התמונות: [8 תמונות מפרויקטים]. השירותים: [3 שירותים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונות באותה תאורה ובאותו גוון. שובל של צילומים מעורבבים נראה כמו בלגן.

קאבר כותרת ענק שנכנסים דרכה

הכותרת היא חלון: גוללים, ונכנסים דרך האותיות אל הסצנה שמאחוריהן. פתיחה שזוכרים.

איפה זה עובד: חנויות אופנה, מותגי לייף סטייל, השקות קולקציה, סטודיו ואירועים

מה צריך להכין

• כותרת קצרה של 2 עד 3 מילים
• שורת פתיח, כותרת משנה, משפט וטקסט לכפתור
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קאבר כותרת ענק שנכנסים דרכה לאתר של [שם העסק]: מסך פתיחה בהיר עם שורת מותג למעלה, ובמרכז [2 עד 3 מילים] באותיות ענק שממלאות את הרוחב, ובמובייל בשתי שורות. האותיות חלולות: דרכן רואים סצנה בגווני טרקוטה עם כתמי צבע רכים שנעים לאט, וצל עדין בשולי החיתוך. בתחתית כפתור 'גללו פנימה' עם חץ מקפץ שגולל עד הסוף. בגלילה הקאבר ננעל (sticky במסילה של 300vh), שורת המותג דועכת והכותרת גדלה עד שנכנסים דרך אחת האותיות והסצנה ממלאת את המסך, ואז עולים בה בהדרגה התוכן והכפתור. הטכניקה: מסכת SVG שה-scale שלה נגזר מהגלילה, ונקודת הכניסה נבחרת על canvas בעובי האות. בטעינה גלילה אוטומטית קצרה שמגדילה את האותיות וחוזרת לראש, ונעצרת במגע. בפחות תנועה: בלי נעילה, והסצנה מוצגת מיד עם הכותרת והתוכן. התוכן: [שורת פתיח, כותרת משנה, משפט וטקסט לכפתור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 כותרת קצרה במשקל הכי עבה של הפונט עובדת הכי טוב: אות עבה היא חלון רחב לסצנה.

קרוסלה תלת-ממדית לתיק עבודות

הגולש מסובב את העבודות שלכם במרחב — רושם של חברה גדולה תוך שנייה.

איפה זה עובד: דף הבית, עמוד תיק עבודות, דף נחיתה

מה צריך להכין

• 8–12 צילומי מסך או תמונות של עבודות
• שם קטגוריה לכל עבודה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קרוסלת תיק עבודות תלת-ממדית לאתר של [שם העסק]: טבעת של 8–10 כרטיסים שמסתובבת במרחב (perspective ו-rotateY). כל כרטיס נראה כמו חלון דפדפן עם 3 נקודות למעלה, תמונת העבודה וכיתוב קטגוריה. הקרוסלה מסתובבת לאט לבד, עוצרת כשמרחפים עליה, ואפשר לגרור אותה בעכבר או באצבע, עם חיצים וגם מקשי המקלדת. צל רך על הרצפה מתחת לכרטיסים. במובייל: רדיוס קטן יותר ופחות כרטיסים גלויים. התמונות: [קישורים לתמונות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 תנו לו את הקישורים לתמונות מספריית המדיה של וורדפרס — הוא יכניס אותן ישר לקוד.

קאברפלואו תלת-ממדי לגלריה

הגולש מדפדף בין הרגעים שלכם כמו באלבום במרחב. התמונה שבמרכז מקבלת את כל הבמה.

איפה זה עובד: גני אירועים, צלמים, מעצבים, מסעדות, תיק עבודות בדף הבית

מה צריך להכין

• 7 עד 9 תמונות אנכיות באותו יחס
• תגית, כותרת ושורת תיאור לכל תמונה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי גלריית קאברפלואו תלת-ממדית לאתר של [שם העסק]: שורת כרטיסי תמונה אנכיים. הכרטיס המרכזי גדול ופונה קדימה, והשכנים מסתובבים הצידה (rotateY), קטנים, דוהים לצבע הרקע ומתרחקים בעומק (perspective ו-translateZ), עם צל רך מתחת לכל כרטיס. מביאים כרטיס למרכז בגרירה שהכרטיסים עוקבים אחריה ונצמדים לקרוב ביותר, בחיצים, במקשי החיצים או בלחיצה על כרטיס צדדי, והגלריה מעגלית. מתחת מתחלף בדעיכה הכיתוב של הכרטיס הפעיל: תגית, כותרת ושורת תיאור. מתחתיו חיצים ונקודות ניווט בצורת פסים קצרים, והפס הפעיל מתמלא עד המעבר הבא. בטעינה הכרטיסים נפרשים מהמרכז, ואז הגלריה מתקדמת לבד כל 3 שניות ועוצרת בריחוף. במובייל: שלושה כרטיסים גלויים והחלקה באצבע. התנועה ב-requestAnimationFrame לפי מיקום רציף. הכרטיסים: [7 תמונות אנכיות עם תגית, כותרת ושורת תיאור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 תמונות אנכיות באותו יחס גובה ורוחב. תמונה אחת לרוחב שוברת את כל השורה.

קוביית תמונות תלת-ממדית מסתובבת

שש תמונות בקובייה אחת שמסתובבת לאט. הגולש גורר, בוחר פאה ומקבל מיד את הפרטים.

איפה זה עובד: קייטרינג, מסעדות, סטודיו, מוצר עם כמה צדדים, סקשן שירותים בדף הבית

מה צריך להכין

• 6 תמונות מרובעות באותו סגנון
• תגית, כותרת, תיאור, מחיר וכמות לכל פאה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קוביית תמונות תלת-ממדית לאתר של [שם העסק]: 6 פאות, על כל אחת תמונה ובתחתיתה תגית וכותרת. בטעינה היא גדלה, מסתובבת מהר ומאטה לסיבוב איטי ומוטה מעל צל רך, והפאות הצדדיות מוצללות. גרירה בעכבר מסובבת לכל כיוון ונצמדת בשחרור לפאה הקרובה. חיצים, מקשי החיצים, 6 נקודות ניווט מתחת ולחיצה על פאה מיישרים את הפאה לחזית בהטיה קלה ועוצרים את הסיבוב. בכרטיס לצד הקובייה מתחלפים בדעיכה התגית והכותרת של הפאה שמולכם ושורת הנחיה, ובפאה מיושרת השורה מתחלפת בתיאור, מחיר וכמות. הנקודה הפעילה מתמלאת 8 שניות (נעצרת בריחוף) ואז הסיבוב חוזר. אחרי 3 שניות היא מתיישרת פעם אחת לבד. במובייל: קובייה קטנה יותר, כרטיס מתחתיה וסיבוב בהחלקה. בלי תנועה היא עומדת ומחליפים פאה בחיצים. preserve-3d ו-requestAnimationFrame. הפאות: [6 תמונות מרובעות עם תגית, כותרת, תיאור, מחיר וכמות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 השאירו את השליש התחתון של כל תמונה רגוע: שם יושבים התגית והכותרת של הפאה.

כרטיסי שירות שמתהפכים בתלת-ממד

בחזית רק העיקר, ובהיפוך הפרטים וכפתור הפנייה. עמוד שירותים נקי שמזמין לגעת.

איפה זה עובד: עמוד שירותים, דף הבית, משרדי עורכי דין, יועצים, קליניקות

מה צריך להכין

• 6 שירותים עם תיאור קצר לכל אחד
• קישור לתיאום פגישה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי גריד של 6 כרטיסים שמתהפכים בתלת-ממד לאתר של [שם העסק]: בחזית כל כרטיס מספר סידורי גדול (01 עד 06), אייקון SVG בעיגול, כותרת ורמז קטן 'לפרטים' עם אייקון סיבוב. בריחוף עכבר, בהקשה או ב-Enter הכרטיס מסתובב 180 מעלות על ציר Y (perspective, preserve-3d, backface-visibility) ומגלה גב כהה עם המספר, כותרת, תיאור של 2 עד 3 שורות, כפתור 'לתיאום פגישה' אל [קישור לתיאום פגישה] וכפתור חזרה בפינה. בהיפוך הכרטיס מתרומם לעבר הגולש, הצל שמתחתיו מתכווץ ומתבהר, והפנים שמתרחקת מתכהה. בטעינה הכרטיסים מתהפכים פעם אחת בגל מימין לשמאל וחוזרים. Enter מעביר את הפוקוס לכפתור שבגב, ו-Esc מחזיר לחזית. במובייל שתי עמודות, הקשה מהפכת, ופתיחת כרטיס אחר סוגרת את הקודם. למי שביקש פחות תנועה אין סיבוב: הגב מופיע בדעיכה מעל החזית. השירותים: [6 שירותים עם תיאור קצר לכל אחד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 שמרו את הגב קצר: עד שלוש שורות וכפתור אחד. מי שרוצה לקרוא עוד כבר ילחץ.

כרטיס חבר הולוגרפי עם ברק שנע

כרטיס מנוי שנוצץ בצבעי קשת כשמזיזים אותו. המנוי שלכם מרגיש כמו מועדון יוקרתי.

איפה זה עובד: סטודיו, חדר כושר, מועדון לקוחות, כרטיס מתנה, עמוד מנויים

מה צריך להכין

• פרטי כרטיס החבר
• 3 מסלולים עם מחיר
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי כרטיס חבר הולוגרפי לאתר של [שם העסק], עם כותרת קצרה מעליו: כרטיס כהה ביחס של כרטיס אשראי, עם לוגו, תג סוג המנוי, שם החבר, מספר, תוקף וחותם עגול בצבעי קשת. הכרטיס נוטה בתלת-ממד לפי העכבר (עד 16 מעלות, תנועה רכה ב-lerp), הטקסט מרחף מעליו (translateZ), ועליו שכבת ברק בצבעי קשת עם רשת קווים דקה שזזה עם הזווית (mix-blend-mode: color-dodge), כתם אור שעוקב אחרי הסמן, חותם שמסתובב וצל שזז מתחת. במגע הכרטיס מגיב לגרירת האצבע. לצידו 3 כרטיסים קטנים באותו אפקט עדין (נוטה רק הרקע, הטקסט ישר וחד), ומתחתיו שורת רמז 'הזיזו את העכבר' או 'גררו באצבע'. בטעינה כל הכרטיסים מתנדנדים לבד, נעצרים כשנוגעים, וחוזרים אחרי 3 שניות שקט. פחות תנועה: הכרטיס ישר והברק קבוע. התוכן: [פרטי כרטיס החבר: סוג מנוי, שם, מספר ותוקף], [3 מסלולים: שם, הסבר ומחיר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 ברק הקשת בולט רק על כרטיס כהה. על רקע בהיר הוא נשטף ונראה כמו כתם לבן.

מוצר שמתפרק לשכבות בגלילה

הגולש רואה ממה המוצר בנוי, חלק אחרי חלק. הסבר שמוכר את האיכות בלי פסקה אחת.

איפה זה עובד: חנויות עיצוב ומוצרי חשמל, יצרנים, עמוד מוצר ודף נחיתה למוצר אחד

מה צריך להכין

• שם המוצר, משפט קצר ומחיר
• 5 חלקים של המוצר, שם ותועלת לכל אחד
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן מוצר שמתפרק לשכבות בגלילה לחנות של [שם החנות]: המוצר מצויר ב-SVG כשכבות נפרדות עם צל רך מתחתיו, ולצידו שם, משפט, מחיר וכפתור 'הוסיפו לסל' שמתחלף ל'נוסף לסל'. עטיפה גבוהה עם במה sticky, ו-JS גוזר מהגלילה ערך התקדמות אחד (0 עד 1) שמניע הכול: השכבות נפרדות בזו אחר זו ומרחפות בתלת-ממד (perspective ו-translate3d), קו ציר מקווקו עובר ביניהן, החלק המאיר נדלק, ולכל שכבה צצה תווית עם מספר, שם, תועלת וקו מוביל. גלילה חזרה מרכיבה אותו. בצד פס התקדמות אנכי עם נקודה לכל שכבה, ולמטה רמז 'גללו כדי לפרק'. בטעינה המוצר מתפרק ונסגר פעם אחת לבד. במחשב השכבות נפרדות באלכסון, במובייל אנכית. למי שביקש פחות תנועה הוא מוצג מפורק. המוצר: [שם המוצר, משפט ומחיר]. השכבות: [5 חלקים, שם ותועלת לכל אחד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 לכל חלק כתבו תועלת ללקוח, לא מפרט: 'לא זז מהשולחן' מוכר יותר מ'משקל 1.2 ק״ג'.

סצנת פתיחה עם עומק בגלילה

הנוף זז בשכבות כשגוללים, והפתיחה מרגישה תלת ממדית. סיבה להישאר עוד רגע.

איפה זה עובד: אזור פתיחה של גני אירועים, מלונות, צימרים, נדל״ן ומסעדות

מה צריך להכין

• כותרת ומשפט פתיחה
• 3 שירותים ומשפט לכל אחד
• סמל המקום שיופיע בנוף (עץ, מבנה, חופה)
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן פתיחה עם עומק בגלילה (parallax) לאתר של [שם העסק]: סצנת נוף בגובה המסך, מצוירת ב-SVG וב-CSS, בשכבות מהרחוק לקרוב: שמיים ושמש, רכס הרים, הכותרת, שדה עם [סמל המקום] ושרשרת נורות מהבהבות, וצמחייה כהה בחזית. JS כותב על הסצנה משתנה CSS אחד של התקדמות הגלילה (0 עד 1), וכל שכבה זזה ב-translate3d לפי המשתנה כפול מקדם משלה: הרחוקות מפגרות, החזית מקדימה, השמש שוקעת מאחורי הרכס והכותרת נבלעת מאחורי השדה. מתג 'עומק בגלילה' ('דלוק' או 'כבוי') צף בתחתית: כבוי מאפס את המקדמים במעבר רך והכול נגלל שטוח. בטעינה, ובלחיצה על המתג בראש העמוד, הדף גולש לבד מעט למטה וחוזר. במובייל חצי מהעוצמה. למי שביקש פחות תנועה המתג מתחיל כבוי. מתחת, אזור תוכן מעוגל שעולה על תחתית הסצנה: כותרת ו-3 כרטיסים. הטקסטים: [כותרת ומשפט פתיחה], [3 שירותים ומשפט לכל אחד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 המתג נועד להשוואה. אחרי שבחרתם עוצמה, בקשו מ-Claude להסיר אותו מהקוד.

מסילת פרויקטים אופקית בגלילה

גוללים למטה והפרויקטים נוסעים הצידה. תיק עבודות שמרגיש כמו מגזין, ומחזיק את הגולש בעמוד.

איפה זה עובד: תיק עבודות, עמוד פרויקטים, דף בית של סטודיו, אדריכלים ומעצבים

מה צריך להכין

• 5 פרויקטים: שם, עיר, שטח, שנה ומשפט אחד
• תמונה או איור לכל פרויקט
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן פרויקטים עם מסילה אופקית בגלילה לאתר של [שם העסק]: הסקשן ננעל במקום (position sticky בגובה המסך), ובזמן שגוללים למטה שורת כרטיסי פרויקט נוסעת הצידה עד הכרטיס האחרון, ואז העמוד ממשיך כרגיל. מעל הכרטיסים כותרת, מונה '2 מתוך 5' ופס התקדמות דק שמתמלא לפי הגלילה. הכרטיס שמול המונה מודגש, והשאר קצת קטנים ומעומעמים. גובה אזור הגלילה מחושב ב-JS לפי רוחב השורה, והתזוזה ב-transform בלבד. במובייל, ולמי שביקש פחות תנועה, הסקשן לא ננעל: השורה הופכת לפס החלקה באצבע עם scroll-snap, והמונה והפס מתעדכנים לפי ההחלקה. מעל הסקשן שורת הנחיה עם חץ: לגלול למטה כשהוא ננעל, להחליק הצידה במצב הפס. בטעינה גלילה אוטומטית קצרה שמראה את התנועה ואז משחררת לגולש. כל כרטיס: איור או תמונה, סוג השירות, שם הפרויקט, עיר, שטח ושנה, ומשפט אחד. הפרויקטים: [5 פרויקטים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 חמישה עד שבעה כרטיסים זה הגבול. מסילה ארוכה מדי מרגישה כמו עמוד שנתקע באמצע.

טבעת מונה שמתמלאת בגלילה

הגלילה עצמה הופכת למסע: הטבעת מתמלאת, המספר עולה ואבני הדרך נדלקות. מספר שזוכרים.

איפה זה עובד: דף הבית, עמוד אודות, עמוד תוכנית או מסלול, דף נחיתה

מה צריך להכין

• מה המספר סופר (ימים, שלבים, אחוזים)
• 4 אבני דרך במילה אחת
• משפט סיום
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי טבעת מונה שמתמלאת בגלילה לאתר של [שם העסק]: מקטע בגובה 3 מסכים, ובמרכזו פאנל מוצמד (position: sticky) עם שורת מותג, כותרת, שורת משנה וטבעת SVG זוהרת בגרדיאנט של צבעי המותג. בתוכה מספר גדול שסופר מ-0 עד 100 לפי עומק הגלילה (stroke-dashoffset ב-requestAnimationFrame) ומתחתיו תווית יחידה. על הטבעת 4 אבני דרך ב-25, 50, 75 ו-100: גלולות מוסתרות עם מספר ומילה, שכל אחת קופצת פנימה כשהמספר עובר אותה. ב-100 הבזק אחד מתרחב מהטבעת ונעלם, המספר קופץ קלות ונצבע בצבע המותג, גלולת ה-100 מתמלאת באותו צבע, ומתחת מופיע משפט סיום. בטעינה הטבעת מתמלאת פעם אחת לבד עד 100 עם כל אלה, משתהה רגע, חוזרת לאפס, ומשם רק הגלילה שולטת. מתחת לפאנל רמז 'גללו כדי לספור' עם חץ קטן שנעלם ברגע שגוללים. התוכן: [כותרת ושורת משנה], [תווית היחידה], [4 אבני דרך], [משפט סיום]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 המספר חייב לספר סיפור, לא אחוזים: 100 ימים, 100 שיעורים. אז אבני הדרך מקבלות משמעות.

ציטוט שנדלק מילה אחרי מילה בגלילה

הגולש קורא את המשפט הכי חשוב שלכם מילה אחרי מילה, בקצב שלו, ולא מדלג עליו.

איפה זה עובד: סופרים, מאמנים, קליניקות, עורכי דין, עמוד אודות, לפני ההמלצות

מה צריך להכין

• ציטוט של 20 עד 30 מילים
• שם ותפקיד לחתימה, ומקור הציטוט
• 2 עד 3 מילים להדגשה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן ציטוט שנדלק בגלילה לאתר של [שם העסק]: רקע כהה בגובה מסך, ובמרכזו משפט גדול מיושר לימין שכל המילים שלו עמומות. מעליו סימן מירכאות ושורת מקור קטנה: [מקור הציטוט]. הסקשן ננעץ (position: sticky בתוך עטיפה של כ-240vh), וככל שגוללים המילים נדלקות אחת אחרי השנייה, ופס דק לצד הציטוט מתמלא מלמעלה למטה באותו קצב. [2 עד 3 מילים להדגשה] נדלקות בצבע המותג. כשהכול מואר עולה מתחת החתימה: [שם ותפקיד], ורק אז הסקשן משתחרר. גלילה חזרה מכבה את המילים ואת החתימה. בטעינה המשפט נדלק פעם אחת לבד, נשאר מואר שתי שניות וחוזר לעמום, וגלילה עוצרת את ההדגמה. לפני הגלילה מוצג למטה רמז 'גללו לאט, המשפט נדלק' עם חץ שזז. למי שביקש פחות תנועה: בלי נעיצה, הכול מואר מראש. כל מילה ב-span, חישוב ב-requestAnimationFrame. הציטוט: [משפט של 20 עד 30 מילים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 משפט אחד, 20 עד 30 מילים. ציטוט ארוך יותר מעייף, והגולש ממשיך לגלול באמצע.

טקסט ענק שרץ לפי מהירות הגלילה

רצועה שזזה יחד עם הגולש: גוללים מהר והמילים טסות. המסר שלכם נתפס גם בגלילה מהירה.

איפה זה עובד: דף בית בין סקשנים, בתי קפה, מסעדות, סטודיו, אופנה, אירועים

מה צריך להכין

• 6 צירופים קצרים על העסק, 3 לכל שורה
• איזו מילה בכל שורה תהיה בקו מתאר
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי רצועת טקסט ענק שרצה לפי מהירות הגלילה לאתר של [שם העסק]: רצועה כהה ברוחב מלא עם שתי שורות של אותיות ענקיות שרצות לרוחב בלי סוף, בכיוונים מנוגדים. בין הצירופים סמל קטן שמסתובב כל הזמן, וצירוף אחד בכל שורה בקו מתאר בלבד. הקצוות נמוגים בעדינות. כשלא גוללים השורות זזות לאט. גלילה מהירה מאיצה אותן ומטה את האותיות לכיוון התנועה (skewX), גלילה למעלה הופכת את הכיוון של שתיהן, וכשעוצרים המהירות וההטיה חוזרות בהדרגה לקצב האיטי, בכיוון האחרון. המהירות נגזרת מהפרש scrollY בכל פריים של requestAnimationFrame עם החלקה, ההזזה ב-transform שקופצת חזרה ברוחב עותק אחד, והלולאה נעצרת מחוץ למסך (IntersectionObserver). במובייל האותיות קטנות יותר. בטעינה גלילה אוטומטית קצרה למטה ובחזרה שמראה את ההאצה וההיפוך. הצירופים: [6 צירופים קצרים, 3 לכל שורה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 צירופים של שתיים או שלוש מילים עובדים הכי טוב. משפט ארוך נקרא רק כשעוצרים.

כרטיסים שנערמים בגלילה

כל שלב עולה ומכסה את הקודם. תהליך העבודה שלכם נקרא כמו סיפור, צעד אחרי צעד.

איפה זה עובד: תהליך עבודה, עמוד שירותים, דף בית, שיפוצים, קליניקות ומשרדים

מה צריך להכין

• 5 שלבי עבודה: כותרת, משפט ותגית זמן
• רעיון לאיור לכל שלב
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן כרטיסים שנערמים בגלילה לאתר של [שם העסק]: מעל הסקשן כותרת ושורת 'גללו למטה'. חמישה כרטיסים גדולים נדבקים לראש המסך (position sticky, כל אחד קצת נמוך מהקודם), והבא עולה ומכסה את הקודם. המכוסה מתכווץ מעט מהקצה העליון ומתכהה, והשוליים של הקודמים מציצים כערימה עם עומק. בכל כרטיס, ברקע אחר מצבעי המותג: מספר גדול, תגית זמן, כותרת, משפט ואיור SVG לצד הטקסט. לצדם מונה דביק: מספר השלב מתגלגל מעל '/05', וחמישה פסים שהם כפתורי גלילה לכרטיס, והפעיל מתארך בצבע המותג. הכיווץ, ההכהיה והמונה מחושבים מ-getBoundingClientRect ב-requestAnimationFrame. בטעינה גלילה אוטומטית קצרה עד הכרטיס השלישי, שנעצרת כשהגולש נוגע. במובייל כרטיסים צרים, האיור למעלה והמונה צר בצד. למי שביקש פחות תנועה: רשימה רגילה בלי הדבקה. השלבים: [5 שלבים: כותרת, משפט ותגית זמן]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 טקסט קצר בכל כרטיס. כרטיס עמוס נחתך כשהוא נדבק לראש מסך של טלפון.

טקסט נגלל מול תמונה דביקה

הגולש קורא שלב אחרי שלב, והמוצר של כל שלב מופיע לידו בלי לחיצה אחת.

איפה זה עובד: שגרת טיפוח, תהליך עבודה, שלבי שירות, עמוד מוצר, דף נחיתה

מה צריך להכין

• 4 שלבים עם כותרת ומשפט קצר
• מוצר ומחיר לכל שלב
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן גלילה בשני טורים לאתר של [שם העסק]: בטור אחד 4 בלוקים של טקסט (מספר ושם שלב, כותרת ומשפט הסבר) שנגללים כרגיל, ובטור השני מסגרת עם פינות עגולות שנשארת דביקה (position: sticky) ומחליפה תוכן לפי הבלוק הפעיל: איור SVG של המוצר שמרחף לאט על רקע מספר השלב בגדול, צבע רקע משלו לכל שלב, ותווית עם שם המוצר, המחיר ומונה '02 / 04'. המעבר הוא cross-fade עם הגדלה קלה, בלי רגע ריק. הבלוק הפעיל בהיר והשאר עמומים, ולצד הטקסט פס התקדמות אנכי שמתמלא, עם נקודה לכל שלב שנדלקת כשמגיעים אליו. השלב הפעיל נקבע ב-requestAnimationFrame לפי getBoundingClientRect מול קו באמצע המסך. במובייל המסגרת נדבקת לראש המסך והטקסט נגלל מתחתיה. בטעינה גלילה אוטומטית קצרה לשלב השני, ואז הגולש ממשיך לבד. השלבים: [4 שלבים עם כותרת, משפט ומוצר עם מחיר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 משפט אחד לכל שלב. בלוק ארוך מדי מושך את העין מרגע ההחלפה במסגרת.

זום פרלקס: טסים דרך התמונות

הגולש גולל וטס פנימה דרך גלריית התמונות, עד שהנכס המרכזי ממלא את המסך.

איפה זה עובד: נדל״ן, אדריכלים, מלונות בוטיק, אולמות אירועים, תיק עבודות

מה צריך להכין

• 8 תמונות, אחת חזקה במיוחד למרכז
• כותרת ושורת פרטים לתמונה המרכזית
• 4 שירותים עם משפט לכל אחד
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן זום פרלקס לאתר של [שם העסק]: סקשן שננעל במקום (position: sticky במסילה של 320vh) על רקע כהה בצבע המותג, ובו תמונה מרכזית ושבע תמונות בגדלים שונים סביבה, עם פינות עגולות וצל רך, שורת מותג למעלה ורמז 'גללו וטוסו פנימה' עם חץ מקפץ למטה. בגלילה כל תמונה גדלה מהמרכז בקצב אחר (לכל שכבה scale משלה לפי התקדמות הגלילה), כאילו טסים דרכן, והשורה והרמז דועכים. בסוף המרכזית ממלאת את המסך, מתכהה למטה ועולה עליה הכותרת [כותרת] ומתחתיה [פרטי הנכס]. המשך גלילה משחרר ל-[4 שירותים עם משפט לכל אחד]. בטעינה מוצגת קומפוזיציית הפתיחה כשנייה, ואז העמוד גולל לבד עד הסוף בגלילה רכה של כ-3 שניות, מחכה רגע וחוזר לראש, ונעצר כשהגולש נוגע. במובייל חמש תמונות בלבד. למי שביקש פחות תנועה: בלי נעילה, ומוצג המצב הסופי. התמונות: [8 תמונות, החזקה למרכז]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 שימו במרכז את התמונה הכי חזקה. רק היא נשארת על המסך, מתחת לכותרת.

גלריה שנחשפת במסכות בגלילה

כל תמונה נפתחת מול העיניים כשמגיעים אליה. הגלריה מרגישה כמו מגזין, לא כמו תיקייה.

איפה זה עובד: אולמות אירועים, צלמים, אדריכלים, מסעדות, עמוד אודות

מה צריך להכין

• 6 תמונות בגדלים ויחסים שונים
• כותרת ושורת פרטים לכל תמונה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי גלריה שנחשפת בגלילה לאתר של [שם העסק]: כותרת קצרה עם רמז 'גללו', ומתחתיה שש תמונות בפריסה לא סימטרית (גדלים ויחסים שונים, חלקן מוזחות למעלה או למטה), ובמובייל טור אחד. לפני החשיפה כל מסגרת היא משטח בהיר בגוון המותג, וכשהיא נכנסת למסך התמונה נחשפת במסכה אחרת: וילון מלמעלה, עיגול שנפתח מהמרכז, פסים אנכיים שנפתחים בדירוג, אלכסון מהפינה, וילון מהצד ומלבן שנפתח מהמרכז. תוך כדי החשיפה התמונה מתכווצת מעט לגודלה, ואחר כך זזה לאט בתוך המסגרת לפי הגלילה (פרלקס). מתחת לכל תמונה כיתוב שעולה אחריה: מספר, כותרת ושורת פרטים. בטעינה שתי התמונות הראשונות נחשפות לבד. החשיפה עם IntersectionObserver ו-clip-path (רק למסכות), והפרלקס ב-requestAnimationFrame. התמונות והכיתובים: [6 תמונות עם כותרת ושורת פרטים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונות שהעיקר בהן במרכז. העיגול והמלבן נפתחים מהמרכז, ושם העין נוחתת ראשונה.

כפתור מגנטי שנמשך לעכבר

הכפתור הראשי זז לקראת העכבר, והעין הולכת אחריו. קריאה לפעולה שקשה לפספס.

איפה זה עובד: אזור פתיחה, דפי נחיתה, אתרי טכנולוגיה, סטודיו ומותגי יוקרה

מה צריך להכין

• כותרת ומשפט משנה
• טקסט לכפתור ראשי ולכפתור משני
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי כפתורים מגנטיים לאזור הפתיחה באתר של [שם העסק]: אזור פתיחה על רקע כהה עם רשת עדינה, ובו שורת מותג, כותרת '[כותרת]', משפט משנה ושלושה כפתורים בשורה (במובייל בטור): '[כפתור ראשי]' מלא עם חץ, '[כפתור משני]' בקו מתאר, ושלישי רגיל להשוואה. מתחת לכל אחד תווית קטנה: 'מגנטי' או 'רגיל'. כשהעכבר מתקרב לכפתור מגנטי, הכפתור נמשך אליו וזוהר, התווית שבתוכו זזה קצת יותר ממנו כדי ליצור עומק, ובמקום המקורי נשאר קו מתאר מקווקו. כשמתרחקים הוא חוזר בקפיץ רך. הכפתור הרגיל רק מתבהר. במגע אין משיכה, רק שקיעה קלה בלחיצה. בטעינה סמן עכבר מדומה עובר ליד שני הכפתורים המגנטיים ומושך אותם, נעצר על הרגיל שלא זז, וחוזר על המסלול עד שהגולש מזיז עכבר או נוגע. טכני: קפיץ ב-requestAnimationFrame, משיכה רק כש-pointerType הוא mouse. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 שימו את האפקט רק על כפתור אחד או שניים בעמוד. כשהכול מגנטי, שום דבר לא בולט.

כרטיסי זרקור שעוקבים אחרי העכבר

האור הולך אחרי העכבר ומדליק כל כרטיס בתורו. השירותים שלכם מקבלים במה.

איפה זה עובד: עמוד שירותים, דף הבית, אזור יתרונות, אתרים כהים של טכנולוגיה וסוכנויות

מה צריך להכין

• 6 שירותים: כותרת, הסבר ונתון
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי גריד כרטיסי זרקור לאתר של [שם העסק]: 6 כרטיסים כהים עם אייקון קו בריבוע מעוגל, כותרת, 2 שורות הסבר ונתון קצר. אלומת אור רכה עוקבת אחרי העכבר בהשהיה קלה, מאירה את פנים הכרטיס וגם את קו המסגרת, והשכנים מקבלים מעט מהאור. ביציאה האור דועך. במגע האור נדלק בנקודת ההקשה ודועך. בטעינה האלומה מטיילת לבד במסלול אליפטי איטי על הכרטיסים, נעצרת במגע או בתזוזת עכבר, וחוזרת אחרי 4 שניות שקט. במובייל: שורות קומפקטיות, אייקון בצד, כותרת ונתון באותה שורה. טכנית: pointermove אחד על הגריד מחשב לכל כרטיס את מיקום האור ביחס אליו. האור הוא עיגול גרדיאנט שזז עם transform, חתוך ב-overflow: hidden: שכבה מתחת לתוכן ושכבה בהירה שרואים רק דרך מסגרת של פיקסל. פחות תנועה: אור קבוע על הכרטיס הראשון, מסגרת מוארת בריחוף. השירותים: [6 שירותים: כותרת, הסבר ונתון]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 האפקט חי רק על רקע כהה. שמרו על אור עדין: אם רואים עיגול ברור, הוא חזק מדי.

עדשת לפני ואחרי

הגולש מזיז עדשה על התמונה ומגלה בעצמו מה השתנה. סקרנות שמשאירה אותו בעמוד.

איפה זה עובד: שיפוצים, עיצוב פנים, נגרות, ניקיון, גינון, עריכת תמונות

מה צריך להכין

• תמונת לפני ותמונת אחרי מאותה זווית
• פרטי הפרויקט: מה, איפה וכמה זמן
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עדשת לפני ואחרי לאתר של [שם העסק]: תמונת ה'לפני' במסגרת מעוגלת, ומעליה עדשה עגולה עם טבעת בצבע המותג שעוקבת בריכוך קל אחרי העכבר או האצבע ומגלה את ה'אחרי' באותו מקום. הגלגלת מעל התמונה, או כפתורי פלוס ומינוס עם הכיתוב 'גודל העדשה', מגדילים ומקטינים אותה, וכפתור שהגיע לקצה מתעמעם. בפינות העליונות תוויות שטוחות: 'לפני' כהה, ו'אחרי' לבנה עם מסגרת בצבע הטבעת. בטעינה העדשה מטיילת לבד על התמונה, נעצרת כשהגולש נוגע וחוזרת לטייל כשהוא עוזב. במגע היא מעט מעל האצבע, שלא תוסתר. במקלדת החיצים מזיזים אותה. לצד התמונה, ובמובייל מתחתיה, כפתורי הגודל ופרטי הפרויקט: [סוג החלל ועיר, משך העבודה, מה נעשה]. טכנית: שתי התמונות זו על זו, והעליונה נחתכת ב-clip-path: circle שמתעדכן ב-requestAnimationFrame. התמונות: [תמונת לפני ותמונת אחרי]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 צלמו את ה'אחרי' מאותה נקודה ובאותו גובה כמו ה'לפני'. סטייה קטנה שוברת את האפקט.

המחשת חיפוש מול תשובת AI

הגולש רואה את ההבדל בעיניים: בחיפוש רגיל אתם שלישיים, בתשובת AI אתם בתוך התשובה.

איפה זה עובד: דפי נחיתה לקידום אתרים, סוכנויות דיגיטל, עמוד שירות SEO

מה צריך להכין

• 4 שאלות שלקוחות מקלידים
• תשובת AI של 2 משפטים לכל שאלה
• 3 תוצאות חיפוש לכל שאלה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי המחשת חיפוש מול תשובת AI לאתר של [שם העסק]: כרטיס עם מתג מחליק 'חיפוש רגיל' / 'תשובת AI', שורת חיפוש ואזור תוצאות בגובה קבוע. בטעינה שאלה מוקלדת עם סמן מהבהב, ובינתיים שלוש נקודות חשיבה ושורות שלד. אז התשובה נכתבת מילה אחרי מילה: שם העסק במרקר בצבע המשני, ומתחתיה 3 מקורות ממוספרים. הראשון הוא כפתור של העסק בצבע המותג עם חץ קישור: לחיצה מציגה לרגע 'כאן הגולש עובר לאתר שלכם'. משם המתג עובר לבד ל'חיפוש רגיל' וב-cross-fade נכנסות 3 תוצאות (אתר, כותרת, תיאור), העסק שלישי עם תגית 'רק מקום 3'. אז השאלה נמחקת, הבאה מוקלדת וחוזרים ל-AI, בלופ. למטה 'שאלה 1 מתוך 4', כפתור 'השאלה הבאה' ופס דק שמתמלא עד המעבר הבא. ריחוף או פוקוס עוצרים את הלופ והפס, ולחיצה על המתג מחליפה תצוגה מיד. התוכן: [4 שאלות, לכל אחת תשובה של 2 משפטים ו-3 תוצאות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 כתבו שאלות כמו שלקוח באמת מקליד. שאלה שיווקית מדי מסגירה שזו הדגמה.

אייקונים מונפשים שמציירים את עצמם

האייקונים מצטיירים מול העיניים וממשיכים לזוז. אזור היתרונות מפסיק להיות רשימה יבשה.

איפה זה עובד: אזור יתרונות, עמוד שירותים, דף הבית, קליניקות ונותני שירות

מה צריך להכין

• 6 יתרונות: כותרת ושורת הסבר
• תנועה קטנה שמתאימה לכל אייקון
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן יתרונות עם אייקונים מונפשים לאתר של [שם העסק]: שורת מותג, כותרת ומשפט פתיחה, ומתחתם 6 כרטיסים לבנים. בכל כרטיס אייקון SVG קווי בריבוע מעוגל בהיר, כותרת ושורת הסבר. במחשב 3 בשורה עם האייקון מעל הטקסט, במובייל שורות עם האייקון בצד. כשכרטיס נכנס למסך (IntersectionObserver) האייקון מצטייר קו אחרי קו עם stroke-dashoffset, בדירוג בין הכרטיסים, ואז ממשיך בלולאה בתנועה קטנה משלו, למשל לב פועם, מחוגי שעון מסתובבים, וי שמצטייר שוב במגן, פעמון מתנדנד. הקו בצבע המותג, החלק שזז בצבע המשני. ריחוף, הקשה או Enter על האייקון (הוא כפתור) מנגנים את הציור מחדש, והכרטיס מקבל מסגרת בצבע המותג. טכנית: pathLength=1 על כל path, בלי למדוד אורכים. בלי Lottie ובלי פונט אייקונים. בפחות תנועה: אייקונים שלמים וקבועים. היתרונות: [6 יתרונות: כותרת, הסבר ותנועה לאייקון]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 תנועה אחת קטנה לכל אייקון מספיקה. כשכולם קופצים חזק ביחד, העין לא יודעת לאן להסתכל.

כפתור ענק עם מסגרת אור מסתובבת

קישור אחד שאי אפשר לפספס: האור שרץ סביבו מושך את העין, והגולש נכנס לגלריה.

איפה זה עובד: מעבר לגלריה, לתיק עבודות או לקטלוג, בסוף עמוד הבית או בין סקשנים

מה צריך להכין

• כותרת קצרה ושורת משנה
• קישור לגלריה או לעמוד המרכזי
• 3 תמונות מייצגות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי כפתור ענק לאתר של [שם העסק] שמוביל אל [קישור לגלריה]: כרטיס כהה ולחיץ ברוחב מלא, ובו כותרת לבנה גדולה '[כותרת]', שורת משנה אפורה '[שורת משנה]' ועיגול בהיר עם חץ. קצת פנימה מהשוליים מסגרת גרדיאנט דקה שמסתובבת לאט, והאור שלה נשפך בעדינות על פני הכרטיס ליד השוליים. מהקצה התחתון מציצות שלוש תמונות ממוזערות, מוטות כמו הדפסים עם שוליים לבנים: [3 תמונות]. בכניסה למסך הכרטיס עולה, התמונות מטפסות אחת אחרי השנייה, ומצב הריחוף מודגם פעם אחת לבד. בריחוף ובפוקוס המסגרת מאיצה, הכרטיס מתרומם והצל מעמיק, והחץ זז קדימה. בלחיצה שקיעה קלה. במובייל הכרטיס גבוה יותר, הכותרת בשתי שורות, שורת המשנה והחץ בתחתית, בלי התמונות. טכני: המסגרת היא ריבוע conic-gradient שמסתובב ב-transform מאחורי פני הכרטיס, והמהירות משתנה בהדרגה ב-requestAnimationFrame. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 כותרת של שתיים או שלוש מילים. ככל שהיא קצרה יותר, הכפתור נראה גדול ובטוח יותר.

מסך כניסה עם מונה ווילון נפתח

רגע קצר של מותג בזמן שהאתר נטען, ואז העמוד נחשף בתנועה אחת נקייה.

איפה זה עובד: אדריכלים, מעצבי פנים, סטודיו, צלמים, אתרי תדמית, עמוד הבית

מה צריך להכין

• לוגו בקובץ SVG או PNG שקוף
• כותרת בשתי שורות ומשפט פתיחה
• 4 שירותים
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מסך כניסה לאתר של [שם העסק]: בטעינה מסך מלא בצבע המותג הכהה, במרכזו הלוגו ושורת [תחום], ובתחתית מונה גדול עם % שרץ מ-0 עד 100 (מהר בהתחלה, לאט בסוף) לצד פס התקדמות דק שמתמלא איתו. קווים דקים מחלקים את המסך לחמישה פסים אנכיים. ב-100 הלוגו והמונה דועכים והפסים עולים בזה אחר זה מימין לשמאל כמו וילון. העמוד שמאחור נכנס: שתי שורות הכותרת עולות כל אחת ממסכה (overflow hidden), ואחריהן בעלייה מדורגת שורת מיקום, משפט, 4 שירותים ממוספרים, כפתור 'קבעו פגישת היכרות' ושרטוט קווי של חזית בית עם קו מידה. 'דילוג' ו-Esc פותחים את הווילון מיד, ו'הפעלה מחדש' בראש העמוד מריץ שוב. המונה ב-requestAnimationFrame. בפחות תנועה העמוד מוצג מיד, ו'הפעלה מחדש' מציג את מסך הכניסה סטטי לשנייה. התוכן: [קישור ללוגו], [כותרת בשתי שורות ומשפט], [4 שירותים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 כניסה של עד 3 שניות, ורק בעמוד הבית. בעמודים פנימיים היא רק מעכבת את הגולש.

כותרות קינטיות: שלוש כניסות טקסט

הכותרת נבנית מול העיניים ונשארת קריאה. הגולש עוצר לקרוא במקום לגלול הלאה.

איפה זה עובד: מגזינים ובלוגים, ראש עמוד הבית, פתיחת כתבה או עמוד שירות

מה צריך להכין

• 3 כותרות קצרות לכתבות
• תווית מדור, שורת משנה וכותב לכל כתבה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן כותרות קינטיות לאתר של [שם העסק]: שלוש לשוניות, ובכל אחת כתבה עם כניסה אחרת. 'אותיות ממסכה': האותיות עולות אחת אחת מקו נסתר. 'מילים מטשטוש': המילים מתחדדות מ-filter: blur (רק בכניסה). 'פענוח': אותיות עבריות אקראיות בצבע המותג מתחלפות וננעלות אחת אחת עד שהמשפט מתייצב. מעל הכותרת תווית מדור, מתחתיה שורת משנה וכותב שנכנסים אחריה, מילת מפתח בצבע המותג ומספר הכתבה ענק ושקוף ברקע. האפקט רץ כשהכותרת נכנסת למסך (IntersectionObserver), במעבר לשונית ובכפתור 'נגנו שוב'. בטעינה הלשוניות מתחלפות לבד כל 5 שניות עם פס התקדמות, עד שבוחרים לשונית. ריחוף על מילה (הקשה בטלפון) מערבל אותה, ושורת רמז מסבירה. הכתבות באותו תא בגריד עם cross-fade. לקורא מסך טקסט נסתר מלא, והעותק המונפש aria-hidden. התוכן: [3 כותרות, מדור, שורת משנה וכותב]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 תנו אפקט רק לכותרת הראשית. כשכל כותרת בעמוד זזה, אף אחת כבר לא בולטת.

סמן מותאם שמגיב לאלמנטים

הסמן משתנה מעל קישור, תמונה, כפתור וטקסט, והאתר מרגיש מוקפד כמו של מותג יוקרה.

איפה זה עובד: אתרי יוקרה, סטודיו, תיקי עבודות, חנויות בוטיק. במחשב בלבד

מה צריך להכין

• כותרת ופסקה קצרה
• טקסט לקישור ולכפתור
• תמונת מוצר עם שם ומחיר
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סמן עכבר מותאם לאתר של [שם העסק]: אזור פתיחה בהיר עם כותרת, פסקה, כפתור כהה, קישור ותמונת מוצר. הסמן הרגיל מוחלף בנקודה קטנה ובטבעת דקה שעוקבת אחריה באיחור רך. על הקישור הטבעת גדלה ומתמלאת בגוון שקוף, על התמונה היא הופכת לעיגול מלא עם המילה 'צפייה' והנקודה נעלמת, על הכפתור היא עוזבת את העכבר ונצמדת לצורה שלו, ועל הפסקה היא הופכת לקו אנכי דק. בלחיצה היא מתכווצת לרגע והאלמנט שוקע מעט. מתחת מקרא של ארבעת המצבים, והפעיל מודגש בקו זהב. בטעינה סמן מדומה עובר בלולאה בין האלמנטים ולוחץ פעם על הכפתור, עד שהגולש מזיז עכבר. במגע אין סמן מותאם, רק ההדגמה ושורת הסבר קצרה. לחיצה על אלמנט מציגה הודעה קטנה בתחתית. טכני: lerp ב-requestAnimationFrame, מעקב רק כש-pointerType הוא mouse. התוכן: [כותרת, פסקה, טקסט לקישור ולכפתור, תמונת מוצר עם שם ומחיר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 אל תסתירו את הסמן הרגיל בטפסים ובשדות טקסט. שם אנשים צריכים לראות בדיוק איפה הם.

הירו עם אתרים מתחלפים על מחשב וטלפון

כבר בשנייה הראשונה הגולש רואה עבודות אמיתיות — בלי לגלול.

איפה זה עובד: דף הבית של סוכנות, מעצב, צלם או כל עסק עם תיק עבודות

מה צריך להכין

• 5–10 צילומי מסך של עבודות
• כותרת ומשפט משנה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה (הירו) לדף הבית של [שם העסק]: כותרת חזקה '[הכותרת]', משפט משנה וכפתור וואטסאפ, ולצידם מוקאפ של מחשב נייד וטלפון מצוירים ב-CSS. במסכים מתחלפות תמונות העבודות [קישורים לתמונות] עם מעבר עמעום, והתמונה גוללת לאט בתוך המסך כאילו מישהו גולש באתר. עדיף CSS בלבד, בלי JavaScript. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 צילומי מסך ארוכים (של כל העמוד) נראים הכי טוב — הגלילה בתוך המסך מראה את כל האתר.

טיפוגרפיה חיה

הכותרת נבנית מול העיניים ומילה אחת מתחלפת — תשומת לב מהשנייה הראשונה.

איפה זה עובד: אזור פתיחה של כל אתר שרוצה להרגיש עדכני

מה צריך להכין

• כותרת
• 3–4 מילים מתחלפות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה טיפוגרפי ל-[שם העסק]: הכותרת '[הכותרת]' נחשפת מילה אחרי מילה עם טשטוש שנפתח, נצנוץ גרדיאנט שעובר על המילה '[מילת מפתח]', קרוסלת מילים שמתהפכת בתלת-ממד ('אנחנו בונים: [מילה 1] / [מילה 2] / [מילה 3]'), וכפתור מגנטי שנמשך קלות לעכבר. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 המילים המתחלפות = השירותים שלכם. ככה הגולש מבין את כל ההיצע ב-5 שניות.

הירו קולנועי בלי וידאו

נראה כמו וידאו רקע — אבל נטען מיד ולא מאט את האתר.

איפה זה עובד: מותגים, סטודיו, מוצרים פרימיום

מה צריך להכין

• כותרת
• משפט משנה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה קולנועי ל-[שם העסק] שנראה כמו וידאו אבל בנוי מ-CSS בלבד: הבזקי אור בגרדיאנט שזזים לאט, חלקיקים מרחפים, שכבת גרעין עדינה, פרלקסה של 3 שכבות לפי העכבר, וכותרת '[הכותרת]' עם משפט משנה שנכתב כמו במכונת כתיבה. רק transform ו-opacity, 60 פריימים. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 וידאו רקע אמיתי שוקל מגה-בייטים ומוריד ציון מהירות. זה נותן את אותה הרגשה בחינם.

הירו עם שאלון ב-3 שלבים

הגולש עונה על 3 שאלות בלחיצה כבר במסך הראשון, ואתם מקבלים ליד מסונן עם כל הפרטים.

איפה זה עובד: דף נחיתה לקמפיין, עמוד הבית של נותני שירות

מה צריך להכין

• כותרת ושורת משנה
• כותרת לכרטיס השאלון
• 3 שאלות עם 4 תשובות לכל אחת
• מספר וואטסאפ

הפרומפט — מחליפים את מה שמסומן

בנה לי הירו עם שאלון לאתר של [שם העסק]: רקע כהה עם כתמי גרדיאנט רכים שזזים. בצד אחד כותרת, שורת משנה, צ'יפים של יתרונות ושורת דירוג. בצד השני כרטיס בהיר שבולט על הרקע: תג 'זמין עכשיו' שפועם, כותרת ושורה שמסבירה מה מקבלים בסוף, פס התקדמות ומונה 'שאלה 1 מתוך 3'. שלוש שאלות, בכל אחת 4 תשובות בשורות עם אייקון. לחיצה מסמנת את התשובה לרגע בצבע המותג ומעבירה הלאה (יש 'חזרה'). אחריהן שם וטלפון עם בדיקת נייד ישראלי, ומסך תודה שפונה בשם הפרטי, מסכם את התשובות ומציע כפתור וואטסאפ ל-[מספר בפורמט 972] עם הודעה שכוללת אותן, וכפתור 'מילוי מחדש'. בטעינה הדגשה עוברת פעם אחת על התשובות ונעצרת כשנוגעים בכרטיס. במובייל הכרטיס מתחת לכותרת ושורת הדירוג מוסתרת. השאלות: [3 שאלות ותשובות]. היתרונות: [3 יתרונות]. כותרת הכרטיס: [מה מקבלים בסוף]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 כתבו בכותרת הכרטיס מה מקבלים בסוף השאלון. בלי הבטחה ברורה, פחות אנשים מתחילים.

הירו מגזיני עם קשת ומדליון

פתיחה שנראית כמו שער של מגזין: תמונה בקשת, הפנים שלכם ופריט אחד שקופץ לעין.

איפה זה עובד: מותג אישי, תיווך ונדל״ן, קליניקות, מעצבים, סופרים ומרצים

מה צריך להכין

• תמונת אווירה לגובה ודיוקן
• כותרת בשלוש שורות ופסקה קצרה
• פריט אחד להבלטה בכרטיס
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה בסגנון מגזין לאתר של [שם העסק]: רקע בהיר ושתי עמודות. בצד הטקסט: שורת פתיח עם קו זהב, כותרת סריפית בשלוש שורות שבה מילה אחת מנצנצת בגרדיאנט זהב, פסקה, שני כפתורים ושורת אמון. בצד השני: תמונה במסגרת קשת עם קו מתאר דק מאחוריה, מדליון דיוקן עגול שחופף לתחתית הקשת, וכרטיס קטן שחופף לצד השני: תמונה ממוזערת, תווית 'חדש בשוק', שם, מחיר ונקודה פועמת. המדליון והכרטיס מרחפים בעדינות, כל אחד בקצב שלו. מעל הכול הדר צף בצורת גלולה: לוגו, 4 קישורים וכפתור. בטעינה כניסה מדורגת: ההדר, שורות הכותרת שעולות מתוך מסכה, הקשת, המדליון והכרטיס. במובייל הקשת מעל הטקסט, ובהדר רק לוגו וכפתור. לכותרת פונט Frank Ruhl Libre, לנצנוץ background-clip: text עם הזזת background-position. התוכן: [כותרת, פסקה, תמונת אווירה, דיוקן ופריט להבלטה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונה לגובה שהנושא שלה במרכז. הקשת חותכת את שתי הפינות העליונות.

הירו עם טופס מהיר: שם וטלפון

שם וטלפון כבר במסך הראשון. מי שהגיע מוכן משאיר פרטים בלי לגלול ובלי לחפש.

איפה זה עובד: עורכי דין, יועצים, קליניקות, דפי נחיתה לקמפיין

מה צריך להכין

• כותרת ושורת משנה
• זמן התגובה שאתם מתחייבים אליו
• כתובת לפניות (וובהוק או מערכת לידים)
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה עם טופס מהיר לאתר של [שם העסק]: רקע בהיר עם שני עיגולים דקים חופפים שנעים לאט, שורת מותג, כותרת גדולה מיושרת לימין עם מילה מודגשת בקו, ושורת משנה. הטופס הוא חלק מהכותרת: קפסולה לבנה עם 'שם מלא', 'טלפון נייד' וכפתור 'חזרו אליי' בשורה אחת, ומתחתיה שורת אמון עם אייקונים: [זמן תגובה], דיסקרטיות, בלי התחייבות. בדיקת שם ומספר ישראלי: בשגיאה תווית השדה הופכת להודעה עדינה בגוון חם ('נראה שחסרה ספרה, בדקו שוב'), עד שמקלידים שוב. בשליחה ספינר ו'שולחים' בכפתור, ואז מסך תודה במקום הטופס ובאותו גודל: 'תודה' עם השם הפרטי, המספר שהוקלד וקישור 'תיקון פרטים' שמחזיר לטופס. בטעינה החלקים נכנסים בהדרגה, ובשדה השם מוקלדת דוגמה מתחלפת עד שנוגעים בטופס. במובייל השדות אחד מעל השני והכפתור ברוחב מלא. שליחה ב-fetch אל [כתובת לפניות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 הבטיחו זמן תגובה רק אם תעמדו בו. שורת האמון עובדת כשהטלפון באמת מצלצל בזמן.

הירו מפוצל וכרטיס תמונה עם הצעה

הגולש מבין בשנייה מי אתם ומה עושים, והתמונה עצמה מציעה לו את הצעד הבא.

איפה זה עובד: דף הבית של קייטרינג, מסעדות, ספקים, אולמות ונותני שירות

מה צריך להכין

• כותרת, תת-כותרת ושני כפתורים
• שלושה מספרים עם תווית
• תמונה לגובה, ולשכבה שעליה: כותרת, מחיר וכפתור
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן פתיחה (הירו) מפוצל לאתר של [שם העסק]: מימין שורת פתיח קטנה עם קו בצבע המותג, כותרת גדולה בשתי שורות שמילה אחת בה מסומנת במרקר, תת-כותרת, שני כפתורים ומתחתם שורת אמון עם שלושה מספרים גדולים שנספרים מאפס בטעינה. משמאל כרטיס תמונה גדול עם פינות מעוגלות, מאחוריו משטח מוטה בצבע המותג, והתמונה בזום איטי שלא נפסק. בתחתית הכרטיס שכבה כהה שמציצה: נקודה פועמת וכותרת קטנה. בריחוף או בפוקוס היא עולה ב-translateY וחושפת שורת מחיר וכפתור. בטעינה הטקסט נכנס בדירוג מלמטה, הכרטיס נכנס מהצד, והשכבה עולה פעם אחת לבד ל-3 שניות ויורדת. במובייל ובמסכי מגע הכרטיס מתחת לטקסט, השכבה פתוחה תמיד והכפתורים ברוחב מלא. התוכן: [כותרת, תת-כותרת, שני כפתורים, שלושה מספרים עם תווית, תמונה לגובה, וכותרת, מחיר וכפתור לשכבה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונה לגובה שהשליש התחתון שלה רגוע. שם יושבת השכבה עם הכותרת והכפתור.

הירו וידאו שהעמוד מחליק מעליו

הפתיחה נשארת במקום והעמוד עולה מעליה כמו כרטיס. הגלילה הראשונה כבר מרגישה אחרת.

איפה זה עובד: דף בית של מוסכים, קבלנים, סטודיו, מסעדות ועסקי שירות עם סרטון טוב

מה צריך להכין

• סרטון רקע קצר
• שורת פתיח, כותרת ומשפט הסבר
• 3 נקודות אמון ו-4 שירותים עם מחיר התחלתי
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה דביק לאתר של [שם העסק], שהעמוד מחליק מעליו: הירו כהה בגובה המסך עם וידאו רקע [קישור לסרטון] בלופ ובלי קול, ושכבת הכהיה בצד של הטקסט. בתוכו, בכניסה מדורגת: גלולה עם נקודה פועמת ושורת פתיח, כותרת גדולה בשלוש שורות שהאחרונה בצבע המותג, משפט הסבר, כפתור ראשי לוואטסאפ [מספר בפורמט 972], כפתור משני שגולל ברכות לסקשן הבא ושורת אמון עם [3 נקודות אמון]. ההירו ב-position: sticky, והסקשן הבא, בהיר עם [4 שירותים ומחיר התחלתי], עולה מעליו כמו כרטיס עם פינות עליונות מעוגלות וצל. ככל שהכרטיס עולה, תוכן ההירו מתעמעם, קטן ומתרחק והווידאו מתכהה, לפי מיקום הגלילה. בטעינה העמוד גולל לבד פעם אחת מעט למטה וחזרה, ונעצר כשהגולש נוגע. במובייל אותו אפקט, עם כפתורים ברוחב מלא. בלי overflow: hidden על אלמנט אב, אחרת ה-sticky נשבר. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 סרטון של 8 עד 12 שניות, בלי קול ועד 3 מגה. סרטון כבד מעכב את כל העמוד.

הירו כהה עם גלולות של תחומים

הגולש רואה מיד במה אתם עוסקים, ומרחף על תחום כדי לקרוא עליו בלי לעזוב את המסך הראשון.

איפה זה עובד: משרדי רואי חשבון, עורכי דין, יועצים, קליניקות, דף הבית

מה צריך להכין

• כותרת ומשפט משנה
• 4 תחומי עיסוק עם תיאור קצר לכל אחד
• מספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן הירו לאתר של [שם העסק]: רקע כהה אחיד ובפינה [מוטיב שקט מהתחום, למשל גרף עמודות] שנושם לאט. שורת מותג, כותרת בשתי שורות (השנייה בגוון בהיר), משפט משנה, קו מפריד דק, שורת גלולות עם תחומי העיסוק ושני כפתורים: ראשי 'לתיאום פגישה' עם חץ שפותח וואטסאפ ל-[מספר בפורמט 972], ומשני בקו מתאר 'תחומי השירות' שגולל לסקשן הבא. בטעינה הגלולות נכנסות אחת אחת. גלולה שמרחפים עליה או נוגעים בה מתמלאת בצבע המותג, ומשפט המשנה מתחלף ב-cross-fade לתיאור התחום, שנפתח בשמו מודגש. כל המשפטים באותו תא grid, כך שהגובה לא קופץ. כשהעכבר עוזב חוזר המשפט הכללי. עד הנגיעה הראשונה רץ סיור: כל 3 שניות נדלקת הגלולה הבאה, וקו צבעוני מתקדם על המפריד. במובייל הגלולות נגללות לרוחב עם scroll-snap והכפתורים ברוחב מלא. התוכן: [כותרת ומשפט משנה], [4 תחומים עם תיאור קצר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 כתבו לכל תחום משפט אחד באורך דומה. כשהתיאורים שווים באורכם, החילוף נראה חלק ונקי.

הירו תמונות מתחלפות, לוגו ותגיות

הגולש נוחת על תמונות האווירה של העסק, ובמבט אחד מבין מי אתם ומה מציעים.

איפה זה עובד: מסעדות, קונדיטוריות, סדנאות, צימרים, אולמות אירועים, סטודיו

מה צריך להכין

• 4 תמונות רקע לרוחב, אחת לכל תגית
• לוגו, כותרת ו-4 תגיות קצרות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה (הירו) במסך מלא לאתר של [שם העסק]: 4 תמונות רקע [קישורים לתמונות] שמתחלפות כל 6 שניות ב-cross-fade של 1.6 שניות עם זום עדין ורציף, ומעליהן שכבת כהות ששומרת על קריאות. במרכז: הלוגו [קישור ללוגו] בעיגול בהיר, כותרת '[הכותרת]' בשתי שורות (השנייה בצבע המשני) ושורת תגיות מופרדות בקו דק: [4 תגיות, אחת לכל תמונה]. כל תגית היא כפתור: לחיצה עליה קופצת לתמונה שלה, והתגית של התמונה שמוצגת מודגשת בקו תחתון. למטה: נקודות ניווט, כפתור השהיה והפעלה, ופס התקדמות דק לרוחב המסך שמתמלא עד ההחלפה ומתחיל מחדש בכל שקופית. בטעינה הלוגו, הכותרת והתגיות נכנסים בזה אחר זה, והמצגת כבר רצה. במובייל התגיות נשברות לשתי שורות של שתיים, והחלקה באצבע מחליפה שקופית. במצב פחות תנועה: תמונה קבועה בלי פס, והנקודות והתגיות עדיין עובדות. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 כתבו תגיות של מילה או שתיים. במובייל הן יושבות שתיים בשורה, ותגית ארוכה שוברת את הסדר.

הירו עם מילה מתחלפת בכותרת

מילה אחת מתחלפת בכותרת ומציגה את כל השירותים שלכם, בלי להעמיס על המסך הראשון.

איפה זה עובד: דף הבית של סוכנויות ביטוח, משרדים, קליניקות ונותני שירות

מה צריך להכין

• סרטון רקע קצר ותמונת פוסטר
• פתיח לכותרת ו-3 מילים מתחלפות
• משפט משנה וטקסט לכפתור
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן הירו לאתר של [שם העסק]: וידאו רקע בלופ ובלי קול (muted, playsinline), עם שכבה כהה שמתחזקת בצד של הטקסט. התוכן מיושר לימין: שורת מותג עם סמל, שם העסק ו-[עיר], ומתחתיה כותרת '[פתיח הכותרת]' שהמילה האחרונה בה מתחלפת כל שתי שניות בין [3 מילים מתחלפות]. המילה היוצאת מחליקה למעלה ונעלמת, הבאה עולה מלמטה באותו רגע, ותחתיה קו מעוגל בצבע המותג שמצטייר מחדש מימין לשמאל בכל החלפה. מתחת [משפט משנה] וכפתור אחד '[טקסט הכפתור]'. בטעינה הכול נכנס בזה אחר זה. רוחב אזור המילה קבוע לפי המילה הארוכה, כדי שהשורה לא תקפוץ. קורא מסך מקבל משפט מלא אחד עם כל המילים, והאנימציה מוסתרת ממנו ב-aria-hidden. במובייל הכותרת בשתי שורות: המילה המתחלפת בשורה משלה. למי שביקש פחות תנועה: מילה אחת קבועה עם הקו, ופוסטר במקום וידאו. הסרטון: [קישור לסרטון ולתמונת פוסטר]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו שלוש מילים באורך דומה. מילה ארוכה בהרבה מהאחרות משאירה חור בסוף השורה.

הירו חנות עם סליידשואו מוצרים

הגולש רואה מיד את הקולקציות המובילות ואת ההצעה, ולחיצה אחת מביאה אותו למוצר.

איפה זה עובד: דף הבית של חנות אונליין: תכשיטים, אופנה, קוסמטיקה, עיצוב הבית

מה צריך להכין

• 3 תמונות מוצר או קולקציה
• כותרת, משפט ומחיר לכל שקופית
• תג הצעה וקישור לכל שקופית
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה (הירו) לדף הבית של החנות של [שם החנות]: סליידשואו של 3 שקופיות. בכל שקופית תמונה גדולה בצד אחד ועליה תג הצעה כמו 'משלוח חינם מעל ₪300', ובצד השני שם הקטגוריה, כותרת מכירה קצרה, משפט אחד, כפתור 'לקולקציה' ולידו מחיר 'החל מ-'. השקופיות מתחלפות לבד כל 6 שניות ב-cross-fade, התמונה מתקרבת לאט, ושורות הטקסט והתג נכנסים מחדש מלמטה, אחד אחרי השני, בכל שקופית. ניווט: שני חיצים, מקשי החיצים, החלקה באצבע, ושלושה פסים קצרים שהפעיל בהם מתמלא כפס התקדמות עד ההחלפה. ריחוף, פוקוס מקלדת או אצבע על המסך עוצרים את הטיימר ואת הפס. במובייל התמונה למעלה והטקסט מתחתיה, וכל השקופיות באותו גובה כדי שהעמוד לא יקפוץ. השקופיות: [3 שקופיות: תמונה, קטגוריה, כותרת, משפט, מחיר, תג הצעה וקישור]. אם אין תמונה, צייר את המוצר ב-SVG. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 השקופית הראשונה היא היחידה שכולם רואים. שימו בה את רב המכר, לא את המוצר החדש.

הירו סליידשואו עם לוגו וכפתור

תמונות נוף מתחלפות מאחורי הלוגו והכותרת. הגולש מרגיש את המקום לפני שקרא מילה.

איפה זה עובד: תיירות ונופש, צימרים ומלונות, אולמות אירועים, נדל״ן, דף הבית

מה צריך להכין

• 3 תמונות נוף לרוחב באיכות גבוהה
• לוגו בהיר על רקע שקוף
• כותרת, משפט תיאור ומספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן פתיחה (הירו) במסך מלא לאתר של [שם העסק]: ברקע סליידשואו של [קישורים ל-3 תמונות נוף], מעליו שכבת כהות עדינה, ובמרכז הלוגו [קישור ללוגו], כותרת '[הכותרת]', משפט תיאור '[משפט התיאור]' וכפתור אחד '[טקסט הכפתור]' שפותח וואטסאפ ל-[מספר בפורמט 972]. השקופיות מתחלפות כל 5 שניות ב-cross-fade, וכל תמונה מתקרבת בזום איטי כל עוד היא מוצגת. הלוגו, הכותרת והכפתור קבועים, רק הרקע מתחלף. בתחתית פס דק לכל שקופית: הפעיל מתמלא עד ההחלפה, ולחיצה על פס קופצת לשקופית שלו. מתחתיהם חץ קטן שמקפץ, ולחיצה עליו גוללת ברכות לסקשן הבא. בטעינה הלוגו, הכותרת, התיאור והכפתור נכנסים מלמטה בזה אחר זה. במובייל הטקסט קטן יותר ונשאר ממורכז. גובה הסקשן 100svh, והשקופית החדשה נכנסת מעל הקודמת כך שאין רגע ריק במעבר. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונות שהמרכז שלהן רגוע, בלי פנים ובלי טקסט. שם יושבים הלוגו והכותרת.

הירו עם תמונה שמתחלפת בכל כניסה

כל ביקור נפתח בתמונה אחרת מהתיק. האתר מרגיש חי, בלי קרוסלה שמסיחה את הדעת.

איפה זה עובד: צלמים, אדריכלים, מעצבי פנים, גלריות, סטודיו לעיצוב

מה צריך להכין

• 7 תמונות לרוחב, עם שם ומקום לכל אחת
• כותרת, משפט פתיח ו-4 שירותים
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן הירו מונוכרומי לאתר של [שם העסק]: שורת מותג דקה (שם העסק מימין, [עיר] משמאל), מסגרת תמונה גדולה, ומתחתיה על רקע בהיר עם הרבה אוויר: כותרת ענקית בשני חלקים (השני באפור), ולצידה משפט פתיח ו-4 שירותים עם קו דק מעל כל אחד. בכל טעינה JS מגריל תמונה אחת מהסט, בשחור לבן. התמונה נחשפת במסכה איטית מלמטה למעלה (כ-1.8 שניות: עטיפה ב-translateY ותוכן ב-translateY הפוך) וממשיכה בזום איטי, ומעליה גרעין פילם שרוטט. בפינה התחתונה מונה '03 / 07' שמריץ מספרים חצי שנייה ונעצר על התמונה שנבחרה, מתחתיו שם התמונה, ומולו כפתור 'עוד תמונה' שמגריל תמונה אחרת וחושף אותה מעל הקודמת. הטקסטים נכנסים בדירוג מלמטה. במובייל המסגרת בגובה חצי מסך והכול בטור אחד. התוכן: [כותרת], [משפט פתיח], [4 שירותים], [7 תמונות עם שם ומקום]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונות לרוחב שהנושא שלהן במרכז. במובייל המסגרת צרה והצדדים נחתכים.

הירו באנר: תמונה רחבה ושלוש כותרות

פתיחה נקייה שקל לקרוא: תמונה אחת רחבה, ומתחתיה מסר ברור וכפתור אחד.

איפה זה עובד: דף הבית של עסק שירות, מרכזי למידה, משרדים, עמותות, יבואנים

מה צריך להכין

• תמונת באנר לרוחב (או תיאור לאיור)
• כותרת, סלוגן ומשפט הסבר
• טקסט וקישור לכפתור
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי אזור פתיחה קלאסי לאתר של [שם העסק]: הדר דק עם לוגו ו-3 קישורים (במובייל רק הלוגו, ממורכז), ומתחתיו תמונת באנר ברוחב מלא ובגובה קבוע, כ-320 פיקסלים במחשב ו-220 במובייל, שממלאת את השטח עם object-fit: cover. מתחת לבאנר, על רקע בהיר ונקי, הכול ממורכז: כותרת ראשית גדולה, סלוגן בצבע המותג, קו קישוט דק עם מעוין קטן במרכזו, משפט הסבר וכפתור עם חץ, שבמובייל נמתח לרוחב. בטעינה הבאנר נחשף בזום החוצה עדין (scale מ-1.15 ל-1 יחד עם opacity), ואז עולים בדירוג הכותרת, הסלוגן, המשפט והכפתור, והקו מצטייר מהמרכז לצדדים עם scaleX. החץ בכפתור זז קלות כל כמה שניות, ובריחוף הכפתור מתרומם. אם אין תמונה, צייר במקומה איור SVG רחב של [תחום] בצבעי המותג, שהנושא שלו במרכז וכמה פרטים בו מרחפים לאט. התוכן: [תמונת באנר, כותרת, סלוגן, משפט וטקסט לכפתור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונה לרוחב שהנושא שלה באמצע. במובייל רואים רק את החלק המרכזי שלה.

הירו קרם עם סליידשואו ושני כפתורים

פתיחה רגועה שמציגה את העסק בכמה תמונות מתחלפות, עם שתי דרכים ברורות להמשיך.

איפה זה עובד: דף הבית של מרפאות, קליניקות, סטודיו, טיפוח ונותני שירות

מה צריך להכין

• 3 תמונות עם שם ושורת הסבר לכל אחת
• כותרת קטנה, כותרת ראשית ופסקה קצרה
• טקסט ויעד לשני הכפתורים
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן פתיחה (הירו) רך לאתר של [שם העסק], על רקע קרם בהיר: בצד אחד כותרת קטנה '[כותרת קטנה]' שהיא ה-H1, כותרת גדולה '[כותרת ראשית]' שחלקה בצבע המותג, פסקה קצרה ושני כפתורים: מלא '[כפתור ראשי]' ומתאר '[כפתור משני]'. בצד השני מסגרת לבנה מעוגלת עם סליידשואו של [3 תמונות], ולכל תמונה תווית בהירה בתחתית עם שם ושורת הסבר. התמונות מתחלפות ב-cross-fade כל 4 שניות עם זום איטי, ומתחת למסגרת נקודות ניווט: הנקודה הפעילה היא גלולה שמתמלאת עד ההחלפה. ריחוף או פוקוס עוצרים את ההחלפה. מאחורי המסגרת שתי צורות אורגניות בצבע המותג, מלאה ושקופה למחצה, שמסתובבות לאט בכיוונים הפוכים. בטעינה הכול נכנס בהדרגה. במובייל המסגרת מעל הטקסט, הכול ממורכז והכפתורים ברוחב מלא. עד שיהיו תמונות, צייר במקומן איורי SVG וגרדיאנטים. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו 3 תמונות באותו סגנון ובאותה תאורה. תמונות שונות מדי הופכות את הדעיכה לקפיצה.

הירו טיפוגרפי בשלוש כותרות

שם העסק ממלא את המסך והמסר נבנה שורה אחרי שורה. פתיחה חזקה גם בלי תמונה אחת.

איפה זה עובד: יועצים, משרדים, פיננסים, עסקים שעוד אין להם צילומים טובים

מה צריך להכין

• 3 תחומים ו-3 שירותים
• משפט מפתח בשלושה חלקים קצרים
• מספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן פתיחה טיפוגרפי לאתר של [שם העסק], בלי תמונה: שלוש כותרות ממורכזות זו מעל זו. למעלה שורה קטנה של התחומים עם קו אנכי דק ביניהם: [3 תחומים]. מתחתיה שם העסק ענק בשורה אחת, בגודל clamp שמתכווץ בטלפון. מתחתיו משפט מפתח בשלושה חלקים קצרים, האחרון בצבע המשני, ובמובייל כל חלק בשורה משלו: [משפט מפתח בשלושה חלקים]. בסוף שורת שירותים מופרדת בנקודות: [3 שירותים], וכפתור '[טקסט הכפתור]' שפותח וואטסאפ למספר [מספר בפורמט 972], עם חץ בעיגול שזז קלות בלולאה. בטעינה כל שורה עולה מתוך מסכה (overflow: hidden) בתורה מלמעלה למטה, ואחרי שהשם נכנס מצטייר מתחתיו מימין לשמאל קו תחתון מעוגל ב-SVG עם stroke-dashoffset. הרקע בהיר, עם שלושה כתמי גרדיאנט רכים בצבעי המותג שנעים לאט בלולאה. הסקשן בגובה המסך והתוכן במרכזו. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 שם קצר עובד הכי טוב. שם ארוך משתי מילים? שימו בגדול רק את המילה הראשונה.

אודות: תמונה לצד שלוש סיבות ורשימה

הגולש מבין בשלוש נקודות למה לבחור בכם ולמי אתם מתאימים, ולוחץ על הצעת מחיר.

איפה זה עובד: דף הבית, עמוד אודות, עסקים שעובדים גם עם מוסדות וחברות

מה צריך להכין

• תמונה אחת טובה של העבודה שלכם
• 3 סיבות לבחור בכם: כותרת ומשפט לכל אחת
• 4 סוגי לקוחות שאתם עובדים איתם
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן 'למה לעבוד איתנו' לאתר של [שם העסק]: בצד אחד תמונה גדולה במסגרת מעוגלת עם פינה אחת עגולה במיוחד וקו מתאר דק שמציץ מאחוריה. על שולי התמונה צף תג לבן שמרחף לאט: אייקון עם טבעת פועמת, שורה מודגשת ושורה קטנה. בצד השני תווית, כותרת, שלוש נקודות ממוספרות 01 עד 03 (מספר באריח מעוגל שמתמלא בצבע בריחוף, כותרת ומשפט), כרטיס לבן 'עם מי אנחנו עובדים' עם סימני וי בשני טורים, וכפתור 'קבלו הצעת מחיר' עם עיגול חץ שזז בריחוף ולידו שורה קטנה. כשהסקשן נכנס למסך (IntersectionObserver) התמונה והטקסט נכנסים בדירוג, חלק אחרי חלק, והתג קופץ אחרון. בגלילה התמונה זזה מעט בתוך המסגרת (parallax). במובייל התמונה לרוחב מעל הטקסט והרשימה בטור אחד. התוכן: [קישור לתמונה], [טקסט לתג], [כותרת], [3 סיבות עם כותרת ומשפט], [4 סוגי לקוחות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונה שמראה את העבודה עצמה, לא תמונת סטוק. ובנקודות כתבו עובדות, לא סיסמאות.

אודות חצי-חצי עם תמונה עד הקצה

סקשן אודות שקט ונקי: פסקה אחת מול תמונה גדולה שנחשפת בגלילה. נראה כמו אתר של סטודיו.

איפה זה עובד: דף הבית, עמוד אודות, אדריכלים, מעצבים, קליניקות, משרדים

מה צריך להכין

• תמונה אחת גדולה ואיכותית, עם כיתוב קצר
• תווית, כותרת ופסקה אחת של 3 עד 4 משפטים
• שם ותפקיד לשורת החתימה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן אודות חצי-חצי לאתר של [שם העסק]: שני חצאים שווים ברוחב מלא. בחצי הימני: תווית קטנה עם קו קצר לפניה, כותרת, קו דק לכל רוחב הטקסט, פסקה אחת ושורת חתימה (שם מודגש ותפקיד). בחצי השמאלי תמונה שממלאת אותו עד קצה המסך, בלי פינות עגולות, עם כיתוב קטן בפינה ורקע בצבע המשני מתחתיה. כשהסקשן נכנס למסך (IntersectionObserver) התמונה נחשפת במסכה שנפתחת מקו האמצע אל קצה המסך: עטיפה עם overflow:hidden ושני translateX מנוגדים, כך שהתמונה לא זזה, ובמקביל זום מ-1.14 ל-1. הטקסט עולה בדירוג, והקו מצטייר ב-scaleX מתחילת השורה. אחר כך התמונה ממשיכה בזום איטי, הלוך ושוב. במובייל התמונה ברוחב מלא מעל הטקסט, ביחס 4:3. התוכן: [תווית], [כותרת], [פסקה של 3 עד 4 משפטים], [שם ותפקיד], [קישור לתמונה], [כיתוב לתמונה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונה שהנושא שלה במרכז. במחשב ובמובייל היא נחתכת אחרת, והקצוות נעלמים.

מי מלווה אתכם: פורטרט ומונים

הלקוח רואה מי האדם שיטפל בו, והניסיון נספר מול העיניים. פנים בונות אמון.

איפה זה עובד: עמוד אודות, דף הבית, רואי חשבון, עורכי דין, יועצים, מטפלים

מה צריך להכין

• תמונת פורטרט אנכית באיכות טובה
• 2 מספרים אמיתיים (שנות ניסיון, לקוחות)
• 4 נקודות קצרות ופסקת היכרות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן היכרות אישי 'מי מלווה אתכם' לאתר של [שם העסק]: בצד אחד פורטרט ביחס 4 על 5: [קישור לתמונה], במסגרת שרק הפינה העליונה שפונה לטקסט מעוגלת מאוד, עם צל רך, ובתחתית התמונה, על מעבר כהה, [שם ותפקיד] בלבן. מאחורי המסגרת מלבן בצבע המשני שמציץ מהפינה ונע לאט בלולאה, ובריחוף התמונה מתקרבת מעט. בצד השני: כותרת קטנה עם קו, [כותרת ראשית], [פסקת היכרות], כרטיס לבן עם שני מונים וקו מפריד: [2 מספרים עם תווית], ומתחתיו [4 נקודות קצרות] בשני טורים, לכל אחת אייקון קו בריבוע מעוגל. המונים סופרים מ-0 כשמגיעים אליהם (IntersectionObserver), אבל ב-HTML כתוב כבר המספר הסופי. בכניסה למסך החלקים מופיעים בזה אחר זה, בדעיכה ובהחלקה למעלה. במובייל: פורטרט ריבועי למעלה, כרטיס המונים עולה מעט על קצה התמונה והמונים זה לצד זה, ואחריהם הטקסט והנקודות בטור אחד. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונה עם מבט למצלמה ואור טבעי. פורטרט אמיתי משכנע יותר מכל תמונת מאגר.

אודות בוטיק: פורטרט ושלוש נקודות

הגולש רואה מי עומד מאחורי העסק ושלוש סיבות לבחור בו, עוד לפני שגלל הלאה.

איפה זה עובד: מעצבים, עורכי דין, קליניקות, יועצים, כל עסק שנשען על אדם אחד

מה צריך להכין

• פורטרט לגובה באיכות טובה
• כותרת, פסקה ו-3 נקודות חוזק
• שם ותפקיד לכרטיס
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן אודות בסגנון בוטיק לאתר של [שם העסק]: שתי עמודות על רקע בהיר, עם פס בגוון כהה מעט מאחורי הפורטרט. בצד הטקסט: שורת מותג קטנה עם קו דק, כותרת סריפית עם מילה אחת בצבע המותג, פסקה, ושלוש נקודות חוזק מופרדות בקו דק: אייקון קווי בעיגול, כותרת ושורה. מתחתן כפתור כהה עם חץ שזז בריחוף. בצד השני פורטרט גבוה, מאחוריו מסגרת דקה מוזחת באלכסון, ועל הפינה שלו כרטיס קטן עם שם ותפקיד. כשהסקשן נכנס למסך (IntersectionObserver): הטקסט עולה, הפורטרט נחשף מאחורי וילון, ושלוש הנקודות נכנסות מהצד אחת אחרי השנייה. אחר כך התמונה מתקרבת לאט, המסגרת נעה מעט כל הזמן, ובריחוף על הפורטרט היא נצמדת אליו. במובייל הפורטרט מעל הטקסט והכפתור ברוחב מלא. לכותרת פונט Frank Ruhl Libre. התוכן: [כותרת, פסקה, 3 נקודות חוזק, פורטרט, שם ותפקיד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו פורטרט לגובה עם רקע שקט ומבט למצלמה. רקע עמוס מתחרה במסגרת הדקה.

אודות שחור-לבן עם כותרת בשתי שפות

סקשן שקט שנותן לתמונה ולמילים לדבר. הצבע מגיע רק כשהגולש מתקרב.

איפה זה עובד: צלמים, אדריכלים, מעצבים, סטודיו בוטיק, מותגים שקטים

מה צריך להכין

• תמונה אחת לגובה, עם צבע
• כותרת קצרה בעברית ובאנגלית
• פסקה של 2 עד 3 משפטים
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן אודות בשחור-לבן לאתר של [שם העסק]: שתי עמודות עם הרבה אוויר, וביניהן קו אנכי דק שמקטע כהה גולש לאורכו בלופ. בעמודת הטקסט: תווית 'אודות', כותרת בשתי שורות [כותרת בעברית], מתחתיה [כותרת באנגלית] במשקל דק, [פסקה קצרה] וכפתור קווי '[טקסט הכפתור]' עם חץ, שמתמלא שחור מהצד בריחוף. בעמודה השנייה תמונה לגובה [קישור לתמונה] בשחור-לבן ובזום איטי, שמקבלת צבע בריחוף, ובמסך מגע או במקלדת בלחיצה. מתחתיה [כיתוב לתמונה] ותווית 'שחור-לבן' שמתחלפת ל'צבע' בהחלקה למעלה. כשהסקשן נכנס למסך שורות הכותרת עולות בזו אחר זו מתוך מסכה, אחריהן שאר החלקים, ואז התמונה נצבעת לבד פעם אחת וחוזרת. הצבע בלי אנימציית filter: שתי שכבות של התמונה, העליונה ב-grayscale ורק ה-opacity שלה משתנה. במובייל טור אחד: כותרת, קו אופקי, תמונה, פסקה וכפתור. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונה שיש בה צבע אחד חזק. המעבר משחור-לבן מרגיש אז כמו הפתעה קטנה.

אודות קצר על קרם עם איורי קו

היכרות של עשר שניות: מי אתם, ממתי ולמה. בלי תמונות, רק טקסט טוב והרבה אוויר.

איפה זה עובד: דף הבית מתחת להירו, עמוד אודות, עסקים שכונתיים ומרפאות

מה צריך להכין

• כותרת קצרה ושנת ההקמה
• פסקת היכרות אחת, 3 עד 4 משפטים
• נושא לשני איורי קו
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן אודות קצר וממורכז לאתר של [שם העסק], על רקע קרם: תג קטן בצורת גלולה ('מאז [שנת הקמה]'), כותרת גדולה, פסקת היכרות אחת ברוחב של עד 65 תווים בשורה, וכפתור מלא עם חץ שזז בריחוף ומוביל ל-[קישור לעמוד האודות]. מילה אחת בכותרת מסומנת בקו תחתון מצויר ביד בצבע המשני. משני צדי הטקסט שני איורי קו דקים ב-SVG בצבע המותג, עם פרט קטן ולב בצבע המשני: [נושא האיורים]. כשהסקשן נכנס למסך (IntersectionObserver) הטקסטים עולים אחד אחרי השני, והאיורים והקו התחתון מצטיירים קו אחרי קו עם stroke-dashoffset (החריג היחיד לכלל האנימציות). אחר כך האיורים מרחפים לאט והלבבות פועמים. במובייל שני האיורים קטנים ויושבים זה לצד זה מעל התג. מצב ההסתרה חל רק תחת class שה-JavaScript מוסיף. התוכן: [כותרת], [פסקת היכרות של 3 עד 4 משפטים], [טקסט הכפתור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 אם הפסקה יוצאת יותר מארבע שורות במחשב, קצרו אותה. אל תקטינו את הפונט ואל תרחיבו.

למה אנחנו: וידאו ואייקונים חיים

שלוש הסיבות לבחור בכם, על רקע וידאו מהעסק ועם אייקונים שזזים. נקלט במבט אחד.

איפה זה עובד: עמוד הבית מתחת להירו: מוסכים, בעלי מקצוע, קליניקות, משרדים

מה צריך להכין

• סרטון רקע קצר ותמונת פוסטר
• 3 יתרונות: כותרת ומשפט לכל אחד
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן 'למה אנחנו' לאתר של [שם העסק]: רקע וידאו שמתנגן בלופ בלי קול ([קישור לווידאו], עם תמונת פוסטר עד שהוא נטען), ומעליו שכבת כהות ששומרת על הטקסט קריא. למעלה שורת מותג קטנה, כותרת [כותרת הסקשן] ומשפט משנה. מתחת שלוש עמודות עם קו דק ביניהן, ובכל אחת אייקון SVG בתוך עיגול שמונפש בלופ, כותרת וטקסט קצר: [3 יתרונות: כותרת, משפט ואייקון לכל אחד]. כשהסקשן נכנס למסך (IntersectionObserver) הכותרת והעמודות עולות בדירוג, ואז מצב הריחוף עובר פעם אחת לבד על שלוש העמודות. בריחוף או בנגיעה האייקון של אותה עמודה מואץ פי 3 (playbackRate של Web Animations API, שלא יקפוץ), העיגול מקבל הילה בצבע המותג וקו נמתח מתחת לכותרת. בפינה כפתור 'עצירת הווידאו' שעוצר ומפעיל אותו. במובייל העמודות בטור, והאייקון יושב לצד הטקסט. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו סרטון רגוע בלי חיתוכים חדים. תנועה חזקה מאחורי טקסט מקשה לקרוא אותו.

קיר וידאו שנטען מהר

עשרות סרטונים בעמוד אחד, והוא עדיין נפתח מיד. נגן נטען רק כשמישהו לוחץ.

איפה זה עובד: עמוד המלצות מצולמות, סטודיו, קליניקות, מרצים, נדל״ן

מה צריך להכין

• סרטונים אנכיים עם קישור לכל אחד
• תמונת פוסטר אנכית לכל סרטון
• כותרת קצרה, שם ואורך לכל סרטון
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קיר וידאו מהיר לאתר של [שם העסק]: גריד כרטיסים אנכיים (9:16), 2 בשורה במובייל ו-4 במחשב, ובכל אחד תמונת פוסטר, כפתור ניגון עם טבעת פועמת, כותרת, שם ואורך. שום נגן לא נטען עם העמוד: רק בלחיצה הפוסטר מוחלף בנגן שמתנגן במקום, אחד בכל רגע, עם מסגרת הדגשה סביב הכרטיס. הפוסטר נשאר עד שהסרטון מתחיל באמת. בזמן ניגון הכותרת נשארת, ומעליה פס התקדמות דק, מונה זמן ותג מצב: מושתק, מתנגן או מושהה. לחיצה נוספת משהה. במובייל הנגן נפתח במסך מלא עם כפתור סגירה. בטעינה הכרטיס הראשון מתנגן לבד, מושתק, ולחיצה עליו מפעילה קול. ליד הקיר מונה: כמה נגנים נטענו, ושני פסים שמתמלאים ומשווים את זמן הטעינה (לפי performance.now()) ל-[זמן הטעינה הישן], ומתחתיו הסבר בשלושה שלבים. הסרטונים: [קישור, פוסטר, כותרת, שם ואורך לכל סרטון]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בדקו את הקיר מקישור שנפתח בתוך וואטסאפ. רוב הגולשים מגיעים משם, ושם פריסות נשברות.

קרוסלת מומחים בווידאו אנכי

כל איש צוות מסביר בעצמו, בפחות מדקה. הגולש שומע קול אנושי לפני שהוא מתקשר.

איפה זה עובד: קליניקות, משרדי עורכי דין, יועצים, סטודיו, כל עסק עם צוות שמצטלם

מה צריך להכין

• 6 עד 10 סרטונים אנכיים ביוטיוב
• שם ותחום התמחות לכל סרטון
• כותרת לקטע
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קרוסלת סרטוני צוות אנכיים לאתר של [שם העסק]: כותרת '[כותרת]' ושורה אופקית של כרטיסים ביחס 9:16 שנגללת ב-scroll-snap מימין לשמאל, עם חיצים, נקודות, גרירה בעכבר ורמז 'גררו או החליקו'. בכל כרטיס: פוסטר, שם ותחום התמחות על גרדיאנט כהה בתחתית, כפתור נגינה פועם במרכז ותג משך בפינה. לחיצה מנגנת את הסרטון בתוך הכרטיס ועוצרת כל כרטיס אחר: כפתור הנגינה מתכווץ לפינה והופך להשהיה, תג המשך סופר לאחור, ומופיעים פס התקדמות וכפתור קול ('מושתק' או 'עם קול'). לחיצה נוספת או סוף הסרטון מחזירים לפוסטר. בטעינה הכרטיסים נכנסים בהדרגה, ואחרי שנייה הראשון מתנגן לבד, מושתק. נגן יוטיוב (IFrame API) נטען רק בניגון, בלי iframes בטעינה. במובייל רואים כרטיס וחצי, במחשב הכותרת והניווט לצד השורה. הסרטונים: [6 עד 10 סרטונים: מזהה יוטיוב, שם ותחום]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 צלמו אנכי בטלפון, עד 40 שניות, עם אוויר מתחת לפנים: שם ותחום יושבים שם על הגרדיאנט.

טבעת וידאו תלת-ממדית

הגולש מסובב את הסרטונים שלכם במרחב, ורק זה שבחזית מנגן. וידאו שמרגיש כמו חוויה.

איפה זה עובד: אולמות וגני אירועים, צלמים, סטודיו, מסעדות, דף הבית

מה צריך להכין

• 7 סרטונים קצרים לגובה (mp4, עד 15 שניות)
• תמונת פוסטר, שם ושורת משנה לכל סרטון
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי טבעת וידאו תלת-ממדית לאתר של [שם העסק]: 7 לוחות זכוכית אנכיים במסגרת בהירה דקה, מסודרים במעגל (perspective ו-rotateY) בהטיה קלה מלמעלה, וצל אליפטי על הרצפה. רק הלוח הקדמי מנגן, ועליו פס התקדמות דק ותג 'מנגן'. השאר: פוסטר מעומעם עם סמל ניגון, שקוף יותר ככל שהלוח רחוק. גרירה מסובבת את הטבעת, ובשחרור היא ננעלת על הלוח הקרוב. חיצים, מקלדת ולחיצה על לוח צדדי מביאים סרטון לחזית, ושם הוא מתחיל לנגן. בין החיצים כיתוב הסרטון הפעיל: שם, שורת משנה ומונה '2 / 7', בחילוף cross-fade. בטעינה היא מתקדמת פעם אחת לבד, ורמז 'גררו כדי לסובב' נעלם במגע הראשון. וידאו עם preload none, muted, loop ו-playsinline. במובייל הטבעת הופכת לפס החלקה אופקי עם scroll-snap, והלוח שבמרכז מנגן. הסרטונים: [7 קובצי mp4 עם פוסטר, שם ושורת משנה לכל אחד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 צלמו את כל הסרטונים לגובה ובאותו יחס. לוח אחד לרוחב שובר את כל הטבעת.

פס רילס שמתנגן כשרואים אותו

הרילס שלכם רצים באתר כמו באפליקציה, עם שמע בלחיצה. והעמוד קל: מתנגן רק מה שרואים.

איפה זה עובד: טיפוח, קליניקות, מסעדות, סטודיו לכושר, כל עסק שמצלם רילס

מה צריך להכין

• 5 עד 6 סרטונים אנכיים (9:16) עד 30 שניות
• תמונת פוסטר, כיתוב קצר ומספר צפיות לכל סרטון
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי פס רילס אופקי לאתר של [שם העסק]: שורה של כרטיסי וידאו אנכיים (9:16) בגלילה חופשית באצבע, בגרירה בעכבר או בגלגלת (כרטיס בכל תנועה, ובקצה הפס העמוד נגלל), עם scroll-snap רך. במחשב רואים כשלושה כרטיסים והקצוות דוהים. כל כרטיס הוא video מושתק בלופ עם פוסטר, שמתחיל לנגן רק כשלפחות חצי ממנו במסך ונעצר כשהוא יוצא (IntersectionObserver). על כל כרטיס: פס התקדמות דק למעלה, כפתור השהיה/ניגון בפינה אחת (כרטיס שהושהה ביד לא חוזר לנגן לבד, ובהשהיה הפריים מתעמעם מעט), וכפתור שמע בפינה השנייה שמדליק קול רק בכרטיס אחד בכל פעם, עם אקולייזר קטן שרוקד לידו. בתחתית הכרטיס, על גרדיאנט כהה: כיתוב קצר ומספר צפיות עם אייקון עין. בטעינה הפס מחליק פעם אחת כרטיס אחד קדימה וחוזר. הסרטונים: [5 עד 6 סרטונים אנכיים עם פוסטר, כיתוב קצר ומספר צפיות לכל אחד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 העלו סרטונים דחוסים (עד 3MB כל אחד) ובלי כתוביות אפויות: הכיתוב והכפתורים יושבים עליהם.

נכנסים לאתר: גלילה לתוך סרטון

גוללים, והחלון גדל עד שהגולש נמצא בתוך האתר. הצצה חיה למוצר במקום עוד צילום מסך.

איפה זה עובד: דף בית של סוכנות או סטודיו, תיק עבודות, השקת אתר חדש

מה צריך להכין

• צילום מסך ארוך של האתר, למחשב ולנייד
• 3 מסרים קצרים לכותרת
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן 'נכנסים לאתר' לאתר של [שם העסק]: הסקשן ננעל (position sticky), ובמרכזו חלון דפדפן עם שורת כתובת. בתוכו צילום מסך ארוך של האתר שנגלל לפי הגלילה, כמו סרטון (scroll scrub). החלון גדל עד שהוא ממלא את המסך, ושורת הכתובת מחליקה החוצה. הוא בנוי בגודל מלא ומוקטן ב-transform scale, כדי שיישאר חד. מעליו תווית מותג, וכותרת שמתחלפת ב-cross-fade בין שלושה מסרים בגלילה. מתחתיו פס התקדמות, הנחיה 'גללו כדי להיכנס' עם חץ מקפץ, וכפתור השהיה שמקפיא את הסרטון. בהפעלה הוא מחליק חזרה למקום. מעל החלון הם יושבים על לוחיות אטומות. בסוף הסקשן משתחרר והעמוד ממשיך. במובייל החלון הוא מסגרת טלפון עם צילום מסך לנייד. בטעינה גלילה אוטומטית קצרה, ולמי שביקש פחות תנועה אין אותה והחלון לא גדל. המסרים: [3 מסרים קצרים]. צילומי המסך: [צילום מסך ארוך למחשב ולנייד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 צלמו את האתר ברוחב 1600 פיקסלים ומעלה. צילום צר נמרח כשהחלון ממלא את המסך.

נגן וידאו קליל שנטען רק בלחיצה

סרטון בעמוד בלי לשלם עליו במהירות. עד הלחיצה נטענת רק תמונה קלה.

איפה זה עובד: עמוד הבית, עמוד פרויקט, אודות, דף נחיתה, מאמר

מה צריך להכין

• קישור לקובץ הסרטון, כותרת קצרה ומשך
• תמונת פוסטר לרוחב, ביחס 16:9
• משקל הפוסטר ומשקל הסרטון, בערך
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי נגן וידאו קליל לאתר של [שם העסק]: נגן אחד ברוחב הטור ביחס 16:9, ובמובייל מקצה לקצה. עם העמוד נטענת רק תמונת פוסטר בזום איטי, ועליה כפתור ניגון גדול עם טבעת שפועמת בעדינות, ולמטה כותרת הסרטון ותג עם המשך. אלמנט ה-video נוצר רק בלחיצה: הכפתור הופך לספינר, הפוסטר נשאר עד שהסרטון מתחיל, ואז נעלם ב-cross-fade. בזמן ניגון יש למטה פס פקדים: כפתור השהיה, פס התקדמות שלחיצה עליו מדלגת, ומונה זמן '0:07 / 1:24'. לחיצה על הסרטון משהה ומחזירה את כפתור הניגון, ובסיום הפוסטר חוזר. מתחת לנגן שורת מצב 'הנגן עוד לא נטען', כמה נחסך בטעינת העמוד והערה 'מספרים לדוגמה', ופס משקל בשני חלקים: קצר ומלא לפוסטר, ארוך ומקווקו לנגן. בלחיצה החלק הארוך מתמלא והשורה מתחלפת ל'הנגן נטען בלחיצה'. התוכן: [קישור לסרטון, פוסטר, כותרת, משך, משקל הפוסטר והסרטון]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 הפוסטר הוא מה שנטען עם העמוד. דחסו אותו ל-WebP, אחרת החיסכון נעלם.

פס לוגואים וביקורות רץ

לקוחות וביקורות שזזים מול העיניים — הוכחה חברתית בלי לתפוס מקום.

איפה זה עובד: מתחת להירו, לפני טופס יצירת קשר

מה צריך להכין

• לוגואים של לקוחות (באישורם)
• 4–6 ביקורות קצרות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי שני פסים רצים בלופ אינסופי חלק, בכיוונים הפוכים, לאתר של [שם העסק]: פס עליון של לוגואים של לקוחות [לוגואים] ופס תחתון של ביקורות קצרות עם 5 כוכבים [ביקורות]. עצירה בריחוף, מסכת דהייה בקצוות, ותקין בעברית מימין לשמאל. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 לוגואים רק באישור הלקוחות, וביקורות רק אמיתיות.

סליידר לפני/אחרי

התוצאה מדברת בעד עצמה: הגולש גורר ורואה את השינוי.

איפה זה עובד: שיפוצים, קליניקות, טיפוח, ניקיון, צילום מוצרים

מה צריך להכין

• זוגות תמונות לפני/אחרי מאותה זווית
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סליידר השוואה לפני/אחרי לאתר של [שם העסק]: קו מפריד שגוררים בעכבר או באצבע (ומאחוריו input range נגיש למקלדת), תוויות 'לפני' ו'אחרי', ובטעינה הידית זזה פעם אחת לבד כדי להראות מה עושים. כמה זוגות עם לשוניות: [זוגות תמונות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 שתי התמונות חייבות להיות מאותה זווית ובאותו גודל, אחרת האפקט נשבר.

מונים מונפשים

המספרים שלכם נספרים מול העיניים ובונים אמון מיידי.

איפה זה עובד: דף הבית, עמוד אודות

מה צריך להכין

• 4 מספרים אמיתיים (שנות ניסיון, פרויקטים, לקוחות…)
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי 4 מונים גדולים לאתר של [שם העסק]: [מספר ותווית] ×4, שסופרים מ-0 כשהם נכנסים למסך (IntersectionObserver), עם טבעת התקדמות עדינה. חשוב: ב-HTML עצמו כבר כתוב המספר הסופי, וה-JavaScript מאפס ל-0 רק כשהוא רץ — כך גוגל, צילומי מסך ודפדפנים בלי JavaScript לא יראו 0. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 את זה למדנו בשטח: מונה שכתוב ב-HTML כ-0 נראה ריק לגוגל ובצילומי מסך.

ביקורות גוגל צפות בתלת-ממד

הביקורות האמיתיות שלכם מקבלות במה — ולא נבלעות בטקסט.

איפה זה עובד: דף הבית, עמודי שירות, דף נחיתה

מה צריך להכין

• 5–8 ביקורות אמיתיות מגוגל
• הדירוג ומספר הביקורות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קרוסלת ביקורות בסגנון גוגל לאתר של [שם העסק]: כרטיסים עם אות ראשונה של השם, שם, 5 כוכבים, טקסט וסמל גוגל, מרחפים בתלת-ממד עם עומק שדה (כרטיסים אחוריים קטנים ומטושטשים), מתנדנדים בעדינות ומתחלפים אחד-אחד. החלקה באצבע במובייל. כותרת: '[דירוג] ★ · [מספר] ביקורות בגוגל'. הביקורות: [ביקורות אמיתיות מהפרופיל]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 רק ביקורות אמיתיות מהפרופיל שלכם — אסור להמציא, וזה גם לא עובד.

חפיסת ביקורות נשלפת

הביקורות מוגשות קלף אחרי קלף, כמו חפיסה ביד. כל המלצה מקבלת את מלוא תשומת הלב.

איפה זה עובד: גני ואולמות אירועים, צלמים, מפיקים, דף הבית, דף נחיתה

מה צריך להכין

• 6 ביקורות אמיתיות וקצרות
• לכל ביקורת: שם, סוג אירוע ותאריך
• ציון ממוצע ומספר ביקורות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי חפיסת ביקורות נשלפת לאתר של [שם העסק]: ערימת קלפים שבה העליון מוצג במלואו, ושניים מציצים מאחוריו בהטיה קלה ובגוון כהה, בלי תוכן. בכל קלף: מרכאה גדולה בצבע המותג, כוכבים, ציטוט, עיגול עם האות הראשונה, שם, סוג האירוע והתאריך. לחיצה על הקלף העליון, חץ 'הבאה' או גרירה שולפים אותו הצידה בסיבוב קל, והוא חוזר לתחתית. חץ 'הקודמת' מחזיר את הקלף האחרון, וגרירה קצרה מחזירה את הקלף למקומו. בין החיצים מונה '2 מתוך 6' ופס שמתמלא עד ההחלפה הבאה: החפיסה מתחלפת לבד כל 5 שניות (בפעם הראשונה אחרי שנייה וחצי), ועוצרת בריחוף, בפוקוס ובגרירה. לצד החפיסה, ובמובייל מעליה, סיכום דירוג: ציון גדול, כוכבים ומספר הביקורות. גרירה ב-pointer events עם touch-action: pan-y. הביקורות: [6 ביקורות עם שם, סוג אירוע ותאריך]. הדירוג: [ציון ומספר ביקורות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו ביקורות של שתיים עד שלוש שורות. קלף עמוס בטקסט לא נקרא לפני שהוא מתחלף.

קרוסלת הודעות וואטסאפ מלקוחות

ההמלצות נראות כמו הצ'אט שממנו הגיעו, ולכן מאמינים להן יותר מלכל ציטוט מעוצב.

איפה זה עובד: טיפוח, קליניקות, מאמנים, בעלי מקצוע, דף נחיתה

מה צריך להכין

• 6 עד 8 הודעות אמיתיות מלקוחות
• לכל הודעה: שם פרטי, שעה, שירות ותשובה שלכם
• אישור מהלקוחות להציג את ההודעה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קרוסלת הודעות וואטסאפ מלקוחות לאתר של [שם העסק]: כל כרטיס הוא קטע צ'אט על רקע מנוקד: בועה לבנה או שתיים מהלקוח, ומתחתן בועה ירוקה עם התשובה שלנו. בכל בועה זנב ושעה, ובירוקה גם וי כפול כחול. בתחתית הכרטיס פס לבן: עיגול עם האות הראשונה, שם פרטי בלבד והשירות. רוחב אחיד, מרכוז אנכי, ושוליים שנמוגים במסכה. בטעינה כרטיס אחד במרכז והשורה נעה לאט בלולאה אינסופית (כרטיסים משוכפלים ו-requestAnimationFrame). עוצרת בריחוף ובמיקוד, נגררת בעכבר או באצבע, ובשחרור נצמדת לכרטיס הקרוב וממשיכה אחרי שתי שניות. מעל כותרת קצרה, ומתחת חצים עגולים שמזיזים כרטיס אחד וביניהם שורת אמון עם מנעול: 'הודעות אמיתיות מלקוחות, בשמות פרטיים בלבד'. במובייל כרטיס אחד במרכז, השכנים מציצים והתנועה איטית יותר. ההודעות: [6 עד 8 הודעות עם שם פרטי, שעה, שירות ותשובה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 השאירו את הניסוח כמו שנכתב, כולל הסמיילי. הודעה מלוטשת מדי נראית כמו פרסומת.

מניפת ביקורות גוגל שנפתחת בריחוף

הביקורות מחכות כמו קלפים ביד ונפרשות כשנוגעים. סקרנות שגורמת לקרוא עוד אחת.

איפה זה עובד: דף הבית, עמודי שירות, דף נחיתה, יועצים ונותני שירות

מה צריך להכין

• 5 ביקורות אמיתיות מגוגל: שם, עיר ושירות
• הדירוג הממוצע ומספר הביקורות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מניפת ביקורות גוגל לאתר של [שם העסק]: 5 קלפי ביקורת על משטח כהה, מונחים אחד על השני כמו קלפים ביד, קצת מוטים. בכל קלף: עיגול עם האות הראשונה, שם, עיר, 5 כוכבים, תגית השירות, הטקסט ו'ביקורת מאומתת בגוגל'. מעל המניפה כותרת, הדירוג הממוצע בגדול עם כוכבים ו'מתוך [מספר] ביקורות בגוגל', ומתחתיה שורת הנחיה קצרה. בריחוף או בהקשה הקלפים מתפרשים בקשת, וכשהעכבר יוצא הם חוזרים לערימה. לחיצה על קלף מביאה אותו לחזית: מתיישר, מתרומם ומקבל מסגרת בצבע המותג. כשהמניפה נכנסת למסך (IntersectionObserver) היא נפתחת פעם אחת לבד, והקלף שבחזית מתחלף כל 3 שניות עד שנוגעים בה. המרווח בין הקלפים מחושב מרוחב המכל, כך ששום קלף לא נחתך. במובייל הקלפים נפרשים מהערימה לטור, והקשה מיישרת ומדגישה קלף. הביקורות: [5 ביקורות קצרות עם שם, עיר ושירות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו ביקורות של שתיים עד שלוש שורות. טקסט ארוך מגביה את הקלף והמניפה מאבדת צורה.

סקשן משוואה שמסביר את הערך שלכם

במקום סיסמה, הגולש רואה מה אתם נותנים ומה יוצא לו מזה. שלוש סיבות ותוצאה אחת.

איפה זה עובד: דף הבית, עמוד אודות, דף נחיתה, מתחת להירו

מה צריך להכין

• 3 כותרות עם שורה קצרה לכל אחת (מה אתם עושים)
• כותרת ושורה לתוצאה (מה הלקוח מרוויח)
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן משוואה לאתר של [שם העסק]: שורת מותג קטנה, כותרת ומשפט פתיח, ומתחתם שלוש קוביות לבנות עם אייקון קו, כותרת מודגשת ושורה קצרה, שמחוברות בעיגולי פלוס ושווה אל כרטיס תוצאה גדול יותר עם אייקון, תגית 'התוצאה', מסגרת גרדיאנט והילה רכה מאחוריו. במחשב הכול בשורה אחת מימין לשמאל, ובריחוף קובייה מתרוממת מעט. במובייל המשוואה אנכית: קוביות שוכבות עם האייקון בצד, והסימנים ביניהן. כשהסקשן נכנס למסך (IntersectionObserver) החלקים נכנסים אחד אחרי השני, הסימנים קופצים, וכרטיס התוצאה נכנס עמום עם מסגרת אפורה ואז נדלק: מסגרת הגרדיאנט וההילה מופיעות, וההילה ממשיכה לנשום לאט. מצב ההסתרה חל רק תחת class שה-JavaScript מוסיף, כדי שבלי JavaScript הכול גלוי. התוכן: [3 כותרות עם שורה קצרה לכל אחת], [כותרת ושורה לתוצאה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 כתבו בקוביות מה אתם עושים בפועל, ובתוצאה מה הלקוח מרוויח. בלי מספרים מומצאים.

קרוסלת צילומי מסך שנגללים לבד

הגולש רואה את האתרים שבניתם נגללים מול העיניים, בלי ללחוץ על שום קישור.

איפה זה עובד: סוכנויות דיגיטל, בוני אתרים, מעצבים, עמוד תיק עבודות, דף הבית

מה צריך להכין

• 5 עד 8 צילומי מסך ארוכים של עבודות
• לכל עבודה: סוג העסק ומה עשיתם
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קרוסלת צילומי מסך של עבודות לאתר של [שם העסק]: כל צילום מסך ארוך במסגרת טלפון. הכרטיס המרכזי גדול ובהיר, עם הילה בצבע המותג, והשכנים קטנים ומעומעמים. במובייל טלפון אחד, והשכנים מציצים מהצדדים. הקרוסלה מתקדמת לבד כל 6 שניות במעגל, ובינתיים הצילום שבמרכז נגלל לאט מראש העמוד עד סופו. כרטיס שיצא מהמרכז חוזר לראש. שליטה: גרירה בעכבר או באצבע, לחיצה על שכן, מקשי החיצים, חיצים משני צידי הכיתוב, ונקודות שבהן הפעילה נמתחת לפס שמתמלא עד המעבר הבא. ריחוף או פוקוס עוצרים את הטיימר. מתחת כיתוב שמתחלף ב-cross-fade: סוג העסק ומה עשינו. בטעינה הכרטיס הראשון במרכז והגלילה כבר רצה. טכנית: מיקום רציף אחד ב-requestAnimationFrame קובע הזזה, גודל ושקיפות לכל כרטיס. העבודות: [5 עד 8 צילומי מסך ארוכים, סוג העסק ומה עשיתם]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 צלמו כל עמוד לכל אורכו ובאותו רוחב. צילום קצר נגמר מיד, והגלילה כמעט לא מורגשת.

כתבו עלינו: כתבות בתוך טלפונים

שלוש כתבות שנגללות לבד בתוך מסכי טלפון. הגולש רואה שכבר כתבו עליכם, בלי לעזוב את האתר.

איפה זה עובד: סופרים, מרצים, קליניקות, יועצים, כל עסק שהופיע בתקשורת

מה צריך להכין

• 3 כתבות, 2 עד 3 פסקאות מכל אחת
• תמונה אחת לכל כתבה
• שם כלי התקשורת וקישור לכתבה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן 'כתבו עלינו' לאתר של [שם העסק]: שלושה טלפונים מצוירים ב-CSS זה לצד זה, ובכל מסך כתבה מכלי תקשורת אחר: לוגו כלי התקשורת מצויר בטיפוגרפיה עם אייקון קטן, שם המדור, כותרת, תמונה עם כיתוב, שורת כותב ו-2 עד 3 פסקאות. הכתבה נגללת לאט בתוך המסך מלמעלה למטה וחזרה, בלולאה, בהפרש זמן בין הטלפונים, וריחוף עוצר את הגלילה. הטלפון האמצעי גדול יותר, ובטעינה הטלפונים עולים אחד אחרי השני. מתחת לכל טלפון שם כלי התקשורת, חודש הפרסום וכפתור 'לכתבה המלאה' שפותח את הכתבה המקורית בלשונית חדשה. במובייל כל הטלפונים באותו גודל, בפס החלקה אופקי עם scroll-snap: טלפון אחד תופס את רוב הרוחב עם הצצה לבא בתור. מדוד ב-JavaScript את גובה הכתבה מול גובה המסך, כדי שהגלילה תיעצר בדיוק בסוף. הכתבות: [3 כתבות: כלי תקשורת, מדור, כותרת, תמונה, כותב, 2 עד 3 פסקאות וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 הביאו מכל כתבה רק 2 עד 3 פסקאות ותמונה אחת. כתבה שלמה נגללת לנצח ואף אחד לא קורא.

לפני ואחרי עם קווי מידה

לא רק 'יפה יותר': הגולש רואה מה בדיוק השתנה, במספרים, ושהביצוע תואם לתוכנית.

איפה זה עובד: שיפוצים, קבלנים, אדריכלים, מטבחים, עיצוב פנים

מה צריך להכין

• זוג צילומים לפני ואחרי מאותה זווית
• שרטוט או הדמיה של החדר
• מידות החדר ו-2 פרטים לכל צד
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן 'לפני ואחרי עם קווי מידה' לאתר של [שם העסק]: סליידר השוואה, 'לפני' מימין ו'אחרי' משמאל עם תוויות בפינות, וידית עגולה על קו לבן לגרירה בעכבר או באצבע (מאחוריה input range למקלדת). סביב התמונה קווי מידה, אופקי מעל ואנכי בצד, עם קווי קצה אלכסוניים והמספר בסנטימטרים באמצע. על התמונה תוויות ממוספרות (נקודה בצבע המותג, קו מוביל וכיתוב קצר): כל תווית שייכת לצד אחד ומופיעה רק כשהידית חושפת את הנקודה שלה. בטעינה הידית זזה פעם אחת לבד לשני הצדדים ונעצרת באמצע. מתחת זוג כרטיסים 'תכנון מול ביצוע' עם חץ ביניהם: שרטוט התוכנית עם תגית 'תוכנית' מול התוצאה עם תגית 'בוצע', כיתוב קצר בכל כרטיס, ומעליהם קו מידה עם שם החדר והעיר. אם אין צילומים, צייר את החדרים ב-SVG. הפרטים: [שם החדר ועיר], [רוחב וגובה בס״מ], [2 תוויות לכל צד], [תמונות ושרטוט, אם יש]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 צלמו את ה'לפני' מנקודה קבועה וסמנו אותה על הרצפה. ה'אחרי' מצלמים מאותה נקודה בדיוק.

כתבו עלינו: כרטיסי כתבות וסרטונים

כל ההופעות בתקשורת בעמוד אחד: כתבות, סרטונים ופודקאסטים, עם סינון וצפייה בתוך האתר.

איפה זה עובד: עורכי דין, רופאים, יועצים, מרצים, כל מי שמתראיין בתקשורת

מה צריך להכין

• 8 פריטים עם קישור ותאריך
• תמונת פוסטר לכל סרטון
• תקציר קצר לפריט הכי חדש
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עמוד 'בתקשורת' לאתר של [שם העסק]: כותרת על פס כהה, לשוניות סינון עם מונה (הכול, כתבות, וידאו, פודקאסט) וגריד כרטיסים מהחדש לישן. בכל כרטיס: משטח עליון עם לוגו כלי התקשורת (סימן מילה מצויר עם אייקון וצבע משלו), תג סוג, תאריך, כותרת וכפתור 'להמשך קריאה' או 'להאזנה לפרק' שנפתח בלשונית חדשה. בווידאו: תמונת פוסטר עם כפתור ניגון, ולחיצה פותחת חלון עם לוגו, כותרת ונגן שנטען ומנגן רק בפתיחה ונעצר בסגירה (X, Esc או הרקע). הכרטיס הראשון רחב פי שניים, עם תקציר, תג 'הכי חדש' וכפתור ניגון פועם. בסינון הכרטיסים שנשארים מחליקים למקומם (FLIP) והשאר נכנסים בדהייה, ובטעינה עולים בזה אחר זה. במובייל טור אחד: כרטיס רגיל הוא שורה עם הלוגו בצד, והלשוניות נגללות לרוחב. הפריטים: [8 פריטים: סוג, כלי תקשורת, תאריך, כותרת וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 עדכנו את העמוד בכל הופעה חדשה. עמוד תקשורת שהפריט האחרון בו בן שנתיים משדר את ההפך.

רצועת המלצות בכרטיסי קשת

המלצות שנראות כמו הזמנה לאירוע, לא כמו טבלה. גוללים, קוראים עד הסוף ומשתכנעים.

איפה זה עובד: קייטרינג, אולמות, צלמים, מעצבי אירועים, קליניקות, עמוד הבית

מה צריך להכין

• 8 המלצות מלקוחות, קצרות וארוכות
• לכל המלצה: שם פרטי, סוג האירוע ותאריך
• אישור מהלקוחות לפרסם
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי רצועת המלצות לאתר של [שם העסק]: כרטיסים ברוחב ובגובה אחידים שהחלק העליון שלהם קשת מלאה, עם קו מתאר דק בפנים. בכל כרטיס מרכאה גדולה, ציטוט ממורכז של עד 5 שורות, ובתחתית שם פרטי, סוג האירוע ותאריך. כל כרטיס שלישי כהה עם טקסט בהיר. הרצועה נגללת לרוחב ב-scroll-snap, גם בגרירת עכבר, והכרטיס הבא מציץ בקצה. מתחתיה חץ קודם, פס התקדמות שמתמלא עם הגלילה וחץ הבא: כל חץ מזיז כרטיס אחד ומתעמעם בקצה. הכרטיסים נכנסים מלמטה בזה אחר זה כשמגיעים אליהם (IntersectionObserver). בטעינה הרצועה זזה מעט הצידה וחוזרת, וחץ הבא פועם עד הנגיעה הראשונה. ציטוט שנחתך מקבל כפתור 'להמלצה המלאה' שפותח אותה בחלון מעל העמוד, בכרטיס קשת גדול, עם סגירה ב-X, ב-Esc או בלחיצה על הרקע. מעל הרצועה כותרת ושורת הסבר. ההמלצות: [8 המלצות עם שם פרטי, סוג האירוע ותאריך]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 פתחו בהמלצה קצרה ומוחשית. מספר אורחים או שם של מנה משכנעים יותר מ'היה מעולה'.

קיר לוגואי לקוחות שמתחלף לבד

הלקוחות שלכם על קיר אחד שזז לבד. הגולש רואה מי כבר סומך עליכם, בלי לקרוא מילה.

איפה זה עובד: עמוד הבית מתחת להירו, עמוד אודות, עסקים שעובדים עם חברות וארגונים

מה צריך להכין

• 20 לוגואים של לקוחות (באישורם)
• כותרת ופסקה קצרה
• מספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן קיר לוגואי לקוחות לאתר של [שם העסק]: שורת מותג, כותרת ופסקה במרכז, ומתחתן גריד של 15 משבצות עם לוגו בכל אחת, 5 עמודות במחשב ו-3 במובייל, על רקע כהה עם רשת נקודות והילה רכה שנעה לאט. הלוגואים אפורים וחצי שקופים (filter: grayscale עם transition), ובריחוף או בנגיעה חוזרים לצבע מלא והמשבצת מתרוממת עם מסגרת בצבע המותג. כשהקיר נכנס למסך (IntersectionObserver) המשבצות עולות בגל מהפינה העליונה. כל 2.5 שניות משבצת אחת מחליפה לוגו באחד שלא מוצג, ב-cross-fade בלי רגע ריק: החדש נכנס בצבע מלא ואחרי שנייה דוהה לאפור. לא מחליפים משבצת שהעכבר מעליה. מתחת לקיר רצועה: משבצת מקווקוות 'הלוגו שלכם', משפט הזמנה וכפתור 'רוצים להצטרף?' שפותח וואטסאפ ל-[מספר בפורמט 972]. התוכן: [כותרת ופסקה], [20 לוגואים של לקוחות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 לוגואים בקובצי PNG שקופים או SVG, כולם בגובה דומה. לוגו אחד ענק שובר את כל הקיר.

פס לוגואים כפול על רקע כהה

הלקוחות שלכם עוברים מול העיניים בשתי שורות. אמון בלי מילה אחת של שיווק.

איפה זה עובד: מתחת להירו, בעמוד אודות, לפני המלצות או מעל טופס יצירת קשר

מה צריך להכין

• 16 לוגואים של לקוחות או שותפים, באישורם
• שורת כותרת קצרה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן לוגואים של לקוחות לאתר של [שם העסק]: רצועה כהה ברוחב מלא בצבע המותג, ובראשה שורת כותרת קטנה וממורכזת עם קו דק מכל צד: [כותרת קצרה]. מתחתיה, באזור ממורכז עד 1120px, שתי שורות לוגואים שנעות לאט ובלי הפסקה בכיוונים מנוגדים, במהירות מעט שונה. כל לוגו ממורכז בעיגול בהיר בגודל אחיד (קטן יותר במובייל), כך שלוגואים שונים נראים כמו סדרה אחת. הקצוות מתעמעמים עם mask-image, ובריחוף עם העכבר שתי השורות נעצרות והעיגול שמתחת לסמן גדל מעט. בטעינה הכותרת נכנסת ואחריה השורות. התנועה ב-CSS keyframes, בלי JavaScript: כל שורה מכילה את הלוגואים פעמיים (העותק עם aria-hidden) וזזה בדיוק 50%, עם margin במקום gap כדי שהחיבור לא יקפוץ. למי שביקש פחות תנועה השורות עומדות, העותק מוסתר והלוגואים ברשת ממורכזת. הלוגואים: [קישורים ל-16 לוגואים, 8 לכל שורה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 לוגו בקובץ SVG או PNG שקוף. לוגו עם רקע מרובע נראה כמו מדבקה בתוך העיגול.

קרוסלת לוגואים בכרטיסים לבנים

הגולש רואה בשנייה עם מי אתם עובדים. לוגואים מוכרים בונים אמון לפני שקרא מילה.

איפה זה עובד: סוכני ביטוח, יועצי משכנתאות, רואי חשבון, מפיצים ויבואנים

מה צריך להכין

• 7 לוגואים ברקע שקוף
• כותרת ושורת הסבר
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן לוגואים על רקע בהיר לאתר של [שם העסק]: שורת מותג קטנה, כותרת [כותרת, למשל 'עובדים עם כל חברות הביטוח'] ושורת הסבר, שנכנסות בדירוג עדין בטעינה. מתחת קרוסלת לוגואים בלולאה אינסופית: כל לוגו בכרטיס לבן עם פינות עגולות וצל עדין, 5 כרטיסים במחשב ו-3 במובייל. הכרטיס שבמרכז מודגש מעט: גדול בכמה אחוזים, צל חזק יותר ולוגו בצבע מלא, והשאר מעט דהויים. הקרוסלה מתקדמת לבד לוגו אחד כל 2 שניות, ובתחתית הכרטיס המרכזי פס דק בצבע המותג שמתמלא עד הצעד הבא. היא עוצרת בריחוף ובפוקוס מקלדת. חיצים עגולים משני הצדדים (במובייל מתחת לנקודות), נקודה לכל לוגו שמביאה אותו למרכז, וגרירה בעכבר או החלקה באצבע שנצמדת ללוגו הקרוב. לולאה בלי קפיצה: כרטיסים משוכפלים ומסילה שזזה ב-transform. הלוגואים: [7 לוגואים ב-SVG או ב-PNG שקוף]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 לוגו עם רקע אפור או צבעוני בולט מיד על כרטיס לבן. בקשו מכל חברה קובץ עם רקע שקוף.

כרטיסי תוצאות עם מספר וגרף

במקום 'אנחנו הכי טובים', מספרים עם מקור. הגולש רואה תוצאה ומאמין לה.

איפה זה עובד: דף הבית, עמוד תוצאות, דפי נחיתה, עמוד שירות

מה צריך להכין

• 5 תוצאות אמיתיות: מספר, יחידה ותיאור קצר
• מקור או תקופה לכל מספר
• 8 ערכי מגמה לכל גרף (למשל לפי חודש)
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן תוצאות במספרים לאתר של [שם העסק]: שורת מותג, כותרת, משפט פתיח וגריד של 5 כרטיסים. בכל כרטיס מספר גדול עם יחידה (אחוז, ימים, ₪), תיאור קצר, שורת מקור קטנה כמו 'ממוצע 2025' וגרף קו זעיר בתחתית. כרטיס אחד מודגש: רקע בצבע המותג, טקסט לבן ותגית קטנה מעל המספר. במחשב הוא תופס שתי עמודות ושתי שורות, במובייל רוחב מלא והשאר בשתי עמודות. כשכרטיס נכנס למסך (IntersectionObserver) הוא עולה בדירוג, המספר סופר מ-0 עם פסיק אלפים או נקודה עשרונית, והקו מצטייר משמאל לימין ב-stroke-dashoffset (החריג היחיד לכלל ה-transform). בסוף הקו נדלקת נקודה שפועמת בעדינות, ובריחוף הכרטיס מתרומם מעט. ב-HTML כתוב המספר הסופי, וה-JavaScript מאפס אותו רק כשהוא רץ. מתחת לגריד הערת מקור קטנה. התוצאות: [5 תוצאות: מספר, יחידה, תיאור, מקור ו-8 ערכי מגמה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 מספר בלי מקור נשמע כמו סיסמה. שורת 'ממוצע 2025' היא מה שגורם להאמין לו.

רצועת שלושה מונים בצבע המותג

שלושה מספרים שנספרים מול העיניים ואומרים בשנייה אחת: יש כאן ניסיון.

איפה זה עובד: דף הבית מתחת להירו, עמוד אודות, דף נחיתה

מה צריך להכין

• 3 מספרים אמיתיים עם כותרת קצרה לכל אחד
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן רצועת מונים לאתר של [שם העסק]: רצועה צרה לכל רוחב העמוד בצבע המותג, ובה שלושה מספרים גדולים בלבן, לכל אחד כותרת קטנה מתחתיו, ומפרידים אנכיים דקים ביניהם. סימן פלוס או כוכב קטן צמוד למספר, בגוון בהיר של הצבע המשני. כשהרצועה נכנסת למסך (IntersectionObserver) שלושת המונים עולים בזה אחר זה, המפרידים נמתחים לגובה, והמספרים סופרים מ-0 פעם אחת בלבד, כולל פסיק אלפים ודירוג עם ספרה אחרי הנקודה. ברקע הרצועה כתם אור רך שנע לאט מצד לצד. במובייל שלושתם נשארים בשורה אחת, בגודל קטן יותר. חשוב: ב-HTML כבר כתוב המספר הסופי, וה-JavaScript מאפס ל-0 רק כשהוא רץ, כדי שגוגל וצילומי מסך לא יראו 0. המונים: [3 מספרים אמיתיים עם כותרת קצרה לכל אחד, למשל שנות ניסיון, לקוחות ודירוג]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 כותרת של שתיים עד שלוש מילים לכל מספר. כותרת ארוכה נשברת במובייל והרצועה מתנפחת.

רצועת המלצות בשלוש קרוסלות

שלוש המלצות מוצגות יחד, וכל אחת מתחלפת בזמן שלה. הסקשן חי, והעין נשארת עליו.

איפה זה עובד: דף הבית, דף נחיתה, סטודיו, קליניקות, נותני שירות

מה צריך להכין

• 9 המלצות קצרות
• שם ותפקיד לכל ממליץ
• כותרת לסקשן
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן המלצות לאתר של [שם העסק]: רצועה ברוחב מלא בצבע המותג, עם שני עיגולים שקופים שנעים לאט ברקע, שורת פתיח וכותרת לבנה במרכז. מתחתן שלושה כרטיסים, בהירים בצדדים וכהה באמצע. כל כרטיס הוא קרוסלה של 3 המלצות: מרכאה גדולה, ציטוט, קו דק, עיגול עם ראשי תיבות, שם ותפקיד. ההמלצות מונחות זו על זו ב-grid (גובה קבוע) ומתחלפות ב-cross-fade עם תזוזה קלה. כל עמודה מתחלפת לבד כל 6 שניות, 2 שניות אחרי השכנה (הראשונה 2 שניות אחרי הטעינה), כך שתמיד משהו זז. מתחת לכל כרטיס 3 נקודות: הפעילה היא גלולה שמתמלאת עד ההחלפה, ולחיצה על נקודה מחליפה המלצה. ריחוף או פוקוס עוצרים רק את אותה עמודה. בטעינה הכול נכנס בזה אחר זה. מתחת ל-900px: שורה שמחליקים באצבע עם scroll-snap, כרטיס אחד במסך והצצה לבא. ההמלצות: [9 המלצות קצרות עם שם ותפקיד]. הכותרת: [כותרת הסקשן]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 שמרו על המלצות באורך דומה, שלוש שורות בערך. כך שום כרטיס לא נראה ריק ליד השכנים.

גלריה עם לייטבוקס

תמונות שנפתחות במסך מלא עם החלקה — גלריה שמרגישה כמו אפליקציה.

איפה זה עובד: צלמים, מעצבים, שיפוצים, אירועים

מה צריך להכין

• 9–20 תמונות
• כיתוב קצר לכל תמונה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי גלריית תמונות ל-[שם העסק]: פריסת masonry, זום עדין וכיתוב בריחוף, ולחיצה פותחת לייטבוקס עם חיצים, החלקה באצבע, מקשי מקלדת, מונה '3 / 9', שורת תמונות ממוזערות וסגירה ב-Esc או ברקע. התמונות: [קישורים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 תמונות בגדלים שונים (לרוחב ולגובה) הופכות את ה-masonry לחי. כולן מרובעות = משעמם.

לוח השראה בסגנון פולארויד

תמונות מהעסק על לוח שעם, עם נעצים וכיתוב ביד. מרגיש אישי ושכונתי, לא כמו עוד גלריה.

איפה זה עובד: בתי קפה, מאפיות, סטודיו, גני אירועים, עמוד 'מי אנחנו'

מה צריך להכין

• 9 תמונות מרובעות ללוח
• כיתוב קצר לכל תמונה בלוח
• 12 תמונות לפסים
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי לוח השראה בסגנון פולארויד לאתר של [שם העסק]: לוח שעם במסגרת עץ ועליו 9 תמונות מרובעות במסגרות פולארויד, כל אחת בזווית קלה אחרת, עם כיתוב שנראה כתוב בעט (נטוי ומסובב מעט) ולסירוגין נעץ או סלוטייפ בראש הכרטיס. בטעינה הכרטיסים נוחתים בזה אחר זה, ואחד מתרומם לרגע כדי לרמוז על הריחוף. ריחוף, פוקוס או לחיצה מיישרים תמונה, מרימים אותה מעל השאר ומעמיקים את הצל. מעליו ומתחתיו שני פסי תמונות עם קצוות דהויים שרצים בלולאה בכיוונים מנוגדים, וכל פס נעצר בריחוף: הרצועה משוכפלת ומוזזת ב-transform עד -50%. במובייל (עד 700px) הלוח הופך לערימה: הקשה מעיפה את הכרטיס העליון הצידה ומחזירה אותו לתחתית, מתחת מונה '1 / 9' ושורת 'הקישו לתמונה הבאה', ובטעינה הערימה מדפדפת פעם אחת לבד. התמונות: [9 תמונות ללוח עם כיתוב לכל אחת, ו-12 תמונות לפסים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 צלמו את כל התמונות באותו אור. תמונת סטוק אחת בין תמונות אמיתיות שוברת את האשליה.

פאנלי עבודות שנפתחים בריחוף

הגולש מרחף על פרויקט והוא נפתח מולו עם כל הפרטים. חמש עבודות בשורה אחת.

איפה זה עובד: מעצבי פנים, אדריכלים, צלמים, קבלני גמר, דף הבית, עמוד פרויקטים

מה צריך להכין

• 5 פרויקטים: שם, שורת פרטים ותיאור קצר
• תמונה לגובה לכל פרויקט
• קישור לעמוד של כל פרויקט
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי שורת פאנלים להצגת עבודות לאתר של [שם העסק]: 5 פאנלים צרים וגבוהים, בכל אחד תמונה או איור, מספר סידורי גדול ושקוף בקו מתאר ושם הפרויקט כתוב לאורך. הפאנל שמרחפים עליו (או מגיעים אליו במקלדת) מתרחב ב-transition על flex-grow ומגלה בזה אחר זה שורת פרטים, כותרת, תיאור קצר וכפתור 'לצפייה בפרויקט'. התמונה שלו מתקרבת לאט, השאר מתכווצים ומתעמעמים, ומסגרת דקה מצטיירת סביבו (שני pseudo-elements ב-scaleX ו-scaleY). האחרון נשאר פתוח כשהעכבר יוצא. בטעינה הראשון פתוח, וסיור אוטומטי פותח את הבא כל 3 שניות עם פס התקדמות דק בתחתית, עד ריחוף או הקשה. במובייל: אקורדיון אנכי עם סימן פלוס שמסתובב לאיקס. הקשה פותחת פאנל (גובה ב-grid-template-rows) וסוגרת את האחרים, הקשה נוספת סוגרת. הפרויקטים: [5 פרויקטים: שם, פרטים, תיאור, תמונה וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונות לגובה עם מוקד במרכז: בפאנל סגור רואים מהן רק רצועה צרה.

גלריה מעגלית: גלגל כרטיסים מסתובב

העבודות שלכם מסתובבות על גלגל ענק, והגולש עוצר כל אחת בראש הבמה בתנועת יד.

איפה זה עובד: זגגות, נגרות, מעצבי פנים, צלמים, תיק עבודות בדף הבית

מה צריך להכין

• 9 תמונות אנכיות באותו יחס
• תגית, כותרת ושורת תיאור לכל תמונה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי גלריה מעגלית לאתר של [שם העסק]: כרטיסי תמונה אנכיים על קשת של גלגל ענק שרק החלק העליון שלו נראה. כל כרטיס מוטה לפי מקומו על הקשת, והקשת דוהה בצדדים. הכרטיס שבראש הקשת גדל, מקבל מסגרת בצבע המותג והילה רכה, והשאר מעומעמים. פס ברק עובר על הכרטיסים כשהם זזים, ומתחתם טבעת דקה עם שנתות שמסתובבת איתם. במרכז, מתחת לכרטיס העליון, מתחלף בדעיכה הכיתוב שלו: תגית, כותרת ושורת תיאור, ומתחתיו חיצים ומונה '3 / 9'. מסובבים בגרירה, בגלגלת, בחיצים, במקלדת ובלחיצה על כרטיס, והגלגל נצמד לכרטיס הקרוב. בטעינה הגלגל מסתובב למקומו, ואז ממשיך לאט לבד, מאט ליד כל כרטיס ועוצר בריחוף. במובייל הקשת צרה יותר ומחליקים באצבע. המיקום רציף ב-requestAnimationFrame. הכרטיסים: [9 תמונות אנכיות עם תגית, כותרת ושורת תיאור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו תמונות שהנושא שלהן במרכז. על הקשת הכרטיסים מוטים, ופרטים בקצוות הולכים לאיבוד.

כרטיסים שנפתחים לחלון במעבר רציף

הגולש רואה הכול בקצרה, ולחיצה פותחת את הפרטים המלאים בלי לעזוב את העמוד.

איפה זה עובד: מכללות וקורסים, רשימת שירותים, חבילות ומחירים, צוות, דף הבית

מה צריך להכין

• 6 פריטים: שם, שורת פרטים ותיאור מלא
• 3 נקודות ומחיר לכל פריט
• תמונה מרובעת לכל פריט
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי רשימת כרטיסים שנפתחים לחלון לאתר של [שם העסק]: גריד של כרטיסים לבנים קומפקטיים (טור אחד במובייל), בכל אחד תמונה קטנה מרובעת, שם, שורת פרטים ועיגול חץ. כרטיס שנלחץ מתכווץ קלות וגדל ברצף לחלון במרכז המסך בטכניקת FLIP עם Web Animations API: רקע הכרטיס נמתח לחלון, והתמונה, השם ועיגול החץ טסים ממקומם בכרטיס אל מקומם בחלון. הרקע מתעמעם, ובמקום הכרטיס נשאר שקע מקווקו. אחר כך נכנסים בזה אחר זה שורת פרטים מלאה, תיאור, 3 נקודות עם וי, מחיר וכפתור 'שריינו מקום' שנפרש מתוך עיגול החץ. סגירה באיקס, ב-Esc או בלחיצה על הרקע מחזירה הכול לכרטיס באותה תנועה, והפוקוס חוזר אליו. בטעינה כרטיס אחד נלחץ, נפתח ונסגר לבד. הפריטים: [6 פריטים: שם, שורת פרטים, תיאור, 3 נקודות, מחיר ותמונה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 השאירו בכרטיס שם קצר ושורה אחת. כל השאר שייך לחלון, וכך הרשימה נסרקת בשנייה.

תיק עבודות עם סינון

הגולש מסנן לפי התחום שלו, רואה את האתר נגלל בתוך הכרטיס ומוצא עבודה שדומה לעסק שלו.

איפה זה עובד: סוכנויות דיגיטל, מעצבים, אדריכלים, צלמים, עמוד תיק עבודות

מה צריך להכין

• 9 עבודות ומעלה, לכל אחת צילום מסך ארוך וקישור
• תחום וסוג אתר לכל עבודה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי גריד עבודות עם סינון לאתר של [שם העסק]: כל כרטיס הוא קישור עם חלון דפדפן קטן על רקע גרדיאנט, ובו צילום מסך ארוך של האתר, ומתחתיו שם ושורת 'סוג אתר · תחום'. בריחוף הכרטיס מתרומם והצילום נגלל לאט עד סוף העמוד. מעל הגריד שתי שורות צ'יפים, 'תחום' ו'סוג אתר', כל אחת מתחילה ב'הכול', והן משתלבות. על כל צ'יפ מספר העבודות שייתן, וצ'יפ שייתן אפס מעומעם ונעול. לידן מונה 'מוצגות 6 מתוך 9 עבודות'. בסינון הכרטיסים מחליקים למקומם החדש בטכניקת FLIP, וחדשים נכנסים בפייד. בהתחלה שתי שורות, וכפתור 'הצג עוד' חושף שורה נוספת ונעלם בסוף. בלי JavaScript כל הכרטיסים מוצגים. במובייל שני טורים, וכל שורת צ'יפים נגללת לרוחב. בטעינה, פעם אחת, הצילום הראשון נגלל לבד וצ'יפ אחד נבחר לרגע. העבודות: [שם, צילום מסך ארוך, קישור, תחום וסוג לכל עבודה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 צלמו את העמוד כולו, מלמעלה עד הפוטר. צילום קצר לא נגלל, והאפקט הולך לאיבוד.

תיק פרויקטים עם עמוד לכל פרויקט

הגולש מסנן לפי עיר וסוג עבודה, נכנס לפרויקט ורואה שלבים, נתונים ותמונות.

איפה זה עובד: שיפוצים, קבלנים, אדריכלים, מעצבי פנים, נגרים

מה צריך להכין

• 6 פרויקטים עם עיר, סוג, שטח, משך ותקציב
• תמונות ושלבי עבודה לכל פרויקט
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי עמוד פרויקטים לאתר של [שם העסק] שמתחלף לתצוגת פרויקט בלי טעינה מחדש. ברשימה: צ'יפים עם מונה לסינון לפי עיר ולפי סוג עבודה, מספר תוצאות שמתעדכן, וכפתור 'נקו את הסינון' כשאין התאמה. כל פרויקט הוא שורה רחבה ולחיצה: מספר רץ, תמונה, שם, עיר וסוג, שטח, משך וחץ. במובייל התמונה קטנה והטקסט לצידה. בתצוגת הפרויקט: כפתור 'לכל הפרויקטים', כותרת ותיאור, 4 נתונים (שטח, משך, תקציב, מסירה), גלריה עם תמונה גדולה, כיתוב ותמונות ממוזערות שמחליפות אותה ב-cross-fade, פס צד דביק עם ציר זמן של שלבי העבודה שמתמלא בפתיחה, ו'עוד פרויקטים': 3 כרטיסים, קודם מאותה עיר. חזרה, גם ב-Esc, שומרת סינון ומקום גלילה. בטעינה השורות נכנסות בהדרגה, והפרויקט הראשון נפתח לבד ל-3 שניות וחוזר, אלא אם הגולש כבר נגע. הפרויקטים: [6 פרויקטים עם נתונים, שלבים ותמונות]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 פרויקט בלי שטח, משך ותקציב הוא רק אלבום תמונות. המספרים הם מה שבונה אמון.

קטלוג נכסים עם חיפוש וסינון

הגולש מסנן לפי אזור, סוג, מחיר וחדרים ורואה מיד רק את הנכסים שמתאימים לו.

איפה זה עובד: משרדי תיווך, יזמים וקבלנים, נכסים מסחריים, השכרות

מה צריך להכין

• 12 נכסים: כתובת, מחיר, חדרים, מ״ר ותיאור קצר
• תמונה ראשית לכל נכס
• מספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קטלוג נכסים לאתר של [שם העסק]: סרגל צד נדבק עם חיפוש חופשי, אזור, צ׳יפים של סוג נכס, סליידר מחיר עם שתי ידיות, כפתורי חדרים וניקוי. לידו מונה תוצאות, מיון וגריד שמתעדכן מיד, כשהכרטיסים מחליקים למקומם. בלי תוצאות: הודעה וכפתור ניקוי. בכל כרטיס: תמונה, תג 'חדש' או 'בלעדי', שם, רחוב ועיר, מחיר, חדרים, מ״ר וקומה. בריחוף הכרטיס מתרומם ונוטה קלות אחרי העכבר. לחיצה פותחת חלון פרטים עם תיאור וכפתור וואטסאפ ל-[מספר בפורמט 972], שנסגר ב-X, ב-Esc או בלחיצה בחוץ. בטעינה הכרטיסים נכנסים בזה אחר זה, וידית המחיר יורדת וחוזרת פעם אחת לבד. במובייל: כפתור 'סינון' נדבק עם מספר המסננים הפעילים, שפותח פאנל מלמטה עם 'הציגו 7 נכסים', וכרטיסים בשורות. על body רק overflow-x:clip, כי hidden שובר sticky. הנכסים: [12 נכסים עם הפרטים, תיאור ותמונה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 מלאו לכל נכס אזור, סוג ומחיר מדויקים. נכס עם שדה חסר נעלם מהסינון בלי שתשימו לב.

קטלוג קורסים עם סינון וחיפוש

הגולש מסנן לפי תחום ומסלול, פותח קורס, רואה את הסילבוס ונרשם בוואטסאפ בלחיצה.

איפה זה עובד: מכללות, מרכזי למידה, חוגים, סדנאות, סטודיו עם מערכת שיעורים

מה צריך להכין

• 12 קורסים: תחום, מסלול, משך ותאריך
• סילבוס קצר ודרישות קדם לכל קורס
• מספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי קטלוג קורסים לאתר של [שם העסק]: פאנל כהה עם חיפוש חופשי ושתי שורות צ׳יפים בבחירה יחידה, תחום ומסלול (הכול, בוקר, ערב, אונליין). מתחתיו מונה תוצאות, מיון (תאריך, משך, שם) וגריד שמתעדכן מיד, והכרטיסים מחליקים למקומם. בכל כרטיס: אייקון, תחום, מסלול, שם, שבועות, מפגשים, תאריך פתיחה, פלוס שמסתובב ל-X ותג 'מקומות אחרונים' עם נקודה פועמת. לחיצה מרחיבה כרטיס אחד בכל פעם לרוחב השורה (grid-auto-flow: dense), גוללת אליו ומגלה סילבוס ממוספר, דרישות קדם וכפתור 'לפרטים והרשמה' שפותח וואטסאפ ל-[מספר בפורמט 972] עם שם הקורס. 6 קורסים בכל פעם, עם 'טענו עוד' ו'מוצגים 6 מתוך 12'. בלי תוצאות: הודעה וכפתור איפוס. בטעינה הכרטיסים נכנסים אחד אחד והראשון נפתח לבד. במובייל שורות הצ׳יפים נגללות לרוחב. הקורסים: [12 קורסים עם סילבוס ודרישות קדם]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 כתבו תאריך פתיחה אמיתי לכל קורס. קורס בלי תאריך נראה כמו קורס שלא נפתח.

אריחי קטגוריות בגריד לא סימטרי

הגולש רואה את כל הקטגוריות במבט אחד ונכנס ישר למה שמעניין אותו, בלי לחפש בתפריט.

איפה זה עובד: דף הבית של חנות, קטלוג מוצרים, תפריט של מסעדה או בית קפה

מה צריך להכין

• 5 קטגוריות עם מספר פריטים וקישור
• כותרת ופסקה קצרה לסקשן
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן אריחי קטגוריות לאתר של [שם העסק]: כיתוב קטן, כותרת ופסקה קצרה, ומולם קישור 'לכל הקטגוריות' בצורת גלולה עם עיגול חץ. מתחת חמישה כרטיסים לחיצים בגריד לא סימטרי של שלוש עמודות: שני גדולים (אחד גבוה, אחד רחב) ושלושה קטנים. כל כרטיס הוא איור SVG שאתה מצייר לפי הקטגוריה, עם תנועה קטנה שחוזרת (אדים שעולים, נצנוץ), ובתחתיתו, על מעבר כהה: שם הקטגוריה, מספר הפריטים ועיגול חץ. בריחוף או בפוקוס האיור מתקרב, הכרטיס עולה מעט והחץ זז קדימה. בטעינה הכרטיסים נכנסים בזה אחר זה, ואז מצב הריחוף עובר ביניהם לבד פעם אחת. במובייל הגריד הופך לפס החלקה אופקי עם scroll-snap: הכרטיס הבא מציץ מהצד, הפס זז וחוזר פעם אחת כרמז, ומתחתיו פס התקדמות דק שמתעדכן בגלילה ואחריו הקישור. התוכן: [כותרת ופסקה], [5 קטגוריות עם שם, מספר פריטים וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 שימו בשני הכרטיסים הגדולים את הקטגוריות שמוכרות הכי הרבה. לשם העין הולכת קודם.

כרטיסי שירות בהטיה תלת-ממדית

השירותים שלכם 'קופצים' מהמסך ומזמינים ללחוץ.

איפה זה עובד: עמוד שירותים, דף הבית, דף נחיתה

מה צריך להכין

• 3 שירותים עם שורת הסבר לכל אחד
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי 3 כרטיסי שירות לאתר של [שם העסק]: [שירות 1], [שירות 2], [שירות 3]. כל כרטיס נוטה לכיוון העכבר בתלת-ממד, עם הבזק אור שזז עליו, והאייקון מרחף מעל הכרטיס (translateZ). במכשירי מגע: תנודה עדינה אוטומטית. בכל כרטיס: אייקון SVG, כותרת, 2 שורות הסבר וכפתור. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 הטיה עדינה (עד 10 מעלות) נראית יוקרתית. יותר מזה — נראה כמו משחק.

גריד בנטו לשירותים

כל השירותים במבט אחד, בפריסה מודרנית בסגנון אפל.

איפה זה עובד: דף הבית, עמוד 'מה אנחנו עושים'

מה צריך להכין

• 4–6 שירותים
• מספר אחד שאתם גאים בו
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי גריד בנטו אסימטרי לשירותים של [שם העסק] על רקע גרדיאנט כהה, עם כרטיסי זכוכית (glassmorphism). בתוך האריחים מיקרו-אנימציות: גרף קטן שמצייר את עצמו, מונה מספרים, אייקון בלולאה ואריח תמונה עם זום איטי. האריחים נכנסים בכניסה מדורגת. השירותים: [רשימת שירותים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 אריח אחד גדול לשירות הכי רווחי — העין הולכת אליו קודם.

טבלת מחירים עם מתג חודשי/שנתי

משווים חבילות בשנייה, והחבילה שאתם רוצים למכור בולטת.

איפה זה עובד: מנויים, ריטיינר, חבילות שירות, SaaS

מה צריך להכין

• 3 חבילות עם מחירים ויתרונות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי טבלת מחירים ל-3 חבילות של [שם העסק]: [חבילה 1 ומחיר], [חבילה 2 ומחיר], [חבילה 3 ומחיר]. האמצעית מודגשת עם תגית 'הכי פופולרי'. מתג חודשי/שנתי ב-CSS בלבד (radio) שמחליף מחירים במעבר חלק ומראה כמה חוסכים בשנתי. רשימת יתרונות עם אייקוני וי ואיקס. במובייל: שורה שגוללים הצידה, עם עצירה על כל חבילה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 החבילה שבאמצע היא זו שנמכרת הכי הרבה — שימו שם את מה שאתם רוצים למכור.

שורות שירות: תמונה מול טקסט

כל שירות מקבל שורה משלו עם תמונה והסבר. הגולש גולל, מבין מה מציעים ולוחץ.

איפה זה עובד: דף הבית, עמוד שירותים, קבלנים, קליניקות, משרדים, סטודיו

מה צריך להכין

• 3 שירותים: שם ופסקה קצרה לכל אחד
• קישור לעמוד של כל שירות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן שירותים לאתר של [שם העסק]: שורת מותג קטנה, כותרת ומשפט פתיח, ומתחתם שלוש שורות שירות. בכל שורה איור בכרטיס מעוגל מצד אחד, ומהצד השני כותרת, פסקה וכפתור עם חץ לעמוד השירות. הצדדים מתחלפים משורה לשורה, ומאחורי הטקסט מספר השורה (01, 02, 03) ענק ושקוף למחצה. כל שורה מוסתרת עד שמגיעים אליה בגלילה (IntersectionObserver, פעם אחת): האיור מחליק פנימה מהצד שלו, והמספר, הכותרת, הפסקה והכפתור מהצד השני בזה אחר זה. הראשונה נכנסת כבר בטעינה. בגלילה האיור זז מעט בתוך המסגרת שלו (פרלקסה). האיורים הם SVG שטוח בצבעי המותג שאתה מצייר לפי השירות, ובכל אחד פרט אחד שזז בלולאה איטית, למשל רולר צבע או טיפות מים. בריחוף הכפתור מתרומם והחץ זז. במובייל טור אחד, והאיור תמיד מעל הטקסט. השירותים: [3 שירותים: שם, פסקה קצרה, טקסט לכפתור וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 פסקה של שתיים עד שלוש שורות לכל שירות. טקסט ארוך שובר את הקצב ואת יישור התמונה.

אריחי שירותים לפי קהל

כל גולש מזהה את עצמו באריח אחד, ומגיע בלחיצה לעמוד שנכתב בדיוק בשבילו.

איפה זה עובד: קייטרינג, אולמות, מכללות, קליניקות, כל עסק עם כמה קהלי יעד

מה צריך להכין

• 5 קהלים: שורת קהל, שם שירות ומשפט קצר לכל אחד
• תמונה וקישור לעמוד של כל שירות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן שירותים לפי קהל לאתר של [שם העסק]: שורת מותג, כותרת ושורת משנה, ומתחתן גריד של 5 אריחים. כל אריח הוא קישור לעמוד השירות: תמונה, שכבת צבע מהמותג שמתחזקת כלפי מטה, ועליה שורת קהל ושם השירות. בריחוף או בפוקוס התמונה מתקרבת, השכבה מתכהה, הכיתוב עולה ומתחתיו מופיעים משפט קצר ועיגול עם חץ. במחשב 3 עמודות והאריח הראשון רחב כפול. האריחים נכנסים בדירוג כשהסקשן נכנס למסך (IntersectionObserver), ואז זרקור עובר ביניהם כל 2.6 שניות, מציג את מצב הריחוף ועוצר כשהעכבר או הפוקוס בגריד. במובייל ובמסכי מגע: 2 עמודות, האריח הרחב לכל הרוחב, המשפט מוצג תמיד והחץ בפינה העליונה, והזרקור רק מקרב את התמונה ומכהה את השכבה. האריחים: [5 קהלים: שורת קהל, שם שירות, משפט קצר וקישור]. התמונות: [קישורים לתמונות]. בלי תמונה: איור SVG שטוח של השירות במבט על. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 נסחו כל אריח מהצד של הלקוח: 'לגנים ולבתי ספר', ולא 'חטיבת מוסדות'.

שישה שירותים: אייקון, טקסט וכפתור

כל השירותים במבט אחד, ולכל שירות כפתור משלו. הגולש מוצא את שלו ולוחץ.

איפה זה עובד: דף הבית, עמוד שירותים, עסק עם כמה תחומי פעילות

מה צריך להכין

• 6 שירותים: שם ותיאור של שתי שורות
• קישור לעמוד של כל שירות
• כותרת ותת-כותרת לסקשן
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן שירותים לאתר של [שם העסק]: שורת מותג קטנה, כותרת גדולה ומולה תת-כותרת קצרה. מתחתן קו מפריד דק ומקווקו, ועליו אייקון קטן שמתאים ל[תחום] נע לאט מקצה לקצה וצובע את הקו מאחוריו. מתחת לקו שישה שירותים בכרטיסים שקופים, בלי רקע: אייקון קווי בתוך עיגול, שם השירות, תיאור של שתי שורות וכפתור טקסט 'לפרטים' עם חץ. בריחוף או בפוקוס העיגול מתמלא בצבע המותג מהמרכז החוצה, מסגרת דקה מופיעה סביב הכרטיס והחץ זז קדימה, הכול ב-opacity ו-scale. עד שהגולש נוגע, מצב הריחוף עובר לבד מכרטיס לכרטיס כל שתי שניות, ובמגע הכרטיס שנגעו בו נשאר מסומן. הכרטיסים נכנסים בדירוג כשהסקשן נכנס למסך (IntersectionObserver). במחשב שלושה טורים, בטאבלט שניים, ובמובייל טור אחד עם האייקון לצד הטקסט. השירותים: [6 שירותים: שם, תיאור של שתי שורות וקישור לכל אחד]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 כתבו תיאורים באורך דומה, שתי שורות לכל שירות. כך הכפתורים מתיישרים בשורה אחת.

אריחי שירות גבוהים עם תמונת רקע

כל שירות מקבל אריח גדול עם תמונה, והגולש בוחר במבט אחד לאן להיכנס.

איפה זה עובד: דף הבית, עמוד שירותים, מוסכים, קליניקות, בעלי מקצוע

מה צריך להכין

• כותרת ומשפט פתיח לסקשן
• 4 שירותים: שם, משפט תיאור וקישור לכל אחד
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן שירותים לאתר של [שם העסק]: שורת מותג קטנה, כותרת ולצידה משפט פתיח, ומתחתם ארבעה אריחים גבוהים זה לצד זה. בכל אריח: איור רקע שמצויר ב-SVG לפי השירות וממלא את כל האריח, שכבת גרדיאנט כהה מלמטה, שם השירות וכפתור 'לפרטים ומחיר', וכל האריח לחיץ ומוביל לעמוד השירות. בריחוף או בפוקוס האריח מתרומם עם צל ומסגרת בצבע המותג, האיור מתקרב לאט, הכפתור נצבע בצבע המותג, ושם השירות עולה ומפנה מקום למשפט תיאור מעל הכפתור. בטעינה האריחים נכנסים בזה אחר זה, ואז מצב הריחוף עובר לבד מאריח לאריח כל 3 שניות, עד שהגולש נוגע. במובייל האריחים הופכים לפס החלקה עם scroll-snap שרואים בו אריח וחצי (בטאבלט שניים וחצי), והאריח שבתחילת הפס הוא הפעיל. למי שביקש פחות תנועה התיאורים מוצגים מראש. התוכן: [כותרת ומשפט פתיח], [4 שירותים, לכל אחד שם, משפט תיאור וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 שם שירות של שתיים עד שלוש מילים. שם ארוך נשבר לשלוש שורות ומסתיר את האיור.

שלושה אריחי שירות ברוחב מלא

שלושת השירותים המרכזיים תופסים את כל רוחב המסך, והגולש נכנס לשלו בלחיצה אחת.

איפה זה עובד: עורכי דין, יועצים, קליניקות, משרדים, דף הבית מתחת להירו

מה צריך להכין

• 3 שירותים: שם, משפט קצר וקישור
• נושא לאיור של כל שירות
• כותרת ומשפט פתיח לסקשן
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן שירותים לאתר של [שם העסק]: כותרת ומשפט פתיח, ומתחתיהם שלושה אריחים גדולים שממלאים את כל רוחב העמוד בלי רווחים. בכל אריח איור רקע ב-SVG ובגרדיאנטים בצבעי המותג, עם פרט אחד שנע לאט בלולאה, הכהיה מלמטה, כותרת, משפט קצר וכפתור 'לעמוד השירות' עם חץ. כל האריח לחיץ. האריח שמרחפים עליו או מגיעים אליו במקלדת מתרחב מעט על חשבון השכנים (transition על flex-grow, רוחב הטקסט קבוע), קו תחתון נמתח מתחת לכותרת, האיור מתקרב מעט והחץ זז. ביציאת העכבר חוזרים לרוחב שווה. כשהסקשן נכנס למסך (IntersectionObserver) האריחים מופיעים בזה אחר זה, ואז סיור אוטומטי מפעיל אריח אחר כל 2.4 שניות, עד ריחוף או נגיעה. במובייל: שלושתם בטור ונמוכים יותר, טקסט מימין ואיור משמאל, והפעיל גבוה מעט. השירותים: [3 שירותים: שם, משפט קצר, נושא לאיור וקישור]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בחרו את שלושת השירותים שמביאים הכי הרבה פניות. רביעי כבר שובר את השורה.

הווידג'ט החכם של סופי לוואטסאפ

הגולש בוחר שירות בצ'אט קטן ומגיע אליכם לוואטסאפ עם הודעה מוכנה. כפתור ההמרה מספר 1 שלנו.

איפה זה עובד: כל אתר שירות — קליניקות, בעלי מקצוע, משרדים

מה צריך להכין

• מספר וואטסאפ
• 3–5 שירותים
• תמונת פרופיל או לוגו
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי ווידג'ט וואטסאפ צף לאתר של [שם העסק]: כפתור עגול בפינה שפועם, ובלחיצה נפתח חלון צ'אט מדומה עם התמונה של [שם איש הקשר], הודעת פתיחה 'היי, איך אפשר לעזור?' עם אנימציית 'מקליד…', וכפתורי בחירה של השירותים: [שירות 1], [שירות 2], [שירות 3]. בחירה פותחת וואטסאפ למספר [מספר בפורמט 972] עם הודעה מוכנה שכוללת את השירות. חובה: במובייל לפתוח עם window.location ולא window.open (נחסם), להעביר את הווידג'ט ל-body כדי שיישאר צף, ולשלוח dataLayer.push({event:'whatsapp_click'}) לפני המעבר — למעקב המרות. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 זה הרכיב שמביא אצלנו הכי הרבה פניות. מדביקים אותו בפוטר של כל האתר, לא רק בדף הבית.

פס יצירת קשר דביק למובייל

'התקשרו' ו'וואטסאפ' תמיד ביד — בדיוק ברגע שהגולש מוכן.

איפה זה עובד: כל אתר שירות, במיוחד עם תנועה מהטלפון

מה צריך להכין

• טלפון
• מספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי פס דביק בתחתית המסך במובייל לאתר של [שם העסק], עם 2 כפתורים: 'התקשרו' (לטלפון [טלפון]) ו'וואטסאפ' (למספר [מספר]). הפס מופיע רק אחרי שגוללים מעבר לאזור הפתיחה, ונעלם כשמגיעים לטופס יצירת הקשר או לפוטר (IntersectionObserver). במחשב הוא הופך לגלולה צפה בצד. אנימציית כניסה עדינה מלמטה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 שבעים אחוז ויותר מהגולשים של עסקים מקומיים מגיעים מהטלפון — שם הפס הזה עושה את ההבדל.

טופס ליד חכם בשלבים

במקום טופס מפחיד — שאלות קצרות בלחיצה. יותר אנשים מסיימים, ואתם מקבלים ליד מסונן.

איפה זה עובד: דף נחיתה לקמפיין, עמוד הצעת מחיר

מה צריך להכין

• 3 שאלות סינון עם אפשרויות
• מספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי טופס השארת פרטים ב-4 שלבים לאתר של [שם העסק]: 1) איזה שירות — [אפשרויות] 2) גודל או תקציב — [אפשרויות] 3) מתי — [אפשרויות] 4) שם וטלפון. כל אפשרות היא כרטיס גדול ללחיצה, עם פס התקדמות, בדיקת טלפון ישראלי (05X-XXXXXXX) וניסוח חם. במסך הסיום: הצעה להמשיך בוואטסאפ למספר [מספר] עם הודעה שמסכמת את כל התשובות. את הנתונים לשלוח ל-[כתובת הטופס או וובהוק]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 השאלה הראשונה צריכה להיות הכי קלה — מי שלחץ פעם אחת, כמעט תמיד מסיים.

מחשבון הצעת מחיר

הלקוח רואה מחיר משוער לבד ומגיע אליכם כבר מוכן לסגור.

איפה זה עובד: ניקיון, שיפוצים, הובלות, אירועים, כל שירות עם מחירון

מה צריך להכין

• המחירון או הנוסחה שלכם
• 3–5 פרמטרים שמשפיעים על המחיר
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מחשבון מחיר אינטראקטיבי לאתר של [שם העסק]: סליידרים ומתגים עבור [פרמטרים — למשל: גודל במ״ר, מספר חדרים, תדירות, תוספות]. טווח המחיר המשוער מתעדכן חי עם אנימציית ספירה, עם פירוט לפי רכיבים. נוסחת המחיר: [הנוסחה או המחירון שלכם]. כפתור 'קבלו הצעה מדויקת בוואטסאפ' ששולח למספר [מספר] את כל מה שנבחר. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 מראים טווח ולא מחיר מדויק — זה מזמין פנייה במקום השוואה.

וואטסאפ חכם ששואל ומסנן

הגולש עונה על כמה שאלות בלחיצה, ואתם מקבלים בוואטסאפ פנייה מסודרת במקום 'היי'.

איפה זה עובד: יועצים, משרדים, קליניקות, בעלי מקצוע, עסקי שירות

מה צריך להכין

• 4 שאלות סינון עם תשובות
• מספר וואטסאפ
• שם ותמונה של נציג
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי כפתור וואטסאפ צף לאתר של [שם העסק] שמסנן פניות לפני הוואטסאפ: כפתור ירוק פועם בפינה, שנפתח לבד כשנייה אחרי הטעינה לחלון צ'אט בגובה קבוע עם תמונה ושם של [שם הנציג], נקודת 'מחוברים עכשיו' ופס התקדמות דק שכבר מלא חלקית בשאלה הראשונה. ההודעות נערמות מלמטה: ברכה ואז [4 שאלות סינון עם אפשרויות תשובה] בזו אחר זו, כל הודעה אחרי אנימציית 'מקליד'. למטה אזור תשובות שמוצג כבר מהפתיחה: 'שאלה 1 מתוך 4', כפתורי תשובה שנכנסים כבועה בלחיצה, וכפתור 'חזרה' שמבטל את התשובה האחרונה. בסוף כרטיס 'ההודעה שתישלח' עם שורה לכל תשובה, ורק אז כפתור 'המשך לוואטסאפ': קישור רגיל ל-wa.me/[מספר בפורמט 972] (לא window.open, שנחסם במובייל) עם הסיכום כהודעה מוכנה, ולפניו dataLayer.push של whatsapp_click. במובייל החלון עולה מלמטה ברוחב מלא. סגירה באיקס או ב-Esc. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 שאלת התקציב או הדחיפות היא זו שמסננת. שימו אותה שנייה, אחרי שאלה קלה.

בורר נציגים בוואטסאפ

הגולש בוחר עם מי לדבר ומגיע ישר לאדם הנכון. פחות העברות, תשובה מהירה יותר.

איפה זה עובד: מרפאות, משרדים, סוכנויות, כל עסק עם כמה אנשי צוות

מה צריך להכין

• 3 עד 4 נציגים: שם, תפקיד ומספר וואטסאפ
• שעות פעילות והודעת פתיחה לכל נציג
• תמונות פנים, אם יש
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי בורר נציגים בוואטסאפ לאתר של [שם העסק]: כפתור וואטסאפ צף שפועם, ושנייה אחרי הטעינה נפתח לבד חלון בגובה קבוע עם כפתור סגירה. בראשו 'עם מי תרצו לדבר?' ומתחת רשימת הנציגים: תמונה עגולה או ראשי תיבות, שם, תפקיד, חץ, ונקודת זמינות עם כיתוב: ירוקה ופועמת 'זמין עכשיו' או אפורה 'לא זמין'. הזמינות מחושבת בכל פתיחה משעות הפעילות של כל נציג, לפי שעון ישראל (Asia/Jerusalem). בחירה בנציג פותחת ב-cross-fade את המסך שלו: חץ חזרה, תמונה, שם וסטטוס, אנימציית 'מקליד' ואז הודעת פתיחה אישית ממנו, וכפתור ירוק 'וואטסאפ עם' ושמו הפרטי: קישור אמיתי ל-wa.me למספר שלו עם הודעה מוכנה. נציג לא זמין מציג גם 'נחזור אליכם מחר בבוקר' (או מתי שהוא חוזר), והכפתור הופך ל'השאירו הודעה'. הנציגים: [3 עד 4 נציגים: שם, תפקיד, מספר, שעות פעילות והודעת פתיחה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 הגדירו לכל נציג שעות אמיתיות. נקודה ירוקה שלא עונה שורפת את האמון.

טופס צד נשלף עם לשונית

לשונית קטנה בקצה המסך שתמיד שם. לחיצה אחת, שם וטלפון, והליד אצלכם.

איפה זה עובד: מכללות, קליניקות, בעלי מקצוע, כל אתר שירות שרוצה פניות מכל עמוד

מה צריך להכין

• 5 נושאים לבחירה
• זמן המענה שאתם מתחייבים אליו
• כתובת לקבלת הפניות (webhook או CRM)
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי טופס צד נשלף לאתר של [שם העסק]: לשונית אנכית צמודה לקצה השמאלי של המסך עם אייקון והכיתוב 'השאירו פרטים'. לחיצה מחליקה פנימה פאנל צף מעל רקע מעומעם, והלשונית מתחבאת. בפאנל: כותרת, שורת זמן מענה עם נקודה ירוקה פועמת, צ'יפים לבחירת נושא אחד (הראשון מסומן מראש, הנבחר נצבע ומקבל וי), שם, טלפון, כפתור 'שלחו ונחזור אליכם' ושורת 'בלי התחייבות'. שם קצר או טלפון שאינו 9 עד 10 ספרות מציגים שגיאה מתחת לשדה. אחרי שליחה הטופס מתחלף ב-cross-fade למסך תודה עם וי, שם הפונה, הנושא שנבחר וכפתור 'סגירה'. סוגרים ב-X, ב-Esc או בלחיצה בחוץ, והפוקוס חוזר ללשונית. במובייל הלשונית הופכת לכפתור רחב בתחתית והפאנל עולה מלמטה. בטעינה הפאנל נפתח לבד אחרי כשנייה, פעם אחת בלבד. שליחה ב-fetch אל [כתובת לקבלת הפניות]. הנושאים: [5 נושאים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 אל תבקשו יותר משם וטלפון. כל שדה נוסף מוריד פניות, את השאר שואלים בשיחה.

טופס לידים ומייל התראה מעוצב

כל פנייה מהאתר נוחתת אצלכם כמייל ברור עם כפתורי חיוג ווואטסאפ. חוזרים לליד מהר.

איפה זה עובד: עמודי שירות, דף צור קשר, דפי נחיתה

מה צריך להכין

• רשימת נושאים לבחירה בטופס
• כתובת וובהוק שמקבלת את הפניות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי טופס לידים עם מייל התראה מעוצב לאתר של [שם העסק]: מסך מפוצל. בצד אחד טופס ממותג עם שם, טלפון, נושא לבחירה מתוך [רשימת נושאים] והודעה, בדיקת טלפון ישראלי, וכפתור 'שלחו פנייה' שמתחלף ל'שולח' ואז ל'הפנייה נשלחה'. בצד השני תיבת דואר מדומה של בעל העסק: מונה 'לא נקראו', שתי הודעות ישנות ומקום שמור למייל הבא. בשליחה מעטפה עפה מהכפתור אל התיבה, המונה קופץ, ובראש התיבה נפתח מייל ההתראה: שם הליד בגדול, פס 'בנוגע ל' עם שם העמוד שממנו נשלחה הפנייה (מכותרת ה-H1), שורות טלפון, נושא, הודעה ושעת קבלה, וכפתורי 'חייגו' ו'וואטסאפ'. מייל קודם מתכווץ לשורה ברשימה. בטעינה ליד לדוגמה מוקלד ונשלח לבד, ואז הטופס מתנקה. במובייל התיבה מתחת לטופס והמסך גולל אליה כשהמייל נוחת. המייל בנוי כטבלת HTML עם סגנונות inline ונשלח עם הפנייה ל-[כתובת וובהוק]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 שלחו את המייל לנייד של מי שעונה ללידים. כפתור החיוג שווה רק כשפותחים אותו בטלפון.

מחשבון משכנתא חי

הגולש גורר סכום, שנים וריבית ורואה מיד כמה ישלם בחודש, ופונה אליכם עם המספרים ביד.

איפה זה עובד: תיווך ונדל״ן, יועצי משכנתאות, קבלנים ויזמים, עמוד נכס

מה צריך להכין

• טווחי הסליידרים: סכום, שנים וריבית
• מספר וואטסאפ לקבלת הפניות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מחשבון משכנתא לאתר של [שם העסק]: שלושה סליידרים, לכל אחד ערך נוכחי בולט וערכי קצה: סכום ההלוואה, תקופה בשנים וריבית שנתית, בטווחים [טווחי הסליידרים]. לידם לוח תוצאה כהה: טבעת SVG של קרן מול ריבית ובמרכזה ההחזר החודשי, ומתחתיה הקרן וסך הריבית עם סכום ואחוז, וסך ההחזר. הכול מתעדכן תוך כדי גרירה לפי לוח שפיצר, בשקלים עם פסיקים. בטעינה סליידר הסכום זז פעם אחת לבד והמספרים רצים איתו. מתחת לתוצאה כפתור 'רוצים הצעה מדויקת?' ושורת הבהרה שהחישוב להמחשה בלבד. הכפתור פותח במקומו טופס קצר: סיכום המספרים, שם, טלפון וכפתור 'שלחו בוואטסאפ'. שדה חסר מסומן בהודעה קצרה. שליחה תקינה פותחת וואטסאפ ל-[מספר בפורמט 972] עם השם, הטלפון והמספרים, והטופס מתחלף באישור עם כפתור 'חזרה למחשבון'. במובייל התוצאה למעלה והכפתור בסוף. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 קבעו את ברירת המחדל לפי עסקה טיפוסית אצלכם. מספר פתיחה מציאותי מרגיש אמין.

שאלון איזה מסלול מתאים לי

שלוש לחיצות, והגולש מקבל המלצה אישית במקום להתלבט מול רשימת מסלולים.

איפה זה עובד: סטודיו, חדרי כושר, חוגים, קורסים, קליניקות, כל עסק עם כמה מסלולים

מה צריך להכין

• 3 שאלות עם 3 תשובות לכל אחת
• 4 מסלולים ולמי כל אחד מתאים
• מספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי שאלון 'איזה מסלול מתאים לי' לאתר של [שם העסק]: 3 שאלות, אחת בכל פעם (תדירות, רמה, מטרה), ולכל אחת 3 כפתורים עם כותרת ושורת הסבר. לחיצה מסמנת וי ועוברת לבד לשאלה הבאה ב-cross-fade, והכפתורים נכנסים בזה אחר זה. מעליהם פס התקדמות עם 'שאלה 1 מתוך 3', מלא ברבע כבר בטעינה. יש כפתור 'חזרה', וגובה אזור השאלות קבוע. בראש הכרטיס 4 כפתורי מסלול עם אייקון ושורת תיאור: סימון עובר ביניהם לבד ומחליף את התיאור, לחיצה על מסלול עוצרת אותו שם, ובסוף הוא נעצר על המומלץ. בסוף כרטיס המלצה: שם המסלול, תדירות ורמה, ושלוש סיבות 'למה דווקא הוא' לפי התשובות. בלי מחיר: רק 'את המחירון נשלח בוואטסאפ'. כפתור 'שריינו שיעור ניסיון' פותח וואטסאפ ל-[מספר בפורמט 972] עם המסלול והתשובות, ולידו 'להתחיל מחדש'. התוכן: [3 שאלות ותשובות], [4 מסלולים ולמי כל אחד מתאים]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 אל תציגו מחיר בתוצאה. מי שקיבל המלצה אישית רוצה קודם לנסות, והמחיר בא בשיחה.

מרכיב מוצר אינטראקטיבי

הלקוח מרכיב את המוצר בעצמו על שרטוט חי, ושולח לכם מפרט מדויק במקום שאלה כללית.

איפה זה עובד: זגגות, מטבחים, דלתות, פרגולות, ארונות וכל מוצר בהתאמה אישית

מה צריך להכין

• רשימת החלקים והאפשרויות לכל חלק
• ברירת המחדל לכל חלק
• מספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מרכיב מוצר אינטראקטיבי לאתר של [שם העסק]: שרטוט SVG של מקלחון במבט חזית (דופן קבועה, דלת, פרזול וידית), ועליו 3 נקודות פועמות שמסמנות איפה לוחצים. לחיצה על חלק, על הנקודה או על הלשונית שלו מדגישה אותו ומציגה את האפשרויות שלו: זכוכית (עובי וגוון), פרזול (גימור), ידית (כיוון פתיחה). השרטוט משתנה מיד: פס הקצה של הזכוכית מתעבה, הגוון מתחלף ב-cross-fade בין שכבות, המתכת נצבעת בגרדיאנט, ובהחלפת כיוון השרטוט מתהפך ב-scaleX והדלת נפתחת מעט ונסגרת. מתחת סיכום מפרט בארבעה תאים שמתעדכן חי, והתא שהשתנה מהבהב. כפתור 'שלחו לי הצעה על המפרט הזה' פותח וואטסאפ ל-[מספר בפורמט 972] עם המפרט, שורה לכל פריט. בטעינה הדגמה אחת לבד: מחליפה אפשרות בכל חלק ונעצרת בנגיעה. במחשב השרטוט והסיכום לצד האפשרויות. התוכן: [האפשרויות וברירת המחדל לכל חלק]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 שלושה חלקים לחיצים זה הגבול. מעבר לזה השרטוט מתמלא נקודות והגולש הולך לאיבוד.

סימולטור גבות חי, שערה אחר שערה

הלקוחה מעצבת את הגבות על המסך ושולחת לכם בוואטסאפ בדיוק מה שהיא רוצה.

איפה זה עובד: מעצבות גבות, איפור קבוע, קליניקות אסתטיקה, מכוני יופי

מה צריך להכין

• 5 צורות, 3 טכניקות ו-5 גוונים שאתם מציעים
• מספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סימולטור גבות חי על canvas לאתר של [שם העסק]: זוג גבות סימטרי על רקע בגוון עור, מצויר שערה אחר שערה, וקו עין סגורה עדין מתחת לכל גבה. בוחרים צורה ([5 צורות], עם ציור קטן בכל כפתור), טכניקה ([3 טכניקות]: שערות, הצללה מנוקדת, משולב) וגוון ([5 גוונים] בעיגולי צבע). כל בחירה מציירת את הגבות מחדש בצמיחה מההתחלה אל הקצה, והציור הקודם דועך. מתג 'קווי מיפוי' מוסיף קווים מקווקווים ותוויות בהתחלה, בשיא ובקצה, קו גובה בין השיאים וציר סימטריה באמצע. בטעינה הגבות צומחות לבד, ואז הדגמה אוטומטית (עם תווית ופס התקדמות דק) מחליפה בחירה כל 3 שניות, עד הנגיעה הראשונה. מתחת: סיכום הבחירה, כפתור 'רוצה בדיוק כזה' שפותח וואטסאפ ל-[מספר בפורמט 972] עם הבחירה, והערה שזו הדמיה בלבד. במובייל הקנבס נצמד לראש המסך. מיקומי השערות מזרע קבוע, כדי שלא ירצדו. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 הציעו רק גוונים שיש לכם באמת בפיגמנטים. לקוחה שבחרה גוון תבקש בדיוק אותו.

פופאפ מבצע חכם עם ספירה לאחור

קופץ ברגע הנכון, פעם אחת בלבד, ואוסף טלפון לפני שהגולש עוזב את האתר.

איפה זה עובד: חנויות, סדנאות וקורסים, קליניקות, מבצעי חגים, דפי נחיתה

מה צריך להכין

• תמונה או איור למבצע
• כותרת המבצע ותאריך הסיום
• כתובת לקבלת הלידים (webhook)
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי פופאפ מבצע לאתר של [שם העסק]: קופץ אחרי [מספר שניות] שניות, או קודם אם העכבר יוצא מהחלון כלפי מעלה, ופעם אחת בביקור (sessionStorage). בפנים: [תמונה או איור] עם מדבקת הנחה, תגית, [כותרת המבצע], שורת הסבר, ספירה לאחור עד [תאריך סיום המבצע] בימים, שעות, דקות ושניות, שדה טלפון נייד וכפתור 'שלחו לי את הקוד' עם הילה פועמת. מספר שגוי מקבל שגיאה מתחת לשדה. מספר תקין נשלח ב-fetch אל [כתובת לקבלת הלידים] והתוכן מתחלף במסך תודה עם המספר וכפתור 'חזרה לאתר'. סגירה ב-X, ב-Esc או בלחיצה על הרקע. כשהוא פתוח הגלילה נעולה והפוקוס נשאר בתוכו. במחשב כרטיס בשתי עמודות במרכז, במובייל מגירה שעולה מלמטה. מצב בדיקה (משתנה DEBUG): לוח קטן בפינה עם הטיימר מתמלא, מה הפעיל את הפופאפ ואם כבר הוצג, וכפתור 'הציגו שוב' שמאפס את הביקור ומתחיל מחדש. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 אל תקפיצו מוקדם מדי. 8 עד 15 שניות נותנות לגולש לראות קודם במה מדובר.

מחשבון דמי הבראה

הגולש מזין ותק והיקף משרה, רואה מיד כמה מגיע לו ופונה אליכם לבדיקת התלוש.

איפה זה עובד: רואי חשבון, הנהלת חשבונות, חשבי שכר, עורכי דין לדיני עבודה

מה צריך להכין

• טבלת ותק וימי הבראה לפי הענף
• תעריף ליום הבראה עדכני
• מספר וואטסאפ לקבלת הפניות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מחשבון דמי הבראה לאתר של [שם העסק], בכרטיס אחד: ותק בשנים בכפתורי פלוס ומינוס עם מספר גדול (1 עד 40), היקף משרה בסליידר מ-10% עד 100%, ותעריף ליום בשדה שאפשר לעדכן (ברירת מחדל [תעריף ליום], שדה ריק חוזר אליה). מתחתם לוח תוצאה כהה שמתעדכן חי: 'מגיעים לכם 8 ימי הבראה', שורת 10 נקודות שמתמלאות לפי מספר הימים, הסכום בשקלים במספר גדול שרץ לערך החדש, ופירוט בשורה אחת: ימים כפול תעריף כפול אחוז משרה. לצד הכרטיס טבלת הוותק [טבלת ותק וימים], ופס כהה עם התג 'אתם כאן' מחליק אל השורה של הוותק שנבחר. מתחתיה הערה שהחישוב להמחשה בלבד וכפתור 'רוצים שנבדוק את התלוש שלכם?' שפותח וואטסאפ ל-[מספר בפורמט 972] עם הנתונים והתוצאה. בטעינה הוותק עולה לבד משנה אחת עד 12, והתוצאה והטבלה מתעדכנות איתו. נגיעה עוצרת את ההדגמה. במובייל הכול בטור אחד. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 עדכנו את התעריף והטבלה פעם בשנה. מחשבון עם תעריף ישן פוגע באמון.

רצועת לידים עם טופס בשורה

שם, טלפון ונושא בשורה אחת, באמצע העמוד. מי שהשתכנע משאיר פרטים בלי לחפש את צור קשר.

איפה זה עובד: דף הבית, סוף עמוד שירות, מכללות, קליניקות, נותני שירות

מה צריך להכין

• שורת פתיח וכותרת
• 4 נושאים לבחירה ו-3 הבטחות קצרות
• כתובת לפניות (וובהוק או מערכת לידים)
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן רצועת לידים לאתר של [שם העסק]: רצועה בצבע המותג עם הילה רכה שנעה לאט, גלולה עם נקודה פועמת וכותרת עם הדגשה בצבע המשני: [שורת פתיח וכותרת]. מתחת מגש לבן עם טופס בשורה: 'שם מלא', 'טלפון נייד', select 'מה מעניין אתכם?' עם [4 נושאים] וכפתור 'חזרו אליי'. תווית מעל כל שדה ושורה שמורה מתחתיו: תקין מקבל וי ירוק ליד התווית, ושגוי ביציאה ממנו הודעה עדינה בגוון חם עד שמתקנים. טלפון נבדק כמספר ישראלי. בשליחה ספינר ו'שולחים' בכפתור, ואז במקום הטופס ובגודלו הודעת תודה עם השם הפרטי, הנושא וכפתור 'פנייה נוספת'. מתחת שורת אמון עם אייקונים: [3 הבטחות קצרות]. בטעינה החלקים נכנסים בהדרגה, והטופס מתמלא לבד פעם אחת כהדגמה חזותית: מציג טעינה ותודה ומתאפס, בלי fetch (נגיעה עוצרת). במובייל השדות וההבטחות בטור. fetch אל [כתובת לפניות] רק כשהגולש שולח. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 אל תוסיפו שדה רביעי. כל שדה נוסף מוריד פניות, ואת השאר שואלים בטלפון.

קריאה לפעולה עם חיוג ווואטסאפ

מי שהשתכנע באמצע העמוד לא צריך לגלול עד הסוף. חיוג או וואטסאפ בלחיצה אחת.

איפה זה עובד: בין סקשנים בעמוד הבית ובעמודי שירות, בכל עסק שעונה לטלפון

מה צריך להכין

• כותרת חדה אחת
• טלפון ומספר וואטסאפ
• שעות המענה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן קריאה לפעולה לאמצע העמוד לאתר של [שם העסק]: רצועה ברוחב מלא שיושבת בין שני סקשנים, ברקע בצבע המותג. מעל הרקע דוגמה עדינה של סמל קטן שחוזר ומתאים לתחום [תחום], בקווי מתאר לבנים כמעט שקופים, שזזה לאט באלכסון בלולאה רציפה (שכבה נפרדת שזזה ב-transform). בצד אחד כותרת אחת חדה: [כותרת], ומתחתיה שורה קטנה: [שעות המענה]. בצד השני שני כפתורי גלולה עם אייקונים: ראשי לבן 'חייגו [טלפון]' שמחייג בלחיצה, ומשני כהה 'שלחו וואטסאפ' שפותח שיחה עם [מספר בפורמט 972]. הכותרת, השורה והכפתורים נכנסים בזה אחר זה כשהרצועה מגיעה למסך (IntersectionObserver). מהכפתור הראשי יוצאת טבעת שמתרחבת ונמוגה פעם ב-4 שניות. בריחוף הכפתור עולה מעט והאייקון גדל מעט. במובייל הכול ממורכז והכפתורים ברוחב מלא, זה מעל זה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 שימו את הרצועה מיד אחרי הסקשן שהכי משכנע: מחירים, המלצות או לפני ואחרי.

קריאה לפעולה רכה לסוף העמוד

הגולש סיים לקרוא ועדיין מתלבט. סקשן רגוע אחד מוריד את החשש ומזמין לפנות.

איפה זה עובד: סוף עמוד הבית, עמודי שירות, סטודיו, קליניקות, יועצים

מה צריך להכין

• כותרת מזמינה ומשפט הרגעה
• 3 נקודות אמון קצרות
• קישור להרשמה ומספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן קריאה לפעולה רגוע לסוף העמוד, לאתר של [שם העסק]: כרטיס בהיר עם פינות עגולות, ובמרכזו שורת פתיח קטנה, כותרת מזמינה [כותרת], משפט הרגעה [בסגנון 'בלי התחייבות, עונים תוך שעה'] ושני כפתורים זה לצד זה: ראשי מלא עם חץ שמוביל ל-[קישור להרשמה], ומשני בקו מתאר עם אייקון וואטסאפ שפותח שיחה למספר [מספר בפורמט 972] עם הודעה מוכנה. בריחוף הכפתור מתרומם מעט והחץ זז הצידה. מתחת לכפתורים שלוש נקודות אמון קצרות בשורה, כל אחת עם עיגול קטן וסימן וי: [3 נקודות אמון]. ברקע הכרטיס, מאחורי הטקסט, עיגול גרדיאנט רך בצבעי המותג שנע ומתנפח לאט בלולאה. כשהסקשן נכנס למסך (IntersectionObserver, פעם אחת) התוכן עולה בדירוג: כותרת ומשפט, אחריהם כפתור אחרי כפתור, ואז נקודות האמון. במובייל הכפתורים ברוחב מלא, אחד מתחת לשני, ונקודות האמון בטור. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 משפט ההרגעה עונה על החשש הכי גדול של הלקוח. שאלו שלושה לקוחות מה כמעט עצר אותם.

רצועת קריאה לפעולה בכפתור אחד

שאלה אחת, הבטחה אחת וכפתור אחד. הגולש שמתלבט יודע בדיוק מה הצעד הבא.

איפה זה עובד: אמצע עמוד הבית, סוף עמוד שירות, עסקים שמוכרים בשיחה

מה צריך להכין

• שאלה, כותרת ומשפט הרגעה
• טקסט לכפתור ומספר וואטסאפ
• מוטיב לאיור הקו (למשל מצפן)
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סקשן קריאה לפעולה לאתר של [שם העסק]: רצועה ברוחב מלא ברקע צבע המותג, עם טקסט כהה. מימין: שאלה קטנה עם קו קצר לפניה '[שאלה, למשל: עדיין מתלבטים?]', כותרת גדולה '[כותרת]', משפט הרגעה '[משפט הרגעה]' וכפתור אחד כהה ומעוגל '[טקסט הכפתור]' שפותח וואטסאפ למספר [מספר בפורמט 972]. בקצה הכפתור עיגול עם חץ: בריחוף הכפתור עולה מעט והחץ זז שמאלה, ומאחוריו הילה שמתרחבת ונמוגה כל 3 שניות. בצד שמאל איור קו גדול של [מצפן, או מוטיב אחר מהתחום]: קווים דקים בלבן חצי שקוף, בלי מילוי, גדול מגובה הרצועה כך שהקצה שלה חותך אותו. האיור מסתובב לאט, סיבוב שלם בדקה, והמחוג שבמרכזו מתנדנד קלות. כשהרצועה נכנסת למסך (IntersectionObserver) השאלה, הכותרת, המשפט והכפתור עולים בזה אחר זה. במובייל הכול ממורכז, הכפתור ברוחב מלא והאיור מוסתר. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 כפתור אחד בלבד. ברגע שמוסיפים שני, הגולש חוזר להתלבט והרצועה מאבדת את הכוח.

תפריט ניווט פרימיום

תפריט זכוכית שמתכווץ בגלילה, מגה-תפריט עם כרטיס מומלץ, ותפריט מובייל מלא.

איפה זה עובד: אתרים עם הרבה שירותים או קטגוריות

מה צריך להכין

• מבנה התפריט (קטגוריות ותתי-עמודים)
• שירות אחד להדגשה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי תפריט ניווט ל-[שם העסק]: כותרת דביקה בסגנון זכוכית שמתכווצת בגלילה, מגה-תפריט בריחוף עם עמודות ואייקונים ([המבנה]) וכרטיס מומלץ ל-[השירות], תפריט מובייל על כל המסך עם כניסה מדורגת של הקישורים וכפתור וואטסאפ, והדגשת הסקשן הפעיל תוך כדי גלילה. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 בתפריט המובייל שימו את הוואטסאפ ראשון — זה מה שרוב הגולשים מחפשים שם.

מגירת צד עם חיפוש חי

הגולש פותח תפריט, מקליד שתי אותיות ומגיע ישר לשירות שחיפש. גם באתר עם עשרות עמודים.

איפה זה עובד: אתרים עם הרבה שירותים: שיפוצים, קליניקות, משרדים, מכללות

מה צריך להכין

• רשימת השירותים, מחולקת לקבוצות
• פרויקט אחד להדגשה, עם תמונה
• טלפון ומספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי מגירת צד עם חיפוש חי לאתר של [שם העסק]: כפתור 'תפריט' בהדר פותח מגירה מימין על רקע מעומעם ומטושטש, והתוכן נכנס בדירוג. למעלה כותרת, X ושדה חיפוש עם ניקוי: ההקלדה מסננת קישורים ושמות קבוצות, מדגישה את ההתאמה, פותחת קבוצות שנמצאו ומעדכנת מונה ('נמצאו 3 תוצאות'). אין התאמה: הודעה. בגוף: אקורדיון שירותים (אייקון ומספר קישורים לקבוצה, אחת פתוחה בכל רגע) וכרטיס 'פרויקט מומלץ' עם תמונה, נקודה פועמת, שם ושורת פרטים. בתחתית קבועים כפתורי חיוג ווואטסאפ. נסגרת ב-Esc, ברקע, ב-X או בקישור, והפוקוס כלוא בה וחוזר לכפתור התפריט. בטעינה נפתחת לבד, מקלידה חיפוש לדוגמה ומנקה, עד שהגולש נוגע. במובייל כמעט ברוחב המסך, והשדה ב-16px נגד זום באייפון. התוכן: [קבוצות שירותים וקישורים], [פרויקט מומלץ], [טלפון], [מספר בפורמט 972]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 קראו לקישורים במילים שהלקוחות מקלידים, לא בשמות הפנימיים שלכם. אחרת החיפוש לא ימצא.

הדר זכוכית צף שנעלם בגלילה

ההדר לא מסתיר את התמונה הראשונה, מפנה מקום בזמן קריאה, וחוזר ברגע שמחפשים את התפריט.

איפה זה עובד: חנויות אונליין, מותגי אופנה ותכשיטים, אתרים עם תמונת הירו גדולה

מה צריך להכין

• לוגו וקישורי התפריט
• 3 עד 5 הודעות קצרות לפס הרץ
• 4 קטגוריות לחנות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי הדר צף לחנות של [שם החנות], קבוע בראש המסך מעל תמונת ההירו. בראש העמוד הוא שקוף עם טקסט בהיר, ומעליו פס הודעות שרץ בלולאה ונעצר בריחוף: [3 עד 5 הודעות קצרות]. אחרי 24 פיקסלים של גלילה פס ההודעות עולה החוצה וההדר הופך לפס זכוכית מעוגל שמרחף עם שוליים: רקע בהיר חצי שקוף עם backdrop-filter: blur, מסגרת דקה, צל עדין וטקסט כהה. בגלילה למטה הוא מחליק החוצה, ובגלילה למעלה חוזר מיד (כיוון הגלילה נמדד ב-requestAnimationFrame עם סף של 6 פיקסלים). בהדר: כפתור תפריט, לוגו, אייקון סל עם מונה, ובמחשב גם הקישורים באמצע. כפתור התפריט פותח מגירה מימין על רקע מעומעם: שדה חיפוש, הקישורים בכניסה מדורגת, ו'קנו לפי קטגוריה' עם אריחי אייקון: [4 קטגוריות]. סגירה ב-X, ב-Esc או בלחיצה על הרקע, והעמוד מאחוריה לא נגלל. הקישורים: [קישורי התפריט]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 הדר שקוף צריך תמונת הירו כהה ושקטה בחלק העליון. על תמונה בהירה או עמוסה הלוגו נעלם.

תפריט מובייל במסך מלא

במקום תפריט צפוף בטלפון: מסך שלם עם קישורים גדולים, תתי עמודים וכפתור קביעת תור.

איפה זה עובד: קליניקות, משרדים, אתרי שירות עם הרבה עמודים

מה צריך להכין

• מבנה התפריט עם תתי העמודים
• טלפון, כתובת ושעות פעילות
• לוגו בגרסה רגילה ובגרסה לבנה
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי הדר דביק ותפריט מובייל במסך מלא לאתר של [שם העסק]: מעל ההדר פס דק עם טלפון וכתובת. ההדר נדבק למעלה ומקבל צל כשגוללים, ובו הלוגו, כפתור טלפון בצורת גלולה (קישור tel) וכפתור המבורגר. לחיצה על ההמבורגר פותחת תפריט שמכסה את כל המסך ונכנס מימין על רקע כהה: גלילת העמוד ננעלת, ההמבורגר הופך ל-X והלוגו מתלבן. הקישורים נכנסים בזה אחר זה, העמוד הנוכחי מסומן בצבע ההדגשה, ופריט עם תתי עמודים נפתח באקורדיון עם חץ שמסתובב (אחד פתוח בכל פעם, grid-template-rows מ-0fr ל-1fr). בתחתית כפתור 'קביעת תור' ושורות טלפון, כתובת ושעות. X, Esc או לחיצה על קישור סוגרים. בטעינה התפריט נפתח לבד פעם אחת, פותח את האקורדיון הראשון ונסגר אחרי כמה שניות. התפריט: [הקישורים ותתי העמודים]. הטלפון: [טלפון]. הכתובת והשעות: [כתובת ושעות]. הלוגו: [קישור ללוגו ולגרסה הלבנה]. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 ודאו שגלילת העמוד ננעלת כשהתפריט פתוח. אחרת האצבע גוללת את האתר במקום את התפריט.

סרגל ניווט תחתון בסגנון אפליקציה

האתר מרגיש כמו אפליקציה: כל מה שחשוב במרחק אגודל, והוואטסאפ תמיד במרכז.

איפה זה עובד: סטודיואים, קליניקות, מסעדות, כל אתר שרוב התנועה שלו מהטלפון

מה צריך להכין

• 4 שיעורים עם תיאור, מחיר ואורך
• מספר וואטסאפ
• כתובת ושעות פעילות
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי סרגל ניווט תחתון בסגנון אפליקציה לאתר של [שם העסק]: 5 לשוניות, 'בית', 'שיעורים', 'וואטסאפ', 'תפריט' ו'צור קשר'. הוואטסאפ הוא עיגול פועם בצבע המותג, מוגבה מעל מרכז הסרגל, ופותח שיחה למספר [מספר בפורמט 972]. הסרגל צמוד לתחתית, עם רקע מטושטש (backdrop-filter) ורווח env(safe-area-inset-bottom). גלולה מאחורי האייקון הפעיל מחליקה בין הלשוניות ב-transform, והתוכן מתחלף ב-cross-fade: בית עם תמונה, כרטיס 'השיעור הבא' ולוח השבוע, [4 שיעורים עם תיאור, מחיר ואורך] עם כפתור 'הרשמה', תפריט קישורים, וצור קשר עם [כתובת ושעות פעילות] וטופס קצר. כל לחיצה בתוכן מקפיצה הודעה קטנה מעל הסרגל. בגלילה למטה הסרגל מתכווץ והכיתובים נעלמים, ובגלילה למעלה חוזר. בטעינה הגלולה עוברת ל'שיעורים' וחוזרת, ואז גלילה קצרה מדגימה את הכיווץ. במחשב הכול בתוך מסגרת טלפון. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.

💡 חמש לשוניות זה המקסימום. יותר מזה, והאייקונים נהיים קטנים מדי לאצבע.

כפתורים צפים: חיוג, וואטסאפ ולמעלה

הגולש מתקשר או כותב לכם בלחיצה אחת מכל מקום בעמוד, וחוזר למעלה בלי לגלול.

איפה זה עובד: אתרי שירות, בעלי מקצוע, קליניקות, כל עמוד ארוך

מה צריך להכין

• טלפון
• מספר וואטסאפ
• צבעי המותג

הפרומפט — מחליפים את מה שמסומן

בנה לי ערימת כפתורים צפים לאתר של [שם העסק]: שלושה כפתורים עגולים בפינה השמאלית התחתונה, מלמעלה למטה: חזרה למעלה (לבן), חיוג ל-[טלפון] (צבע המותג) ווואטסאפ ל-[מספר בפורמט 972] (ירוק, עם הילה שפועמת בעדינות). בטעינה החיוג והוואטסאפ קופצים פנימה, והתוויות שלהם נפתחות פעם אחת לבד ונסגרות. אחר כך תווית כהה נפתחת לצד הכפתור בריחוף או בפוקוס: 'חזרה למעלה', 'חייגו אלינו', 'כתבו לנו בוואטסאפ'. כפתור החזרה מופיע רק אחרי 200 פיקסלים של גלילה, עם טבעת SVG שמתמלאת לפי אחוז הגלילה (stroke-dashoffset), ולחיצה עליו גוללת בעדינות לראש העמוד. לחיצה על חיוג מחייגת, ובמחשב התווית נשארת פתוחה 3 שניות ומציגה את המספר. כשהפוטר נכנס למסך, הערימה מתרוממת ב-transform בגובה החלק שנראה ממנו, כך שהיא תמיד יושבת מעליו. במובייל הכפתורים קטנים יותר, 48 פיקסלים. דרישות: קוד HTML אחד מלא (HTML, CSS ו-JavaScript) שמדביקים בווידג'ט HTML באלמנטור או בוורדפרס. עברית מימין לשמאל. מובייל קודם, ומושלם גם במחשב. צבעי המותג: [צבעי המותג]. פונט Heebo. אנימציות רכות רק עם transform ו-opacity, ובלי אנימציה למי שביקש פחות תנועה. בלי ספריות חיצוניות. נגיש: כפתורים אמיתיים, תוויות וניגודיות טובה. החזר את הקוד המלא בבלוק אחד, בלי הסברים.