המדריך המלא לשימוש באלמנטור
מעריכת העמוד הראשון ועד לתפריטים ובונה התבנית — מדריך עבודה מעשי, עם קפיצה מהירה לכל פעולה.
מאת יאיר קורן — עושים סדר באלמנטור, כדי שלא נצטרך לפתור כל ריב עם כפתור באמצעות עוד ספייסר.
24 פרקים · כ־35 דקות קריאה · עודכן ב־3 בנובמבר 2026
אלמנטור פתוח, יש קונטיינר על המסך, ועכשיו מה? המדריך הזה מתחיל בדיוק שם. בלי התקנות ובלי סיור ארכיאולוגי בתיקיית התוספים: נלמד לערוך תוכן, לבנות פריסה, להגדיר עמוד, להתאים לנייד ולחבר את החלקים שחוזרים באתר — Header, תפריט, Footer ותבניות פוסטים.
אפשר לקרוא לפי הסדר ואפשר להשתמש במדריך כספר עזרה פתוח ליד העורך. לאורך הדרך נבנה דוגמה של אתר לנותנת שירות בשם דנה: אזור פתיחה, שלושה שירותים, אודות, המלצות ויצירת קשר. השם והעסק הם דוגמה לתרגול. את האתר שלכם לא צריך להפוך לדנה כדי שההסברים יעבדו.
לפני שמתחילים: תרגלו בעמוד טיוטה או בסביבת בדיקה. שינוי של תוכן בעמוד אחד ושינוי בתבנית שמופיעה בכל האתר הם פעולות שונות. במיוחד כשעובדים על Header, הגדרות אתר או מחלקה משותפת, בודקים קודם מה מושפע.
המדריך מתייחס גם לווידג׳טים הקלאסיים וגם לאלמנטים האטומיים. שמות הכפתורים, מיקומם והתרגום עשויים להשתנות לפי הגרסה והשפה. הבנייה הבסיסית זמינה בחינם; בפרקים על Theme Builder, תוכן דינמי, טפסים ופופאפים נסמן כשנדרש Elementor Pro ורישיון הכולל את היכולת. לא כל חבילת Pro כוללת כל תכונה.
רק באתם לסדר משהו?
החלפת תמונה · ריווח ויישור · הגדרות עמוד · תיקון מובייל · עריכת תפריט · שחזור גרסה · פתרון תקלות
1. נכנסים לעריכה ומבינים מה פתחנו
פתיחת עמוד קיים או טיוטה חדשה · בודקים את שם המסמך לפני שמזיזים משהו
פתיחת עמוד קיים או טיוטה חדשה
בלוח הבקרה של וורדפרס היכנסו לעמודים ובחרו את העמוד המבוקש. לחצו על עריכה באמצעות אלמנטור. בפוסט עובדים דרך פוסטים באותה דרך, אם עריכת סוג התוכן הזה מופעלת באלמנטור. כשמחוברים לוורדפרס וגולשים באתר, ייתכן שיופיע אותו קיצור גם בסרגל הניהול העליון.
לתרגול חדש פתחו עמוד, תנו לו שם ברור כמו ״תרגול — עמוד השירותים של דנה״, שמרו טיוטה ופתחו באלמנטור. שם העמוד בוורדפרס אינו חייב להיות הכותרת המעוצבת שמוצגת בתוכן. על ההפרדה הזו נחזור בפרק הגדרות העמוד.
בודקים את שם המסמך לפני שמזיזים משהו
הביטו בשם שמופיע בסרגל העליון. האם אתם עורכים עמוד, פוסט, Header או תבנית? אם לחצתם על אזור האתר העליון ועברתם לעריכת Header, שינוי הלוגו עשוי להתעדכן בעמודים רבים. זאת לא דרך מסתורית שבה התמונה ברחה; פשוט ערכתם מסמך אחר.
- פתחו את עמוד התרגול באלמנטור.
- ודאו שהשם הנכון מופיע למעלה.
- הוסיפו כותרת זמנית ושמרו טיוטה.
- פתחו תצוגה מקדימה וודאו שהגעתם לעמוד הנכון.
איך יודעים שהצלחנו? אפשר לזהות את המסמך לפי שמו ואת השינוי לפי התוכן. כשעובדים עם כמה לשוניות, הימנעו מעריכה בו־זמנית של אותו מסמך בשתיים מהן; לשונית ישנה עלולה לשמור גרסה שלא התכוונתם להחזיר.
2. מכירים את סביבת העבודה
שלושת האזורים שעל המסך · בוחרים לפני שמשנים
סביבת העבודה: סרגל עליון, חלונית האלמנטים ואזור התצוגה. צילום מהעורך באתר שלנו.
שלושת האזורים שעל המסך
הסרגל העליון מרכז כלים כמו הוספת אלמנט, הגדרות מסמך, מצב מכשיר, מבנה, היסטוריה, תצוגה מקדימה ושמירה. החלונית הצדדית מציגה את ספריית הרכיבים או את ההגדרות של הפריט שנבחר. אזור התצוגה, המכונה Canvas, מציג את העמוד שעליו עובדים. הוא אינו זהה לאפשרות פריסת העמוד ״Elementor Canvas״ — אותו שם, שתי משמעויות. תודה למחלקת השמות.
בוחרים לפני שמשנים
לחצו על רכיב כדי לבחור אותו. בדקו שכותרת חלונית העריכה מתאימה: כותרת, תמונה, כפתור או קונטיינר. אם רציתם לשנות את הרקע של כל אזור הפתיחה אבל בחרתם את הכותרת, שינוי הרקע יפגע רק בכותרת. השתמשו בידית של הקונטיינר או בחלונית המבנה כדי לעלות לרכיב ההורה.
- בחרו כותרת וערכו מילה אחת.
- בחרו את הקונטיינר שמכיל אותה והחליפו זמנית את צבע הרקע.
- השוו: שינוי אחד שייך לתוכן, והשני לאזור שמסביבו.
- בטלו את השינוי הניסיוני שאינכם רוצים לשמור.
אפשר להסתיר את חלונית העריכה כדי לראות יותר מהעמוד. זה אינו מוחק את ההגדרות. חפשו גם את סמל התצוגה המקדימה: הוא מאפשר לבדוק את העמוד בלי ידיות, מסגרות והפרעות של העורך. כפתור השמירה עשוי להיקרא ״פרסם״, ״עדכן״ או בשם אחר לפי מצב המסמך והגרסה; בדקו את אפשרויות השמירה לפני הלחיצה.
3. מבינים ממה העמוד בנוי
תוכן בתוך פריסה · מבנה מומלץ לאזור הפתיחה של דנה
תוכן בתוך פריסה
דמיינו את העמוד כארון: הקונטיינרים הם התאים, והטקסטים, התמונות והכפתורים הם הדברים שמכניסים לתוכם. כותרת אינה אמורה לקבוע את כל פריסת האתר; הקונטיינר שסביבה מסדר את הרכיבים ביחס זה לזה. אפשר לקנן קונטיינר בתוך אחר, למשל כדי להחזיק יחד טקסט וכפתורים ליד תמונה.
באתרים ותיקים עשויים להופיע Sections ועמודות. זהו מבנה עריכה קודם: אזור מחולק לעמודות ובתוכן הווידג׳טים. בעבודה עם Containers הפריסה גמישה יותר והקינון עובד אחרת. אל תחפשו עמודה בתוך כל קונטיינר; לפעמים אין אחת, וזה דווקא סימן שהכול בסדר.
מבנה מומלץ לאזור הפתיחה של דנה
- קונטיינר חיצוני: הרקע והריווח מסביב לאזור.
- קונטיינר פנימי: מגביל את רוחב התוכן ומסדר שני חלקים.
- חלק טקסט: כותרת, פסקת הסבר ושורת כפתורים.
- חלק תמונה: צילום מתאים עם גודל וחיתוך מוגדרים.
הורה וילד: אם הקונטיינר הפנימי מסודר אופקית, הוא מנהל את מיקום חלק הטקסט מול חלק התמונה. הוא אינו מסדר בהכרח את הכותרת מול הכפתור שבתוך חלק הטקסט; זה תפקיד הקונטיינר הפנימי יותר.
תרגול: פתחו את המבנה והצביעו על ההורה של הכפתור. אחר כך מצאו את ההורה של אותו הורה. הבנת השרשרת הזו תחסוך ניסיונות להזיז את כל הבניין באמצעות ידית הדלת.
4. קונטיינר, Flexbox, Grid ו־Div Block
בוחרים פריסה לפי מה שרוצים לסדר · תרגיל Flexbox: שני כפתורים באותה שורה · תרגיל Grid: כרטיסי שירותים
בוחרים פריסה לפי מה שרוצים לסדר
המילה ״קונטיינר״ מתארת כלי קיבול. Flexbox ו־Grid הם דרכי פריסה, לא סוגי תוכן כמו תמונה או כותרת. Div Block הוא אלמנט עטיפה במערכת האטומית שאפשר להגדיר לו תצוגה וסגנון. הוא לא חייב לייצר סידור אופקי מעצמו.
הכלי
מתאים במיוחד ל־
דוגמה באתר של דנה
Flexbox
סידור בעיקר לאורך ציר אחד, עם אפשרות גלישה לשורות
שני כפתורים בשורה, או טקסט ליד תמונה
Grid
שליטה משותפת בעמודות ובשורות
רשת של שישה שירותים או גלריה מסודרת
Div Block
עטיפה וקיבוץ עם שליטה בסגנון ובתצוגה
תיבת טיפ או מעטפת תוכן בתוך כרטיס
אזור ועמודות ישנים
תחזוקת עמוד שכבר בנוי בשיטה הקודמת
שינוי תוכן באתר ותיק בלי לבנותו מחדש
תרגיל Flexbox: שני כפתורים באותה שורה
- הוסיפו קונטיינר בתוך אזור הטקסט.
- הגדירו כיוון אופקי, Row, והכניסו אליו שני כפתורים.
- הגדירו Gap לרווח ביניהם, למשל 16px כנקודת התחלה.
- בנייד בדקו אם עדיף כיוון אנכי, Column, כדי שכל כפתור יקבל מקום.
תרגיל Grid: כרטיסי שירותים
צרו פריסת Grid, הגדירו שלוש עמודות בדסקטופ והוסיפו כרטיס לכל שירות. עברו לנייד ושנו לעמודה אחת אם זה משרת את הקריאות. אל תתנו לכל כרטיס רוחב קשיח של 400px ואז תבקשו משלושה כאלה להיכנס למסך של טלפון. המסך לא מתרשם מביטחון עצמי.
איך בודקים? הוסיפו משפט לכרטיס אחד. הפריסה צריכה להישאר יציבה גם כשהתוכן אינו באורך זהה. הסבר רשמי על Grid האטומי.
5. ווידג׳טים קלאסיים מול אלמנטים אטומיים
למה יש שתי כותרות בשם דומה? · איך עובדים באתר שמשלב את שניהם?
למה יש שתי כותרות בשם דומה?
במערכת הקלאסית כל ווידג׳ט מגיע עם סט אפשרויות משלו. לרוב תראו לשוניות כמו תוכן, סגנון ומתקדם; לקונטיינר יש גם פריסה. במערכת האטומית הסגנון מאורגן בצורה אחידה יותר, עם אפשרויות כמו Layout, טיפוגרפיה, מחלקות ומשתנים. שמות הלשוניות עשויים להיות כלליים, סגנון ואינטראקציות.
חפשו את קבוצת האלמנטים האטומיים בספריית הרכיבים ואת סמל הסוג. אם בחרתם כותרת והמסך אינו תואם להדגמה, בדקו קודם את סוג האלמנט. אין צורך להאשים את העדכון האחרון לפני בדיקת החשוד הראשי.
איך עובדים באתר שמשלב את שניהם?
אפשר לשלב רכיבים משתי המערכות. עדכון אלמנטור אינו הופך בהכרח את כל הווידג׳טים הישנים לאטומיים. בעמוד קיים עובדים קודם עם מה שיש. בקטע חדש בוחרים גישה מתאימה, ושומרים על עקביות בתוך אותו אזור ככל האפשר.
- הוסיפו בטיוטה כותרת קלאסית וכותרת אטומית.
- כתבו בשתיהן את אותו טקסט.
- מצאו בכל אחת את גודל הגופן, התגית והריווח.
- בחרו אחת לתרגול ומחקו את ההדגמה המיותרת.
הבחנה חשובה: מחיקת כותרת והוספת כותרת חדשה אינה ״המרה״ שמשמרת אוטומטית קישורים, אנימציות, תנאים וסגנונות. בהחלפה מתוכננת בודקים כל הגדרה רלוונטית. במדריך הזה נציין את הכוונה ואת שם ההגדרה, ולא נניח שכל מסך באתר שלכם נראה בדיוק אותו דבר. עבודה משולבת במערכת החדשה.
6. חלונית המבנה: ה־GPS של העמוד
מוצאים רכיבים גם כשהם מסתתרים · סידור, שכפול והסתרה בעורך
חלונית המבנה מציגה את הקינון ומאפשרת לבחור רכיבים לפי שם.
מוצאים רכיבים גם כשהם מסתתרים
לחצו על מבנה / Structure בסרגל העליון. אפשר לפתוח את החלונית גם דרך לחיצה ימנית על אלמנט; בחלק מהסביבות זמין הקיצור Ctrl+I או Cmd+I. החלונית מציגה עץ: פותחים קונטיינר ורואים את הילדים שלו. לחיצה על שם רכיב בוחרת אותו ומאפשרת להגיע להגדרותיו.
- פתחו את קונטיינר אזור הפתיחה בעץ.
- בחרו את התמונה דרך הרשימה במקום לנסות לפגוע בידית שעל המסך.
- לחצו פעמיים על שם הרכיב ותנו לו שם כמו ״תמונת דנה — אזור פתיחה״.
- שנו גם שמות של קונטיינרים: ״שירותים״, ״כרטיס ייעוץ״, ״כפתורי יצירת קשר״.
סידור, שכפול והסתרה בעורך
אפשר לגרור רכיב בתוך העץ כדי לשנות מיקום. הסתכלו היטב על סימון ההכנסה: גרירה לתוך קונטיינר שונה מהנחה לידו. אם כל הטקסט פתאום הפך לצר, ייתכן שהעברתם אותו להורה אחר. בטלו את הפעולה ובדקו שוב את הקינון.
לחיצה ימנית מאפשרת פעולות כמו שכפול, העתקה ומחיקה. סמל העין בחלונית המבנה עשוי להסתיר אלמנט רק לצורך העבודה בעורך. אל תשתמשו בו כהוכחה לכך שהרכיב הוסתר לגולשים בנייד; להסתרה רספונסיבית יש הגדרות נפרדות.
טיפ: ״קונטיינר 17״ הוא שם שמשרת בעיקר את קונטיינר 17. שמות לפי תפקיד הופכים גם מסמך גדול לניתן לעריכה. תיעוד חלונית המבנה.
7. תוכן, סגנון ומתקדם: איפה משנים מה?
אותה פעולה, שלושה סוגי החלטות · אם אינכם מוצאים הגדרה
אותה פעולה, שלושה סוגי החלטות
ניקח את הכפתור ״בואו נדבר״. התוכן הוא הטקסט והיעד שלו. הסגנון הוא המראה: צבע, גופן, מסגרת, צל ורקע. המיקום וההתנהגות כוללים ריווח חיצוני, התאמה למסך, Position או אפקטים, בהתאם לרכיב. במערכת האטומית חלק גדול מהשליטה החזותית מרוכז בלשונית הסגנון המשותפת.
- בחרו את הכפתור ושנו את הכיתוב ל״לתיאום שיחת היכרות״.
- הגדירו יעד מתאים בשדה Link. זו פעולה נפרדת משינוי הטקסט.
- בחרו צבע רקע וצבע טקסט בעלי ניגודיות ברורה.
- הגדירו Padding בתוך הכפתור כדי להגדיל את שטח הלחיצה.
- בדקו מצב Hover, ואם זמין גם Focus, בלי לשנות את מידות הכפתור בצורה שמקפיצה את הפריסה.
אם אינכם מוצאים הגדרה
בדקו את הרכיב שנבחר, את סוגו ואת התצוגה הפעילה. לפעמים ההגדרה שייכת להורה: סידור שני כפתורים באמצע אזור מתבצע בקונטיינר שמחזיק אותם. לפעמים הסגנון מגיע ממחלקה או מהגדרה גלובלית. הוספת ערכים בעוד חמישה מקומות לא בהכרח תפתור את זה; היא כן תספק תעסוקה ליום שישי.
בדיקת הצלחה: פתחו תצוגה מקדימה, הפעילו את הכפתור ובדקו את היעד. כפתור יפה שמוביל לעמוד הלא נכון הוא עדיין שירות לקוחות יצירתי מדי.
8. כותרות וטקסטים: עיצוב שאפשר לקרוא
כותרת ראשית, כותרות משנה וטקסט רגיל · עורכים פסקה בלי להביא איתה את Word · עברית עם מילים באנגלית
כותרת ראשית, כותרות משנה וטקסט רגיל
הוסיפו Heading לכותרת ופסקה או Text Editor לטקסט. בכותרת בחרו גם תגית: H1 לכותרת הראשית של העמוד, H2 לפרקים ו־H3 לתת־פרקים. גודל הגופן והתגית אינם אותו דבר. אפשר לעצב H2 קטן מ־H3 בלי לשנות את התפקיד המבני, אבל עדיף שהמראה וההיררכיה יעזרו זה לזה.
ודאו שאין שתי כותרות ראשיות בגלל שילוב של כותרת אוטומטית מהתבנית וכותרת שהוספתם בעורך. הסתרת הכותרת האוטומטית מוסברת בפרק 13. אל תבחרו H1 לכל משפט רק משום שהוא יוצא גדול. גם כותרות צריכות תור לדבר.
עורכים פסקה בלי להביא איתה את Word
- הוסיפו פסקה קצרה מתחת לכותרת: מה דנה מציעה ולמי.
- בהדבקה ממקור חיצוני השתמשו בהדבקה ללא עיצוב כשאפשר, ואז עצבו באתר.
- הגדירו משפחת גופן, גודל, משקל וגובה שורה. התחילו בערך שמתאים לטקסט הגוף באתר.
- השתמשו ברשימה אמיתית לשלבים או לנקודות, במקום להקליד רווחים ומקפים לצורך יישור.
- סמנו ביטוי והוסיפו קישור עם טקסט שמסביר לאן מגיעים.
עברית עם מילים באנגלית
בדקו משפטים שמשלבים כתובת, מספר טלפון או מונח כמו Elementor. אל תפתרו כיווניות עם עשרות רווחים. הגדירו RTL לאזור העברי, וטפלו בשדה או בשורה האנגלית בנפרד כאשר נדרש. בנייד בדקו שהפסקה נוחה לקריאה ושכותרות לא נשברות למילה אחת בשורה.
תרגול: כתבו כותרת של עד שתי שורות ופסקה שמסבירה את התועלת. אם צריך להתאמץ כדי למצוא את המסר, קצצו לפני שמקטינים את הגופן.
9. תמונות, רקעים ווידאו
תמונה רגילה או תמונת רקע? · איך להבין את אפשרויות החיתוך · וידאו בלי להכביד על העמוד
תמונה רגילה או תמונת רקע?
אלמנט תמונה מתאים לתוכן שהגולש אמור לראות ולהבין: צילום של דנה, דוגמת עבודה או צילום מסך. אפשר לבחור קובץ, גודל תצוגה, חיתוך וקישור בהתאם לרכיב. תמונת רקע שייכת לאזור שמכיל תוכן אחר, למשל צילום או טקסטורה מאחורי הכותרת. היא אינה תחליף טוב לצילום מסך שחייבים לקרוא.
- הוסיפו רכיב תמונה ופתחו את ספריית המדיה.
- בחרו צילום שמתאים להקשר, וכתבו בספריית המדיה תיאור חלופי ענייני. לתמונה דקורטיבית בלבד עשוי להתאים תיאור ריק.
- הגדירו רוחב שמתאים לקונטיינר. כשהמטרה לשמור על כל התמונה, השאירו את הגובה אוטומטי.
- אם צריך יחס קבוע לכרטיסים, הגדירו יחס או מידות מתאימות ו־Object Fit: Cover כשזמין; בדקו מה נחתך.
- עברו לנייד וודאו שהפנים או המידע החשוב נשארו בתוך הפריים.
איך להבין את אפשרויות החיתוך
Cover ממלא את השטח ויכול לחתוך קצוות. Contain שומר על התמונה כולה ויכול להשאיר שטח פנוי. Position קובע איזה חלק נשאר במרכז החיתוך. שינוי ״גודל תמונה״ כמו Large או Full משפיע גם על הקובץ שנטען; הוא אינו תמיד מגדיר את הרוחב בעיצוב.
לתמונת רקע בחרו את הקונטיינר, פתחו את אזור הרקע ובחרו תמונה. הוסיפו שכבת צבע אם צריך ניגודיות לטקסט. בנייד אפשר להזדקק למיקום או לתמונה שונים. רקע יפה שמעלים את הכותרת הוא פוסטר, לא אזור פתיחה שימושי.
וידאו בלי להכביד על העמוד
הוסיפו ווידג׳ט וידאו והדביקו כתובת נתמכת, או בחרו קובץ אם האפשרות זמינה. בדקו יחס תצוגה, כתוביות, תמונת שער והפעלת ניגון. אל תפעילו אוטומטית סרטון עם קול. העדיפו קבצים במידות המתאימות לשימוש; תמונה ענקית שמוצגת כאייקון קטן אינה סימן להשקעה, אלא למסלול משלוחים מיותר לדפדפן.
10. כפתורים, אייקונים וקישורים
מגדירים פעולה לפני צבע · יוצרים עוגן ליצירת קשר · אייקונים ומצבי כפתור
מגדירים פעולה לפני צבע
כפתור צריך להסביר מה יקרה בלחיצה: ״לתיאום שיחה״, ״להורדת המדריך״ או ״לצפייה בשירותים״. ״לחצו כאן״ משאיר את הקורא לעבוד בתור בלש. בחרו את הרכיב, הזינו את הטקסט והגדירו יעד בשדה הקישור. כשהפעולה היא מעבר לכתובת, מתאים קישור; פעולה בתוך העמוד יכולה להצריך כפתור אמיתי.
סוג פעולה
דוגמת יעד
מה בודקים
מעבר לעמוד
כתובת העמוד המלאה
כתובת נכונה ועמוד שפורסם
שיחת טלפון
tel:+972544711011
המספר בפורמט מתאים וללא תווים מיותרים
פתיחת דוא״ל
mailto:hello@example.com
כתובת היעד; מחליפים את כתובת הדוגמה
פתיחת וואטסאפ
https://wa.me/972544711011
מספר בינלאומי ללא פלוס; לא לבלבל עם קישור לקבוצה
קפיצה בתוך העמוד
#contact
מזהה contact קיים פעם אחת בעמוד
יוצרים עוגן ליצירת קשר
- בחרו את אזור יצירת הקשר.
- הגדירו CSS ID מתאים כמו contact, בלי הסימן #, במקום שבו הרכיב מאפשר זאת. אפשר גם להשתמש ברכיב Menu Anchor אם הוא מתאים למבנה.
- בשדה הקישור של הכפתור כתבו #contact.
- שמרו ובדקו בחזית האתר. לקישור מעמוד אחר צרפו את כתובת העמוד לפני העוגן.
השתמשו במזהים קצרים וללא רווחים, ואל תשכפלו אותו מזהה לכמה אזורים. אם Header דביק מכסה את הכותרת שאליה קופצים, נדרש היסט גלילה מתאים — לא חמישה Enter לפני הכותרת.
אייקונים ומצבי כפתור
אייקון יכול לחדד פעולה, אבל כפתור שמכיל רק ציור צריך שם נגיש ברור. בדקו את המראה במצב רגיל, Hover ומיקוד מקלדת. אם הכפתור משנה צבע, הטקסט צריך להישאר קריא גם במצב החדש. בדקו טלפון ווואטסאפ גם בנייד אמיתי כשאפשר.
11. אקורדיון, לשוניות, גלריות ורכיבי תוכן נוספים
בוחרים לפי המידע, לא לפי כמות האפקטים · בונים אזור שאלות נפוצות · גלריה והמלצות
בוחרים לפי המידע, לא לפי כמות האפקטים
אקורדיון מתאים לשאלות ותשובות או להסברים משניים שאפשר לפתוח לפי צורך. לשוניות מתאימות לכמה תכנים חלופיים באותו הקשר, למשל פירוט שירותים; הן פחות מתאימות לתהליך שחייבים לקרוא לפי הסדר. גלריה מציגה כמה תמונות יחד. קרוסלה חוסכת מקום, אבל חלק מהתוכן נשאר מחוץ לתצוגה הראשונית. מידע קריטי לא צריך לחכות שהגולש ינחש שצריך להחליק.
בונים אזור שאלות נפוצות
- הוסיפו אקורדיון מתחת להסבר על השירות.
- צרו פריט לכל שאלה, עם כותרת קצרה ותשובה שעומדת בפני עצמה.
- בחרו אם ייפתח פריט ראשון כברירת מחדל ואם אפשר לפתוח כמה יחד, ככל שהרכיב מאפשר.
- בדקו פתיחה וסגירה במחשב, במקלדת ובנייד.
- תנו לפריטים שמות מובנים בחלונית המבנה, במיוחד באקורדיון עם אלמנטים מקוננים.
גלריה והמלצות
בחרו כמה תמונות בגודל ובאיכות דומים, הגדירו מספר עמודות וריווח, ובדקו אם לחיצה פותחת תמונה מוגדלת או קישור. בהמלצות שמרו על שם ופרטים אמיתיים שקיבלתם רשות להציג. תבנית שמגיעה עם ״לקוח מרוצה, מנכ״ל חברה״ היא הזמנה להחלפה, לא לקוח שנפל מהשמיים.
רשימת אייקונים טובה לנקודות קצרות כמו יתרונות או פרטי קשר. כרטיס מחיר מתאים להצעה ברורה, אך אל תעמיסו עמוד השוואה שלם בתוך כל כרטיס. זמינות הווידג׳טים משתנה לפי הגרסה והרישיון; אם כלי מסוים חסר, חפשו קודם את תפקידו ורק אז תחליף.
12. ריווח, יישור, רוחב וגובה
Margin, Padding ו־Gap — שלושה תפקידים שונים · יישור ראשי ומשני · רוחב מלא אינו רוחב טקסט
Margin, Padding ו־Gap — שלושה תפקידים שונים
Padding הוא המרחק בין גבול האלמנט לתוכן שבתוכו. Margin נמצא מחוץ לאלמנט ומפריד אותו מהסביבה. Gap מגדיר רווח בין הילדים בפריסת Flex או Grid. אזור עם רקע שצריך ״אוויר״ מקבל לרוב Padding; שורת כרטיסים שצריכה הפרדה מקבלת Gap; מרחק נקודתי מחוץ לרכיב יכול להיות Margin.
- בחרו את קונטיינר השירותים ותנו לו Padding עליון ותחתון, למשל 48px לתרגול.
- הגדירו Gap של 24px בין הכרטיסים.
- הסירו ריווחים מיותרים שהודבקו לכל כרטיס בנפרד.
- שחררו את סמל השרשרת כשצריך ערכים שונים לצדדים.
- עברו לנייד ובדקו אם הריווח מתאים למסך הצר.
יישור ראשי ומשני
ב־Flexbox הכיוון קובע את הציר הראשי. ב־Row הוא אופקי וב־Column אנכי. Justify Content מסדר לאורך הציר הראשי; Align Items מסדר לאורך הציר המשני. לכן ״למרכז״ יכול להזיז את האלמנטים למקומות שונים כשמחליפים כיוון. בעברית בדקו גם את סדר הרכיבים ואת כיווניות התוכן, במקום להניח שימין ושמאל יתנהגו כמו צילום מסך באנגלית.
רוחב מלא אינו רוחב טקסט
אפשר לתת לקונטיינר החיצוני רוחב מלא ורקע שמגיע לקצוות, ובתוכו תוכן מוגבל לרוחב קריא. אין צורך למתוח פסקה על מסך שלם רק משום ששילמנו על כל הפיקסלים. השתמשו ב־Max Width או ברוחב תוכן מתאים. אחוזים מתייחסים למרחב הזמין; px הוא גודל קבוע, rem תלוי בגודל גופן השורש ו־vw ברוחב החלון.
השאירו את גובה אזורי התוכן טבעי ברוב המקרים. Min Height יכול להתאים לאזור פתיחה, אבל Height קשיח על תיבה עם טקסט עלול לחתוך אותו כשהכותרת נשברת בנייד. ריווח שלילי ו־Absolute Position מתאימים למקרים מתוכננים, לא לתיקון אוטומטי של כל דבר שקצת זז.
13. הגדרות העמוד: שם, כותרת ופריסה
איך נכנסים להגדרות המסמך · Canvas, Full Width, Default ו־Theme · שתי פעולות שחוסכות בלבול
הגדרות מסמך: שם, סטטוס, תמונה ראשית ופריסת עמוד. בצילום מודגמות הגדרות פוסט.
איך נכנסים להגדרות המסמך
בסרגל העליון לחצו על הגדרות עמוד / Page Settings, או הגדרות פוסט כשזה המסמך הפעיל. בממשקים ישנים ייתכן שהגישה נמצאת בסמל גלגל שיניים במיקום אחר. ודאו שהחלונית מתייחסת לעמוד ולא להגדרות של רכיב נבחר.
כאן עשויים להופיע שם המסמך, סטטוס, תקציר, תמונה ראשית, הסתרת כותרת ופריסה. תמונה ראשית בוורדפרס אינה בהכרח מוצגת בתוך גוף העמוד: התבנית צריכה להציג אותה, או שתוסיפו תמונה לאזור הפתיחה בנפרד. לכתובת הקבועה, קטגוריות, תגיות ושדות SEO עשויים להידרש מסך העריכה של וורדפרס או תוסף SEO.
Canvas, Full Width, Default ו־Theme
פריסה
המשמעות המעשית
שימוש נפוץ
Default
פריסת ברירת המחדל בהתאם לתבנית ולהגדרות האתר
עמוד רגיל או פוסט הנשען על תבנית מתאימה
Elementor Full Width
תוכן אלמנטור עם Header ו־Footer
עמוד בעיצוב עצמאי עם מעטפת האתר
Elementor Canvas
עמוד ללא Header ו־Footer של האתר
דף נחיתה שרוצים לבנות ללא המעטפת
Theme
פריסה שמוגדרת בתבנית העיצוב הפעילה
עבודה בהתאם למבנה התבנית
שתי פעולות שחוסכות בלבול
כותרת כפולה: אם גם התבנית וגם הכותרת שבניתם מציגות את שם העמוד, הפעילו Hide Title כשמתאים, וודאו שנותרה כותרת H1 אחת בתוכן או בתבנית. ההתנהגות תלויה גם בתבנית האתר.
Header שנעלם: אם עברתם ל־Canvas, זה חלק מתפקיד הפריסה. החזירו ל־Full Width או לפריסה מתאימה אחרת ובדקו. בתבנית פוסט מסוג Single יש לבדוק גם שהפוסט משתמש בפריסה שתומכת בהחלת התבנית; אין להסיק ש־Full Width ו־Default זהים בהקשר הזה.
תרגול: החליפו פריסה בטיוטה, צפו בתוצאה והחזירו את הבחירה הרצויה. הגדרות עמוד והבדלי פריסות.
14. הגדרות האתר ושפה עיצובית אחידה
שינוי מקומי לעומת שינוי באתר כולו · מגדירים בסיס לאתר של דנה
שינוי מקומי לעומת שינוי באתר כולו
פתחו את תפריט לוגו אלמנטור ובחרו הגדרות אתר / Site Settings, כאשר האפשרות זמינה בממשק. שם מנהלים בין היתר צבעים וגופנים גלובליים, סגנונות בסיס וזהות אתר. במערכת האטומית קיימים גם כלי מערכת עיצוב לניהול משתנים ומחלקות. אל תניחו שכל מסך שכולל צבע כחול מנהל את אותו מקור.
צבע גלובלי הוא צבע משותף שבוחרים מתוך רשימה; שינויו יכול להשפיע על הרכיבים שמשתמשים בו. עיצוב מקומי הוא ערך שהוגדר ישירות על הרכיב. סגנון בסיס נותן ברירת מחדל, אבל הגדרה מקומית או מחלקה עשויות לגבור עליו. אם החלפתם גופן גלובלי וכותרת אחת לא השתנתה, בדקו את ההגדרות שלה לפני שתלחצו שוב חזק יותר.
מגדירים בסיס לאתר של דנה
- בחרו מספר קטן של צבעים: ראשי, משני, צבע טקסט ורקע בהיר.
- הגדירו גופן גוף וגופן כותרות שתומכים היטב בעברית.
- צרו כפתור לדוגמה ובדקו את הצבעים והטיפוגרפיה יחד.
- הגדירו רוחב תוכן וריווחים עקביים לפי הפריסה והמסכים.
- בדקו יותר מעמוד אחד לפני שמעדכנים הגדרה משותפת באתר קיים.
בזהות האתר עשויים להופיע לוגו ואייקון אתר. כדי שלוגו יתעדכן במקומות הנכונים, השתמשו ברכיב Site Logo או בקישור דינמי מתאים כשאפשר. תמונה רגילה שהועלתה ידנית לכל Header אינה בהכרח מחוברת לזהות האתר. הגדרות אתר בתיעוד הרשמי.
15. מחלקות, משתנים ושימוש חוזר
לא כל העתק הוא רכיב משותף · תרגיל: שלושה כרטיסי שירות עם אותו עיצוב
לא כל העתק הוא רכיב משותף
מחלקה / Class מחילה סגנון על כמה אלמנטים: למשל כל כפתורי ״יצירת קשר״ מקבלים אותו רקע, ריווח ורדיוס. משתנה / Variable שומר ערך, כמו צבע מותג או גודל. Component, ביכולות התומכות בכך, הוא מבנה רכיבים לשימוש חוזר עם אפשרויות עריכה ושדות משתנים בהתאם להגדרתו.
שכפול יוצר בדרך כלל עותק שאפשר לשנות בנפרד, אך שני העותקים עשויים עדיין להשתמש באותה מחלקה משותפת. תבנית שמורה מאפשרת להכניס עיצוב שוב; אין להניח שכל מופע שהוכנס יישאר מסונכרן. Global Widget קלאסי הוא מנגנון אחר לשיתוף. בדקו מה בדיוק נשמר ומה בדיוק משותף לפני שמבטיחים ״שינוי במקום אחד וזהו״.
תרגיל: שלושה כרטיסי שירות עם אותו עיצוב
- בנו כרטיס אחד עם כותרת, פסקה וכפתור.
- במערכת האטומית צרו מחלקה בעלת שם ברור כמו service-card והחילו עליה את עיצוב התיבה.
- שכפלו את הכרטיס ושנו את התוכן לשירות אחר.
- שנו במחלקה את צבע המסגרת ובדקו אילו כרטיסים עודכנו.
- לשינוי חד־פעמי בכרטיס אחד, בדקו אם מתאים עיצוב מקומי או מחלקה נוספת, במקום לשנות את המחלקה המשותפת לכולם.
טיפ: סגנון משותף חוסך עבודה, אבל הוא גם משותף לתוצאות. אם כפתור אחד צריך להיות אדום רק בעמוד מסוים, אל תצבעו את המחלקה של כל כפתורי האתר. כשמשלבים קלאסי ואטומי, צבעים וגופנים גלובליים ומשתנים עשויים לדרוש סנכרון מתאים; הם אינם בהכרח אותה רשימה. סנכרון בין המערכות.
16. התאמה למחשב, לטאבלט ולנייד
עיצוב רספונסיבי הוא התאמה, לא צילום מוקטן · סדר עבודה לאזור הפתיחה · הסתרת רכיב לפי מסך · יש גלילה הצידה?
מעבר לתצוגת נייד דרך הסרגל העליון מאפשר לבדוק את הפריסה ברוחב צר.
עיצוב רספונסיבי הוא התאמה, לא צילום מוקטן
לחצו בסרגל העליון על תצוגת המכשיר הרצויה. ליד הגדרות רבות מופיע סימון שמעיד שאפשר לקבוע ערך לפי נקודת שבירה. הגדרות עשויות לעבור מתצוגה רחבה לצרה כשאין ערך שמחליף אותן; לא כל הגדרה היא רספונסיבית, ותוכן הטקסט לרוב נשאר משותף. אל תמחקו פסקה בנייד מתוך מחשבה שמחקתם אותה רק שם.
סדר עבודה לאזור הפתיחה
- בנו בדסקטופ טקסט ותמונה בסידור ברור.
- עברו לטאבלט ובדקו אם עדיין יש רוחב מספיק לשני חלקים.
- בנייד שנו את כיוון הקונטיינר לאנכי כשצריך.
- התאימו גודל כותרת, Padding ו־Gap; בדקו שכפתורים אינם נחתכים.
- בדקו את סדר התוכן. שינוי סדר חזותי אינו תמיד משנה את סדר הקריאה בקוד, ולכן עדיף שמבנה המסמך עצמו יהיה הגיוני.
- פתחו את התצוגה באתר ובדקו גם ברוחבי ביניים ובטלפון אמיתי אם זמין.
הסתרת רכיב לפי מסך
ברכיבים קלאסיים חפשו מתקדם ← רספונסיביות ואת מתגי ההסתרה. באלמנטים אטומיים ניתן להשתמש בהגדרת Display: None תחת הסגנון והפריסה בתצוגת המכשיר המתאימה. כדי להחזיר רכיב שנעלם, בחרו אותו דרך חלונית המבנה ושנו את ההגדרה באותה תצוגה. בדקו שלא הוסתר בכל המסכים בטעות.
יש גלילה הצידה?
בדקו רכיב עם רוחב קבוע, תמונה גדולה, טקסט שאינו נשבר, ריווח שלילי או מיקום מוחלט. אל תתחילו מהסתרת Overflow לכל האתר: היא עלולה להעלים חלק מהבעיה וגם חלק מהתוכן. מצאו את הרכיב החורג ותקנו את המידות או את הפריסה שלו. הסתרה לפי מכשיר — קלאסי ואטומי.
17. בונה התבנית: החלקים שחוזרים באתר
עמוד, תבנית ותבנית עיצוב — לא אותו דבר · איפה נכנסים ומה בוחרים?
בונה התבנית: רשימת חלקי האתר, ובה Header, Footer ותבניות תוכן.
עמוד, תבנית ותבנית עיצוב — לא אותו דבר
עמוד רגיל מחזיק תוכן של כתובת מסוימת. תבנית שמורה היא עיצוב שאפשר להכניס שוב. Theme Builder, בונה התבנית של אלמנטור, מנהל חלקי אתר ותבניות שמוחלים על מסמכים לפי תנאים. תבנית העיצוב של וורדפרס, כמו Hello, היא שכבה נוספת. אין צורך להחליף אותה רק מפני שרוצים לערוך תפריט.
נדרש רישיון מתאים: יכולות Theme Builder המלאות הן חלק מיכולות Pro. בדקו שהיכולת כלולה בחבילה הפעילה שלכם. אפשר לבנות עמודים רגילים גם בלי בונה התבנית; במסלול כזה ה־Header וה־Footer עשויים להיות מנוהלים בידי תבנית העיצוב או כלי אחר.
איפה נכנסים ומה בוחרים?
בלוח הבקרה חפשו אלמנטור ← בונה תבנית / Theme Builder. בחלק מהגרסאות הגישה היא דרך תבניות או מתפריט לוגו אלמנטור בעורך. התחילו מהחלק שברצונכם לערוך, ולא מיצירת תבנית כללית בלי יעד.
סוג התבנית
מה היא עושה
דוגמה
Header
אזור עליון שחוזר בעמודים שנבחרו
לוגו, תפריט וכפתור קשר
Footer
אזור תחתון חוזר
פרטי קשר וקישורים שימושיים
Single Post
עיצוב מעטפת לפוסט יחיד
כותרת, מחבר, תמונה ותוכן הפוסט
Archive
עיצוב רשימת פריטים
רשימת מאמרים בקטגוריה
404
עמוד לכתובת שלא נמצאה
הסבר וקישור חזרה למקום שימושי
איך בודקים לפני שינוי? פתחו את רשימת התבניות, זהו את שם התבנית הפעילה ועיינו בתנאי התצוגה. ייתכנו כמה Headers, למשל אחד לאתר ואחד לדפי נחיתה. יצירת Header נוסף אינה מבטיחה שהוא יחליף את הנכון. היכרות עם Theme Builder.
18. בונים Header ותפריט ניווט
קודם התפריט, אחר כך המקום שמציג אותו · מרכיבים את האזור העליון · Menu ו־Mega Menu הם מסלול נוסף · בדיקת נייד ופרסום ה־Header
קודם התפריט, אחר כך המקום שמציג אותו
במסלול של WordPress Menu רשימת הקישורים נשמרת בוורדפרס והווידג׳ט מציג אותה. בממשקי תבנית קלאסיים נכנסים לעיצוב ← תפריטים. אם המסך אינו קיים, בדקו את תבנית העיצוב ואת מסלול הניווט הזמין באתר; במערכות מבוססות בלוקים ניהול הניווט עשוי להיראות אחרת.
- צרו תפריט בשם ״תפריט ראשי״.
- הוסיפו את עמודי הבית, השירותים, האודות ויצירת הקשר שיצרתם לתרגול.
- סדרו את הפריטים בגרירה. הזחה של פריט מתחת לאחר יוצרת תת־פריט בממשק התומך בכך.
- ערכו את הכיתוב לקורא בלי לשנות בהכרח את שם העמוד עצמו.
- שמרו את התפריט. שמירת ה־Header אינה תחליף לשמירת רשימת התפריט בוורדפרס.
מרכיבים את האזור העליון
פתחו את תבנית ה־Header המתאימה בבונה התבנית. ליצירה חדשה בחרו Header ותנו שם ברור. אפשר לבחור עיצוב מהספרייה או להתחיל ללא תבנית מוכנה.
- בנו קונטיינר חיצוני לרקע ובתוכו שורה ברוחב תוכן מתאים.
- הוסיפו Site Logo או תמונת לוגו מתאימה וקשרו אותה לעמוד הבית.
- הוסיפו WordPress Menu ובחרו את ״תפריט ראשי״. באתרים מסוימים הרכיב נקרא Nav Menu.
- עצבו את הטקסט והריווח ואת מצב הפריט הפעיל, בלי להסתמך רק על הבדל צבע עדין.
- הוסיפו כפתור קשר אם הוא נחוץ, ובדקו שלא נוצר עומס של פעולות מתחרות.
Menu ו־Mega Menu הם מסלול נוסף
ווידג׳ט Menu מאפשר לבנות פריטים ותוכן נפתח בתוך העורך, כולל מבנים מורכבים יותר. הוא אינו זהה לווידג׳ט שמציג תפריט וורדפרס קיים. אם ההגדרה שאתם מחפשים היא בחירת ״תפריט ראשי״ ואינה קיימת, ייתכן שבחרתם את סוג הרכיב האחר. זמינותו והפעלתו תלויות בגרסה, בתכונות וברישיון.
בדיקת נייד ופרסום ה־Header
עברו לתצוגה צרה, הגדירו את נקודת המעבר לתפריט נפתח לפי הרכיב, ובדקו סמל פתיחה, סגירה, תתי־פריטים ושטח לחיצה. הימנעו ממצב שבו לוגו ענק דוחק את כפתור התפריט מחוץ למסך. לאחר שמירת התבנית הגדירו תנאי תצוגה מתאימים בפרק הבא, ובדקו לפחות שני עמודים. יצירת Header, תפריט וורדפרס וMenu.
19. Footer ותנאי תצוגה
מה באמת צריך בתחתית האתר? · Include ו־Exclude בשפה של בני אדם · שלושה דברים שונים בשם ״תנאים״
תנאי תצוגה: דוגמה לתבנית שמוגדרת להופיע בכל האתר.
מה באמת צריך בתחתית האתר?
בנו ב־Theme Builder תבנית Footer עם פרטי קשר, קישורים שימושיים ופרטי העסק הדרושים. אין צורך להעתיק אליו כל מילה מהתפריט רק כדי שייראה עסוק. מספר עמודות יכול לעבוד בדסקטופ, ובנייד בדרך כלל נדרש סידור אנכי ברור. בדקו קישורי טלפון, דוא״ל ורשתות חברתיות, ושמרו על גודל טקסט קריא.
Include ו־Exclude בשפה של בני אדם
Include אומר איפה התבנית אמורה להופיע. Exclude אומר איפה לא. ל־Header כללי אפשר להגדיר Include: Entire Site, ולהחריג דף נחיתה מסוים אם זו הבחירה העיצובית. לפעמים אין צורך בהחרגה מפורשת כי העמוד משתמש ב־Canvas; ההחלטה תלויה במבנה האתר.
- שמרו או פרסמו את תבנית התרגול כשהיא מוכנה.
- פתחו Display Conditions או Edit Conditions.
- בחרו היקף מתאים: כל האתר, סוג תוכן, או עמוד מסוים.
- הוסיפו החרגה כשצריך, ובדקו שאין תבנית אחרת שמכוונת לאותו אזור באותו עמוד.
- פתחו עמוד שאמור להציג את התבנית ועמוד שאמור להיות מוחרג.
תרגול בטוח: החילו תחילה את תבנית התרגול רק על עמוד התרגול. כשתבינו את התוצאה, אפשר לתכנן החלה רחבה יותר. טעות בתנאי של עמוד אחד מעצבנת; טעות ב״כל האתר״ מוכשרת להגיע להרבה יותר אנשים.
שלושה דברים שונים בשם ״תנאים״
תנאי תבנית קובעים איפה חלק האתר חל. תנאי תצוגה של אלמנט עשויים לקבוע אם רכיב מוצג לפי נתונים או משתמש. הגדרות נייד קובעות תצוגה לפי רוחב מסך. אל תשתמשו באחד כתחליף אוטומטי לשני. תנאי תצוגה של תבניות.
20. תבנית פוסט, ארכיון ותוכן דינמי
בונים עיצוב אחד שמקבל תוכן משתנה · הטעות של התוכן שנעלם · ארכיון אינו פוסט ארוך
בונים עיצוב אחד שמקבל תוכן משתנה
נניח שלדנה יש עשרה מאמרים. במקום להקליד את שם המאמר ותמונתו בתוך עשר תבניות שונות, יוצרים תבנית Single Post שמקבלת אותם מכל פוסט. זו המשמעות של תוכן דינמי: אותו רכיב עיצובי, ערך אחר לפי המסמך שמוצג. נדרש רישיון התומך ביכולות התבנית והנתונים שבהן משתמשים.
- פתחו תבנית Single Post בבונה התבנית.
- הוסיפו כותרת וחברו אותה לשדה דינמי של כותרת הפוסט, במקום לטקסט קבוע.
- הוסיפו תמונה ראשית, מחבר ותאריך לפי הצורך והיכולות הזמינות.
- הוסיפו Post Content במקום שבו אמור להופיע גוף הפוסט. בתבנית Single טיפוסית זהו מקום אחד לתוכן העריכתי.
- בחרו פוסט לדוגמה בהגדרות התצוגה המקדימה כדי לראות תוכן אמיתי.
- קבעו תנאי החלה מתאימים ובדקו שני פוסטים עם כותרות ותמונות שונות.
הטעות של התוכן שנעלם
כותרת ותמונה אינן גוף המאמר. אם חסר בתבנית הרכיב שמציג את תוכן הפוסט, המאמר עלול לא להופיע באזור שציפיתם לו. אל תעתיקו לשם ידנית את טקסט הפוסט הראשון: כך תהפכו תבנית משותפת למכונת שכפול של אותו מאמר. בדקו גם פריסת עמוד ותנאים, ובמיוחד שימוש ב־Canvas או ב־Full Width במקום בפריסה המתאימה לתבנית Single.
ארכיון אינו פוסט ארוך
Archive מציג רשימה: מאמרי הבלוג, קטגוריה או תוצאות אחרות לפי ההקשר. בחרו רכיב רשימה מתאים, כמו Archive Posts או Loop Grid כשהם זמינים. הגדירו תמונה, כותרת, תקציר וקישור לפריט. כשעורכים תבנית ארכיון, בדקו אם השאילתה משתמשת בהקשר הנוכחי ולא מחזירה תמיד את כל הפוסטים ללא קשר לקטגוריה.
תבנית Loop Item, כאשר משתמשים בלולאה, מעצבת כרטיס שחוזר ברשימה; היא אינה מחליפה את תבנית Single שאליה מגיעים בלחיצה. בדקו גם עימוד, מצב ללא תוצאות וקישורים. בונה התבנית ותפקידיו.
21. טפסים ופופאפים
טופס בסיסי שמוביל לפנייה אמיתית · פופאפ: איפה, מתי ולמי?
טופס בסיסי שמוביל לפנייה אמיתית
נדרש רישיון מתאים: פרק זה מדגים את ווידג׳ט Form ואת Popup Builder ביכולות Pro הכוללות אותם. במערכת האטומית קיימת גם גישת טפסים הבנויה מאלמנטים נפרדים; אל תעתיקו אליה הוראות של ווידג׳ט Form קלאסי כאילו שמות השדות זהים. בדקו את סוג הרכיב ותיעוד הגרסה.
- הוסיפו Form לעמוד התרגול ותנו לטופס שם ברור.
- הגדירו שדות נחוצים בלבד: שם, דרך לחזור לפונה והודעה. תנו לכל שדה Label ברור וסוג מתאים, למשל Email לכתובת דוא״ל.
- סמנו שדות חובה לפי הצורך, וכתבו כיתוב כפתור כמו ״שליחת פנייה״.
- פתחו Actions After Submit והחליטו מה יקרה: שליחת Email, איסוף פניות, הפניה לעמוד תודה או חיבור נתמך אחר.
- הגדירו את פרטי הפעולה שנוספה. בפעולת Email בדקו את הנמען, נושא ההודעה, השדות שנכללים וכתובת שולח שמתאימה להגדרת הדוא״ל באתר.
- שלחו פנייה ניסיונית עם נתוני בדיקה, ובדקו גם את קבלת המייל או שמירת הפנייה ביעד, לא רק הודעת הצלחה על המסך.
תווית שדה אינה זהה לטקסט דוגמה בתוך השדה. אחרי שהקורא מתחיל להקליד, הוא עדיין צריך להבין מה הוא ממלא. טופס קצר ונגיש עוזר יותר משאלון קבלה ליחידה סודית.
פופאפ: איפה, מתי ולמי?
צרו Popup באזור התבניות הזמין באתר, עצבו חלון עם כותרת, תוכן וכפתור סגירה ברור. הגדרות הפרסום מבדילות בין Conditions — באילו עמודים, Triggers — באיזה אירוע, ו־Advanced Rules — מגבלות נוספות. לדוגמת לחיצה בכפתור, השתמשו בפעולת Popup של הקישור כשהיא זמינה ובחרו את הפופאפ המתאים.
בדקו סגירה במקלדת, מיקוד, גובה בנייד והתנהגות אחרי שליחה. אל תגדירו חלון שנפתח שוב בכל פעולה בלי סיבה. Form, פעולות אחרי שליחה ותנאים וטריגרים לפופאפים.
22. שמירה, פרסום והחזרת גרסה
מה ההבדל בין לשמור לבין להעלות לאוויר? · היסטוריה לעומת גרסאות שמורות
מה ההבדל בין לשמור לבין להעלות לאוויר?
טיוטה מיועדת לעבודה לפני פרסום. פרסום מציג מסמך חדש לגולשים לפי הגדרותיו. עדכון של מסמך שכבר פורסם יכול לשנות את הגרסה החיה. פתחו את תפריט אפשרויות השמירה ואל תסיקו מצבע הכפתור מה יקרה. בתבניות אתר יש לבדוק גם תנאי תצוגה; מסמך קיים אינו בהכרח תבנית שמוחלת במקום הרצוי.
- לפני שינוי גדול שמרו את המצב הנוכחי והעדיפו סביבת בדיקה לשינויים רחבים.
- במהלך העבודה שמרו בהתאם למצב הפרסום הרצוי.
- פתחו תצוגה מקדימה ובדקו כותרות, קישורים ונייד.
- אחרי פרסום או עדכון פתחו את הכתובת הציבורית ובדקו שהתוצאה אכן מופיעה שם.
היסטוריה לעומת גרסאות שמורות
פתחו History. רשימת Actions מתייחסת לפעולות עריכה, ואילו Revisions מציגה גרסאות שנשמרו בהתאם למנגנון הזמין. בחרו מצב קודם, בדקו את התצוגה והחילו או שמרו את הבחירה לפי הממשק. חזרה לגרסה קודמת עלולה להחזיר גם שינויים אחרים באותו מסמך; זאת לא מחיקה נקודתית של הטעות האחרונה בלבד.
אם הבעיה היא בפעולה האחרונה, התחילו מ־Undo. אם חזרתם לעבודה אחרי יום וצריכים גרסה ישנה, בדקו Revisions או גיבוי מתאים. לא כל שינוי בהגדרות אתר נשמר או משוחזר בדיוק כמו תוכן העמוד. גיבוי האתר הוא שכבה נפרדת.
טיפ לעבודה משותפת: כשאדם וכלי AI עורכים אותו מסמך, תאמו מי שומר ומתי. אל תדרסו גרסה חדשה מלשונית שנפתחה אתמול, גם אם הלשונית נראית רגועה לחלוטין.
23. פתרון תקלות בלי לשנות הכול בבת אחת
מתחילים מהסימפטום ומצמצמים · הבעיה עדיין קיימת?
מתחילים מהסימפטום ומצמצמים
רשמו מה לא עובד, באיזה עמוד ובאיזה מסך. בדקו שינוי אחד בכל פעם ותעדו מה החזרתם. כיבוי כל התוספים או איפוס כל העיצוב אינם שלב ראשון לכל תקלה; קודם בודקים את ההגדרה שנוגעת ישירות לבעיה.
התקלה
בדיקה ראשונה
הצעד הבא
Header או Footer חסרים
פריסת העמוד: האם היא Canvas?
בדיקת פרסום התבנית, תנאים והתנגשות עם תבנית אחרת
שינוי לא מופיע באתר
האם נשמר המסמך הנכון והאם הכתובת נכונה?
רענון ובדיקת מטמון הדפדפן/האתר; ניקוי קבצים ונתונים של אלמנטור כשמתאים
הכותרת מופיעה פעמיים
כותרת אוטומטית מול כותרת בתוך התוכן
הסתרת המקור המיותר, תוך שמירת H1 מתאים
יש גלילה אופקית בנייד
רכיב עם רוחב קבוע או חריגה מהקונטיינר
תיקון הרוחב, הקינון, הריווח או המיקום של אותו רכיב
אי אפשר לבחור תמונה
אולי היא רקע או מכוסה באלמנט אחר?
בחירה דרך המבנה ובדיקת הגדרות הרקע של ההורה
התמונה חתוכה
Cover, יחס וגובה השטח
שינוי Position או שימוש ב־Contain/גובה טבעי לפי המטרה
התפריט מציג קישורים לא נכונים
איזה תפריט נבחר בווידג׳ט?
בדיקה ושמירה של רשימת הקישורים במקור הנכון
התפריט לא נפתח בנייד
נקודת השבירה, כפתור הפתיחה ואזור הלחיצה
בדיקה בחזית האתר, חפיפות, סקריפטים ושגיאות לפי הצורך
שינוי בכפתור השפיע על אחרים
מחלקה, משתנה או רכיב משותף
שינוי מקומי או יצירת וריאציה מתאימה במקום עריכת המקור לכולם
כרטיס אחד נמוך או צפוף
אורך תוכן, גובה קשיח ויישור
גובה טבעי, פריסה נכונה וריווח עקבי
הטופס מציג הצלחה ואין מייל
פעולת Email, נמען ופרטי שולח
בדיקת תיבת ספאם ומערכת משלוח הדוא״ל; הפרדה מתקלה בעיצוב
אין אפשרות שמופיעה במדריך
סוג רכיב, גרסה, רישיון והרשאת המשתמש
זיהוי הממשק בפועל ובדיקה בתיעוד של אותה יכולת
הבעיה עדיין קיימת?
צלמו את האזור ואת חלונית ההגדרות הרלוונטית. כתבו מה ציפיתם לראות ומה קרה בפועל, וציינו אם הבעיה מופיעה גם מחוץ לעורך. אם התקלה התחילה אחרי שינוי מסוים, חזרו עליו בטיוטה או בסביבת בדיקה. ״זה לא עובד״ הוא תיאור רגשי מובן; ״ב־390px התפריט נפתח מאחורי הבאנר״ הוא תיאור שאפשר לפתור.
בתקלה בהצגת Header ו־Footer, מדריך הבדיקה הרשמי של אלמנטור מרכז את בדיקות הפריסה, הפרסום והתנאים.
24. בדיקה אחרונה ותרגול מסכם
מסלול תרגול: האתר הקטן של דנה · רשימת בדיקה לפני שהלקוח נכנס · מה עושים אחר כך?
מסלול תרגול: האתר הקטן של דנה
- צרו עמוד טיוטה עם אזור פתיחה: כותרת, פסקת תועלת, תמונה וכפתור קשר.
- הוסיפו שלושה כרטיסי שירות בפריסת Flex או Grid, לפי הבחירה שלכם.
- הוסיפו אודות קצר, המלצות אמיתיות או טקסט שמסומן במפורש כדוגמה לתרגול, ושאלות נפוצות.
- צרו אזור יצירת קשר עם מזהה ייחודי וחברו אליו את הכפתור.
- התאימו את הפריסה לטאבלט ולנייד, כולל תוכן ארוך יותר בכרטיס אחד.
- אם הרישיון מאפשר, בנו Header ו־Footer והחילו אותם תחילה על עמוד התרגול בלבד.
- לתרגול מתקדם, צרו שני פוסטים בעלי תוכן שונה ובדקו תבנית Single ורשימת ארכיון שמציגה אותם נכון.
רשימת בדיקה לפני שהלקוח נכנס
- תוכן: אין טקסטי דמה, פרטי קשר שגויים, הבטחות לא בדוקות או כפתורים ללא יעד.
- מבנה: כותרת ראשית אחת והיררכיית משנה הגיונית; שמות ברורים בחלונית המבנה.
- נייד: אין גלילה הצידה; כפתורים ניתנים ללחיצה; תמונות וטקסטים אינם נחתכים.
- נגישות בסיסית: ניגודיות, טקסט קריא, שמות לקישורים, תוויות לטופס ותיאורי תמונות בהתאם לתפקידן. אפשר להשתמש במקלדת ולראות איפה המיקוד.
- ביצועים: תמונות במידות ובמשקל מתאימים; אין סרטונים ואפקטים שאינם מוסיפים ערך. בדקו טעינה בפועל, לא רק את מהירות הסמן בעורך.
- תבניות: Header ו־Footer מופיעים במקומות הנכונים; דפי נחיתה מוחרגים כשנדרש; נבדקו כמה מסמכים, לא רק פוסט הדוגמה.
- פניות: טופס נבדק עד ליעד; קישורי טלפון, וואטסאפ ודוא״ל תקינים.
- פרסום ו־SEO: כתובת, כותרת SEO, תיאור מטא ותמונה ראשית מתאימים לעמוד; העמוד נמצא במצב הפרסום שבחרתם. עיצוב באלמנטור לבדו אינו ממלא בהכרח את שדות תוסף ה־SEO.
מה עושים אחר כך?
שמרו את העמוד כבסיס לתרגול, ושנו בכל פעם נושא אחד: פריסה, ריווח, מובייל או תבניות. מי שמבין את ההורה, הילד וההגדרה הפעילה יכול לעבוד גם כשהממשק קצת משתנה. מי שזוכר רק איפה היה הכפתור הוורוד, תלוי במצב הרוח של העדכון הבא.
רוצים לשלב בהמשך גם כלי AI בעבודה? המשיכו למדריך חיבור אלמנטור לכלי AI באמצעות MCP. המטרה היא עדיין להבין מה נבנה ולדעת לערוך אותו, גם כשהעוזר הווירטואלי כבר מכריז ״בוצע״.
ממשיכים ללמוד ביחד
רוצים עוד מדריכים, ניסויים וטיפים מעשיים? הצטרפו לקבוצת הוואטסאפ החינמית של אקספרט דיגיטל. מבטיחים להשתדל שלא להקים קונטיינר נפרד לכל הודעה.
להצטרפות לקבוצה החינמיתשתפו את המדריך
מכירים מישהו שמיישר אתר שלם עם ספייסרים? שלחו לו. גם לספייסרים מגיע יום חופש.
מקורות והערות עדכון
המדריך נכתב לשימוש מעשי באלמנטור, ונבדק מול התיעוד הרשמי הזמין בזמן ההכנה. תמונות המסך מהאתר שלנו מדגימות את הממשק שבו צולמו; גרסה, שפה, רישיון וסוג אלמנט עשויים לשנות את המסך אצלכם. קישורי המקורות משולבים בפרקים הרלוונטיים, כדי שאפשר יהיה לבדוק גם יכולת שהשתנתה.