איך בונים דף נחיתה ב־WordPress וב־Elementor בעזרת Claude או Codex

התוצאה בתרגיל

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

תרגיל · סטודיו מדף

החנות צריכה תיקונים שחוזרים שוב ושוב?

מתחילים בשיחת היכרות על תחזוקת WooCommerce.

לשלבי הפנייה והטופס

הורדת ערכת התרגול · ZIP

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

1שלב 1: בוחרים מסלול ומכינים סביבת עבודה

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

• צריך אתר WordPress עם Elementor פעיל, משתמש שמורשה ליצור ולערוך עמודים, תמונות מורשות ויעד פנייה בשליטתכם. אם התוסף חסר, מנהל מורשה יכול להוסיף אותו דרך Plugins → Add New Plugin, לחפש Elementor Website Builder, לבחור Install Now ואז Activate.
• בנו באתר staging המוגן מפני גולשים או בעמוד חדש במצב טיוטה. מסך תצוגה מקדימה של טיוטה עשוי לדרוש התחברות. עבור בדיקה ללא התחברות השתמשו בעמוד שפורסם בתוך סביבת staging מוגנת או בעמוד שכבר אושר לפרסום.
• אפשר להכין את הבריף ב־Claude או ב־ChatGPT בשיחה רגילה. מי שעובד ב־Claude Code או Codex יכול לפתוח את תיקיית התרגול ולבקש לכתוב קובצי טקסט מקומיים. למסלול הזה אין צורך לתת לכלי הרשאה לאתר, להתקין MCP או למסור סיסמה.

2שלב 2: מקבלים מה־AI בריף שאפשר לבנות ממנו

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

הכינו בריף לדף נחיתה אחד בעברית, RTL, שנבנה ידנית בווידג׳טים של Elementor.
עסק: סטודיו מדף (דוגמה דמיונית).
קהל: בעלי חנויות WooCommerce עם משימות תחזוקה חוזרות.
הצעה: שיחת היכרות על תחזוקה וסדרי עדיפויות.
פרטים מאושרים: בשיחה אפשר לעבור על תקלות עגלה, עדכוני קטלוג ותהליך תחזוקה. דרך הקשר נקבעת על ידי העסק.
לא ידוע: מחיר, משך השיחה, זמני תגובה, המלצות, מדיניות או זמינות.
פעולה ראשית: ״לתיאום שיחת היכרות״, יעד #lead.
החזירו מפת עמוד בת ארבעה אזורים: פתיחה, שלוש תועלות, שלוש שאלות נפוצות, ואזור פנייה. לכל אזור תנו שם Container, רשימת Widgets, תג כותרת H1/H2/H3 אם צריך, מלל מלא להעתקה והערת מובייל. צרו H1 אחד בלבד. ליעד הפנייה תנו מסלול Elementor Free עם כפתור קיים ומסלול Elementor Pro עם Form. סמנו פרטים חסרים ״לאישור העסק״. אל תייצרו PHP, קובץ Elementor JSON, צילומי מסך מזויפים או עדויות. אל תיגשו לאתר ואל תפרסמו.

קופי מוכן לתרגיל

3שלב 3: בונים את הדף בווידג׳טים של Elementor

