מה זה עוגן בכלל ולמה זה משמש?

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

אז מאיפה מתחילים?

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

1. על ידי אלמנט "קישור עוגן"

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

אלמנט עוגן באלמנטור

נמקם את האלמנט בחלק העליון במקום הרצוי, לאחר מכן ניתן לעוגן מזהה ייחודי לדוגמא: about או go-here.
על המזהה להיות באנגלית ויכול להכיל את הסימנים הבאים: A-Z, a-z, 0-9, _ , –
הגדרת אלמנט עוגן באלמנטור

במקום בו נרצה שהגולש ילחץ על מנת שיגיע למקום המיועד אליו אנו רוצים להוביל אותו,
שם נרשום בקישור שלו את אותו מזהה ייחודי בתוספת # (סולמית).
לדוגמא כאן אנו משתמשים באלמנט כפתור ורושמים את המזהה בשורת הקישור:

מזהה עוגן בקישור

2. על ידי הגדרת מזהה ייחודי באיזור / עמודה

בדרך הזו אנו נשתמש בעוגן אך ללא האלמנט "קישור עוגן" שדיברנו עליו מקודם.
נתחיל בהזנת המזהה הייחודי באיזור/עמודה לשם נרצה להפנות את הגולש.
על מנת להגיע ל CSS ID נלחץ על הלשונית "מתקדם", שם נוכל לראות את ה- CSS ID ולרשום את המזהה הייחודי.
כמו שציינתי, המזהה הזה יכול להיות כל שם שנרצה, רק יש להקפיד על תווים נכונים כמו A-Z, a-z, 0-9, _ , –

הגדרת CSS ID לעוגן באיזור

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

את המזהה נרשום כך: go-here# כאשר הסולמית בהתחלה.
וזהו, כאן סיימתם! ניתן ליצור עוד קישורים כאלו בעמוד אך השתדלו לא להגזים יותר מידי.

טיפ!

אם אתם רוצים לשלוט במהירות ובאופן של הגלילה בעמוד, תוכלו לעשות זאת בעזרת התוסף: Easy Smooth Scroll Links.
ניתן להוריד את התוסף מכאן או להתקין אותו ישירות מאיזור התוספים בלוח הבקרה שלכם על ידי הקלדת השם שלו בשורת החיפוש.

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

אהבתם? מוזמנים לשתף

שיתוף ב facebook
שיתוף ב twitter
שיתוף ב linkedin
שיתוף ב pinterest
שיתוף ב print
שיתוף ב email
גלילה למעלה