תכירו את אלמנטור: הפייג' בילדר שמשנה את חווית העיצוב על WordPress

תכירו את אלמנטור: הפייג' בילדר שמשנה את חווית העיצוב על WordPress

היי פוג'ואיסטים, היום אנחנו שמחים לשחרר את הפלאגין שעבדנו עליו במשך יותר משנה, אלמנטור.

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

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

browser

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

בפיתוח התמקדנו במספר תכונות עיקריות: תשתית קוד חזקה ואמינה, ממשק Drag & Drop חלק ומיידי (ללא זמן טעינה כלל), שליטה מוחלטת על המבנה של העמוד וכן שליטה מלאה על העיצוב של כל וידג'ט.

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

אז מה הופך את אלמנטור לכל כך ייחודי ומשמעותי? הנה לכם.

01. תראו לי מה אפשר לעצב עם אלמנטור

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

02. עיצוב אתרים LIVE ובזמן אמת

DragDropDesign

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

03. שליטה על מבנה העמוד

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

layout

רוחב אזור

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

שינוי רוחב עמודות

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

resize-web
column-gap_small

מרווח בין עמודות

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

מיקום התוכן

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

position_web
pading-margin

שוליים פנימיים וחיצוניים

קבעו את מאפייני ה-Padding ו-Margin עבור אזורים, עמודות ווידגטים, בעזרת PX, EM או אחוזים. מגוון אפשרויות המידות יקנה לכם יותר שליטה על איך נראים העמודים במסכים שונים.

04. עיצוב עד רמת הפיקסל

post-panel

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

fonts

טיפוגרפיה

אתם מוזמנים לשחק עם מעל 600 פונטים שונים, 7 מהם בעברית. באלמנטור אפשר לשלוט במגוון רחב של מאפייני טיפוגרפיה, בכל וידג'ט שישנו במערכת. בין המאפיינים תוכלו לשנות את המרווח בין האותיות, גובה השורה ומשקל הפונט.
colors

צבעים

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

bg

רקעים וגבולות

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

Font Awesome

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

05. כל הוידג'טים שאי פעם תרצו

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

06. כל תבנית, כל פלאגין, כל עמוד.

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

themes

תבניות

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

פלאגינים

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

posts

פוסט טייפס

אל תסתפקו רק בעיצוב עמודים ופוסטים. באלמנטור אפשר לעצב עבור כל פוסט טייפ שאתם משתמשים בו, כמו פורטפוליו, מוצרים, אירועים וכו'.

07. ידידותי לפיתוח

שחררנו את אלמנטור בקוד פתוח ו-GPL, ואחת הסיבות המרכזיות לכך היא כדי להביא את הכוח של קהילת המפתחים של וורדפרס לפיתוח של אלמנטור, ולהוסיף לו עוד ועוד פיצ'רים ושיפורים. אנחנו רוצים שמפתחים מכל העולם יתרמו מהידע שלהם כדי להעשיר את אלמנטור, כך שבסופו של דבר יווצר הפייג' בילדר האולטימטיבי למעצבים. הנה כמה מאפיינים שהופכים את אלמנטור לידידותי למפתחים.
php7

קוד נקי וארכיטקטורת קוד חכמה

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

פרוייקט GitHub

מכיוון שהוא משוחרר בקוד פתוח וכ-GPL, מפתחים יוכלו לפתח ולשפר את אלמנטור, ולהוסיף לו מרכיבים נוספים ורבים.
seo

אופטימלי ל SEO

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

css

CSS מותאם אישית

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

יש לנו תוכניות גדולות להמשך...

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

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

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

למה אתם מחכים?

