חינמי – תבנית בסיס לעיצוב גלובלי באלמנטור!

גרסה 3 של אלמנטור נכנסה לחיינו בסערה, ועכשיו אחרי שהסערה דעכה, אפשר להתרכז בדברים הטובים שהיא הביאה עימה :)

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

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

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

מתוך המדריך של אלמנטור לעיצוב הגלובלי

מהו העיצוב הגלובלי באלמנטור?

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

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

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

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

איך משתמשים בהגדרות הגלובליות?

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

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

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

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

רגע, אז למה צריך תבנית בסיס?

אם רק התחלתם לבנות את האתר, לא יהיה בו שום תוכן. ואם אין תוכן – לא משנה מה תעשו בהגדרות הגלובליות, לא תוכלו לראות את השינויים (קצת בעייתי כשמעצבים, לא?).

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

איך משתמשים בתבנית ובעיצוב הגלובלי?

1. הורידו את הקובץ הבא:

2. ערכו עמוד חדש עם אלמנטור

3. לחצו על אייקון התיקייה כדי לטעון את התבנית

4. לחצו על החץ הקטן והעלו את קובץ ה-json מהמחשב שלכם

5. הוסיפו את התבנית לעמוד (לחצו "כן" על "ייבוא הגדרות מסמך" כשתישאלו)

וזהו! אתם מוכנים לעבודה!

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

ואם רוצים לעבוד על אתר בנוי ולא חדש?

באתר בנוי התהליך הוא קצת יותר ארוך, אבל לדעתי שווה לגמרי את ההשקעה במידה ותרצו לשנות בו את העיצוב באיזשהו שלב בעתיד.

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

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

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

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

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

כמה טיפים חשובים:

  • וודאו שאתם על הגרסה העדכנית ביותר של אלמנטור

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

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

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

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

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

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

Sharing Is Caring