מדריך לשינוי סדר עמודות על ידי CSS (לעיצוב אתרי אלמנטור רספונסיביים)

היום נלמד איך לסדר את האיזורים ואת העמודות באתר על פי הסדר שאנחנו רוצים לפי גודל המסך 
ללא יצירת איזורים כפולים וללא הסתרת איזורים במסכים השונים !

למשל: אם בשולחני הלוגו בצד שמאל והתפריט מצד ימין
ובנייד אנחנו רוצים שהלוגו יהיה מימין והתפריט יהיה משמאל 

אז בואו נתחיל ונסביר הכל בהמשך

סידור עמודות ואיזורים על ידי CSS - המדריך המלא
(מבוא לעיצוב אתרים רספונסיביים)

קודם כל בואו נתחיל בוידאו קצר ולעניין שמסביר את כל התהליך ואז נמשיך:

לינק ליוטיוב

נגן וידאו

ראיתם את הוידאו? מצוין !

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

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

כשאנו בונים אתרי אינטרנט עריכת תוכן ופריסת העמוד מאוד חשובה לחוויית המשתמש
ובשביל להשתמש בתכונה שאנחנו מציגים פה היום בכלל לא צריך ידע והבנת המושגים של CSS כמו:
LAYOUT / CSS GRID / CSS FLEX / GRID TEMPLATE COLUMN / מרווח בין תמונות HTML / מושג BOOSTSTARP ועוד … 

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

שלב 1 – CSS CODE – קוד CSS להטמעה

במידה ואנחנו עובדים אם אתר אלמנטור אנחנו נסמן את האלמנט שנרצה לשלוט עליו, נלחץ עליו,
ואז יש לנו אופציה ב "אפשרויות –> מתקדם" אם נירד הכי למטה אנחנו נראה תיבת "CSS מותאם"(CUSTOM CSS)

נכניס את הקוד הבא:

				
					
@media only screen and (max-width:1024px){
    selector{
        order:1;
    }
}
				
			

והקוד אומר ככה: 

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

ככה אנחנו עוברים על כל האלמנטים בעמודה ונותנים להם מספור לפי הצורך 1,2,3,4 וכן הלאה …

כדי לשנות את הקוד שישלוט רק על מובייל (טלפון נייד) ולא יכלול את הטאבלט אנו נשנה את הקוד ל :

				
					
@media only screen and (max-width:767px){
    selector{
        order:1;
    }
}
				
			

בואו לראות ולהתרשם מאתרים שבניתי

HQD TECH ISRAEL – סיגריה אלקטרונית חד פעמית הטובה בעולם

חנות אינטרנטית ווקומרס לקניית סיגריות אלקטרוניות חד פעמיות הטובות בעולם !

City Electric – Your NYC Electrician

אתר תדמית לחשמלאי מוסמך בניו-יורק, ארצות הברית

פאי קלין ניקיון ואחזקה

אתר תדמית לחברת ניקיונות ואחזקת מבנים בחיפה והצפון, האתר נבנה במערכת WordPress ו Elementor PRO

אם אהבתם נשמח לשיתופים ותגובות, בהצלחה לכולם !

שיתוף ב facebook
Facebook
שיתוף ב whatsapp
WhatsApp
שיתוף ב email
Email
שיתוף ב print
Print

כתיבת תגובה

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

פוסטים נוספים

שיפור מהירות אתרים – מדריך שלבים וטיפים איך לשפר מהירות אתר וזמני טעינה (2022)

איך לבדוק את מיקום ודירוג האתר בגוגל?-כל המידע הנחוץ נמצא כאן