40 תגובות

  1. ירון הגב

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

  2. Eldad Garfunkel הגב

    שלום
    ברכות,
    אפשר להתקין אותו על ערכת scoop?

  3. עידו הגב

    יישר כוח!

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

    בהצלחה!

  4. טוני הזברה הגב

    תרומה ענקית לקהילת האינטרנט
    תודה לכם
    מערכת ידידותית
    מחשבה עמוקה על משתמש הקצה ברורה ואיכותית
    כל הכבוד עבודה מקצועית מדויקת

  5. נדב הגב

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

  6. איציק הגב

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

  7. רן הגב

    כל הכבוד!!!

  8. yaelmor הגב

    זהו, זה תוסף בעברית?

  9. yaelmor הגב

    שלום, התקנתי את אלמנטור על תבנית ברלין והוא כותב לי:
    אלמנטור דורש PHP גרסה 5‪.‬4 ומעלה, התוסף אינו פעיל כרגע.
    למה זה כך?

    • Ben Pines הגב

      זה קשור לגרסת ה-PHP שמותקנת בשרת האחסון שלך. צרי קשר עם חברת האחסון ובקשי מהם לשדרג ל-PHP 5.4 ומעלה.

  10. avihay gitterman הגב

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

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

    • Ariel הגב

      תודה רבה, כיף לשמוע.

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

  11. אורית הגב

    האם יש אפשרות לשכפל את העיצוב שיצרנו באלמנטור מדף לדף – כמו את התבניות עמוד?

  12. יעקב הגב

    האם זה מתאים לכל סוגי התבניות

    באיזה תבניות מומלץ להשתמש בה
    (חינמי)

    תודה רבה
    נראה משהו מפתיע

  13. elad הגב

    יש אפשרות להוספת צור קשר? CF7 ??
    כי אני לא מוצא

  14. elad הגב

    אהה מצויין , תודה אריאל

  15. elad הגב

    היי , אם אני רוצה לשתול רקע ב HTML + CSS איך אני עושה את זה
    בתיבת HTML הוא לא מזהה את הCSS ומראה את זה כטקסט

    תודה

  16. WSP הגב

    נראה שהתוסף הזה מעולה

  17. Moti Porush הגב

    סליחה על הבורות, אבל איך אני מתחילה להשתמש בו? התקנתי וורדפרס וגם תבנית (פוג'ו) ואת אלמנטור אני מעלה כתוסף?

    • Ariel הגב

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

  18. עמוס הגב

    האם ניתן לשלוט באמצעות אלמנטור
    גם על החלקים הקבועים של אתר האינטרנט ?
    העליון Header והתחתון footer .
    כולל יכולת לעצב את סרגל התפריט וכותרות האתר .

    יישר כוח .
    אני סבור שאלמנטור הוא אחד הפיתוחים החשובים
    והמלהיבים ביותר לאתרי אינטרנט .

  19. עמוס הגב

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

    כמו כן האם לאלמנטור יש תוספים דומים של פייסבוק וטוויטר שמאפשרים
    להציג את הפוסטים ברשתות החברתיות ולא רק אייקון מקושר ?

    תודה .

    • Ariel הגב

      כרגע לא ניתן לשלוט על אזור ההידר והפוטר באתר עם אלמנטור.

      לגבי הבעיה שיש לך עם jetpack אשמח אם תכוון אותנו יותר מה בדיוק אתה מנסה להכניס שלא עובד לך.

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

  20. עמוס הגב

    היי אריאל .
    אני מתכוון לוידג'טים האלה שמשולבים בחבילת (Jetpack)

    תוסף לעמוד פייסבוק (Jetpack)
    וידג'ט: ציר הזמן של טוויטר (Jetpack)

    אומנם ניתן לגרור אותם לתוך העמודה של אלמנטור
    אבל בפועל זה נתקע ואינו פועל .

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

  21. עמוס הגב

    שאלה נוספת .

    בעת הוספה של עמודה חדשה אל בין עמודות קיימות .
    אין דחיקה של העמודות הקיימות כלפי מטה
    כדי לאפשר שילוב של העמודה החדשה בין הקיימות .

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

    האם ניתן אחרת ?

    • Ariel הגב

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

  22. ערן הגב

    איך מוסיפים טופס צור קשר לדף הנחיתה

    • Ariel הגב

      באמצעות תוסף טפסים חיצוני, אם אתה משתמש בתבניות של פוג'ו אתה יכול לעשות זאת באמצעות תוסף הטפסים שלנו, או באמצעות תוסף טפסים כמו Contact Form 7

  23. חלי הגב

    יופי של מערכת!! תודה:)

  24. עומר הגב

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

    • Ben Pines הגב

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

  25. tomer korenfeld הגב

    יש מדריך לשימוש ?
    כשאני לוחץ תחת : עמודים -> שם העמוד -> אלמנטור זה רק מעביר אותי לעמוד בצורת לייב אבל האלמנטור לא נפתח כלל.

השארת תגובה