מה ניתן לשנות
טופס התרומה משתמש בשלושה צבעי מותג. ניתן לשנות חלקם או את כולם:
צבע | מה הוא שולט בו | ברירת מחדל |
ראשי (Primary) | טקסט ראשי, כותרות, ניווט, כפתורים משניים, כותרות סיכום התשלום | #4a0e00 (אדום כהה) |
הדגשה (Accent) | כפתור "תרומה", קישורים, אמצעי התשלום שנבחר, מסגרות פוקוס, הדגשות חשובות | #fc5936 (כתום) |
רקע (Background) | רקע הדף, פאנלים של מקטעים, משטחים רכים (מקטע הטיפ, תיבת כיסוי העמלה וכו') | #fff8f3 (קרם) |
איך מחילים את הצבעים שלך
בחר את קודי ה-hex של הצבעים שלך (למשל, מתוך הנחיות המותג שלך או כלי כמו coolors.co)
העתק את התבנית למטה לשדה ה-CSS המותאם אישית (Custom CSS) שלך
החלף את קודי ה-hex בערכים שלך
שמור — הטופס ישתמש בצבעים שלך (ייתכן שתצטרך לנקות את המטמון של הדף כדי שהשינוי יופיע).
תבנית CSS
:root {
--mahogany: #YOUR_PRIMARY_HEX;
--fiery: #YOUR_ACCENT_HEX;
--seashell: #YOUR_BACKGROUND_HEX;
}
איך תשנה את כל השלושה
:root {
--mahogany: #1a3a8a; /* Navy blue for text */
--fiery: #16a34a; /* Green for buttons */
--seashell: #f0f9ff; /* Pale blue background */
}
דוגמה: עקיפת צבע אחד בלבד
:root { --fiery: #16a34a;
}
⚠️ טיפים לבחירת צבעים
ניגודיות חשובה. הטקסט צריך להיות קריא על הרקע שלו. צבע ההדגשה (Accent) משמש לכפתורים עם טקסט לבן, לכן ודא שהוא כהה מספיק. הצבע הראשי (Primary) משמש לטקסט על רקע לבן/קרם, לכן ודא שהוא כהה מספיק כדי שיהיה ניתן לקרוא אותו.
בדוק לפני הפרסום. צפה בתצוגה מקדימה של הטופס שלך בתצוגות שולחן עבודה ומובייל, ובדוק גם באנגלית וגם בעברית (אם רלוונטי) לפני העלאה לאוויר.
אל תבחר שלושה גוונים דומים. הכפתורים צריכים לבלוט מהרקע. בחר צבע הדגשה שמנוגד גם לצבע הראשי וגם לרקע.
השתמש בקודי hex מלאים בני 6 ספרות עם קידומת # (למשל, #1a3a8a, לא 1a3a8a ולא #1a3).
החלפת פונטים (גופנים)
כדי לשנות את הגופן בטופס התרומה, הדביקו את ה-CSS הבא בשדה ה-CSS המותאם אישית. החליפו את שם הגופן לבחירתכם:
לאחר מכן, ב-CSS המותאם אישית, יש להפנות אותנו לקובץ הגופן עצמו. ישנן מספר דרכים לעשות זאת:
אפשרות 1: שימוש בגופן של Google (הקלה ביותר)
היכנסו ל-fonts.google.com ובחרו גופן (לדוגמה: Inter, Roboto, Poppins, Heebo, Rubik)
לחצו על "Get embed code" והעתיקו את שורת ה-
@importהדביקו את זה בשדה ה-CSS המותאם אישית:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --font: 'Inter', sans-serif; }
החליפו את Inter בשם הגופן שבחרתם — גם בכתובת ה-URL וגם במשתנה.
אפשרות 2: שימוש בגופן שכבר קיים באתר
אם הארגון שלכם כבר טוען את גופן המותג באתר הראשי, ייתכן שיש לכם כבר גישה אליו. פשוט הפנו אליו לפי השם:
:root { --font: 'Helvetica Neue', Arial, sans-serif; }
תמיד יש לכלול גופן חלופי (sans-serif או serif) כדי שהטופס יעבוד גם אם הגופן הראשי לא ייטען.
אפשרות 3: שימוש בקובץ גופן מתארח עצמית
אם יש לכם קובץ גופן מותאם אישית (.woff2, .woff, .ttf), העלו אותו לשרת שלכם והגדירו אותו:
@font-face {
font-family: 'MyBrandFont';
src: url('https://your-domain.com/fonts/MyBrandFont.woff2') format('woff2');
font-weight: 400;
font-style: normal; }
@font-face { font-family: 'MyBrandFont';
format('woff2');
font-weight: 700;
font-style: normal; }
:root { --font: 'MyBrandFont', sans-serif; }
הטופס משתמש בעובי גופן 400 (רגיל), 500 (בינוני), 600 (חצי-מודגש), 700 (מודגש) ו-800 (מודגש במיוחד). ודאו שהגופן שבחרתם תומך בעוביים אלו — או לפחות ב-400 וב-700 — כדי שהכל יוצג כהלכה.
עמודים בעברית ובערבית
הגרסאות בעברית ובערבית של הטופס משתמשות בגופן ברירת מחדל אחר (Rubik) המותאם לכתב האלפבית הזה. כדי לשנות את הגופן עבור עמודים בעברית/ערבית באופן ספציפי, הוסיפו את הכלל הבא:
html[dir="rtl"] { --font: 'YOUR_HEBREW_FONT', 'Rubik', Arial, sans-serif; }