איך בונים דף נחיתה ראשון עם Codex

מה בונים בתרגיל

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

סדנת צילום לבעלי עסקים

מצלמים רילס ראשון לעסק.

90 דקות של תרגול מודרך בסמארטפון.

לתיאום שיחה · הדגמה כאן

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

הורדת דף וערכת תרגול

1שלב 1: סוגרים את ההצעה ואת הפעולה לפני שעובדים על העיצוב

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

שם העסק: סטודיו פריים ראשון. זהו עסק דמיוני לצורך תרגול.
קהל: בעלי ובעלות עסקים בתחילת הדרך, ללא צורך בניסיון בעריכה.
הצעה: סדנה בת 90 דקות של תרגול מודרך לצילום רילס ראשון בסמארטפון.
מה מתרגלים: בוחרים מסר אחד, בונים פתיח ומצלמים טייק ראשוני.
מה מקבלים: רשימת בדיקה לעריכה. אין הבטחת ביצועים.
פעולה יחידה: ״לתיאום שיחה״, אל contact-demo.html.
היעד מקומי ומסומן כהדגמה. אין טופס, איסוף מידע או הודעת הצלחה.
לא סופקו מחיר, תאריך, כתובת, המלצות או נתוני תוצאות.

2שלב 2: פותחים תיקיית ניסוי ב־Codex

1. הורידו את ערכת התרגול. חלצו אותה ופתחו את index.html כדי לראות את הדוגמה המוכנה. לחצו על הכפתור וחזרו לעמוד דרך הקישור במסך הבדיקה.
2. כדי לבנות בעצמכם, צרו תיקייה חדשה בשם landing-lab-work. העתיקו אליה רק brief.txt ואת תיקיית assets. שמרו את הדוגמה המוכנה בנפרד כדי להשוות. אם אתם משתמשים בתמונה משלכם, הכניסו קובץ עם זכויות שימוש לתיקיית assets ורשמו את שמו בבריף.
3. פתחו את אפליקציית ChatGPT למחשב , התחברו ובחרו Codex מתפריט הממשקים. בשיחה חדשה בחרו תיקייה מקומית ובמידת הצורך את מצב Local . בחרו את landing-lab-work . לפני השליחה ודאו שמופיע שם התיקייה הנכון. שמות הכפתורים יכולים להשתנות בין גרסאות.
4. אשרו גישה לתיקיית התרגול בלבד. אם מופיעה בקשת פעולה מחוץ לתיקייה או העלאה לשירות חיצוני, חזרו לבריף. המסלול הזה משתמש בקובצי HTML ו־CSS מקומיים בלבד.
5. אם אתם משתמשים ב־CLI, פתחו Terminal או PowerShell בתוך תיקיית התרגול והריצו codex. אחרי ההתחברות תוכלו להדביק את אותם פרומפטים. אם הכלי עדיין לא מותקן, התקינו אותו לפי הוראות ההתקנה למערכת שלכם במדריך 15.

3שלב 3: מבקשים קודם מבנה, ואז בונים את הקבצים

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

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

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

Create a clean 4:3 editorial hero illustration for a beginner smartphone reel workshop. Show one angled smartphone with a generic video frame and a simple checklist card, over a matte sage and cream studio surface. Use dark forest green and a small warm amber accent. Keep the composition clear at small mobile sizes. No words, letters, real interface, logos, claims or watermarks. The image will sit beside a Hebrew headline added as live HTML.

בנה את העמוד לפי התכנית שאישרתי ולפי brief.txt. כתוב רק בתיקייה הנוכחית את index.html, styles.css, contact-demo.html ו־README.txt. השתמש בנכס מקומי מתיקיית assets רק אם הקובץ קיים.
בנה HTML סמנטי עם lang="he", dir="rtl" ו־viewport. השתמש בכותרת H1 אחת, פתיחה עם ההצעה והקהל, שלוש תועלות, שאלות נפוצות וכפתור פעולה אחד שחוזר בראש ובסוף ומוביל לאותו יעד.
כתוב CSS רספונסיבי. כוון ל־360, 390 ו־768 פיקסלים. הקפד על פוקוס גלוי, ניגודיות, מרווחים ותיאור חלופי לתמונה משמעותית. השאר כותרות ו־CTA כטקסט חי.
הכפתור ״לתיאום שיחה״ יוביל ל־contact-demo.html, שיסביר שזו הדגמת ניווט ללא שליחת נתונים ויכלול דרך חזרה. אין טופס, איסוף פרטים, אנליטיקה, שירות חיצוני או פריסה. הוסף noindex לדפי התרגול. אל תמציא מחיר, ביקורות או הבטחות.
בדוק שמות קבצים, קישורים יחסיים ויעד כפתור. ציין בסוף מה בדקת בפועל ומה נשאר לבדיקה ידנית. אל תטען שבדקת בדפדפן אם לא נפתחה תצוגה.

4שלב 4: פותחים את התוצאה ובודקים במובייל ובמקלדת

