סקירה ומדריך ראשוני לאדיטור v4 של אלמנטור

כממשיך לגרסת אלמנטור 3.29 שחררו אלמנטור ב-28 באפריל 2025 גרסת אלפא ומה שהם מכנים אלמנטור אדיטור v4.

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

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

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

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

החידושים העיקריים

החידושים העיקריים באלמנטור v4 הם:

1. ארכיטקטורה CSS‑First – קוד נקי ומהיר יותר

  • העורך החדש מייצר מבנה HTML נקי יותר, באופן כזה שכל וידג’ט עטוף ב‑div אחד בלבד, הפחתת CSS לא נחוץ – לשיפור משמעותי בביצועים.
  • המודל החדש שולל Inline styles מיותרות. דבר זה נותן יתרון בביצועי טעינה ותחזוקה עתידית.

2. מערכת Atomic Components

  • וידג’טים קטנים כמו Button, Heading, Image ו-Paragraph משמשים כמִצַּרְך בסיסי (Atomic), לבניית מאקרו-פונקציות (כמו CTA) בצורה נקייה ומתוחזקת.
  • מאפשר למפתחים ולמעצבים ליצור עקומות עיצוב אחידות ושימוש חוזר קל באתרי וורדפרס רבים.

3. Unified Style Tab

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

4. Classes, States ו‑Variables

  • CSS Classes – עיצוב סגנונות של קלאסים בCSS, דבר שמאפשר עיצוב גלובלי למגוון רחב של ווידג'טים כולל הגדרות עיצוב טיפוגרפיה, צבעים, רקעים וכעז"ה.
  • States – אפשרות להוסיף Statedesign (hover, focus, active) דרך ממשק חזותי ללא כתיבת CSS ידנית.

5. כלי Layout מודרניים

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

6. Styling Repeater – שכבות רקע מתקדמות

  • אפשרות לשכבות רקעים מרובות ל"קונטיינרים" (ולא רק אחת כמו שהיה עד היום).

7. תבניות וענן – Cloud Templates

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

8. נגישות משופרת

  • שיפורים באביזרים (shape dividers), progress bars, social icons ו- video playlist כדי להבין ולהנגיש גלישה גם עם קוראי מסך.

איך מקבלים גישה לגרסת V4 אלפא?

כדי לקבל גישה לגרסת האלפא של אלמנטור V4 צריך לדאוג שגרסת האלמנטור מעודכנת ללפחות גרסה 3.29. לאחר מכן ללכת לאלמנטור – הגדרות – לשונית (חדשה שהתווספה) Elelmentor V4. שם לוחצים על כפתור ההפעלה, ומעכשיו שניגש לעורך של אלמנטור נגלה שבנוסף לווידג'טים הרגילים שאנחנו מכירים, התווספו וננעצו למעלה 6 ווידג'טים חדשים הנקראים "ווידג'טים אטומיים". נצלול ישירות אליהם.

Atomic Widjets

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

הווידג'טים הם כדלהלן:

  • פלקסבוקס
  • דיבבלוק
  • כותרת
  • תמונה
  • פסקה
  • SVG
  • כפתור

ננסה להסביר אחד אחד:

פלקסבלוק/דיבבלוק

פלקסבוקס הוא DIV עם פלקס, כלומר עם האופציה לסדר את האלמנטים לפי סדר כלל. יוצא ש-DIV הוא אלמנט מכיל בסיסי. למעשה (וכך גם העברתי לאלמנטור) – אין צורך באחד מהם, מספיק לעשות אלמנט של DIVBLOCK עם אפשרות של FLEX ולקבל את אותן האופציות בדיוק של פלקסבוקס.

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

לאחר מכן ניגש ללשונית סגנון כדי להבין את משמעות האלמנטים המכילים ואת התצורות השונות שאפשר להשתמש ב-DIV: