👋 Smart Template 2.0
טמפלייט עדכני מבוסס על variables.
משתנים שמוגדרים בלשונית variables כאן או בלשונית בצד שמאל.
מומלץ להגדיר את הערכים מראש.
תהליך עבודה מומלץ.
הגדרת variables.
ייבוא כל המדיה הנדרשת.
פיתוח האתר.
עדכון meta-data של כל העמודים.
מחיקת קלאסים ואינטרקציות לא נחוצות.
ווידוא alt tag, לינקים, דחיסת מדיה.
חיבור דומיין.
הרצת טסטים.
🟣 Variables
המשתנים דינאמיים שמוגדרים מראש וחוזרים על עצמם בכל האתר. מאפשר לשמור על עיצוב אחיד באתר ועדכון גלובלי של אלמנטים, קלאסים ופרמטרים.אפשר להוסיף עוד משתנים בהמשך לפי הצורך.
*מומלץ להתחיל כל פרוייקט בעדכון הvariables בהתאם לעיצוב.
ניתן לשנות את הערכים מהמסך הזה.
🎨 Colors
Brand - צבעי מותג
1Brand-1001Brand-2001Brand-3001Brand-400Dark - צבעים ניטרלים
1Dark-1001Dark-2001Dark-3001Dark-400System - צבעי מערכת
1Black1White
📏 Spacing
ערך מספרי דינאמי שחוזר על עצמו בעיצוב האתר. ניתן להשתמש ל:
ריווחים, עיגולי פינות, מרווחים וכו׳.
דוגמא לשיטת ריווח:NoneXsmallSmallMediumLargeXLarge2XLarge3XLargeHuge
Text 🆎
כותרת ראשית - H1
כותרת משנית - H2
תת-כותרת
כותרת לטופסטקסט גדולטקסט רץ
טקסט תומך
🌓 Theme
שינוי ערכת נושא של אלמנט/סקשן. בדרך כלל בין light ל-dark.
צבע הרקע והטקסט ישתנו אוטומטית בהתאם לערכת נושא
Button Textצבע הרקע והטקסט ישתנו אוטומטית בהתאם לערכת נושא
Button Text
💬 Classes
קלאסים גלובליים כלליים שעוזרים לפיתוח מהיר ונכון.
ניתן לערוך אותם לפי הצורך ולהוסיף עוד קלאסים תואמים.
- קומפוזיציה
- flex-vertflex-hozמעטפת שהאלמנטים בה יתנהגו בורה חופשית בהתאם לגודלם וכיוון המעטפת.
- grid-2-colsgrid-{your_grid)מעטפת עם ״מקומות קבועים״ שהתוכן מתלבש בהם. יותר שליטה על מיקומים וסדר.
- gap-0gap-xsmallgap-smallgap-mediumgap-largegap-xlargegap-2xlargegap-2xlargegap-2xlargeשליטה על מרווח בין אלמנטים. עובד רק תחת גריד או פלקס.
- relrel-1שליטה על המיקום וz-index.
- תמונות
- image-wrapperקלאס שנביא למעטפת של התמונה ועליו נבצע את רוב ההתאמות. נשאף לגעת ולשנות את הקלאס {image} כמה שפחות (יותר לכיווני היחסיות והחיתוך של התמונה)
ולעבוד עם הקלאס {image-wrapper} כמה שיותר לשינויי גודל ועיצוב. - imageקלאס בסיסי לתמונה, 100% רוחב.
- covertallשליטה על מימדי וגובה התמונה
- עיצוב
- light-modedark-modeהחלפה בין light mode ל-dark mode. משפיע על צבע הרקע והטקסט.קלאס בסיסי שמביא ומבטל מסגרת לאלמנט. ניתן להתאים עם קומבו קלאס בהתאם לעיצוב.קלאס בסיסי שמביא ומבטל מסגרת לאלמנט. ניתן להתאים עם קומבו קלאס בהתאם לעיצוב.
- pad-nonepad-xspad-smpad-medpad-largepad-xlpad-2xlpad-3xlpad-hugeהוספת paddingpad-nonepad-xspad-smpad-medpad-largepad-xlpad-2xlpad-3xlpad-huge
- cr-nonecr-xscr-smallcr-mediumcr-largecr-xlcr-2xlcr-3xlcr-fullשליטה על הרדיוס של הפינות.cr-nonecr-xscr-smallcr-mediumcr-largecr-xlcr-2xlcr-fullcr-full
- borderborder-noneקלאס בסיסי שמביא ומבטל מסגרת לאלמנט. ניתן להתאים עם קומבו קלאס בהתאם לעיצוב.קלאס בסיסי שמביא ומבטל מסגרת לאלמנט. ניתן להתאים עם קומבו קלאס בהתאם לעיצוב.קלאס בסיסי שמביא ומבטל מסגרת לאלמנט. ניתן להתאים עם קומבו קלאס בהתאם לעיצוב.
fill-brand-100
fill-brand-200
fill-brand-300
fill-brand-400
fill-dark-100
fill-dark-200
fill-dark-300
fill-dark-400
fill-black
fill-white
סטייל רקע
- טקסט
- h1h2h3form-titlebig-textbody-textsmall-textקלאס בסיסי לסוגי טקסט שונים
- 300-light400-normal700-bold500-mediumשליטה על משקל הטקסט
- text-centertext-righttext-leftיישור טקסט
- text-wrap-prettytext-wrap-balancetext-no-wrapיישור פסקה
- underlineunderline-brandtagעיצוב טקסט
text-brand-100
text-brand-200
text-brand-300
text-brand-400
text-dark-100
text-dark-200
text-dark-300
text-dark-400
text-black
text-white
צבע טקסט
💎 Components
קומפוננטות ניתנות לעריכה שחוזרות על עצמן בכל האתר ומיועדות להשאר קבועות. יש קומפוננטות עם וריאנטים שניתן לערוך ולהוסיף כדי ליצור תהליך פיתוח גמיש ונוח.
- מדיה
- Icon
- SVG Icon
- Review
- Video🔊 צפו בסרטון עכשיו! (רק X דקות) 🔊
- YT Short
- טפסים
- Lead FormThank you! Your submission has been received!Oops! Something went wrong while submitting the form.
- Quiz Form
יאללה, בוא נתחיל!
Thank you! Your submission has been received!Oops! Something went wrong while submitting the form.
- תוכן
- Card
Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
- CTA
- Faq Blockשאלה
- Footer
- שונות
- Divider
- Termsהצהרת נגישותתקנון האתר ומדיניות פרטיות
{שם העסק}
- שם העסק{שם העסק}
- ח.פ/ע.מ010101010
- כתובתרחוב מספר X, עיר
- טלפון055-xxx-xxxx
- דוא״לbizname@gmail.com
{שם העסק}
רואה חשיבות רבה בהנגשת האתר לכלל הציבור, כולל אנשים עם מוגבלויות. באתר מוטמע תוסף נגישות UserWay המאפשר התאמות נגישות שונות, בהתאם להנחיות התקן הישראלי (ת"י 5568) והמלצות WCAG 2.1 ברמה AA.
תנאי שימוש
- שימוש באתר
מותר להשתמש באתר לצורך אישי בלבד. אין להעתיק, לשכפל, להפיץ או לעשות שימוש מסחרי בתכנים ללא אישור מראש ובכתב.
- קניין רוחני
כל התכנים באתר (טקסטים, תמונות, סרטונים, עיצובים וכו׳) הם רכוש בלעדי של העסק ואסורים להעתקה.
- אחריות
התכנים באתר ניתנים לשימוש כפי שהם (As Is). העסק אינו אחראי לטעויות, חוסרים או לנזקים שייגרמו כתוצאה מהסתמכות על התכנים.
- שינויים
העסק רשאי לעדכן את תנאי השימוש בכל עת. שימוש מתמשך באתר מהווה הסכמה לגרסה המעודכנת.
- דין ושיפוט
הדין החל הוא חוקי מדינת ישראל, ובית המשפט המוסמך הוא במחוז תל אביב.
מדיניות פרטיות
- איסוף מידע
האתר אוסף פרטים אישיים שהמשתמש מוסר (כגון שם, טלפון, דוא"ל), וכן מידע טכני (כגון כתובת IP, קוקיז).
- שימוש במידע
המידע ישמש לצורך מתן שירות, יצירת קשר, שיפור חוויית המשתמש, שליחת עדכונים ותוכן שיווקי – בכפוף לאישור המשתמש.
- מסירת מידע לצד ג׳
העסק לא יעביר מידע אישי לצדדים שלישיים אלא אם נדרש בחוק או לצורך מתן השירות בפועל.
- אבטחת מידע
העסק נוקט באמצעים סבירים להגנה על המידע, אך אינו יכול להבטיח חסינות מוחלטת מפני חדירות.
- זכויות המשתמש
המשתמש רשאי לעיין במידע שנשמר עליו ולבקש לתקן או למחוק אותו בהתאם לחוק הגנת הפרטיות, התשמ"א-1981.
אפשרויות נגישות באתר
באמצעות תפריט הנגישות ניתן לבצע בין היתר:- שינוי גודל טקסטים.
- שינוי ניגודיות צבעים.
- הדגשת קישורים.
- התאמת גופן קריא.
- ניווט באמצעות מקלדת.
אחריות ושימוש
אנחנו עושים מאמצים מתמשכים לשפר את נגישות האתר. יחד עם זאת, ייתכנו עמודים/רכיבים שעדיין לא הונגשו באופן מלא.
יצירת קשר
אם נתקלת בבעיה או יש לך הצעה לשיפור, נשמח שתעדכן אותנו:- טלפון055-xxx-xxxx
- דוא״לbizname@gmail.com
- Footer
- מדיה
- לוטים:
- אייקונים
- סקריפטים
- טקסט חודש נוכחי<script>
const months = ["ינואר","פברואר","מרץ","אפריל","מאי","יוני","יולי","אוגוסט","ספטמבר","אוקטובר","נובמבר","דצמבר"]; var d = new Date();
d.setDate(d.getDate() + 7) var month = months[d.getMonth()]; $(".month").each(function() {
$(this).text(month);
});
</script> - הגבלות שדה גיל<script>
document.addEventListener("DOMContentLoaded", function () {
const input = document.querySelector('input[name="Age"]');
if (input) {
input.addEventListener("input", function () {
// Remove non-digit characters just in case
this.value = this.value.replace(/\D/g, ''); // Limit to 2 digits
if (this.value.length > 2) {
this.value = this.value.slice(0, 2);
}
});
}
});
</script>
