צריך לשלב שדות מוטבעים ושדות ברוחב מלא של מודול טופס יצירת קשר de Divi ?
Le טופס יצירת קשר הוא מרכיב חשוב לכלול באתר האינטרנט שלך אם אתה רוצה ללכוד מיילים ולהמיר את המבקרים שלך ללקוחות.
מודול Le טופס יצירת קשר de Divi ניתן להתאים אישית בקלות ליצירה צורות כרטיסי קשר אטרקטיביים ושובי לב לכל סוגי האתרים. מודול זה מגיע עם שתי אפשרויות תצוגה שניתן להחיל על כל שדה טופס: en ligne ou רוחב מלא.
במדריך זה, נציג עבורך ארבע אפשרויות פריסה ייחודיות טופס יצירת קשר Divi באמצעות שדות מוטבעים ורוחב מלא.
בואו נתחיל!
סקירה
הנה תצוגה מקדימה של מה שאנחנו נעצב.
פריסה ראשונה
פריסה שנייה
פריסה שלישית
פריסה רביעית
מה שאתה צריך כדי להתחיל
לפני שנתחיל, התקן והפעל את נושא ה- Divi וודא שיש לך את הגרסה העדכנית ביותר של Divi באתר שלך.
עכשיו אתה מוכן להתחיל!
4 פריסות לדוגמה למודול טופס יצירת קשר של Divi באמצעות שדות מוטבעים ורוחב מלא
בחר את הפריסה המוגדרת מראש
כל אחת מ-4 התבניות משתנות מפריסת דף הקשר לתיקון נעליים של חבילת פריסה לתיקון נעליים, שתוכל למצוא בספריית Divi.
הוסף דף חדש לאתר שלך ותן לו כותרת, ולאחר מכן בחר באפשרות השתמש ב- Divi Builder.
אנו נשתמש בפריסה מוכנה מראש מספריית Divi עבור דוגמה זו, אז בחר עיין בפריסות.
מצא ובחר את פריסת דף איש הקשר לתיקון נעליים.
בחר השתמש בפריסה זו כדי להוסיף את הפריסה לדף שלך.
כעת אנו מוכנים לעצב את הדוגמאות שלנו.
פריסה ראשונה
ראשית, הזז את השורה המכילה את המודול טופס יצירת קשר לקטע שלמעלה, ממש מתחת לקו עם מודולי Blurb. לאחר מכן תוכל למחוק את החלק הריק שנותר.
פתח את הגדרות הקו והוסף ריפוד ימני ושמאלי,
- ריפוד (שמאל וימין): 15%
בחר אפשרויות רספונסיביות והגדר ריפוד לנייד.
- ריפוד (שמאל וימין): 5%
פריסת טופס יצירת קשר שונה עם שדות מוטבעים ורוחב מלא
עבור פריסה זו, ניצור שני שדות נפרדים עבור שם פרטי ושם משפחה.
פתח את הגדרות מודול טופס יצירת קשר ושנה את השדה מזהה וכותרת עבור השדה שם משפחה לשם פרטי.
הוסף שדה חדש מתחת לשדה שם פרטי. הגדר את השדה מזהה וכותרת ל'שם'.
בהגדרות שדה השם, פתח את הגדרות הפריסה והגדר את Make Fullwidth ל-No.
- עשה רוחב מלא: לא
לאחר מכן, תחת ההגדרות של טופס יצירת קשר, שנה את סדר הנושא והטלפון כך שהטלפון יופיע לפני הנושא.
פתח את הגדרות פריסת שדה הנושא והגדר את השדה ברוחב מלא.
- צור רוחב מלא: כן
התאמה אישית של עיצוב טופס יצירת קשר
עכשיו בואו נשנה כמה הגדרות כדי להשלים את העיצוב. נווט אל הכרטיסייה עיצוב של הגדרות מודול טופס צור קשר.
ראשית, שנה את צבע הרקע של הכפתור.
- רקע לחצן: #DBC2B3
הוסף שוליים עליונים לכפתור.
- שולי לחצן (עליון): 10 פיקסלים
לבסוף, עבור להגדרות הגבול והוסף פינות מעוגלות לשדות.
- כניסות פינות מעוגלות: 30 פיקסלים
ראה גם: Divi: כיצד להוסיף לוגו רספונסיבי למודול "תפריט ברוחב מלא".
התוצאה הסופית של דוגמה 1
להלן התוצאה הסופית בדסקטופ ובנייד.
דוגמה שנייה
עבור הדוגמה השנייה שלנו, נעביר את מודולי Blurb לצד השמאלי של הדף ונמקם את טופס יצירת הקשר בצד ימין של הדף. העבר מודולי Blurb לעמודה.
שנה את פריסת השורות.
פתח את הגדרות עיצוב הקו וכבה השתמש ברוחב מרזב מותאם אישית.
- השתמש ברוחב מרזב מותאם אישית: לא
הוסף קוד ל-CSS המותאם אישית של הרכיב הראשי כדי ליישר אנכית את המודולים של Blurb ו-Contact Form.
align-items:center;
כעת עלינו להסיר את הגבול הדק בין העמודות. פתח את הגדרות השורה ולאחר מכן פתח את הגדרות העמודות 1. תחת הכרטיסייה עיצוב, עבור אל הגדרות הגבול והסר את הגבול.
- רוחב גבול ימני: 0 פיקסלים
לאחר מכן, פתח את הגדרות עמודה 2 וחזור על השלבים כדי להסיר את הגבול.
- רוחב גבול ימני: 0 פיקסלים
הגדר את הטקסט "צור קשר" למרכז.
העבר את טופס יצירת הקשר לעמודה הימנית. מחק את החלק הריק שנותר.
פריסת טופס יצירת קשר שונה עם שדות מוטבעים ורוחב מלא
לפריסה זו יהיו גם שני שדות נפרדים עבור שם פרטי ושם משפחה. פתח את הגדרות מודול טופס יצירת קשר ושנה את השדה מזהה וכותרת עבור השדה שם משפחה לשם פרטי.
הוסף שדה חדש מתחת לשדה שם פרטי. הגדר את השדה מזהה וכותרת ל'שם'.
בהגדרות שדה השם, פתח את הגדרות הפריסה והגדר את Make Fullwidth ל-No.
- עשה רוחב מלא: לא
שנה את סדר הטלפון ושדות הנושא כך שהטלפון יבוא לפני הנושא.
פתח את הגדרות השדה עבור דואר אלקטרוני, טלפון ונושאי, והגדר את הפריסה ברוחב מלא.
- צור רוחב מלא: כן
התאמה אישית של עיצוב טופס יצירת קשר
פתח את הגדרות השורה ולאחר מכן פתח את הגדרות העמודות 2. הגדר את צבע הרקע.
- רקע: #DBC2B3
בהגדרות של עמודה 2, עבור ללשונית עיצוב והוסף ריפוד.
- ריפוד (עליון, תחתון, שמאל וימין: 50 פיקסלים
בחר בסמל הנייד כדי לשנות את ההגדרות הרספונסיביות. סט ריפוד לנייד.
- ריפוד (עליון, תחתון, שמאל וימין): 30 פיקסלים
לאחר מכן הוסף צל תיבה לעמודה.
לבסוף, פתח את הגדרות מודול טופס יצירת קשר ושנה את צבע טקסט השדה.
- צבע טקסט של שדות: #000000
התוצאה הסופית של דוגמה 2
הנה התוצאה הסופית של הפריסה השנייה.
דוגמה שלישית
עבור הפריסה השלישית, יהיה לנו את טופס יצירת הקשר בצד שמאל ואת מודולי Blurb בצד ימין. נתחיל בשינוי מבנה העמודות של השורה המכילה את מודולי Blurb.
העבר את מודול הכתובות לעמודה הימנית.
לאחר מכן, העבר את מודול הטקסט "צור קשר" לעמודה השמאלית, ואז מחק את השורה הריקה שנותרה.
העבר את מודול טופס יצירת הקשר לעמודה השמאלית, תחת מודול הטקסט "צור קשר". מחק את החלק הריק שנותר.
פתח את הגדרות הקו, תחת הכרטיסייה עיצוב וכבה השתמש ברוחב מרזב מותאם אישית
- השתמש ברוחב מרזב מותאם אישית: לא
הוסף קוד ל-CSS המותאם אישית של הרכיב הראשי כדי ליישר אנכית את המודולים של Blurb ו-Contact Form.
align-items:center;
פתח את הגדרות השורה ולאחר מכן פתח את הגדרות העמודות 1. תחת הכרטיסייה עיצוב, עבור אל הגדרות הגבול והסר את הגבול. חזור על השלבים כדי להסיר את הגבול מעמודה 2.
- רוחב גבול ימני: 0 פיקסלים
שינוי פריסת טופס יצירת הקשר
נשאיר את רוחבי השדות כפי שהם עבור העיצוב השלישי, עם זאת, פתח את הגדרות טופס יצירת הקשר ונשנה את סדר מספר הטלפון ושדה הנושא כך שהטלפון יגיע ראשון.
התוצאה הסופית של דוגמה 3
הנה התוצאה הסופית של הפריסה השלישית.
קראו גם: Divi: כיצד להציג את מודול Fullwidth Header במסך מלא
דוגמה רביעית
עבור הפריסה הרביעית והאחרונה, מודול טופס צור קשר יהיה בצד שמאל והמודולים Blurb בצד ימין. שוב, נתחיל בשינוי מבנה העמודות של השורה המכילה את מודולי ה-Blurb.
העבר את מודול הכתובות לעמודה הימנית.
לאחר מכן, העבר את מודול טופס יצירת קשר לעמודה השמאלית. מחק את החלק הריק שנותר.
פתח את הגדרות הקו, בלשונית עיצוב והשבת השתמש ברוחב מרזב מותאם אישית.
- השתמש ברוחב מרזב מותאם אישית: לא
הוסף קוד ל-CSS המותאם אישית של הרכיב הראשי כדי ליישר אנכית את המודולים של Blurb ו-Contact Form.
align-items:center;
פתח את הגדרות השורה ולאחר מכן פתח את הגדרות העמודות 1. תחת הכרטיסייה עיצוב, עבור אל הגדרות הגבול והסר את הגבול.
- רוחב גבול ימני: 0 פיקסלים
לאחר מכן, פתח את הגדרות עמודה 2 וחזור על השלבים כדי להסיר את הגבול.
- רוחב גבול ימני: 0 פיקסלים
פתח את הגדרות מודול הטקסט עבור הטקסט "צור קשר" ומרכז את הטקסט.
- יישור טקסט: ממורכז
פריסת טופס יצירת קשר שונה עם שדות מוטבעים ורוחב מלא
עבור עיצוב זה, כל השדות שלנו יהיו ברוחב מלא. פתח את הגדרות מודול טופס יצירת קשר ולאחר מכן פתח את ההגדרות עבור כל שדה. בכרטיסייה עיצוב, בחר מערך ולהגדיר צור רוחב מלא סור כן.
לאחר שיצרת כל שדה ברוחב מלא, הטופס אמור להיראות כך.
כעת שנה את השדה מזהה וכותרת עבור השדה שם משפחה לשם פרטי.
הוסף שדה חדש מתחת לשדה שם פרטי. הגדר את השדה מזהה וכותרת ל'שם'.
שנה את סדר הטלפון ושדות הנושא כך שהטלפון יבוא לפני הנושא.
התאמה אישית של עיצוב מודול טופס יצירת קשר
בהגדרות המודול, בלשונית עיצוב, הגדר את צבע טקסט השדה לשחור.
- צבע טקסט של שדות: #000000
פתח את הגדרות המדור והוסף צבע רקע.
- רקע: #DBC2B3
לבסוף, הוסף מסיכת רקע.
- מסכת רקע: קשת
- טרנספורמציה של מסכה: אופקית
כדי לגרום למסכת הרקע לעבוד טוב יותר בנייד, בואו נשתמש בהגדרות הרספונסיביות.
- שינוי מסכה (טלפון): אופקי וסיבוב
תוצאה סופית
הנה התוצאה הסופית של הפריסה הרביעית.
תוצאות סופיות
בואו נסתכל על כל הדוגמאות שלנו פעם נוספת.
דוגמה ראשונה
דוגמה שנייה
דוגמה שלישית
דוגמה רביעית
הורד את DIVI עכשיו!!!
סיכום
טופס יצירת קשר אטרקטיבי יכול להגדיל את ההמרות שלך ולאפשר למבקרים שלך להתחבר ישירות אליך.
כפי שהדגמנו במאמר זה, אתה יכול להשתמש באפשרויות השדה המוטבעות והרוחב המלא כדי ליצור מראה ופריסות שונים עבור הטופס שלך, ואפשרויות העיצוב המובנות של Divi מאפשרות לך ליצור עיצובים ייחודיים ואטרקטיביים כדי לעזור לטופס להתבלט.
אני מקווה שהטכניקה הזו תוסיף עוד מיומנות עיצוב שימושית עבור פרויקטים עתידיים.
אנו מקווים שהמדריך הזה יתן לך השראה לפרויקטים הבאים של Divi. אם יש לך חששות או הצעות, מצא אותנו פרק התגובות לדון בזה.
אפשר גם להתייעץ המשאבים שלנו, אם אתה זקוק ליותר אלמנטים לביצוע הפרויקטים שלך ליצירת אתרי אינטרנט.
אל תהססו להתייעץ גם עם המדריך שלנו בנושא יצירת בלוג וורדפרס או על אחד על Divi: הנושא הטוב ביותר בוורדפרס בכל הזמנים.
אבל בינתיים, שתף מאמר זה ברשתות החברתיות השונות שלך.
...
