ימים
שעות
דקות
שניות
הזדרזי! המבצע בתוקף עד 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;
}

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

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

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

תצליחי,
חגית

כתיבת תגובה

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

חיבור האתר לgoogle search console, הסרת דפים מחיפוש גוגל, מדידת קישורים, כניסות, מילות חיפוש ותוכן פופולרי

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

איזה עמודים חייבים לשים באתר תדמית?

למה חשוב להשקיע בשירות לקוחות?

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

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

על מה חשוב לדבר עם לקוח בשיחת המכירה הראשונה?
ואיך כותבים הצעת מחיר נכונה? (מצורפת תבנית)

איך אפשר להוסיף אייקון SVG לכפתור בוידג’ט הנעה לפעולה של אלמנטור?

כלים אלופים

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