איך לעבוד עם פקודת אינליין Inline באלמנטור
יעל לוי
יעל לוי

פקודת Inline באלמנטור

מה זה פקודת Inline ואיך היא עוזרת לנו בעיצוב האתר?

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

הדרך המוכרת – לעבוד עם אזורים פנימיים

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

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

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

אפשר לעבוד עם css

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

למה בכל זאת כדאי לכם לדעת קוד ?
מכיוון שהפיתרון של אלמנטור הוא כזה, הוא אמנם ויזואלי אבל הוא לוקח את הפקודה {display:inline} ונותן לנו לשלוט עליה באמצעות הגדרות בטאב מתקדם.

אז מה הפיתרון של אלמנטור

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

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

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

נחיל את פקודת ״בתוך השורה״ גם על הכפתור השני ונרווח בעזרת שוליים

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

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

הגדרות היישור של העמודה שולטות במיקום הוידגטים שנמצאים בפקודת inline

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

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

שתפו את הפוסט אם אהבתם

רוצה להתארח בבלוג שלנו?

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

תגובה אחת

כתיבת תגובה

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

עדכונים מהקהילה

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

* בדיוק כמוכם גם אנחנו לא אוהבים ספאם – מבטיחים לעדכן רק בדברים מעניינים

דילוג לתוכן