1. ב־WP Admin פתחו Pages → Add New Page. הזינו ״שיחת היכרות לתחזוקת חנות״ ולחצו Save draft. פתחו Edit with Elementor. אם הכפתור לא מופיע, בדקו ש־Elementor פעיל, שסוג התוכן Pages מופעל בהגדרותיו ושהמשתמש מורשה לערוך.
2. לחצו על Page Settings בסרגל העליון. בממשק הישן לחצו על גלגל השיניים בתחתית פאנל העריכה. ב־Page Layout בחרו Elementor Canvas אם רוצים עמוד בלי הכותרת והתחתית של התבנית. אם רוצים לשמור את שתיהן, בחרו Elementor Full Width או השאירו Default לפי התבנית. שמרו בעמוד עצמו כל קישור תפעולי חיוני אם הורדתם את התחתית.
3. לחצו +, בחרו Flexbox אם מוצגת בחירת פריסה, ובחרו מבנה של טור אחד. ב־Layout הגדירו Direction → Column ו־Content Width → Boxed אם קיים. ערכי פתיחה סבירים לתרגיל הם רוחב מרבי 1,120 פיקסלים, ריווח פנימי 32–48 פיקסלים במחשב ו־16–24 בנייד. השתמשו ב־Structure כדי לבחור את ה־Container עצמו ולתת לו שם תיאורי.
4. גררו ל־Container הראשון Heading, Text Editor, ו־Button. ב־Heading הגדירו HTML Tag → H1. ב־Button שימו את ״לתיאום שיחת היכרות״ והזינו בשדה Link את #lead. אם הוספתם Image, מלאו טקסט חלופי בספריית המדיה לתמונה שמעבירה מידע.
5. הוסיפו Container לתועלות ואחד לשאלות. כל אזור מקבל Heading בתג H2. לשאלות אפשר להתחיל מ־Heading בתג H3 ואחריו Text Editor. השתמשו בטקסט שכבר אושר. בדקו שאין כותרת נוספת בתג H1 שמגיעה מהתבנית או מכותרת העמוד המובנית.
6. הוסיפו Container לפנייה. ב־Advanced → CSS ID הזינו lead בלי סולמית. שדה Link בכפתור נשאר #lead. הציבו את הכותרת והערוץ שבחרתם בשלב 1. בממשק V4 אם לחיצה מציגה הגדרות שונות, בחרו את רכיב ה־Container או הווידג׳ט הקלאסי לפי השם והימנעו מעריכת סגנון גלובלי בטעות.
7. בסרגל העליון לחצו על אפשרויות השמירה ליד Publish → Save Draft ושמרו. בחלק מהגרסאות תפריט השמירה נמצא ליד הכפתור בתחתית פאנל העריכה. לחצו על אייקון Preview ונסו את כפתור הניווט. אם העוגן נגלל מתחת ל־Header דביק, בדקו את גובה הכותרת והוסיפו מרווח במיקום מתאים.

קחו את הקופי המאושר הבא: [הדביקו כאן]. כתבו לי רצף קליקים לבנייה ידנית באלמנטור. לכל אזור ציינו את שם ה־Container, הווידג׳טים וסדרם, התג לכותרת והטקסט המדויק לשדה. הציעו ערכי רוחב, ריווח וגודל טקסט נפרדים למחשב ולנייד כנקודת התחלה. הגדירו CSS ID בשם lead בלי # ואת כתובת הכפתור כ־#lead. הוסיפו בדיקה ידנית של עוגן, מקלדת, RTL וכותרות. אל תכתבו קוד להדבקה בעורך. אם שם שדה שונה בין גרסאות, ציינו מה לחפש ולא מה ללחוץ באופן גורף.

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

במסלול הכפתור

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

במסלול Form של Elementor Pro

