Elementor הוא בוני הדפים (Page Builder) הפופולרי ביותר ל-WordPress, עם מעל 10 מיליון אתרים פעילים. הוא מאפשר לכם לבנות עמודים יפים ומקצועיים בטכנולוגיית Drag & Drop — ללא שורת קוד אחת. בשיעור זה נלמד לבנות עמוד בית מושלם מאפס.
Elementor Free לעומת Elementor Pro
- Elementor Free: חינמי לחלוטין, עם מעל 40 ווידג'טים. מספיק לבניית רוב הדפים. זמין ישירות מספריית WordPress.org.
- Elementor Pro: מוסיף מעל 60 ווידג'טים מתקדמים, Theme Builder (עיצוב Header/Footer/Single), WooCommerce Builder, Custom Fields, Popup Builder ועוד. עלות: ~$59-$99 לשנה.
למתחילים — הגרסה החינמית מספיקה לחלוטין להתחלה.
התקנת Elementor ופתיחת העורך
- Plugins → Add New → חפשו "Elementor Website Builder" → Install → Activate
- צרו עמוד חדש: Pages → Add New → תנו לו שם "דף הבית"
- לחצו על הכפתור הכחול "Edit with Elementor"
- העורך נפתח: בצד שמאל — לוח הווידג'טים. בצד ימין — הקנבס (אזור הבנייה)
מושגי יסוד: Sections, Columns, Widgets
Elementor בנוי על היררכיה פשוטה:
- Section (קטע): שורה אופקית שמחלקת את הדף לאזורים. כל Section מכיל עמודות.
- Column (עמודה): עמודות בתוך ה-Section. ניתן לקבוע 1-6 עמודות.
- Widget (ווידג'ט): אלמנטים בפועל — טקסט, תמונה, כפתור, טופס וכו'. גוררים לתוך העמודות.
דמיינו את זה כמו: שולחן (Section) → מגירות (Columns) → חפצים בתוך המגירות (Widgets).
בניית Hero Section — צעד אחר צעד
ה-Hero Section הוא החלק הראשון שגולשים רואים — חייב להיות מרשים!
- לחצו על "+ Add New Section" → בחרו מבנה עמודה אחת
- לחצו על ה-Section (הכפתור הכחול בצד) → נכנסו ל-Style → הוסיפו תמונת רקע: בחרו "Background Type: Classic" → לחצו על שדה התמונה והעלו תמונה
- הגדירו גובה ה-Section: Layout → Min Height → 100vh (גובה מסך מלא)
- הגדירו Content Position: "Middle" לריכוז האנכי
- גררו ווידג'ט Heading לתוך העמודה → הזינו את הכותרת הראשית שלכם
- גררו ווידג'ט Text Editor מתחת → הוסיפו תיאור קצר
- גררו ווידג'ט Button → הגדירו טקסט ("צור קשר", "לפרטים נוספים") ו-Link
הגדרות טקסט, תמונות וכפתורים
- Heading Widget: ב-Style — שנו צבע טקסט, גופן, גודל. ב-Content — בחרו H1 לכותרת ראשית, H2 לתת-כותרות.
- Image Widget: העלו תמונה → ב-Style הגדירו CSS Filter להוספת אפקטים. ב-Link ניתן לקשר לדף אחר.
- Button Widget: ב-Style — שנו צבע, צבע Hover, עיגול פינות (Border Radius), גודל.
הגדרות רספונסיב — מובייל
מעל 60% מהגולשים מגיעים ממובייל — חובה לבדוק ולהתאים:
- בתחתית מסך Elementor — לחצו על אייקון הטאבלט או המובייל לעבור לתצוגת מובייל
- ניתן לשנות גדלי טקסט, ריווחים ומרווחים בנפרד לכל מכשיר
- ב-Section → Layout → Column Direction → בחרו "Column" במובייל כדי שהעמודות יסתדרו אנכית
- ניתן להסתיר אלמנטים במובייל: ב-Advanced → Responsive → Hide on Mobile
שימוש בתבניות (Templates)
Elementor מגיע עם מאות תבניות מוכנות:
- לחצו על האייקון של התיקייה בחלק העליון של הממשק (Templates)
- עיינו בקטגוריות: Landing Pages, Full Pages, Blocks
- לחצו על תבנית → "Insert" להוספה לדף הנוכחי
- ערכו את התוכן לפי הצורך
Global Settings — צבעים וגופנים אחידים
הגדרת צבעים וגופנים גלובליים חוסכת זמן וממרת אחידות:
- לחצו על האייקון של ה-Hamburger Menu (שלושה קווים) ← Site Settings
- Global Colors: הגדירו את 4-6 הצבעים של המותג שלכם
- Global Fonts: בחרו גופן ראשי לכותרות וגופן משני לטקסט רגיל
- כעת כשתשנו את הצבע הגלובלי — הוא ישתנה בכל מקום באתר
שמירה ופרסום
- שמירה כטיוטה: לחצו על החץ ליד "Publish" → "Save as Draft"
- פרסום: לחצו על "Publish" — הדף יהיה זמין לגולשים
- Preview: לחצו על אייקון העין לתצוגה מקדימה לפני פרסום
- Update: אחרי הפרסום, הכפתור הופך ל-"Update" לעדכון שינויים
✅ סיכום השיעור
- Elementor הוא Drag & Drop — בניית עמודים ויזואלית ללא קוד
- Section → Columns → Widgets — ההיררכיה הבסיסית
- Hero Section = הרושם הראשון — השקיעו בו!
- תמיד בדקו ותתאימו במובייל — מעל 60% מהגולשים
- Global Colors & Fonts מבטיחים עיצוב אחיד בכל האתר
בשיעור הבא — נוסיף חנות אונליין לאתר שלנו עם WooCommerce.