Elementor אנימצית hover ללא קוד #אתגר מתגלגל

חגית קרמר

בניית אתרים ברמה בינלאומית
מנוי פרימיום
עיצוב גרפי
UX UI
D I G I T A L
תודה ל @סיון על האתגר (כאן),
זה היה ממש במקום :)

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

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

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

איך עושים את זה? ממש פשוט.
לכל איזור, ולכל עמודה באלמנטור יש אפשרות לתמונת רקע.
ביאור 2020-06-20 221610.png
זה בטח אתם יודעים.
אבל... יש אפשרות גם לתמונה אחרת, במעבר עכבר:
ביאור 2020-06-20 221611.png
וכאן מתחילה החגיגה.
אני שמתי את אותה התמונה פעמיים, אבל לכל תמונה, נתתי מיקום אחר.
לראשונה: עליון שמאל.
ולשניה: תחתון ימין.

בטלתי את החזרתיות, והגדרתי גודל מלא.

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

אח"כ בחרתי אורך מעבר, לפי המהירות שרציתי, ו...הופ! יש לי אנימציה בhover, בלי קוד!

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

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

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

ו... כן. אני יודעת שיש וידג'ט הנעה לפעולה. רק הוא לא מגיע ליכולות שהנ"ל נותן לנו, בלי קוד.
_____

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

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

סיון

המניפה
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
עיצוב גרפי
UX UI
D I G I T A L
תודה חגית, טיפ מבריק - יכול להיות מושלם להחביא לגולשים הפתעות בhover ובקלות כל כך :)
לומדת מהיצרתיות שלך ושימוש מקסימלי בכלים הסובבים אותנו וביכולות שלנו!
 

חגית קרמר

בניית אתרים ברמה בינלאומית
מנוי פרימיום
עיצוב גרפי
UX UI
D I G I T A L

אולי מעניין אותך גם...

הפרק היומי

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


תהילים פרק קיט ב'

ט בַּמֶּה יְזַכֶּה נַּעַר אֶת אָרְחוֹ לִשְׁמֹר כִּדְבָרֶךָ:י בְּכָל לִבִּי דְרַשְׁתִּיךָ אַל תַּשְׁגֵּנִי מִמִּצְוֹתֶיךָ:יא בְּלִבִּי צָפַנְתִּי אִמְרָתֶךָ לְמַעַן לֹא אֶחֱטָא לָךְ:יב בָּרוּךְ אַתָּה יְהוָה לַמְּדֵנִי חֻקֶּיךָ:יג בִּשְׂפָתַי סִפַּרְתִּי כֹּל מִשְׁפְּטֵי פִיךָ:יד בְּדֶרֶךְ עֵדְוֹתֶיךָ שַׂשְׂתִּי כְּעַל כָּל הוֹן:טו בְּפִקֻּדֶיךָ אָשִׂיחָה וְאַבִּיטָה אֹרְחֹתֶיךָ:טז בְּחֻקֹּתֶיךָ אֶשְׁתַּעֲשָׁע לֹא אֶשְׁכַּח דְּבָרֶךָ:
נקרא  9  פעמים

לוח מודעות

למעלה