איך ליצור איזור צף באלמנטור

איך ליצור אפקט איזור 'צף' באלמנטור

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

הדרך הארוכה: שורטקוד

ובכן, הדרך הארוכה והמסובכת היא כדלהלן:

א. צרו את האיזור המבוקש, שימו אותו לבדו בתוך אזור פנימי

ב. שמרו אותו כתבנית (לחיצה ימנית בעכבר, וקליק על 'שמור כתבנית')

ג. גשו ללוח הבקרה של וורדפרס >>> טמפלטים, העתיקו את השורט-קוד של הטמפלט

ד. צרו כפתור חדש, והדביקו בשדה 'טקסט' את השורט-קוד שהעתקתם

ה. כעת גשו ללשונית : סגנון >>> כפתור >>> מעבר >>> אנימציית מעבר, ובחרו באפשרות Float

הדרך הקצרה: CSS

ועכשיו נראה איך אפשר לעשות את זה בשתי שניות בדרך שתאפשר לנו לערוך את האלמנט בקלות בלי צורך לפתוח כל הזמן את הטמפלט או התבנית ה'הורים'. ובכן, זה ממש פשוט. העתיקו את הקוד הבא:
selector{
transition: margin-top 0.3s ease-in, margin-bottom 0.3s ease-in;
}
selector:hover{
margin-top: -12px;
margin-bottom: 12px;
}
גשו ללשונית 'מתקדם' >>> CSS מותאם, והדביקו את הקוד. זהו עשיתם את זה !

הרשמו לניוזלטר שלנו

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

שתפו:

שיתוף ב facebook
Facebook
שיתוף ב twitter
Twitter
שיתוף ב pinterest
Pinterest
שיתוף ב linkedin
LinkedIn

3 תגובות

  1. If you want to use the photo it would also be good to check with the artist beforehand in case it is subject to copyright. Best wishes. Aaren Reggis Sela

    1. Indeed, care must always be taken that the images appearing on the site are purchased under the appropriate franchise. Please note that all images on our site were purchased legally, if you have a complaint you can send us an email or contact us in the 'צור קשר' tab

  2. Your way of explaining everything in this piece of writing is genuinely fastidious, all can easily understand it, Thanks a lot. Aindrea Zebulon Eph

להגיב על הנהלת האתר לבטל

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

Social Media

Most Popular

קטגוריות

קטגוריות
Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new products, updates.

הרשמו לניוזלטר שלנו

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

דילוג לתוכן