צריך לשלב שדות מוטבעים ושדות ברוחב מלא של מודול טופס יצירת קשר מ Divi ?
טופס יצירת קשר הוא אלמנט חשוב לכלול באתר האינטרנט שלך אם ברצונך לאסוף מיילים ולהמיר את המבקרים שלך ללקוחות.
מודול טופס יצירת הקשר של 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: הנושא הטוב ביותר בוורדפרס בכל הזמנים.
אבל בינתיים, שתף מאמר זה ברשתות החברתיות השונות שלך.
...