ימים
שעות
דקות
שניות
הזדרזי! המבצע בתוקף עד 04.04.2024

איך אפשר להוסיף כפתור סגירה או כפתור חזרה בתוך עמוד רגיל, כך שיראה כמו פופאפ?

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

אפשר להוסיף כפתור כזה ע”י וידג’ט HTML עם פקודה קטנה בJavaScript.

שלבי הוספת כפתור סגירה או כפתור חזרה לעמוד באלמנטור

  1. הוסיפי וידג’ט HTML לעמוד במקום בו את רוצה שיופיע כפתור סגירה.
וידג’ט HTML
  1. לחצי על וידג’ט HTML > תוכן > קוד HTML > הדביקי את הקוד הבא:
<button onclick="history.back()">
   <img src="https://chagitcourses.ussl.co.il/wp-content/uploads/X.svg">
   <span>סגירה</span>
</button>
הוספת קוד HTML

הסבר הקוד:

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

  1. בתוך וידג’ט HTML עברי לכרטיסית מתקדם > CSS מותאם אישית > הדביקי את קוד העיצוב הבא:
selector button{
    background-color: blue !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-family: heebo !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #342F31 !important;
    border: none !important;
    box-shadow: inset 3px 3px 6px #FFFFFF99, 3px 3px 10px #C8C8C8 !important;
    background-color: #C8C8C8 !important;
    padding: 16px 34px !important;
}
selector button:hover{
    opacity: 0.75 !important;
}

והנה – הכפתור מעוצב ומוכן לשימוש.

הסבר הקוד:

הקוד מעצב לך את הכפתור ע”י הגדרות עיצוב בCSS.

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

בחלק השני יש אנימצית מעבר שהופכת את הכפתור לשקוף למחצה כשעוברים עליו (כלומר, הכפתור נהפך מ100% אטימות ל75% אטימות). את יכולה לשנות את רמת השקיפות כרצונך.

קוד נוסף לעיצוב כפתור חזרה עם HTML וCSS מותאם לאלמנטור

בוידג’ט HTML הדביקי את הקוד הבא:

<button onclick="history.back()">
   <img src="https://chagitcourses.ussl.co.il/wp-content/uploads/back.svg">
   <span>חזרה</span>
</button>

ובCSS מותאם אישית הדביקי את הקוד הבא:

selector button{
    background-color: blue !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-family: heebo !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #342F31 !important;
    border: none !important;
    box-shadow: inset 3px 3px 6px #FFFFFF99, 3px 3px 10px #FF80B1 !important;
    background-color: #FF80B1 !important;
    padding: 16px 34px !important;
}
selector button:hover{
    opacity: 0.75 !important;
}

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

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

מזמינה אותך לשחק עם הקוד ולהשתמש בכיף.

תצליחי,
חגית

כתיבת תגובה

הדרכות נוספות שיכולות לעזור לך

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

האם ניתן להציג את מספר הצפיות בפופאפ של ג’ט באמצעות Data Stores, או שזה עובד רק בפוסט-טייפ עצמו?

איך אפשר לגרום לתפריט העליון (header) באתר להופיע רק לאחר גלילה? יש אפשרות לבצע את האנימציה רק עם אלמנטור פרו?

אפקט מעבר על קונטיינר באלמנטור עם CSS (הקונטיינר שעוברים עליו אטום, וכל השאר שקופים)

איך להגדיל את כמות הכניסות לאתר העסקי שלך, ולמה זה ממש כדאי

איך אפשר ליצור מסגרת עם צבע מעבר מתחלף לטקסט חי באתר?

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

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

כלים אלופים

10 כלים מומלצים
שיעזרו לך לעבוד מהר יותר
דילוג לתוכן