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

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

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

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

הוסיפי וידג’ט HTML לעמוד במקום בו את רוצה שיופיע כפתור סגירה.

לחצי על וידג’ט HTML > תוכן > קוד HTML > הדביקי את הקוד הבא:

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

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

בתוך וידג’ט 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;
}

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

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

הורדת אייקון סגירה בקובץ SVG