code-1076536_1280

מיפוי תכונות ב CSS ואיך מגדירים אותם באלמנטור בלי קוד

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

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

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

גם הכרות עם CSS  הופכת את העבודה עם אלמנטור לפשוטה וברורה.

אז לטובת אלו שמכירים CSS,  הנה מיפוי קטן של תכונות ב CSS ואיך מגדירים אותם באלמנטור בלי קוד:

כשאנחנו עורכים ווידגט באלמנטור יש לנו שלוש לשוניות:

תוכן, סגנון ומתקדם.

הלשונית תוכן מתייחסת בעיקר ל html שיווצר

הלשונית סגנון מתייחסת בעיקר להגדרות CSS בסיסיות

כך למשל ישור מתורגם ל text align

צבע טקסט  ל color

טיפוגרפיה תתייחס ל font-family, font-size, font-weight  וכו'

הלשונית מתקדם מגדירה כמה תכונות CSS  מתקדמות

בלשונית מתקדם תחת הכותרת מתקדם ישנה הגדרה של "מרווח חיצוני" ו "מרווח פנימי" – ההקבלה היא כמובן ל  Marginו  padding (מודל הקופסא)

z-index – כשמו כן הוא – z-index

מסגרת – תתורגם ל border  , border radius ו box-shadow

מיקום מאפשר לנו לשלוט בתכונות Position  ו display

בשדה מיקום (position) הערכים האפשריים הם מקובע fixed ו מוחלט absolute

בשדה רוחב הערכים האפשריים הם "בתוך שורה" כלומר inline ו"רוחב מלא" כלומר block

 

באפקטי תנועה משולב קצת JS

כך למשל דביק כלפי מעלה יהיה position fixed רק משלב מסויים אחרי שגללו קצת ולא מהתחלה

 

נשאר רק לנחש מה הדבר הבא שאלמנטור יוסיפו…

תהיו חברתיים. שתפו...

כתיבת תגובה