ימים
שעות
דקות
שניות
הזדרזי! המבצע בתוקף עד 04.04.2024

איך אני מגדירה בהצגת הגריד שיהיה מיושר לאמצע? הוא אמור להציג 2-4 פוסטים, ואני רוצה שיהיה בכל פעם ממורכז לאמצע.

כדי ליישר את הגריד למרכז את צריכה להוסיף קוד CSS לוידג’ט. בכרטיסיה מתקדם > CSS מותאם אישית > הדביקי את הקודים הבאים לפי הצורך.

יישור ליסטינג גריד של ג’ט אנג’ין למרכז

הכי קל להשתמש בליסטינג גריד של ג’ט אנגי’ן, ולהוסיף לו שורת קוד אחת בCSS, המגדירה לו יישור אוטומטי למרכז:

selector .jet-listing-grid__items{
    justify-content: center !important;
}

יישור גריד פוסטים של אלמנטור למרכז

באלמנטור הגריד מתבסס על css-grid, ולכן הקוד יהיה קצת יותר מסובך.

הכי טוב להחליף את שיטת הגריד לflex, עם הקוד הזה:

selector .elementor-posts-container{
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap;
}

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

בכל מקרה, אם את רוצה לחלק ל4 עמודות, עם מרווח של 30px בין העמודות, הקוד הבא יתאים לך:

selector .elementor-grid-item{
    flex-basis: calc(25% - 22.5px) !important;
}

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

2 תגובות

כתיבת תגובה

הדרכות נוספות שיכולות לעזור לך

איך להגיש ללקוח חוזה עבודה? מה חשוב לכתוב בחוזה לבניית אתר? אשמח לקבל ממך הוראות והכוונה

איך אפשר להציג כפתור הורדת קבצים באתר רק למשתמשים מחוברים?

האם ניתן להציג את מספר הצפיות בפופאפ של ג’ט באמצעות Data Stores, או שזה עובד רק בפוסט-טייפ עצמו?

איך גורמים ללקוח לסגור עסקה כאן ועכשיו?

איך אפשר לגרום לתפריט העליון (header) באתר להופיע רק לאחר גלילה? יש אפשרות לבצע את האנימציה רק עם אלמנטור פרו?

איך מוסיפים אייקון לכל קישור בוידג’ט תפריט ניווט של אלמנטור?

אפקט מעבר על קונטיינר באלמנטור עם CSS (הקונטיינר שעוברים עליו אטום, וכל השאר שקופים)

איך אפשר לצרף גולשים לרשימת תפוצה במיילצ’ימפ עם טופס אלמנטור פרו?

כלים אלופים

10 כלים מומלצים
שיעזרו לך לעבוד מהר יותר
דילוג לתוכן