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

10 הדיברות לעבודה נכונה באלמנטור

עידו ליש | מאי 2020

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

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

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

א' לא תיישר וידג'טים באמצעות עמודות

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

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

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

ב' לא תוסיף אזור פנימי בתוך אזור עם עמודה אחת

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

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

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

ג' כבד את עיצוב התבנית

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

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

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

ד' לא תיקח וידג'ט ספייסר

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

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

ה' לא תגרור כל וידג'ט לאזור נפרד

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

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

ו' הפרד בין מרג'נים לפדינגים

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

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

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

ז' לא תעתיק ותדביק אובייקטים זהים

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

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

ח' המעט בהסתרה רספונסיבית

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

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

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

ט' הפעל overflow:hidden

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

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

י' לא תשתמש במיקום אבסולוטי לשווא

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

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

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

לסיכום,

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

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

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

עידו ליש

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

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

10 Responses

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

כתיבת תגובה

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

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

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

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

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

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