fbpx

חדש! תבניות מוכנות של חנויות איקומרס צפייה כאן>

0

אוקטובר 28, 2023

Written by: Julia web design

שינוי מיקום של תיבת ההסכמה בטפסי אלמנטור

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

 

תוכן עניינים

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

הנה דוגמאות:

טופס שבנוי כעמודה

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

טופס שבנוי בשורה אחת 

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

דוגמא לשורה אחת

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

אז איך פותרים את זה? 

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

הנה התוצאה שאליה אנחנו רוצים להגיע: 

הנה השלבים

  • נלחץ על הטופס ונגדיר את הצ׳קבוס כמאה אחוז
  • לאחר מכן נלחץ על טאב ״מתקדם״ ושם בחלק של css class ניתן לזה שם ייחודי לדוגמא mycooltofes
  • נרד למטה עד לחלק של הוספת קוד CSS ושם נדביק את הקוד שאני הוספתי כאן, אבל לפני כן נוסיף נקודה לפני mycooltofes ולאחר מכן נוסיף את הקוד, המטרה היא נועדה בשביל להבדיל את הטופס הזה משאר הטפסים כי אם נדביק את הקוד בלי ״שם ייחודי״ הקוד עלול להשפיע על שאר הטפסים שלא בהכרח אנחנו רוצים ששם צ׳קבוקס של ההסכמה יהיה מתחת. אופציה שנייה היא להוסיף לפני selector במקום שם ייחודי שיודע להגדיר שאנחנו ״מסמנים״ ״בוחרים״ רק את הטופס הזה.
  • מדביקים את הקוד המלא ונהנים מהתוצאה.

הנה הקוד

				
					.mycooltofes .elementor-field-type-acceptance {
    order: 1;
}
				
			

שיתוף:

כתיבת תגובה

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

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

Subscribe

מידע שווה וטיפים בבניית אתרים
 בלחיצת כפתור!

עוד פוסטים שווים על בניית אתרים..

אין להעתיק מהאתר :)

להתחיל פרויקט יחד!

טיפה פרטים, ואחזור אליך הכי מהר שאוכל.

Freestyle

ליווי אישי 1X1

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

Slowtravellers

Julia & Gideon - Experience Creators

Home Decor

home decor | style & more

Caramel studio

מקרמה | סריגה & ועוד

Andriana studio

צילום & ועוד

Face care by grace

טיפול פנים | טיפול בפיגמנטציה

Create with me

web design | ux & ui

Painting by Luna

קאנבס | פוסטרים | סטילס

Web design by Julia

בנייה ועיצוב אתרים | חנויות | דפי נחיתה

Ecard

חינם: תבנית של כרטיס ביקור דיגיטלי

לאחר השארת פרטים, אני מעבירה אותך לקישור בו ניתן להוריד את הקובץ!

Email Signature

חינם: חתימה מעוצבת ומקצועית
בפיגמה למייל

לאחר השארת פרטים, אני מעבירה אותך לקישור בו ניתן להוריד את הקובץ!

Checklist

חינם: צ׳קליסט לדף נחיתה
מצליח!

לאחר השארת פרטים, אני מעבירה אותך לקישור בו ניתן להוריד את הקובץ!

תודה, קיבלתי. שיהיה לך יום קסום

נצא לדרך?

טיפה פרטים, ונחזור אליך
הכי מהר שנוכל..

נצא לדרך?