1. לחצו + וגררו Form לאזור הפנייה. בלשונית Content → Form Fields בחרו שם לטופס. השאירו שני שדות. לשם בחרו Text, לאימייל בחרו Email. תנו להם תוויות ברורות, הפעילו Required, והסירו את שדה Message אם לא נדרש. בכפתור כתבו ״שליחת בקשה לשיחת היכרות״.
2. פתחו Actions After Submit ובדקו שמופיעים Email ו־Collect Submissions אם העסק בחר לשמור רשומות ומורשה לכך. ב־Email → To הזינו תיבת יעד אמיתית ומורשית. ב־From Email השתמשו בכתובת שולח שאושרה לשירות הדיוור של האתר. אם ההגדרה מאפשרת, הגדירו את אימייל המבקר ב־Reply-To. אל תשימו את אימייל המבקר בשדה השולח. השאירו [all-fields] בהודעה אם שני השדות נדרשים ונכון להעבירם במייל.
3. ב־Additional Options → Custom Messages הגדירו הודעה שמופיעה אחרי הצלחה, למשל ״הבקשה נקלטה. אפשר לסגור את העמוד.״ אם רוצים דף תודה, הוסיפו Redirect ב־Actions After Submit ורק אז הגדירו את כתובת התודה המלאה ב־Redirect → Redirect To. השאירו Email וקליטת הרשומה לפי הבחירה שלכם. בחרו הודעה בדף או מעבר לדף תודה לפי החוויה הרצויה, ובדקו מה מוצג בפועל.
4. בצעו בדיקה שלילית. השאירו אימייל ריק ואז נסו אימייל במבנה לא תקין. צפו בשגיאה וודאו שלא נשלח אימייל ולא נוצרה רשומה. אחר כך שלחו פנייה אחת תקינה עם שם ״בדיקה 22״ ואימייל בדיקה שבשליטתכם.
5. ב־WP Admin עברו אל Elementor → Submissions אם הפעלתם איסוף. בדקו שהשם, האימייל וזמן השליחה נכונים. בדקו בתיבת היעד ובספאם שההודעה הגיעה בפועל. אם בחרתם Redirect, בדקו שבדיקה שלילית לא פתחה דף תודה ושהכתובת הנכונה נפתחה רק בעקבות שליחה תקינה. תעדו איזו בדיקה נכשלה לפני שינוי נוסף.

כתבו טבלת QA לדף Elementor. מסלול: [כפתור / Form Pro / תוסף מאושר]. יעד פנייה: [כתובת או שם מערכת ללא פרטים אישיים]. שדות חובה: [שם ואימייל]. האם מופעלים Email, Collect Submissions ו־Redirect: [כן/לא לכל אחד]. לכל שורה תנו קלט, פעולה, פלט צפוי בדפדפן, בדיקת יעד אמיתי וראיה. כללו אימייל ריק, אימייל שגוי, שליחה תקינה אחת, לחיצה כפולה, טלפון נייד ומצב מנותק. הבדילו בין טעינת עמוד תודה לבין מסירת מייל או רשומה בפועל. אל תסמנו בדיקה כהצלחה בלי ראיה שהוגדרה.

5שלב 5: בודקים מובייל ועוברים לפרסום רק אחרי אישור

1. בסרגל Elementor לחצו Responsive views ובחרו Tablet ואז Mobile. בממשק הישן חפשו Responsive Mode. סמנו את ה־Container של הפתיחה והגדירו במובייל Column אם הוא מוצג בשורה. בכפתור ודאו שאין חיתוך טקסט, וב־Advanced בדקו Padding ו־Margin במצב מובייל. תצוגת Elementor היא כלי עבודה. בדקו גם את הדף בדפדפן ואת הטלפון בפועל.
2. פתחו Preview ובדקו רוחבים 360 ו־390 פיקסלים, טאבלט ומחשב. חפשו גלילה לרוחב, בדקו שעברית מיושרת היטב ושמספרים, אימיילים או שמות באנגלית קריאים. עברו עם Tab על הכפתורים והשדות ועם Enter על הפעולות. ודאו שהפוקוס גלוי. אם הדף נשאר LTR, בדקו את שפת האתר ב־Settings → General → Site Language עם מנהל האתר. שינוי השפה משפיע על האתר כולו, ולכן לא משנים אותה רק בשביל עמוד אחד באתר קיים.
3. בצעו בדיקות פנייה בתצוגה אמיתית. אחרי אישור הקופי והטופס, ורק באישור פרסום מתאים, לחצו Publish. פתחו את הכתובת שנוצרה בחלון פרטי ללא התחברות. בדקו HTTPS, כותרת, עוגן וקליטה מחדש. אם העמוד כבר היה פומבי, Update יכול לשנות מיד את הגרסה החיה.
4. שמרו צילומי מסך ללא נתונים מזהים, זמן ומזהה שליחת בדיקה, שם הטופס, שם מי שאישר וקישור לעמוד. אם משהו נשבר, פתחו את History → Revisions אם זמין או היעזרו בגיבוי staging/אחסון. תיעוד וורדפרס או Elementor משחזר את חלקי העמוד הנתמכים, ולכן בדקו מחדש הגדרות טופס ומסירה אחרי שחזור.

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

