מבנה של 4 ו 3 עמודות באלמנטור

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

התוצאה שנרצה להשיג

הבעיה - ברירת המחדל

כדי לסדר בעיה זו, נוסיף לאיזור השני עוד 2 עמודות מצד ימין ומצד שמאל, וניתן לאיזור קלאס בשם my-second-row

ובקובץ ה CSS נרשום את הקוד הבא על מנת למרכז את העמודות למרכז:

.my-second-row .elementor-row{justify-content: center;}

ל 2 העמודות שהוספנו מקודם נוסיף קלאסים

  • לעמודה הימנית נוסיף קלאס בשם right-column
  • ולעמודה השמאלית נוסיף קלאס בשם left-column

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

@media (min-width: 767px){
   .my-second-row .elementor-column{width:25%;}
}

ולאחר מכן "נאפס" את רוחב העמודה הימנית והעמודה השמאלית (כמובן לכתוב בתוך המדיה קווערי שלמעלה )

body .my-second-row .right-column, body .my-second-row .left-column{width:0%;}

וזו התוצאה:

ירון רוזן

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

לפוסט הזה יש תגובה אחת

  1. ניקול

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

כתיבת תגובה