אנשי אלמנטור!

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

שם ייחודי לאובייקט (סליידר/אזור):
בדוגמאות אשתמש בשם myBG ואחרי שתעתיקו את הקוד css, תוכלו להחליף אותו בכל שם שתחליטו לתת לאובייקט שלכם.

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

יחס גובה-רוחב של התמונה:
בדוגמאות אשתמש בתמונת רקע שהגודל שלה הוא:
רוחב: 1280px
גובה: 720px

נעשה חישוב קצרצר ליחס גובה-רוחב של התמונה: (גובה לחלק לרוחב) = 0.5623

לכן בקוד אשתמש ביחס 0.5623 ואחרי שתעתיקו את הקוד css, תחליפו אותו ביחס הגובה-רוחב של התמונת רקע שלכם.

סליידר

בטאב ״פריסה״ > לשונית ״פריסה״:
- רוחב תוכן: רוחב מלא
- ריווח בין העמודות: ללא ריווח
- מתיחת אזור JS: נפעיל

בטאב ״תוכן״ > לשונית ״סליידרים״:
- לכל סליידר:
  - נבחר תמונה.
  - נגדיר את גודל התמונה: הכלה/מתוחם/contain

בטאב ״מתקדם״ > לשונית ״מתקדם״:
- נכתוב את השם הייחודי שבחרנו לאובייקט בשדה CSS ID
בטאב ״מתקדם״ > לשונית ״CSS מותאם״:
- נדביק את הקוד CSS הבא ונחליף:
  1. את יחס הגובה-רוחב של התמונה שלנו (במקום 0.5623)
  2. את השם הייחודי שלנו (במקום myBG)

שימו לב לא למחוק את הסולמית # שבקוד לפני ובצמוד לשם הייחודי.

#myBG .swiper-slide {
height: calc(100vw * 0.5623);
}

אזור

בטאב ״סגנון״ > לשונית ״רקע״:
- סוג רקע: קלאסי (בלחיצה על הכפתור עם אייקון של מכחול)
- נבחר תמונה.
- נגדיר את גודל התמונה: הכלה/מתוחם/contain

בטאב ״מתקדם״ > לשונית ״מתקדם״:
- נכתוב את השם הייחודי שבחרנו לאובייקט בשדה CSS ID
בטאב ״מתקדם״ > לשונית ״CSS מותאם״:
- נדביק את הקוד CSS הבא ונחליף:
  1. את יחס הגובה-רוחב של התמונה שלנו (במקום 0.5623)
  2. את השם הייחודי שלנו (במקום myBG)

שימו לב לא למחוק את הסולמית # שבקוד לפני ובצמוד לשם הייחודי.

#myBG > .elementor-container, #myBG.elementor-section-height-full {
height: calc(100vw * 0.5623);
}

אם אין לכם אלמנטור פרו - אפשר להטמיע את הקוד CSS בתבנית
(עיצוב > התאמה אישית > CSS מותאם)