6שלב 6: מסלול מתקדם אופציונלי · חיבור Elementor MCP

Elementor MCP מיועד למי שרוצה לתת ל־Claude Code, Claude Desktop או Codex לעבוד ישירות עם רכיבים מקוריים. מדריך החיבור של Elementor מציין WordPress 6.8 ומעלה ו־Elementor Core ו־Pro בגרסה 4.3.0 ומעלה. עמוד המוצר מציג גם בסיס חינמי, ופונקציות Pro תלויות ברישיון. הזכאות נקבעת לפי מה שמופיע בהתקנה ובמסך החיבור. אם האפשרות חסרה, אפשר להשלים את כל המדריך במסלול הידני.

1. התחילו רק ב־staging, עם גיבוי וחשבון WordPress ייעודי בעל הרשאות מינימליות. בדקו ידנית מה החשבון באמת מורשה לערוך. מנהל האתר מאשר את ההפעלה. אל תתנו לחשבון שירות הרשאות ניהול מלאות רק כדי לפתור שגיאה.
2. מתוך WP Admin פתחו Elementor → Elementor MCP או Elementor → Editor → Elementor MCP אם כך מופיע אצלכם. בחרו Enable MCP access, עברו ללשונית Claude Code, Claude Desktop או Codex, וקראו את הודעת ההרשאות. בחרו Generate Prompt רק אם אישרתם ליצור Application Password. לחצו Copy prompt והדביקו את ההנחיה שנוצרה בהתקנה המאושרת של הכלי שבחרתם. הסוד מיועד רק לחיבור הזה. אל תשלחו אותו במייל, אל תכניסו אותו לפרומפט תוכן, ואל תשמרו אותו בקובץ השייך לאתר.
3. אחרי החיבור בקשו תחילה בדיקה לקריאה בלבד של דף התרגול. כשהכלי מציג את היעד הנכון, השתמשו בפרומפט למטה. פתחו את הטיוטה בעורך, בדקו ב־Structure שכל רכיב ניתן לעריכה והמשיכו לבדיקות הפנייה כמו במסלול הידני. את הגדרות הדיוור והיעד הזינו ידנית.
4. כשהתרגיל הסתיים, בטלו את הסיסמה הייעודית ב־Users → Profile → Application Passwords → Revoke. כיבוי כל ה־MCP בהגדרות משפיע על החיבורים באתר כולו ונעשה רק בהסכמת מנהל האתר.

עבדו רק באתר staging שהוגדר בחיבור ובחשבון בעל ההרשאות הנוכחיות. לפני שינוי, ציינו את כתובת ה־staging, עמוד המטרה והפעולה. אם אחד מהם לא מתאים, עצרו. צרו עמוד טיוטה חדש בשם ״תרגול 22 - שיחת היכרות״ מרכיבי Elementor מקוריים בלבד. הוסיפו Containers עבור פתיחה, תועלות, FAQ ופנייה, H1 אחד, ושלבו את הקופי המאושר המצורף: [קופי]. הגדירו עוגן lead וכפתור #lead. השאירו את אזור הטופס כהכנה ברורה, בלי לשלוח מייל, לחבר מערכת או לשנות הגדרות. אל תגעו בכותרות גלובליות או בתבניות, אל תפרסמו, והחזירו קישור לעריכה ורשימת רכיבים לבדיקה.