תמונה נגללת במעבר עכבר באלמנטור

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

תמונה נגללת במעבר עכבר
תמונה נגללת במעבר עכבר

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

שלב 1) צילום מסך של העמוד

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

שלב 2) יצירת תמונה נגללת באלמנטור

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

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

כעת, עליכם להגדיר את מעבר המעבר בין התמונות.

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

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

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

5 תגובות

  1. גאוני!
    יש דרך שזה יגלל גם לרוחב?
    הכוונה שלא יהיה בהובר, אלא שהלקוח יוכל לגלול עם העכבר.
    תודה רבה!

כתיבת תגובה

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

ישראל פאר בניית אתרים
ישראל פאר
הבעלים של סטודיו פאר והמייסד של האתר דיגיטול – הבית לבוני אתרים בישראל, מתמחה בבניית אתרי חנות או קטלוג בדגש על חווית משתמש גבוהה, עובד בעיקר במשרד אבל לפחות פעם בשבוע יוצא לעבוד מבית קפה מעניין, נסו גם זה עובד.
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
אלמנטור
הוספת לינקים לטאבים
הקוד יוצר קישורים ישירים לטאבים באלמנטור, במקום שלקוחות יצטרכו לחפש את הטאב הנכון.
ווקומרס
עמוד מבצעים מושלם עם Discount Rules for woo
הצגת המבצעים מהתוסף Discount Rules for WooCommerce בעיצוב מותאם אישית.
אלמנטור
איך ליצור אלמנטים גרירים
הוספת אופציה לגרירת אלמנטים באתר, דרך פשוטה ליצור אינטרקטיביות עם המשתמש.
אלמנטור
איך להוסיף קונפטי באתר אלמנטור
יצירת אפקט קונפטי אחרי פעולות מסוימות באתרי אלמנטור
אלמנטור
שדרוג חוויית העלאת הקבצים באלמנטור – מדריך מהיר וקליל
העלאת קבצים היא חלק בלתי נפרד מטפסים רבים, בואו נהפוך את זה לחוויה חכמה, נוחה ומרשימה?
חיפוש חופשי
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
הרשימה מתעדכנת כל הזמן - מומלץ לשמור את הדף במועדפים!
כדי לשמור את האתר לחצו על Ctrl+D במקלדת (במק D+⌘).