חדש! Elementor
Experts Network — מצאו שותפים לדרך, קדמו והגדילו את העסק שלכם

הכירו את אלמנטור 3.0

תרגום: הדס גולצאקר | אוגוסט 2020

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

נגן וידאו

בכל גרסה חדשה, אלמנטור צועדת קדימה ומפגינה יכולות שלא היו כמותן בעבר. אבל בגרסאות המרכזיות, מדובר בקפיצת מדרגה של ממש. אלמנטור 1.0 (ב-2016) הביא בשורה חדשה לעיצוב ויזואלי בוורדפרס, ואלמנטור 2.0 (ב- 2018) הציג את בונה התבניות העוצמתי שחולל מהפכה בעולם היצירה בווב. 

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

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

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

הכירו את הדיזיין סיסטם

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

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

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

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

וואוו!

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

אלמנטור 3.0 - מהפכה בתהליך העבודה שמאפשרת לכם ליצור אתרים בדרך מהירה ומדויקת יותר

מה זה דיזיין סיסטם?

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

כל רכיבי האתר שלכם מוגדרים – וכך כל הצוות מסונכרן ומניב תוצאות עקביות ב-100% במשך כל זמן העבודה על האתר.

הפיצ'רים לדיזיין סיסטם באלמנטור כוללים:

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

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

דיזיין סיסטם, פיצ׳ר 1:

הגדרות גלובליות

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

לג׳נגל בין תבנית קוד, התאמות.. למי יש כוח לכל זה.

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

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

בתוך פאנל ההגדרות הגלובליות תמצאו את האלמנטים הבאים:

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

דיזיין סיסטם, פיצ׳ר 2:

צבעים גלובליים

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

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

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

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

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

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

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

דיזיין סיסטם, פיצ׳ר 3:

פונטים גלובליים

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

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

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

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

הכירו את בונה התבניות החדש

כל האתר שלכם מעוצב ומאורגן ממקום אחד.

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

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

איך זה עובד?

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

כדי להתחיל לבנות את האתר שלכם עם בונה התבניות החדש, הקליקו על אייקון ההמבורגר בפינה השמאלית העליונה באדיטור, ואז על בונה התבניות. תוכלו גם לגשת אליו מתוך תפריט האדמין העליון וגם על ידי שימוש בקיצור CMD / CTRL + Shift + E. האופציה הזו ישימה בכל מקום באתר.

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

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

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

בונה תבניות חדש: סופסוף יש לכם את היכולת להתבונן מלמעלה על כל רחבי האתר

פיצ'ר בונוס: שיפור ביצועים

כולנו תמיד רוצים לשפר את המדד של ביצועי האתר…

לכן ערכנו כמה עדכונים לקוד ולתשתיות שלנו – שהניבו שיפור בולט בביצועים.

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

איך השתפרה המהירות של טעינת העמוד?

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

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

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

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

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

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

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

הגיע הזמן לקחת את גרסה 3.0 לסיבוב!

עבודה עקבית ומקצועית עם דיזיין סיסטם.

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

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

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

רוצים להיות כותבים במגזין שלנו?

תרגום:

הדס גולצאקר

מובילת הצמיחה של אלמנטור בישראל, מעצבת, FOODIE ומעריצה של סטפן סגמייסטר

אהבתם? שתפו.
שיתוף ב facebook
שיתוף ב twitter
שיתוף ב telegram
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

2 Responses

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

רוצים להיות כותבים במגזין שלנו?

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

רוצים להיות חלק מאלמנטור?

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

בואו לגדול במקום הנכון - בזמן הנכון