יצירת חלק עליון / תפריט דביק באלמנטור
נכתב ע"י יוחאי ירמיהו6 שאלות
תיאור קצר לשיעור: תפריט דביק הוא תפריט עליון שגולל ביחד עם הגולש כאשר הוא יורד לחלק התחתון של העמוד. בשיעור זה נלמד כיצד ליצור חלק עליון דביק או תפריט דביק באמצעות אלמנטור.
אורך השיעור: 5:37 דקות
קורסים המכילים את השיעור וידאו:
תוכן השיעור:
בשיעור של היום נלמד איך ליצור חלק עליון דביק שיגלול עם הגולש כאשר הוא גולל למטה את העמוד. בנוסף ננסה להבין איך להוסיף קוד CSS שיאפשר לנו להתאים את העיצוב של החלק העליון כאשר הוא דביק
יצירת הדר (Header) דביק באלמנטור
בשביל להפוך את החלק העליון לדביק עלינו להיכנס אל עמוד העריכה באלמנטור ולבחור את החלק העליון בעמוד, לאחר מכן בעריכת אזור נבחר באפשרות של מתקדם ונפתח את האפשרויות עריכה של "אפקטי תנועה".
באפשרויות של אפקטי תנועה נשנה את ההגדרות של דביק ל-"עליון" ולאחר מכן החלק העליון יהפוך לדביק.
תחת האפשרות של "דביק פעיל" נוכל לבחור באילו פלטפורמות החלק העליון הדביק יפעיל מבין האופציות דסקטופ, טאבלט ומובייל ואני ממליץ להשאיר את זה פעיל רק בדסקטופ אם אתם משתמשים בחלק עליון דביק.
בשדה של דילוג אנחנו יכול להרחיק את ה-Header מהחלק העליון של הדפדפן אבל בדרך כלל אין צורך לשנות את זה.
קיזוז אפקט הוא השדה שיחליט מתי להפעיל את האנימציה שאנחנו מגדירים בעמוד. אתם יכולים להגדיר את השדה הזה לפי גובה החלק העליון ואם אתם לא יודעים מה להכניס פשוט תכניסו את הערך של 100.
איך להפוך את הרקע לשקוף לאחר שמתחילים לגלול?
במידה ואנחנו רוצים להוסיף אפקטים ואנימציות לאזור העליון ברגע שצופה מתחיל לגלול את העמוד נוכל לעשות זאת באמצעות קוד CSS המותאם למה שאנחנו רוצים לעשות.
החלק הזה הוא קצת יותר מורכב למי שאין ידע טכני ב-CSS אבל אתם יכולים לבחור את החלק העליון וללכת למתקדם, לאחר מכן תחת הלשונית של מתקדם תהיה לכם האפשרות להכניס CSS Classes ושם תכניסו את הערך הבא: "top-header".
לאחר מכן על מנת להכניס את הקוד CSS עליכם לבחור את האפשרות של CSS מותאם ושם להכניס את הקוד הבא:
אין לך הרשאות גישה לתוכן של העמוד
שימו לב שהצבע המוגדר ב-rgba הוא הצבע השחור ותצטרכו לשנות אותו לצבע הנכון עבור האתר שלכם. אז אם כרגע הערך של השקיפות של הצבע הוא 0.8 ככל שתקטינו את הערך השקיפות תהיה גדולה יותר.
כאשר הערך הוא 1 אז לא תהיה שקיפות בכלל לאזור של החלק העליון כאשר הוא דביק.
הצטרפו לקהילות המובילות של בוני האתרים בישראל
זה הזמן להצטרף לקהילה שלנו ולקבל סיוע ותמיכה בקבוצות המובילות בארץ לבוני אתרים בוורדפרס (-:
קורסים מקיפים ומומלצים ללימוד בניית אתרים
לבנות אתר ב-10 ימים
קורס מזורז שילמד אותך לבנות אתרים ב-10 ימים. נקודת כניסה מעולה לתחום של בניית אתרים במחיר משתלם.
- לבנות אתר ב-10 ימים 56 שיעורים שילמדו אותך הכל על בניית אתרים
- בונוס 1: לבנות אתר מתבנית מוכנה לאנשים עסוקים שלא רוצים להשקיע 10 ימים
- בונוס 2: גיבוי, שחזור, ותחזוקה לאתר איך לבצע גיבויים ולתחזק אתר ללא תקלות
- בונוס 3: אלמנטור קונטיינר (Container) איך ליצור תוכן באמצעות אלמנטור קונטיינר
- בונוס 4: אחסון אתרים ב-Cloudways אחסון אתרים על גבי חברות השרתים המובילות בעולם
- בונוס 5: קלאודפלייר + מייל עסקי בחינם איך להשתמש בקלאודפלייר + יצירת מייל עסקי בחינם
- בונוס 6: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- בונוס 7: יצירה וניהול של רשימות תפוצה ברב מסר איך ליצור סדרות מיילים ואוטומציות שיכניסו כסף על אוטומט
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק
- גישה לכל החיים
- תעודה הכשרה בסיום הלימודים (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-14 ימים
רכשו את הקורס 1076 סטודנטים לפניך (-:
מסלול וורדפרס Expert
למעלה מ-10 קורסים מלאים ומעל 700 שיעורים שילמדו אותך הכל על בניית אתרים ברמה הגבוהה ביותר בארץ.- בניית אתר ב-10 ימים איך לבנות אתר במהירות שיא
- וורדפרס Beginner לימוד בניית אתרים למתחילים – (2,250 ₪)
- וורדפרס Tool Kit הצעת מחיר + אפיון + צ'ק ליסט + התנהלות עם לקוחות
- וורדפרס Next Level מחיר 2,500 ₪
- וורדפרס SEO התאמת אתרים לגוגל – (750 ₪)
- : אלמנטור Ninja הקורס שיהפוך אותך לנינג'ה באלמנטור – (999 ₪)
- אלמנטור PRO + אנימציות יצירת אתרים מורכבים ואנימציה – (550 ₪)
- וורדפרס Rocket שיפור מהירות לאתר – (999 ₪)
- וורדפרס Security חיזוק אבטחה לאתר – (750 ₪)
- וורדפרס Global בניית אתרים דו לשוניים בכל השפות – (750 ₪)
- בונוס 1: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
- בונוס 2: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
- בונוס 3: איך לקבל יותר פניות מהאתר הוספת כפתורי יצירת קשר + שיפור המרות
- בונוס 4: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
- בונוס 5: התקנת אתר על המחשב איך להשתמש במחשב ולחסוך עלויות אחסון
- בונוס 6: Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
- בונוס 7: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- בונוס 8: אופטימיזציה לתמונות איך להעלות תמונות שיעזרו לאתר להתקדם בגוגל
- בונוס 9: יסודות העיצוב לבוני אתרים כל מה שצריך לדעת כדי לעצב את האתר המושלם
- בונוס 10: זכויות יוצרים בדיגיטל איך להימנע מתביעה משפטית כאשר בונים אתר
- בונוס 11: 20 אלף בחודש מבניית אתרים איך למצוא לקוחות ולייצר הכנסה מבניית אתרים
- בונוס 12: משיחת מכירה לכסף בחשבון איך לשפר את התהליך מכירה ולסגור יותר עסקאות
- בונוס 13: התנהלות עם לקוחות + ניהול פרויקטים איך מתנהל פרויקט בניית אתרים כולל תחזוקה לאתר
- בונוס 14: יצירה וניהול של רשימות תפוצה ברב מסר איך ליצור סדרות מיילים ואוטומציות שיכניסו כסף על אוטומט
- 758 שיעורים למתחילים + למתקדמים
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק של הקורס
- גישה לכל החיים
- תעודה הכשרה בסיום הקורס (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-14 ימים
רכשו את הקורס 764 סטודנטים לפניך (-:
אם אהבתם את השיעור ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
עוסק בתחום של פיתוח אתרים ועיצוב גרפי למעלה מ-15 שנה. נינג'ה מומחה לוורדפרס, מפתח תוספים ותבניות בהתאמה אישית והמרצה שלכם בקורס הדיגיטלי המקיף והמוביל בישראל ללימוד בניית אתרים בוורדפרס בצורה נכונה.
שאלות ותשובות לשיעור
6 שאלות
באסה, היכולת לשאול שאלות בשיעור פתוחה רק למשתמשים שרכשו את הקורס
היי,
אני רוצה אצלי באתר לעשות שזה יהיה דביק בלי שקיפות.
עשיתי רק את האופציה של הדביק
ועדיין גוללים מטה הוא נהיה שקוף.
הרקע של ההדר מוגדר כלבן
מה יכולה להיות הבעיה?
היי אוראל,
השתמשת בקוד CSS שאני מציג כאן או שזה שקוף גם ללא הקוד?
במידה והשתשמשת בקוד את יכולה לשנות את הקוד הבא:
background-color: rgba(0,0,0,0.8) !important;
אל הקוד הזה שיניתי את הערך של 0.8 ל-1 (זה השקיפות)
background-color: rgba(0,0,0,1) !important;
את יכולה גם להגדיר רקע באופן דומה לזה עם הצבע שאת רוצה באמצעות קוד CSS:
background-color: #00000 !important;
ואת יכולה גם לבחור צבע RGB מהעמוד מתחת (לדוגמא: #000000) עם הצבע שאת רוצה:
https://www.rapidtables.com/web/color/RGB_Color.html
כמובן שאם את משתמשת בקוד CSS אז רצוי לבצע את זה לפי ההוראות שהצגתי בסרטון.
היי יוחאי, הטמעתי את הקוד שלך ושיניתי את הצבע ללבן/ירוק (ההדר שלי משולב) ולא קרה כלום. הוא דביק אבל לא משתנה לשקוף שאני גוללת מטה… נשאר זהה
מה יכולה להיות הבעיה?
היי לימוד, אני חושב שיש 2 אופציות.
1) פספסת אולי שלב בתהליך כמו להגדיר את ה-class בתור top-header או משהו אחר בהגדרות
2) אלמנטור שינו את הקוד וחסמו את היכולת ליצור שקיפות או שהם שינו את המזהה של החלק העליון וזה גרם לקוד להפסיק לפעול.
אם זה משהו שקריטי לך את יכולה לצרף קישור לאתר ואני אעיף מבט ואם זה לא קריטי את יכולה לדלג על הנושא של השקיפות.
היי יוחאי, עשית את על מה שאמרת ב- CSS ב- css class ו ב-css מותאם, שינית שזה יהיה דביק ומשום מה אחרי שאני שמה את הקוד אין שקיפות, זה מעתיק את ההדר. מה לעשות?
היי בר, את צריכה להגדיר את ה-class בתור top-header כדי שזה יעבוד (אולי זה התפספס).
הצד של ה-CSS הוא יותר למתקדמים והשקיפות היא פחות חשובה. החלק היותר חשוב זה לדעת להפוך את החלק העליון לדביק כי זה משהו שאת עשויה להשתמש בו בפרויקטים. אם הצלחת להפוך את החלק העליון לדביק זה מספיק.