כפתורים צפים עם אלמנטור ו CSS Transform

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

הנושאים הנלמדים בסרטון:
✅ שימוש בספריית הטמפלטים של אלמנטור וייבוא טמפלט.
✅ יצירת כפתורים דביקים במיקום מקובע ויצירת אפקט "גילוי הכפתור" במעבר עכבר באמצעות שימוש בטרנספורמציה (CSS Transform).
✅ יצירת עוגנים וקישורי עוגן.
✅ שימוש בטמפלט מסוג אזור על מנת למקם מספר כפתורים במיקום מקובע על המסך.
✅ הגדלת תמונות במסגרת המיכל שלכן באמצעות טרנספורמציה (CSS Transform).

אם תרצו ללמוד עוד, אני מזמין אתכם להתרשם ולהרשם לקורס בניית אתרים בוורדפרס באמצעות אלמנטור, בכתובת: https://wp.f2f.co.il/

קישור (אפילייט) לרכישת אלמנטור פרו: https://be.elementor.com/visit/?bta=8704&nci=5383

הקוד בו השתמשתי בסרטון:

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

selector i{
vertical-align: middle;
}

במידה ואתם משתמשים באייקון SVG, החליפו בקוד את ה i ב svg כדלקמן:

selector svg{
vertical-align: middle;
}

על מנת למנוע מהתמונה לצאת מגבולות המיכל שלה, גשו לעריכת התמונה > מתקדם > CSS והזינו את הקוד הבא:

selector {
overflow: hidden;
}