מה זה עוגן בכלל ולמה זה משמש?
עוגן (ולא של ספינה) עוזר לגולש באתר לנוע בעמוד מנקודה אחת לאחרת בקליק, לדוגמא, אם בתחילת הכתבה אני רוצה להפנות את הגולש לפסקה או חלק בכתבה שנמצא באיזור התחתון של האתר, אני אוכל לעשות זאת בעזרת יצירת עוגן על מילה או אלמנט (הסבר בהמשך) ובכך להפנות את הגולש לתוכן שנרצה שיקרא.
אפשר לראות דוגמא לשיטה הזו בפוסט "כל מה שרציתם לדעת על בניית אתר"
אז מאיפה מתחילים?
מתכנתים עושים זאת על ידי הטמעת קוד.
אנו נוכל לעשות זאת בדרך פשוטה ומבלי לדעת קוד בעזרת יצירת עוגן באתר מבוסס אלמנטור בשתי דרכים.
1. על ידי אלמנט "קישור עוגן"
הדרך הראשונה היא על ידי הוספת אלמנט שנקרא "קישור עוגן" שהוא אלמנט מובנה באלמנטור (גירסה חינמית).
ניגשים לפאנל האלמנטים של אלמנטור, תחת הקטגוריה "כללי" שם תוכלו למצוא את האלמנט "קישור עוגן". במצב עריכה תוכלו לראות את האלמנט "עוגן" אך האלמנט אינו יוצג לגולש ואינו תופס מקום פיזי איפה שנמקם אותו כשאנחנו צופים באתר.
נמקם את האלמנט בחלק העליון במקום הרצוי, לאחר מכן ניתן לעוגן מזהה ייחודי לדוגמא: about או go-here.
על המזהה להיות באנגלית ויכול להכיל את הסימנים הבאים: A-Z, a-z, 0-9, _ , –
במקום בו נרצה שהגולש ילחץ על מנת שיגיע למקום המיועד אליו אנו רוצים להוביל אותו,
שם נרשום בקישור שלו את אותו מזהה ייחודי בתוספת # (סולמית).
לדוגמא כאן אנו משתמשים באלמנט כפתור ורושמים את המזהה בשורת הקישור:
2. על ידי הגדרת מזהה ייחודי באיזור / עמודה
בדרך הזו אנו נשתמש בעוגן אך ללא האלמנט "קישור עוגן" שדיברנו עליו מקודם.
נתחיל בהזנת המזהה הייחודי באיזור/עמודה לשם נרצה להפנות את הגולש.
על מנת להגיע ל CSS ID נלחץ על הלשונית "מתקדם", שם נוכל לראות את ה- CSS ID ולרשום את המזהה הייחודי.
כמו שציינתי, המזהה הזה יכול להיות כל שם שנרצה, רק יש להקפיד על תווים נכונים כמו A-Z, a-z, 0-9, _ , –
כעת, את אותו מזהה ייחודי ששמנו ב CSS ID נשים באלמנט שממנו נרצה להפנות את הגולש אליו.
זה יכול להיות כל אלמנט החל מתמונה, כותרת, טקסט שנמצא בתוך עורך טקסט, אייקון ועוד (כל עוד יש לו את האפשרות ליצור קישור נוכל להשתמש בו).
את המזהה נרשום כך: go-here# כאשר הסולמית בהתחלה.
אם נרצה לקשר את העוגן מעמוד אחר מה שנצטרך לעשות זה לרשום את הקישור בצורה של Pagename#anchor/
pagename/#gohere/
ה- / מסמך את הקישור הראשי של העמוד
אחריו בא ה- Slug של העמוד
ואחריו בא העוגן שנמצא בעמוד אליו אנחנו מכוונים.
בדרך הזו, מי שלוחץ על הקישור יגיע ישירות לעמוד ולמקום הספציפי שכיוונו אליו.
וזהו, כאן סיימתם! ניתן ליצור עוד קישורים כאלו בעמוד אך השתדלו לא להגזים יותר מידי.
טיפ!
אם אתם רוצים לשלוט במהירות ובאופן של הגלילה בעמוד, תוכלו לעשות זאת בעזרת התוסף: Easy Smooth Scroll Links.
ניתן להוריד את התוסף מכאן או להתקין אותו ישירות מאיזור התוספים בלוח הבקרה שלכם על ידי הקלדת השם שלו בשורת החיפוש.
אני מקווה שהפוסט עזר לכם ואם יש לכם שאלות אתם מומזנים להגיב כאן למטה.
9 תגובות
כדאי להעיר לטובת העניין:
אם רוצים לבצע קישור מעמוד אחד לעמוד שני, לא מספיק לכתוב רק את ה- scc id עם #, אלא גם את שורת הכתובת של העמוד.
לדוגמא:
אם זה ה- scc id שלנו: go-here.
וזוהי כתובת העמוד: https://www.pikmediagroup.com/
עלינו לרשום: https://www.pikmediagroup.com/#go-here
אגב אלמנט "קישור עוגן" עובד רק בקישור באותו עמוד (רשמית כך מופיע במסמכי התיעוד של אלמנטור)
אך אם תוסיפו כמו מה שכתבתי לעייל קישור עוגן יעבוד גם בקישור מדף לדף.
תודה, הפוסט עודכן :)
אחלה מאמר!
אני בונה לבד אתר באלמנטור ע"י מדריכים באינטרנט, כבר אחרי הדומיין, אחסון וכו', נשאר לי להכין 3 עמודים ולקשר אותם לעמוד הראשי, תודה לאל.
והמדריך שלך ממש מוסבר יפה ע"א שהוא לא סרטון, אחרי שקראתי הרבה כיף למצוא הסבר ברור
תודה!
תודה רבה על התגובה ואני שמח לשמוע שזה עזר לך, בהצלחה בבניית האתר :)
תודה רבה על ההסבר המדויק.
מה עושים אם העוגן עובד בדסקטופ כשלוחצים על הכפות הוא עובר לדף אחר במיקום הנכון ובמובייל זה עובר אבל לראש הדף ולא למיקום של העוגן
היי איילת,
במקרה הזה הייתי מנסה לתת קצת פדינג או מרג'ין לחלק העליון של האיזור ששמת בו את העוגן.
היי
אני מנסה לבנות קישור עוגן בדרופדאון לחלק אחר בעמוד שהוא לא למעלה, בbeaver builder
אשמח להבין איפה אני צריכה להכניס את השם של ה id
היי טובה,
את ה ID את צריכה לכתוב באיזור שאת רוצה להוביל אליו, לא משנה אם זה אלמנטור או בילדר אחר, לכל איזור או אלמנט יש ID ויש קלאס, את צריכה ב- ID של אותו איזור לרשום את העוגן, נניח gohere
ומאיפה שתרצי שילחצו להגיע לעוגן תשימי gohere# שזה בעצם קישור ישיר לעוגן (שימי לב שיש הסבר במדריך על איך לעשות שזה יהיה נגיש מכל עמוד באתר(/
תותח
פתרת לי את הבעיה
תודה רבה