Elementor הוא אחד מהתוספים הפופולריים והעוצמתיים ביותר לבניית אתרים בוורדפרס – במיוחד למי שרוצה לעצב אתר מקצועי בלי לדעת קוד. המדריך הזה מיועד למתחילים שרוצים להיכנס לעולם של בניית אתרים ב־Elementor ולהתחיל לבנות עמודים מרשימים בעצמם.
Elementor הוא תוסף וורדפרס שמאפשר לבנות עמודים בקלות באמצעות ממשק גרירה ושחרור (drag & drop). אין צורך לדעת HTML, CSS או JavaScript – כל אחד יכול לעצב עמודים ברמה גבוהה בצורה ויזואלית.
התוסף כולל גרסה חינמית עם יכולות בסיסיות, וגרסה פרימיום עם תוספים מתקדמים כמו טפסים, גלריות, סליידרים, Theme Builder ועוד.
• התחברו ללוח הבקרה של וורדפרס (wp-admin).
• עברו ל־"תוספים" > "תוסף חדש".
• חפשו “Elementor” והתקינו את התוסף.
• לחצו על “הפעל”.
אם רכשתם את גרסת הפרו – העלו את קובץ ה־ZIP של התוסף דרך “תוסף חדש > העלאת תוסף”.
• עברו ל־"עמודים" > "עמוד חדש".
• תנו שם לעמוד ולחצו “עריכה עם Elementor”.
• ייפתח עורך ויזואלי שבו תוכלו לבנות עמוד בלייב.
במקום להשתמש בעיצוב ברירת המחדל של התבנית, בחרו תבנית מסוג "Elementor Canvas" כדי להתחיל מעמוד ריק לחלוטין.
Elementor בנוי משלוש שכבות עיקריות:
1. Sections – אזורים גדולים בעמוד.
2. Columns – עמודות בתוך כל Section.
3. Widgets – אלמנטים כמו טקסטים, תמונות, כפתורים, טפסים, סמלים ועוד.
טיפ: השתמשו במבנה היררכי ברור לשמירה על רספונסיביות ועיצוב נקי.
Elementor כולל עשרות ווידג'טים מובנים:
• כותרת (Heading)
• טקסט (Text Editor)
• תמונה (Image)
• וידאו (Video)
• כפתור (Button)
• טופס (Form – בגרסת פרו)
כל ווידג'ט ניתן לגרור ולשחרר אל תוך עמודות ואז להתאים אותו דרך שלוש לשוניות: תוכן, עיצוב ומתקדם.
בכל ווידג'ט תמצאו את לשונית "עיצוב" – שם ניתן לשנות צבעים, פונט, ריווחים, גבולות, עיגול פינות, והצללות.
שימוש בפונטים עקביים וצבעים לפי מיתוג משדר מקצועיות. כדאי להגדיר צבעים ופונטים כלליים בהגדרות אתר → "Global Settings" כדי לייעל את העבודה.
בלשונית "מתקדם" תמצאו הגדרות למרווחים פנימיים (Padding), חיצוניים (Margin), Z-index, תנאים ל־Motion Effects (כמו כניסות אנימציה), תנאי תצוגה, תגובות ל־Hover ועוד.
אפשר גם להוסיף CSS מותאם אישית אם אתם מכירים קוד.
Elementor מאפשר לעצב בנפרד לפי דסקטופ, טאבלט ונייד.
בתחתית עורך Elementor תמצאו אייקון של מסך – לחצו עליו כדי לעבור בין מצבים.
דוגמאות להבדלים:
• טקסט קטן מדי בנייד – הגדילו רק שם.
• הסתרת אלמנט בדסקטופ/נייד.
• מרווחים שונים לפי גודל המסך.
Elementor מגיע עם תבניות עיצוב מוכנות. כדי להשתמש:
• לחצו על האייקון של התיקייה בתוך העורך.
• בחרו תבנית מוכנה לעמוד או Section.
• ניתן לשמור אזור שיצרתם בעצמכם כתבנית ע"י הקלקה על שלוש הנקודות > "שמור כתבנית".
שימוש בתבניות מזרז תהליכים ונותן השראה לעיצובים.
אם רכשתם את Elementor Pro – תוכלו לבנות תבניות מותאמות כמו:
• Header מותאם אישית
• Footer דינמי
• עמוד פוסט יחיד (Single)
• עמודי ארכיון
• עמוד 404
תמצאו את זה ב־Elementor > Theme Builder. משם אפשר ליצור ולעצב תבניות מותנות לפי סוג עמוד, תגית, קטגוריה ועוד.
בגרסת פרו ניתן להשתמש בווידג'ט טופס כדי ליצור טפסים מתקדמים:
• השארת פרטים
• הרשמה לניוזלטר
• סקר או הזמנת שירות
ניתן גם לחבר טופס לאימייל, Zapier, Webhooks, CRM ועוד.
לאחר בניית עמודים, תוכלו לקשר אותם לתפריט האתר דרך "עיצוב > תפריטים".
וודאו שהעמוד נקבע כעמוד הבית דרך "הגדרות > קריאה".
אם האתר עדיין תחת דומיין זמני, כדאי לחבר אותו לדומיין אמיתי. זה מתבצע ברמת האחסון (DNS) ולאחר מכן דרך ההגדרות הכלליות של וורדפרס.
• Elementor Pro – כל האפשרויות המתקדמות.
• Essential Addons – ווידג’טים נוספים.
• Happy Addons – אפקטים מתקדמים.
• WP Rocket – שיפור מהירות.
• Yoast SEO – לקידום אורגני.
• כווץ תמונות לפני העלאה עם TinyPNG.
• אל תשתמשו ביותר מדי ווידג'טים כבדים.
• שמרו על היררכיית כותרות נכונה (H1, H2…).
• הוסיפו תיאורי Alt לתמונות.
• שלבו מילות מפתח בכותרות ובתיאורים.
• גיבוי שוטף של האתר.
• עדכון אלמנטור והתוספים האחרים.
• בדיקת תצוגה לאחר עדכונים.
• ניקוי אלמנטים לא בשימוש כדי לשמור על ביצועים.
אלמנטור הוא עולם ומלואו – ומציע פתרון שלם לבניית אתרים בלי קוד. המדריך הזה מספק לכם בסיס חזק לעבודה שיטתית ומקצועית.
ככל שתתנסו ותשחקו עם הכלים – תבינו כמה אפשרויות יש, וכמה עוצמה יש בידיים שלכם.
ואם אתם רוצים להעמיק ולהפוך את זה למקצוע – אנחנו מזמינים אתכם לקורס Elementor המקיף שלנו, בו תלמדו לבנות אתרי תדמית, חנויות, טפסים חכמים, אנימציות מתקדמות ועוד.
מספר מילים: 2,015
