בן פינס היי פוג'ואיסטים, היום אנחנו שמחים לשחרר את הפלאגין שעבדנו עליו במשך יותר משנה, אלמנטור.
אלמנטור הוא WordPress Page Builder ייחודי שנועד לאפשר לכם לעצב עמודי בית, דפי נחיתה, יצירת קשר ובעצם כל דף שאתם רק יכולים לדמיין, בקלות ובמהירות שפשוט לא היו אפשריים עד היום בוורדפרס.
מה שהוביל אותנו לצאת למסע המאתגר הזה שנקרא אלמנטור היה שזיהינו שבשנים האחרונות אתרים נהפכו ליותר ויותר דינמיים. בעולם בו עסק משנה את דף הבית שלו כל חצי שנה, פוסטים מושקעים מפורסמים כל שבוע, ודפי נחיתה חדשים נדרשים לכל קמפיין שיווקי, ישנו צורך אמיתי בשינוי סביבת העיצוב על WordPress.
עם אלמנטור אנחנו רוצים להביא את החזון שלנו לסביבת עיצוב אמיתית אל וורדפרס, וכיום אנחנו שמחים לשחרר את גרסת בטא של אלמנטור.
בפיתוח התמקדנו במספר תכונות עיקריות: תשתית קוד חזקה ואמינה, ממשק Drag & Drop חלק ומיידי (ללא זמן טעינה כלל), שליטה מוחלטת על המבנה של העמוד וכן שליטה מלאה על העיצוב של כל וידג'ט.
אה, כן. ציינו כבר שאנחנו משחררים את אלמנטור בחינם? אלמנטור יהיה זמין להורדה בחינם ובקוד פתוח לכל משתמש וורדפרס באשר הוא. לא משנה אם הוא משתמש בתבניות של פוג'ו, תבנית פרימיום, חינמית או תבנית בפיתוח עצמי מאפס: אלמנטור יעבוד ישירות על האתר שלכם. לא משנה מתי הקמתם אותו לא משנה באיזו שפה.
אז מה הופך את אלמנטור לכל כך ייחודי ומשמעותי? הנה לכם.
01. תראו לי מה אפשר לעצב עם אלמנטור
לפני שאנחנו מתחילים, רצינו לשתף אתכם עם כמה עיצובים שהכין מראש המעצב הראשי וה-CEO שלנו יוני לוקסנברג. העיצובים נעשו ללא שימוש בקוד וללא כתיבת CSS. הכל בעזרת הקונטרולים המובנים באלמנטור.
02. עיצוב אתרים LIVE ובזמן אמת
היו הרבה נסיונות בעבר ליצור פייג' בילדר לוורדפרס שיעבוד ב-front-end ויאפשר מה שנקרא עריכה LIVE, האפשרות לערוך את האלמנטים השונים בעמוד תוך כדי צפייה בתוצאה הסופית. אלמנטור הוא הראשון לגרום לכל הסיפור הזה לעבוד כמו שצריך. בלי עצירות, בלי תקיעות, בלי המתנה לטעינת העמוד, בלי ממשק מבלבל, והכי חשוב – בלי שצריך לעבור כל שנייה למסך תצוגה מקדימה. כל אלמנט עיצובי שנוגעים בו באלמנטור משתנה בזמן אמת ובלייב על גבי המסך.
03. שליטה על מבנה העמוד
כל עיצוב מוצלח מבוסס על כך שהמבנה של העמוד בנוי נכון. שינויים ברמת המרווחים בין וידג'טים, הרוחב והגובה שלהם והמיקום שלהם בעמוד יכולים להציל או להרוס את העיצוב. אלמנטור נותן לכם יותר שליטה על אין ספור אפשרויות עימוד של תוכן. העיצוב בלייב מאפשר לשחק עם מבנה העמוד ועם מיקום האלמנטים השונים ולהחליט איך להציב כל דבר תוך שימוש בשדרת קוד חזקה שמותאמת לדפדפנים מתקדמים במיוחד עם התאמה מלאה למובייל ולכל מסך.
רוחב אזור
אזורי העמוד של אלמנטור מהווים את אבני הבניין הבסיסיים ביותר של כל עיצוב, ומאפשרים להגיע לרמת דיוק שעד כה הייתה שמורה לעמודים שנכתבו בקוד בצורה מותאמת אישית
שינוי רוחב עמודות
מעולם לא היה כל כך פשוט לשחק עם רוחב העמודות. פשוט תפסו את אחד הצדדים של העמודה וגררו אותה ימינה ושמאלה, כד שהעמודות ממוקמות באופן מושלם.
מרווח בין עמודות
שנו את המרווח בין העמודות כדי לאפשר לעיצוב שלכם לנשום קצת יותר. אפשר לשנות את המרווח של כמה עמודות בו זמנית, וכך להחליט איזה מרווח הכי מתאים לעיצוב שלכם.
מיקום התוכן
התאימו את מיקום העמודה למעלה, לתחתית או למרכז של אזור, או מתחו אותה כך שתתפוס את כל האזור. תוכלו לעשות את אותה המניפולציה במיקום התוכן בתוך העמודה.
שוליים פנימיים וחיצוניים
קבעו את מאפייני ה-Padding ו-Margin עבור אזורים, עמודות ווידגטים, בעזרת PX, EM או אחוזים. מגוון אפשרויות המידות יקנה לכם יותר שליטה על איך נראים העמודים במסכים שונים.
04. עיצוב עד רמת הפיקסל
אלמנטור מאפשר לכם להתאים עיצוב ייחודי לכל וידג׳ט שאתה מטמיע בעמוד, וכן לכל אזור ועמודה. עיצוב זה כולל התאמה של פונטים, צבעים, רקעים וריווח. רוצים לשנות את השקיפות של הכפתור? אין בעיה, כנסו להגדרות העיצוב ותגדירו את השקיפות שאתם רוצים. זאת רק דוגמא מבין אינספור אפשרויות.
טיפוגרפיה
צבעים
אלמנטור מאפשר לכם ליהנות מפלטת צבעים מותאמת אישית לאתר שאתם עובדים עליו, אותה תוכלו ליישם בכל עמוד שתבנו באתר זה. פלטת הצבעים עוזרת לשמור על עקביות בעיצוב ועל המיתוג הנכון באתר. אפשר גם לבחור כל צבע שרק תרצו, באמצעות שימוש בפיקר המובנה או בעזרת הדבקה של קוד HEX. עבור כל צבע, ניתן לשנות את השקיפות שלו וכך ליצור אפקט של שקיפות חלקית ברקע.
רקעים וגבולות
Font Awesome
בחרו מבין יותר מ 400 אייקונים שונים והתאימו אותם לכל עיצוב. השתמש באייקונים כדי להפוך את העמוד שלך למעוצב, ויזואלי ואסתטי יותר.
05. כל הוידג'טים שאי פעם תרצו
עם אלמנטור, אתם מקבלים חבילה מלאה שכוללת את כל הוידג'טים הנדרשים לעיצוב עמוד יפיפה, בחינם. אין אף פייג' בילדר אחר שמציע כזה מבחר רחב של וידג'טים בחינם: עורך טקסט, כותרת ותמונה, וכן וידג'טים יותר מתקדמים וייחודיים, כגון רקעי וידאו, טאבים של ספוילר ואקורדיון, הטמעת מפות של גוגל ועוד.
06. כל תבנית, כל פלאגין, כל עמוד.
הכל מתחיל בארכיטקטורת קוד נכונה ומושקעת. בנינו את אלמנטור באופן שהיהי הכי אופטימלי ומחושב, כך שלא רק שהוא עובד מהר יותר, אלא בהנחה שאתם משתמשים בתבנית ופלאגינים שבנויים לפי התקנים הרשמיים של WP תוכלו להתממשק איתו ממש בקלות.
תבניות
פלאגינים
לאלמנטור יש התאמה מלאה לפלאגינים רבים כמו Woocommerce, WPML ו-Yoast, כך שלא רק שזה עובד חלק, אלא גם אפשר לגרור שורטקודים של פלאגינים רבים לתוך העמוד, באופן אוטומטי, ללא צורך בהתאמה מיוחדת.
פוסט טייפס
07. ידידותי לפיתוח
קוד נקי וארכיטקטורת קוד חכמה
פרוייקט GitHub
אופטימלי ל SEO
מכיוון שאלמנטור נכתב בקוד תקני ואיכותי, העמודים שתצרו איתו יהיו אופטימליים ל-SEO, וגם בעלת נגישות רבה. בבדיקות שערכנו וידאנו שדפים שעוצבו על ידי אלמנטור גם נטענו מהר, עוד גורם שחשוב מאוד לקידום אתרים.
CSS מותאם אישית
יש לנו תוכניות גדולות להמשך...
בימים אלו אנו ממשיכים לשפר ולהוסיף פיצ'רים חדשים לאלמנטור, כך שמומלץ להירשם ולהשאר מעודכנים בחדשות שנוציא בחודשים הקרובים. אנחנו מזמינים אתכם לשלוח לנו הצעות לשיפור וייעול של אלמנטור. אנחנו מעריכים את הפידבק שכבר שלחו לנו משתמשי האלפא, ולוקחים את הפידבק בחשבון בתעדוף המשימות שלנו.
אם קראתם עד כה, הגיע הזמן לעזוב את התיאוריה, ולעבור למעשים. הורידו את אלמנטור בעמוד הוורדפרס של הפלאגין, והתחילו ליצור את הראשון מבין עמודים רבים שתעצבו בעזרת אלמנטור.
אה, ועוד דבר אחרון. אהבתם את העיצוב של הפוסט הזה? יופי, כי כולו בנוי בעזרת אלמנטור.
שפו לבית התוכנה פוג'ו אשר תורם רבות לקידום בניית אתרים כחול לבן בארץ .
הבאתם לשינוי משמעותי בתעשיית בניית אתרים .
הייתי שמח שתשלבו באלמנטור אפשרות לייבא אתר דמו מותאם לפלאגין הכולל דפים ופוסטים
כך יתאפשר למקימי אתרים בתחילת הדרך להבין את הטכניקה העומדת מאחורי כל דף ופוסט (כוונה לדפים ופוסטים מורכבים ומעוצבים , בדומה לדמו הקיים לתבניות שלכם )
ולעצב ולבנות אתרים מקצועיים בצורה מהירה .
כמובן שזה יהיה, יש עוד המון הפתעות בשבועות הקרובים.
שלום
ברכות,
אפשר להתקין אותו על ערכת scoop?
ברור! וגם על כל אתר וורדפרס אחר, לאוו דווקא על התבניות שלנו.
יישר כוח!
ראשית זה כיף לראות חברות ישראליות בשורה אחת עם כל הגדולים.
ושנית ברמה הפרקטית אנחנו פשוט מחכים לזה.
בהצלחה!
תודה עידו, לקח זמן אבל זה קרה בסוף 🙂
תרומה ענקית לקהילת האינטרנט
תודה לכם
מערכת ידידותית
מחשבה עמוקה על משתמש הקצה ברורה ואיכותית
כל הכבוד עבודה מקצועית מדויקת
כל הכבוד! התנסתי בגרסאת אלפא והיא היתה מעניינת ממש! אחד הדברים שנורא תסכלו בעבודה עם פייג' בילדר וויז'ואל קומפוזר היה אי היכולת להעתיק אלמנטים מעמוד לעמוד, אלא עם תוסף נרכש. אני תוהה האם באלמנטור תהיה האופציה להעתיק וידג'ט שערכתי ועיצבתי לעמוד אחר? במידה וכן (ללא רכישה בנפרד של תוסף) הרי שכבר האלמנטור מתעלה על הקומפוזרים האחרים. בהצלחה!
זה בהחלט פיצ'ר שמתוכנן בעתיד, נפרסם בקרוב מפת דרכים לתוסף
אריאל,
התוסף הזה כל כך נחוץ להרבה משתמשים אז קודם כל בשם כולם תודה רבה!
אין לי ספק שיהיו עוד הפתעות, המזל היחידי הוא שאתם לא מפסיקים לעבוד על שיפור איכות המוצרים שלכם.
כל הכבוד!!!
זהו, זה תוסף בעברית?
יש תמיכה מלאה בעברית ו RTL
שלום, התקנתי את אלמנטור על תבנית ברלין והוא כותב לי:
אלמנטור דורש PHP גרסה 5.4 ומעלה, התוסף אינו פעיל כרגע.
למה זה כך?
זה קשור לגרסת ה-PHP שמותקנת בשרת האחסון שלך. צרי קשר עם חברת האחסון ובקשי מהם לשדרג ל-PHP 5.4 ומעלה.
גיליתי אתמול את אלמנטור, בניתי אתר שלם בכלום זמן, התוסף הזה יכבוש את וורדפרס הוא פשוט גאוני! כל הכבוד לכם עשיתם לי את החיים לסופר קלים!
שאלה: יש כרגע אפשרות להגיד אנימציות לוידגטים? כי לא מצאתי אפשרות כזאת..
חובה לאפשר את זה
תודה רבה, כיף לשמוע.
כרגע אין עדיין אנימציות לוידגטים, אנחנו עובדים על זה וזה יכנס באחת הגרסאות הבאות
האם יש אפשרות לשכפל את העיצוב שיצרנו באלמנטור מדף לדף – כמו את התבניות עמוד?
זה פיצ'ר שאנחנו עובדים עליו ויצא בקרוב.
האם זה מתאים לכל סוגי התבניות
באיזה תבניות מומלץ להשתמש בה
(חינמי)
תודה רבה
נראה משהו מפתיע
ג'נרייטפרס: https://generatepress.com/
יש אפשרות להוספת צור קשר? CF7 ??
כי אני לא מוצא
כמובן, אתה יכול להוסיף את הטופס באמצעות השורטקוד שלו לוידג'ט עורך טקסט
אהה מצויין , תודה אריאל
היי , אם אני רוצה לשתול רקע ב HTML + CSS איך אני עושה את זה
בתיבת HTML הוא לא מזהה את הCSS ומראה את זה כטקסט
תודה
נראה שהתוסף הזה מעולה
סליחה על הבורות, אבל איך אני מתחילה להשתמש בו? התקנתי וורדפרס וגם תבנית (פוג'ו) ואת אלמנטור אני מעלה כתוסף?
א. לא חייבים דווקא תבנית של פוגו, אלמנטור עובד על כל תבנית WP
ב. כן, פשוט מתקינים את התוסף אלמנטור. אם אתה משתמש בתבנית שלנו זה אמור לתת לך המלצה מיוחדת
האם ניתן לשלוט באמצעות אלמנטור
גם על החלקים הקבועים של אתר האינטרנט ?
העליון Header והתחתון footer .
כולל יכולת לעצב את סרגל התפריט וכותרות האתר .
יישר כוח .
אני סבור שאלמנטור הוא אחד הפיתוחים החשובים
והמלהיבים ביותר לאתרי אינטרנט .
אני משתמש בתוספים שנמצאים בחבילת Jetpack של וורדפרס
ותוספי פייסבוק וטוויטר שכלולים בחבילה אינם עולים במסגרת האלמנטור,
איך פותרים את זה ?
כמו כן האם לאלמנטור יש תוספים דומים של פייסבוק וטוויטר שמאפשרים
להציג את הפוסטים ברשתות החברתיות ולא רק אייקון מקושר ?
תודה .
כרגע לא ניתן לשלוט על אזור ההידר והפוטר באתר עם אלמנטור.
לגבי הבעיה שיש לך עם jetpack אשמח אם תכוון אותנו יותר מה בדיוק אתה מנסה להכניס שלא עובד לך.
כל וידג'ט שקיים במערכת וורדפרס אוטומטית אמור להופיע אצלך גם בפאנל הניהול של אלמנטור. פשוט חפש אותו וגרור אל אזור התוכן, אתה אמור לראות אותו במיידית.
היי אריאל .
אני מתכוון לוידג'טים האלה שמשולבים בחבילת (Jetpack)
תוסף לעמוד פייסבוק (Jetpack)
וידג'ט: ציר הזמן של טוויטר (Jetpack)
אומנם ניתן לגרור אותם לתוך העמודה של אלמנטור
אבל בפועל זה נתקע ואינו פועל .
*** אגב כדאי לבחון אפשרות לצרף לאלמנטור תוספים מהסוג הזה
שמציגים את ציר הזמן של פייסבוק או טוויטר .
שאלה נוספת .
בעת הוספה של עמודה חדשה אל בין עמודות קיימות .
אין דחיקה של העמודות הקיימות כלפי מטה
כדי לאפשר שילוב של העמודה החדשה בין הקיימות .
במקום זאת העמודה החדשה מתווספת לצידי עמודה
או עמודות קיימות,
מה שמאלץ להתחיל בגרירה של כל העמודות הקיימות
כלפי מטה האחת אחר השנייה
כדי ליצור רווח ומקום לעמודה החדשה .
האם ניתן אחרת ?
לא כ"כ הבנתי בדיוק מה בדיוק אתה רוצה לעשות, ניתן להוסיף לכל שורה עד 10 עמודות שונות. פשוט תכניס את זה פנימה
איך מוסיפים טופס צור קשר לדף הנחיתה
באמצעות תוסף טפסים חיצוני, אם אתה משתמש בתבניות של פוג'ו אתה יכול לעשות זאת באמצעות תוסף הטפסים שלנו, או באמצעות תוסף טפסים כמו Contact Form 7
יופי של מערכת!! תודה:)
אשמח לעזרה שלכם…
יש לי אתר קיים, ואני רוצה להשתמש באלמנטור, הבעיה שאני לא יכול להתחיל להעביר את כל האתר לפורמט של האלמנטור, ורוצה להשתמש בתכונות מסויימות של האלמנטור.
עד היום במוצרים אחרים עשיתי את זה ע"י העתקת הקוד שנוצר (לדוגמא של כפתור וכו').
באלמנטור הוא לא מייצר קוד שאני יכול להעתיק, האם יש לך פתרון שלי לדבר?
אשמח לתשובה
האם כל עמוד נראה אחרת? בדרך כלל רוב העמודים נראים דומים, לפחות במבנה, ואז אתה יכול ליצור את המבנה פעם אחת באלמנטור, ולשכפל אותו בעזרת ספריית הטמפלייטים ולשים אותו בעוד עמודים. אז כל מה שנשאר לעשות זה קצת עדכוני עיצוב והעתק הדבק של התוכן מהאתר הישן לחדש.
יש מדריך לשימוש ?
כשאני לוחץ תחת : עמודים -> שם העמוד -> אלמנטור זה רק מעביר אותי לעמוד בצורת לייב אבל האלמנטור לא נפתח כלל.
שלום לכם,
אני משתמשת באלמנטור. הכל עבד יפה עד שפתאום הוא מסרב להביא תמונות. כשאני רוצה להוסיף תמונות לגלריה, ולוחצת על הכפתור, הוא פשוט לא מגיב.
הגלריות ממשיכות לעבוד, רק אי אפשר לעדכן.
מה קורה??? יש רעיון???
ניתקתי את כל התוספים וזה לא עזר.
אודה לכם על תשובה מהירה…..
דליה
אם כיבית כבר את כל התוספים במערכת, תנסי להעביר לתבנית ברירת מחדל ולבדוק אם עדיין הבעיה מתרחשת. זה נראה כמו קונפליקט JS בין תוספים או עם התבנית.
שלום,
יש לי עמוד קיים,ואני מנסה לבנות באמצעות התוסף עמוד נחיתה חדש אבל לא מצליחה להפתר מהפוטר וההדר.
מה צריך לעשות על מנת ליצור עמוד חדש?
תודה,
מורן.
זה כבר תלוי בתבנית שלך אם יש בה כבר אפשרות של עמוד בלאנק שמסתיר את ההידר והפוטר. עם איזו תבנית את משתמשת?
הסתדרתי 🙂 הורדתי תוסף עמוד ריק.
עכשיו יש לי עוד שאלה איך עושים טופס יצירת קשר? לא רואה משהו קיים…
מעולה, הצלחתי.
איך בונים טופס יצירת קשר? אני לא רואה טופס קיים…
בגרסת הפרו של אלמנטור אנחנו מציעים ווידג'ט טפסים.
תוכלי לקרוא על זה כאן:
http://docs.elementor.com/article/92-forms
אוקי, ואם אין לי פרו, מה עושים?
אם אין לך פרו, את יכולה ליצור טופס עם תוסף הטפסים שלנו (או תוסף אחר) ולהטמיע אותו בעזרת שורטקוד.
איך מטמיעים בתוך האלמנטור? מה זה שורטקוד?
לאחר שאת יוצרת טופס תראי שנוצר לך גם שורטקוד:
http://imgur.com/a/7lTRw
כל מה שאת צריכה זה להעתיק אותו ולהכניס אותו בעזרת ווידג'ט שורטקוד (או ווידג'ט טקסט רגיל).
שלום,
התצוגה בנייד לא מותאמת. למרות שבפאנל ניהול זה נראה טוב אבל בנייד עצמו זה לא תקין. מה צריך לעשות?
זה הדף נחיתה:http://www.qualityinteriordesign.com/studies/
את מוזמנת לפנות לתמיכה שלנו: support@elementor.com
שלום
איך מכניסים קוד של js באלמנטור?
היי מלי,
אי אפשר להכניס קוד JS
היי
כיצד אני יכול ליצור טבלא בעמוד רגיל ?
והאם יש ל – ELEMENTOR מדריך
אין צורך באלמנטור ליצירת טבלה, יש תוספים שמאפשרים לעשות טבלאות בוורדפרס: https://wordpress.org/plugins/tablepress/
אפשר בבקשה לינקים לאתרים שנבנו בעזרת אלמנטור כדי לקבל רעיונות לדפים כמו צור קשר, בלוג, דף הבית אודות דף פנימי ועוד…
כנס לקבוצה בפייסבוק אנשים מעלים שם המון אתרים שלהם.
התקנתי את האלמנטור, והוא לא מעלה לי אפשרות לפתוח אותו בדף, הוא לא מציק אותו בכלל.
אשמח לעזרה
דבר עם התמיכה שלנו
נעלם לי התגובות באתר למרות שהכל פועל
אנא פנה לתמיכה שלנו
הי,
למה אני לא מצליחה לשנות את רוחב האיזור באלמנטור?
ניתן לעשות את זה בקלות, על ידי עריכת הגדרות האזור באלמנטור.
יש לי שאלה עקרונית.
האם ניתן לערוך ולנהל אתר שלא נבנה באלמנטור, בעזרת אלמנטור?
הסיבה שאני שואל היא שאני מעוניין לשכור שרותי בניית אתר, אבל בעתיד אני מעוניין לערוך ולהוסיף תכנים בעצמי לאתר בעזרת אלמנטור.
אלמנטור עובד על כל אתר מבוסס וורדפרס, לא משנה על איזה תבנית הוא הוקם.
האם אפשר להתקין אותו בצורה סלקטיבית על עמודים/פוסטים ספציפיים (קיים בילדר אחר בתבנית)
האם אפשר לייבוא אייקונים/ לוגואים באלמנטור? כי זה נותן רק רשימת בחירה בקטגוריית אייקון
תודה
אני חושבת על התחלת עיצוב אתר בוורדפרס, אך כרגע אין לי שום ידע בתחום 🙂
אני יודעת שיש בעיה עם ״עברות״ של תבניות מאנגלית. האם על ידי שימוש באלמנטור
אוכל להשתמש בתבנית שכזו ? (ראיתי באחד האתרים ברשת תבנית שממש מצאה חן בעיני, תומכת RTL).
אלמנטור יש תמיכה מלאה ב RTL אז לא משנה באיזו תבנית תשתמשי זה יעבוד כמו שצריך
יש אפשרות לקבל ניוזלטיר וקישורים לחדשות באלמנטור כמו ששולחים לי במייל אבל בעברית?
ממש חבל שהתוסף הזה תחת פיתוח ישראלי אבל כל המיילים שמגיעים הם באנגלית אולי כדאי לעשות את האתר של אלמנטור גם בשפה עברית.
מזה החדשות: Introducing Elementor Blocks for Gutenberg
אשמח להסבר, תודה רבה
יש לי את אלמנטור פרו תודה רבה לכם ממש מוצלח וידידותי נח וקל לעצב איתו אתרים
כל התוכן שלנו עבור אלמנטור מופק באנגלית מהסיבה הפשוטה שזו השפה המקצועית המדוברת בעולם.
תודה ענקית על הפלאגין הזה האתר שלנו נהדר בזכותו.
מה שעדיין אינני מצליח לעשות זה תגיות alt לתמונות.
הייתי שמח מאד להבין איך אני יכול לעשות אותם.
משום שכבונים את האתר עם הפלאגין אין אפשרות לערות את התמונות בלוח הבקרה הרגיל של וורדפרס.
תודה רבה רבה
כל תמונה שיש לה תגית ALT במדיה של וורדפרס תציג את התגית גם באתר עצמו, פשוט צריך להגדיר לכל תמונה את התגית המתאימה