👋 Smart Template 2.0
טמפלייט עדכני מבוסס על variables.
משתנים שמוגדרים בלשונית variables כאן או בלשונית בצד שמאל.
מומלץ להגדיר את הערכים מראש.
תהליך עבודה מומלץ.
הגדרת variables.
ייבוא כל המדיה הנדרשת.
פיתוח האתר.
עדכון meta-data של כל העמודים.
מחיקת קלאסים ואינטרקציות לא נחוצות.
ווידוא alt tag, לינקים, דחיסת מדיה.
חיבור דומיין.
הרצת טסטים.
🟣 Variables
משתנים שמוגדרים מראש בקוד הראשי וחוזרים על עצמם בכל האתר. מאפשר לשמור על עיצוב אחיד באתר ועדכון גלובלי של אלמנטים, קלאסים ופרמטרים. אפשר להוסיף עוד משתנים בהמשך לפי הצורך.
*מומלץ להתחיל כל פרוייקט בעדכון הvariables בהתאם לעיצוב.
🎨 Colors
Brand - צבעי מותג
Dark-100Brand-200Brand-200Brand-300Brand-400Dark - צבעים ניטרלים
Dark-100Dark-200Dark-300Dark-400System - צבעי מערכת
BlackWhite
Text 🆎
כותרת ראשית - H1
כותרת משנית - H2
תת-כותרת
כותרת לטופסטקסט גדולטקסט רץ
טקסט תומך
💬 Global Classes
קלאסים גלובליים שעוזרים לפיתוח מהיר ונכון.
לעריכת קלאס יש ללחוץ על הטקסט בתוך הקלאס.
🧩 Composition
- flex-vertflex-hozמעטפת פלקס עם כיוון אנכי או אופקי.
מעולה לאלמנטים שרוצים לתת להם חופש לתפוס את גודלים האמיתי ולא להגבילם בהכרח.
ניתן לשלב:wrap-down - grid-2-colsgrid-3-colsמעטפת עם ״מקומות קבועים״ שהתוכן מתלבש בהם. יותר שליטה על מיקומים וסדר.עריכת קלאסים {grid}📂
- relrel-1שליטה על המיקום וz-index.
🔤 Text
- h1h2h3form-titlebig-textbody-textsmall-textקלאס בסיסי לסוגי טקסט שונים.
**עריכה בלשונית 🟣 Variables** - 100-thin200-xlight300-light400-normal500-medium600-semibold700-bold800-xbold900-blackמשקל טקסט.
- text-centertext-righttext-leftיישור טקסט
- text-wrap-prettytext-wrap-balancetext-no-wrapיישור פסקה
- underlineunderline-brandtagעיצוב טקסט
- lh-2lh-1גובה הטקסט
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
צבע טקסט.
📏 Spacing
- spacerspacer-xsspacer-smallspacer-mediumspacer-largespacer-xl
ריווח אנכי.
**חשוב**
הקלאס spacer לבד
משמש אותנו כמעטפת שעליה אנחנו מחילים את כל הקלאסים הגלובליים שלנו, כדי לשמור על הקלאסים הפנימיים (והלא-גלובליים) כמה שיותר נקיים.
ניתן לערוך את כל הקלאסים תחת מעטפת control-classesעריכת קלאסים {spacer}📂 - gap-nonegap-xsgap-smallgap-mediumgap-largegap-xl
ליצירת מרווח במסגרות עם פלקס או גריד.
- pad-nonepad-xspad-smallpad-mediumpad-largepad-xl
ליצירת מרווח אופקי במסגרות עם פלקס-אופקי.
ניתן לערוך את כל הקלאסים תחת מעטפת control-classesעריכת קלאסים {pad}📂
🌓 Design
- theme-lighttheme-darktheme-brandהחלפה בין מהירה בין ערכות נושא (צבע רקע וטקסט)עריכת קלאסים {theme}📂
- cr-nonecr-xscr-smallcr-mediumcr-largecr-xlcr-fullלעריכת הקלאס יש ללחוץ ישירות על הקלאס 👆
עיגול פינות. - borderborder-noneלעריכת הקלאס יש ללחוץ ישירות על הקלאס 👆
קלאס בסיסי למסגרת. מומלץ לשלב קומבו קלאס לוריאציות שונות של מסגרות. fill-dark-100
fill-dark-200
fill-dark-300
fill-dark-400
fill-black
fill-white
fill-brand-100
fill-brand-200
fill-brand-300
fill-brand-400
מילוי אלמנטים.
💎 Components
קומפוננטות ניתנות לעריכה שחוזרות על עצמן בכל האתר ומיועדות להשאר קבועות. יש קומפוננטות עם וריאנטים שניתן לערוך ולהוסיף כדי ליצור תהליך פיתוח גמיש ונוח.
- מדיה
- Icon
- SVG Icon
- Review
- Video🔊 צפו בסרטון עכשיו! (רק 3 דקות) 🔊
- YT Short
- טפסים
- Lead Form* מקומות אחרונים בחודש `[נוכחי]Thank 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>
.avif)