1. פתחו את index.html בלחיצה כפולה ב־Finder או בסייר הקבצים. בדוגמה כל הקבצים מקומיים, ולכן אפשר להתחיל בלי שרת. אם אתם רואים טקסט ללא עיצוב, בדקו ש־styles.css נמצא ליד index.html ושההפניה לקובץ יחסית.
2. אם צריכים תצוגת HTTP מקומית ויש Python מותקן, פתחו טרמינל בתיקייה והריצו את פקודת המערכת שלכם. אחרי ההפעלה פתחו בדפדפן http://127.0.0.1:8000/. לחצו Ctrl+C בחלון הטרמינל כדי לעצור. זה שרת בדיקה למחשב שלכם.

python3 -m http.server 8000 --bind 127.0.0.1

py -m http.server 8000 --bind 127.0.0.1

3. ב־Chrome לחצו לחיצה ימנית, בחרו Inspect ולחצו על האייקון של טלפון וטאבלט ב־DevTools. אפשר גם להפעיל Toggle device toolbar עם Ctrl+Shift+M ב־Windows או Cmd+Shift+M ב־Mac כשהכלים פתוחים. בחרו Responsive ובדקו רוחב 360, 390 ו־768 פיקסלים, ואז הרחיבו למסך מחשב.
4. בכל רוחב קראו את הכותרת, גללו עד הכפתור האחרון ובדקו שאין גלילה אופקית, טקסט שנחתך או תמונה שמכסה פעולה. בדקו גם בטלפון אמיתי אחרי שיש כתובת בדיקה נגישה ממכשיר אחר.
5. חזרו למסך רגיל. התחילו ב־Tab, המשיכו דרך הקישורים וה־FAQ ופתחו פעולה עם Enter. בדקו שאפשר לראות את הפוקוס ושסדר הניווט הגיוני גם בלי עכבר.
6. פתחו את שני כפתורי ״לתיאום שיחה״. הכתובת צריכה להסתיים ב־contact-demo.html. המסך אומר שהניווט הצליח ושלא נשלחה פנייה. לחצו ״חזרה לדף הנחיתה״ ובדקו שהחזרה פותחת את index.html.

ברוחב [רוחב בפיקסלים] ראיתי את הבעיה הבאה: [תארו מה נחתך, זז או נכשל].
בדוק קודם מה גורם לה ובאיזה רכיב וקובץ. תקן רק את הרכיב הזה. שמור את ההצעה, הכותרת ויעד הכפתור כפי שאושרו.
לאחר השינוי בדוק שוב 360, 390 ו־768 פיקסלים אם יש לך גישה לתצוגה. פרט אילו קבצים השתנו, מה בדקת בפועל ומה עליי לפתוח ידנית. אל תפרסם את הדף.

5שלב 5: מכינים מסירה או פרסום אחרי שמחליפים את פרטי הדמו

1. שכפלו את תיקיית העבודה ושמרו את העותק המקומי לתרגול. בגרסה שמיועדת לפרסום החליפו שם, הצעה, תמונות, כותרת מטא ותיאור. פתחו את הדף והשוו כל טענה למידע שהלקוח אישר.
2. החליפו את שני הקישורים לכתובת מאושרת אחת. בדקו דומיין, פרטים נכונים ותצוגה במובייל. אם עוברים לטופס, נדרש יעד קליטה אמיתי. בדקו קלט תקין וקלט חסר, תגובת שגיאה ואישור קבלה ביעד בפועל. העדיפו כפתור קישור כל עוד לא חיברתם יעד לטופס.
3. הכינו תיקיית פריסה שמכילה index.html, styles.css ואת assets. קובץ הבריף, קובצי בדיקה ו־contact-demo.html נשארים בתיקיית התרגול. הסירו noindex מגרסת העמוד שמיועדת להופיע בחיפוש, רק אחרי שאישרתם אותה לפרסום.
4. אם יש אחסון קיים, העבירו למפתח את תיקיית הפריסה ואת יעד הכפתור. לפריסה סטטית ב־GitHub Pages, השתמשו במאגר שאתם מורשים להעלות אליו קבצים. עברו ל־Settings → Pages → Build and deployment → Deploy from a branch, בחרו ענף ותיקיית שורש או /docs לפי מיקום הקבצים ושמרו. פתחו את הקישור שמופיע אחרי הפריסה. בדקו מי יכול לפתוח את העמוד. GitHub Pages עשוי לפרסם את העמוד לציבור גם אם מאגר הקוד פרטי. לתצוגה פרטית השתמשו בסביבת בדיקה עם בקרת גישה, או השאירו את הדף מקומי.
5. פתחו את הכתובת בלשונית פרטית ובטלפון. בדקו שעיצוב ותמונות נטענים, שכל כפתורי הפנייה מגיעים ליעד המאושר ושהעמוד המפורסם תואם למה שנבדק מקומית. רשמו כתובת, תאריך בדיקה ותוצאה.

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

6שלב 6: פותרים תקלות ומכינים גרסה נוספת

בונוסים לעבודה הבאה

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