איך יוצרים תפריט שקוף באלמנטור - מקום ברשת

איך יוצרים תפריט שקוף באלמנטור

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

את התפריט נבנה באמצעות פיצ'ר הטמפלטים של אלמנטור פרו, על-ידי יצירת טמפלט מסוג Header שאליו נכניס אלמנטים שונים שישמשו את הגולש כתפריט עליון באתר.

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

קודי CSS בהם נעשה שימוש בהדרכה

קוד ליצירת תפריט דביק כהה:
את הקוד יש להדביק בעריכת אזור ה-Header, תחת לשונית "מתקדם" ו- Custom CSS.


selector.elementor-sticky--effects{
background-color: rgba(0,0,0,0.5)!important
}

selector{
transition: background-color 1s ease !important;
}

selector.elementor-sticky--effects >.elementor-container{
min-height: 70px;
}

selector > .elementor-container{
transition: min-height 1s ease !important;
}

קוד להקטנת הלוגו בזמן גלילת המסך:
את הקוד יש להדביק בעריכת ווידג'ט הלוגו תחת לשונית "מתקדם" ו-Custom CSS. בנוסף, תחת CSS Classes יש לכתוב את המילה logo.

.logo img {
max-width: 140px;
height: auto;
transition: all 0.5s ease;
}

.elementor-sticky--effects .logo img {
max-width: 120px;
height: auto;
}

לצפייה בהדרכה המלאה:

אתר זה מאוחסן ב:

אתר זה נבנה באמצעות:

יו, הגעת לסוף הכתבה 😯 מה עכשיו?

1. אם אהבת את התוכן, אפשר לשתף עם חברים:

Share on facebook
שיתוף בפייסבוק
Share on twitter
שיתוף בטוויטר
Share on linkedin
שיתוף בלינקדאין
Share on whatsapp
שיתוף בווטסאפ

2. אפשר לספר לנו מה חשבת, כדי שנוכל להמשיך להשתפר

כמה כתבה זו עזרה לך?

בחר/י כדי להצביע!

מאחר ואהבת את הכתבה...

נשמח לראותך גם ברשתות החברתיות שלנו!

מצטערים לשמוע שהכתבה לא היתה לך לעזר!

נשמח לשפר אותה!

תרצה/י לשתף אותנו מה אפשר לשפר בכתבה?

דירוג ממוצע לכתבה זו:
5
(2)

3. אפשר להירשם לקבלת עדכונים על כתבות ומדריכים חדשים:

העדכונים נשלחים אחת לשבוע, בימי חמישי בשעה 10:00 בבוקר וכוללים קישורים לכל הכתבות שפורסמו באותו שבוע.

עוד כתבות שעשויות לעניין אותך:

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

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

סליחה על ההפרעה...

רק קפצתי לבדוק מה שלומך

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

זה משהו שיכול לעניין אותך?

* הקישור נפתח בחלונית חדשה כך שיהיה אפשר להמשיך לקרוא את הכתבה