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

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

שיתוף ב facebook
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

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

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

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

כמה מילים על קונבניציות בעיצוב אתרים

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

אלמנטור אזור boxed

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

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

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

גבולות אזור התוכן באתר של קובי אריאלי

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

הצמדת תמונה למסך – טריק קטן שעושה הבדל גדול

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

דוגמה של הצמדת תמונה לקצה המסך- לפני

הנה דוגמה לתוצאה הסופית. שימו לב מה השתנה בפריסת התמונה של הפלמינגו:

דוגמה של הצמדת תמונה לקצה המסך

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

למה בכלל צריך התערבות של קוד כדי להצמיד תמונה למסך?

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

אז אולי פשוט אזור עם רוחב מלא?

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

פיתרון באמצעות סקריפט

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

מה עוד הסקריפט עושה?

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

יוצאים לדרך:

  1. צרו אזור עם שתי עמודות או יותר.
  2. הכניסו תוכן לעמודות כרצונכם. מקמו תמונה באחת העמודות הקיצוניות (הימנית ביותר או השמאלית ביותר).
  3. הגדירו לעמודה בה התמונה, שתהיה ללא שוליים פנימיים בכיוון שפונה אל קצה המסך (אחרת, גם כשהתמונה תיצמד למסך ישארו שוליים)
  4. מומלץ לודא שלא מוגדרים שוליים חיצוניים בכלל לעמודה שבה מיקמתם את התמונה. מצאתי שזה עלול ליצור חוסר דיוק במקרים מסויימים.
  5. תמונה שצריכה לתפוס חצי מסך צריכה להיות ברזוצולוציה של 1000px.
  6. אם בשלב זה התמונה לא מכסה את כל רוחב העמודה, הגדירו לתמונה רוחב של 100% (תחת הלשונית סגנון).
  7. תוכלו להגדיר לתמונה גם גובה. זה לא חובה, אך אתם תיווכחו לראות שיש לתמונות נטייה להגזים ולתפוס המון גובה במסכים גדולים, ולכן יש היגיון בלהגדיר לתמונה גובה רצוי, ואז להגדיר לה התאמת אובייקט: כיסוי.
  8. במתקדם, בשדה CSS Classes, הגדירו לתמונה את הקלאס snap-to-screen.
  9. הזינו את הסקריפט הבא (באמצעות enqueue לקובץ JS או טעינה להוק wp_footer או עם פיצ'ר Custom code של אלמנטור):
    
    <script>
      jQuery(window).on("resize", function () {
        jQuery( '.snap-to-screen' ).each(function() {
          snapToScreen = jQuery(this);
          snapToScreenImg = snapToScreen.find('img');
          column = snapToScreen.closest('.elementor-column');
          sectionContainer = snapToScreen.closest('.elementor-container');
              
          let screenWidth = jQuery(window).width();
          let imageWidth = snapToScreen.width();
          let sectionContainerWidth = sectionContainer.width();
          let gapWidth = (screenWidth - sectionContainerWidth) / 2;
          let newImageWidth = gapWidth + imageWidth;
              
          if (screenWidth > sectionContainerWidth) {
            snapToScreenImg.css('width', newImageWidth +  'px' );
              if (column.is(':first-child')) {
                if (jQuery('body').hasClass('rtl')) {
                  snapToScreenImg.css('right', '-' + gapWidth -  'px');
                } else {
                  snapToScreenImg.css('left', '-' + gapWidth -  'px');
                }
              }
            } else {
              snapToScreenImg.css('width', '' );
              snapToScreenImg.css('left', '');
              snapToScreenImg.css('right', '');
            }
        });
      }).resize();
    </script>
    
  10. הוסיפו את הצהרת ה-CSS הבאה (בקובץ סגנון שנטען בתבנית הבת, ב-Custom CSS באזור ההתאמה האישית של התבנית, או בכל דרך אחרת שמוצאת חן בעיניכם)
    
    .snap-to-screen img {
        max-width: unset;
        position: relative;
    }
    

    האיפוס של max-width חשוב כי אלמנטור מגדיר לתמונות רוחב מקסימלי של 100%, אשר נמדד בהתאם לאובייקט העוטף של התמונה, ובמקרה שלנו אנחנו מעוניינים שהתמונה תחרוג מרוחב העוטף.
    ההגדרה של מיקום יחסי (position: relative) נועדה לאפשר הסטה של התמונה באמצעות left ו-right בסקריפט.
    כתבתי גם מאמר על איך להוסיף CSS לאתר שנבנה באלמנטור. יתכן שתמצאו אותו מועיל להבנת השלב הזה בתהליך.

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

האם ניתן להצמיד תמונה למסך גם באתר שלא נבנה באלמנטור?

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

snap-to-screen יהיה העוטף של התמונה. את elementor-column תחליפו בקלאס שמוגדר עבור כל עמודה באזור, ואת elementor-container יש להחליף בקלאס של האובייקט שעוטף את העמודות ומצמצם את אזור התוכן עם max-width. הוא יכול להיות ה-Section עצמו, והוא יכול להיות ילד שלו.

פיתרון באמצעות CSS

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

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

יוצאים לדרך:

  1. צרו באלמנטור אזור עם ארבע עמודות והגדירו לו רוחב תוכן: רוחב מלא.
  2. מקמו תמונה באחת משתי העמודות המרכזיות, ותוכן אחר בעמודה המרכזית השניה.
  3. תמונה שצריכה לתפוס חצי מסך צריכה להיות ברזוצולוציה של 1000px. הגדירו לתמונה רוחב של 100% (תחת הלשונית סגנון).
  4. תוכלו להגדיר לתמונה גם גובה. זה לא חובה, אך אתם תיווכחו לראות שיש לתמונות נטייה להגזים ולתפוס המון גובה במסכים גדולים, ולכן יש היגיון בלהגדיר לתמונה גובה רצוי, ואז להגדיר לה התאמת אובייקט: כיסוי.
  5. לעמודה בה מיקמתם את התמונה הגדירו את הקלאס snapped-to-screen-content (במתקדם – CSS Classes) והגדירו שתהיה ללא שוליים פנימיים בכיוון שפונה אל קצה המסך (אחרת, גם כשהתמונה תיצמד למסך ישארו שוליים).
  6. הכי טוב שלכל העמודות לא יהיה מוגדר בכלל רוחב. אם בטעות הגדרתם רוחב לעמודה לחצו על האזור – פריסה – מבנה, ואז על 25, 25, 25, 25.
  7. לעמודה בה מיקמתם את התוכן שנשאר בגבולות אזור התוכן הגדירו את הקלאס boxed-content.
  8. לעמודה שתהיה השוליים הלבנים הגדירו את הקלאס section-margin.
  9. לעמודת השוליים שתוסתר ע"י התמונה הגדירו את הקלאס margin-with-image.
  10. אם התמונה נמצאת לפני התוכן הנוסף באזור הגדירו לאזור את הקלאסים snap-image-section image-start
  11. אם התמונה נמצאת אחרי התוכן הנוסף באזור הגדירו לאזור את הקלאסים snap-image-section image-end
  12. הכניסו את הצהרות ה-CSS הבאות (בקובץ סגנון שנטען בתבנית הבת, ב-Custom CSS באזור ההתאמה האישית של התבנית, או בכל דרך אחרת שמוצאת חן בעיניכם)
    @media(min-width: 1141px){
        .snap-image-section .elementor-container {
          display: grid;
          grid-template-columns: calc((100% - 1140px)/2) calc(1140px * 0.5) calc(1140px * 0.5) calc((100% - 1140px)/2);
        }
        
        .snap-image-section.image-start .elementor-container {
          grid-template-areas: "mwi stsc bc sm";
        }
        
        
        .snap-image-section.image-end .elementor-container {
            grid-template-areas: "sm bc stsc mwi";
        }
        
        .snap-image-section .elementor-column {
            width: unset!important;
        }
        
        .snap-image-section .elementor-column.snapped-to-screen-content {
          grid-area: stsc;
        }
        
        .snap-image-section .elementor-column.boxed-content {
          grid-area: bc;
        }
        
        .snap-image-section .elementor-column.section-margin {
          grid-area: sm;
        }
        .snap-image-section .elementor-column.margin-with-image,
        .snap-image-section .elementor-column.section-margin
     {
            display: none;
        }
        
        
    }
    
    @media(max-width: 1140px){
        .snap-image-section .elementor-column.snapped-to-screen-content,
        .snap-image-section .elementor-column.boxed-content{
          width: 50%;
        }
        
     .snap-image-section .elementor-column.margin-with-image,
     .snap-image-section .elementor-column.section-margin{
        display: none;
    }
    
    }
    
    @media(max-width: 767px){
        .snap-image-section .elementor-column.snapped-to-screen-content,
        .snap-image-section .elementor-column.boxed-content{
          width: 100%;
        }
    }
    

    כתבתי גם מאמר על איך להוסיף CSS לאתר שנבנה באלמנטור. יתכן שתמצאו אותו מועיל להבנת השלב הזה בתהליך.

  13. הקוד מותאם לעבודה עם אזורי תוכן ברוחב 1140px. אם הגדרתם באתר רוחב שונה לאזורי התוכן, החליפו בקוד את כל המקומות בהם מופיע 1140 ברוחב המתאים, ואת ה 1141 בשאילתת המדיה שבתחילת הקוד, החליפו ברוחב אזור התוכן + 1.
  14. הקוד מתאים לחלוקה של 50%-50%. כדי להתאים אותו לפריסות אחרות שנו את המספרים בפונקציית ה-CALC. למשל, במקום calc((100% - 1140px)/2) calc(1140px * 0.5) calc(1140px * 0.5) calc((100% - 1140px)/2) אפשר לכתוב calc((100% - 1140px)/2) calc(1140px * 0.4) calc(1140px * 0.6) calc((100% - 1140px)/2). אין שום סיבה לערוך את פונקציית ה-CALC הראשונה ופונקציות ה-CALC האחרונה. הן מחשבות את רוחב השוליים.
  15. כדי לחסוך באורך הקוד וכדי שהוא יהיה מובן, הוא מוצג כאן ללא פרפיקסים (ללא תאימות לדפדפנים ישנים). אם אתם רוצים לשפר את התאימות שלו, הוסיפו לו פרפיקסים. אפשר גם באופן אוטומטי באמצעות AutoPrefixer.
  16. כעת שמרו הכל ופתחו את הדף שעיצבתם. אם הכל מוגדר כמו שצריך, התמונה שהגדרתם תמלא את כל השטח של השוליים שלצידה.
  17. אם אתם עובדים עם לפטופ קטן, יתכן שתתקשו לחזות במלוא המשמעות של התהליך, כיוון שממילא אין לכם הרבה שוליים. אני ממליץ להקטין את האתר באמצעות כלי הזום של הדפדפן – כך תוכלו לבחון את השינוי גם במסך קטן.

לסיכום

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

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

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

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

בהצלחה!

תאימות

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

שיתוף   //

שיתוף ב facebook
שיתוף ב whatsapp
שיתוף ב linkedin
שיתוף ב email

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

נשמח לספק לחברה שלך פתרונות מקצועיים בהתאמה אישית.

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

אתר זה עושה שימוש בעוגיות

דילוג לתוכן