מה זה פקודת Inline ואיך היא עוזרת לנו בעיצוב האתר?
פקודת inline או בתרגום לעברית ״בתוך השורה״ היא פקודה סופר שימושית וחשובה, שבעצם עוזרת לנו למקם 2 וידג׳טים כך שיופיעו אחד לצד השני ולא אחת מתחת לשני כפי שקורה כשאנחנו גוררים וידג׳טים לאזור העבודה שלנו.
כשמאפיינים אתר לפעמים עולה צורך עיצובי או שיווקי למקם 2 סוגים של וידג׳טים אחד ליד השני באותה העמודה. למשל שני סוגים של טקסט (שיש להם צבע שונה, גופן שונה או גודל שונה, או שני כפתורים שאנחנו רוצים למקם אחד ליד השני.
הדרך המוכרת – לעבוד עם אזורים פנימיים
אחד הפתרונות הכי מוכרים הוא להשתמש באזור פנימי שאותו מכניסים לתוך עמודה, לאזור הפנימי יש עמודות פנימיות משלו ובתוכן אנחנו יכולים להציב את הוידג׳יטים שלנו כך שיראה כאילו הם מוצבים אחד לצד השני.
באופן כללי כשאנחנו בונים אתרים מומלץ להשתמש בכמה שפחות אזורים או עמודות, או אזורים פנימיים שאנחנו לא זקוקים להם, כל מבנה נוסף שאנחנו מוסיפים, מוסיף עוד שורות קוד ומעמיס על האתר.
סיבה נוספת היא שיש מגבלה לכמות האזורים הפנימיים שאפשר להכניס ולשלב אחד בתוך השני, באלמנטור אי אפשר להוסיף אזור פנימי לתוך עמודה שכבר נמצאת בתוך אזור פנימי, ולמרות שיש תוספים שכן מאפשרים את זה, עדיף להתקין כמה שפחות תוספים באתר.
אפשר לעבוד עם css
אם אתם יודעים לעבוד עם קוד, אתם יכולים להגדיר קלאסים והגדרות עיצוב, אבל עדיין האפשרות הזו לא פותרת לנו את הבעיה של להציב 2 כפתורים אחד לצד השני.
למה בכל זאת כדאי לכם לדעת קוד ?
מכיוון שהפיתרון של אלמנטור הוא כזה, הוא אמנם ויזואלי אבל הוא לוקח את הפקודה {display:inline} ונותן לנו לשלוט עליה באמצעות הגדרות בטאב מתקדם.
אז מה הפיתרון של אלמנטור
אם תסמנו וידג׳ט באלמנטור (נניח כפתור) ותעברו לטאב מתקדם שם בהגדרות
מיקום > רוחב > תבחרו בהגדרה בתוך השורה
תשימו לב שהוידגיט התיישר לימין (או שמאל תלוי בשפת האתר) ושהמסגרת הכחולה שסובבת אותו עוטפת אותו בדיוק לפי השוליים שמוגדרים לוידגיט זה.
כדי לרווח בין הוידג׳טים – נחיל הגדרות שוליים לכל אחד מהם, אחרת הם פשוט נמצדים אחד לשני ללא ריווח כלל.
מעולה, עכשיו הכפתורים הסתדרו אחד לצד השני כמעט בעצמם 🙂
הדבר האחרון שנשאר לנו לטפל בו הוא ליישר את 2 הכפתורים למרכז העמודה. כשמחילים הגדרות ״בתוך השורה״ על וידג׳ט לא ניתן לשלוט יותר בהגדרות המיקום שלו, אם ננסה ליישר את הכפתורים בעזרת הגדרות היישור הרגילות – לא נראה הבדל.
גם לזה יש פיתרון כמובן, כדי ליישר את הכפתורים למרכז המסך, נצטרך לסמן את העמודה שבתוכה מקוננים הכפתורים, ושם בהגדרות פריסה > ביישור אופקי לבחור באפשרות > ממורכז. זהו עכשיו הכפתורים התיישרו לאמצע העמודה.
יש מקרים נוספים בהם מומלץ להשתמש בפקודת המיקום ״בתוך השורה״ אני מזמינה אתכם לצפות בסרטון ההדרכה שהכנתי על שימושים נוספים.
יעל לוי זוכת מקום ראשון בתחרות אלמנטור ישראל 2019, מייסדת הסטודיו לעיצוב ובניית אתרים Landwiz ולאחרונה הצטרפה לצוות המנהלים של קהילת אלמנטור ישראל. יעל עוסקת בבניית אתרים מקצועיים, הדרכות והרצאות לבוני אתרים.
תגובה אחת
וואוו, חסכתי לי שעות של עבודה!!!