בניית הידר דביק מותאם אישית באמצעות אלמנטור ללא צורך בתוסף נוסף

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

המדריך מודגם על תבנית Ocean-WP אבל אפשרי ליישום על כל תבנית אחרת , אם משנים את הסלקטורים ב css למה שרלוונטי לאותה תבנית.

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

אז נתחיל,

1. יוצרים header ומעצבים אותו כראות עינכם באלמנטור –

אם אתם רוצים הידר סטנדרטי של תפריט ולוגו , פשוט תצרו אזור ,   בפריסה של 2 עמודות – אחת ללוגו ואחת לתפריט.

בהידר סטנדרטי – העמודה של הלוגו היא כ 25% , והתפריט 75%

2. מוסיפים גודל ל body באמצעות css:

body{

min-height:800px;

}

3.  נשתמש ב css כדי לגרום לכך שההידר יהיה דביק

.ehf-header header {

   z-index: 30;

    position: fixed;

    width: 100%;

    top: 0;

}

זהו ! מזל טוב , יש לכם הידר דביק.

ברוב המקרים רק תצטרכו להוסיף ל body  גם margin-top- בהתאם לגובה התפריט הדביק( מכיוון שהשתמשנו ב position:fixed שזה אלמנט צף, נרצה  שהתפריט לא יכסה את ה body של האתר, לכן נרצה להוריד אותו ללמטה בהתאם לגובה התפריט.)

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

 4. ניצור class שבו יהיו השינויים שנרצה שיקרו לאחר הגלילה

.

1. יוצרים header ומעצבים אותו כראות עינכם באלמנטור

2. מוסיפים גודל ל body:
body{
min-height:800px;
}
3. מוסיפים את הקוד הזה בשביל שההידר יהיה דביק: (רלוונטי לתבנית OceanWP, בתבניות אחרות תצטרכו לשנות את שם הקלאס/תגית)

.ehf-header header {
z-index: 30;
position: fixed;
width: 100%;
top: 0;
}

4.  בנוסף – ניצור class שבו יהיו השינויים שנרצה שיקרו לאחר הגלילה

.ChangeHeaderOnScroll{

background-color:white;

transition: background 500ms ease-out;

}

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

ושלב אחרון – נכתוב סקריפט   שיוסיף את ה class עם השינויים שאנחנו רוצים שיהיו בהידר לאחר הגלילה

jQuery(window).ready(function() {

     jQuery(window).scroll(function() {

    var scroll = jQuery(window).scrollTop();

    if (scroll > 100) {

        jQuery("header").addClass("ChangeHeaderOnScroll");

    } else {

        jQuery("header").removeClass("ChangeHeaderOnScroll");

    }

});

});

מה בעצם קורה פה?

הקוד אומר דבר כזה – הצהרנו על משתנה שמכיל את הנקודה שבה האתר נמצא בגלילה, ובזמן גלילה מופעלת פונקציה שבודקת האם גללנו יותר מ 100 – יתווסף קלאס להידר שיכיל את השינויים שלנו (ובעצם ידרוס מאפיינים אחרים אם נרצה  כמו צבע רקע בדוגמא הנוכחית)

ואז מה שיקרה יהיה לנו header אחד קבוע באתר,  ומתי שנגדיר הוא יהיה מעוצב אחרת.

יתכן שבקוד jquery תצטרכו להחליף את הסלקטור "header" אם ההידר שלכם בנוי באמצעות תג אחר, או אם אתם רוצים תשנו את שם ה class (בדוגמא שלי זה ChangeHeaderOnScroll.

הקוד ב CodePen- לקריאה והעתקה נוחה

https://codepen.io/alon121/pen/rpeKYP

אם אתם מסתבכים – מוזמנים לפנות אלי אישית ואשתדל לעזור.

שאלות נפוצות : 

בתבנית ocean-wp – תחת התאמה אישית –  תגללו עד למטה יש לכם אפשרות להוסיף custom css ו custom js

שמים את זה שם בהתאמה.

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

תשובה:

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

בשביל בדיקה אפשר להשתמש למשל ב !important ולראות אם במקרה כזה ה css שלנו כן ישפיע. למשל: 

.ChangeHeaderOnScroll{

background-color:white!important;

}

אלון אברג'ל

מתכנת Full-Stack,בונה אתרים וממשקי ווב, עם ניסיון רב במערכת וורדפרס.

לפוסט הזה יש 4 תגובות

  1. איך פונים אליך אישית עבור מספר שאלות ?
    מה מספר הנייד או המייל ?
    אשמח מאוד לעזרה כי יש לי מספר שאלות קריטיות עבור בניית האתר
    תודה מראש

  2. עשיתי את הכל כפי שתארת, וגם בדקתי שם התגית של ההידר וזה לא משפיע
    כי כאשר אני מכניס את קוד ה JS ללתפריט Custom JSS/CSS בתבנית אני מקבל סימני שגיאות מתחת למילים של JQUERRY
    איך ניתן לתקן זאת

  3. נראה מעולה! תודה על ההסבר…
    אני אנסה את זה באתר שלי שאני בונה עם אלפנטור פרו ו- OceanWP.
    אגב, מה לגבי שליטה על הידר שקוף שבגלילה יהפוך לצבע לבן נגיד?

כתיבת תגובה

סגירת תפריט

היי, קוראים לי יוני.

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

השארו מעודכנים!

הרשמו עכשיו וקבלו כל מאמר חדש ישר למייל!