האם תרצה ליצור א טופס יצירת קשר לאתר שלך הודות למודול טופס יצירת קשר מדיווי? הנה 3 רעיונות להתאמה אישית...

לס צורות פרטי התקשרות הם חלק חיוני באתרי אינטרנט רבים. המטרה העיקרית שלהם היא להיות אינטואיטיביים ולעזור למבקרים ליצור קשר בקלות. 

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

נשתף 3 עיצובים ייחודיים של המודול טופס יצירת קשר de Divi שתוכל ליצור רק באמצעות האפשרויות המובנות של Divi.

בואו נלך!

סקירה כללית של העיצובים של מודול טופס יצירת קשר של Divi

גרסאות שולחן עבודה

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

גרסאות ניידות

וכך הם נראים בגדלי מסך קטנים יותר:

הורד את DIVI עכשיו!!!

כיצד להתאים אישית את מודול טופס יצירת הקשר של Divi: 3 דוגמאות

קראו גם: Divi: כיצד ליצור מדור חברי צוות כקרוסלה

יצירת טופס יצירת קשר מס' 1

הוסף מקטע חדש

רקע צבעוני

נתחיל מהדוגמה הראשונה! הוסף קטע חדש, עבור להגדרות הרקע והוסף רקע שיפוע.

• שיפוע עצירות
  • 34%: #4c00ff
  • 34%: #ffd400
• סוג: עגול
• כיוון שיפוע: שמאל למטה

המרווח

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

• ריפוד (למעלה ולמטה): 200 פיקסלים

הוסף שורה חדשה

מבנה העמודה

הוסף שורה חדשה באמצעות מבנה העמודות הבא:

עמודה 1: צבע רקע

מבלי להוסיף מודולים עדיין, פתח את הגדרות השורה, ולאחר מכן את הגדרות העמודה 1 והוסף את צבע הרקע למטה

• רקע: rgba(255,255,255,0.55)

עמודה 1: תמונת רקע

הוסף גם תמונת רקע לעמודה הראשונה.

• חזרה על תמונת רקע: ללא חזרה
• תערובת תמונת רקע: מסך

עמודה 2: תמונת רקע

וצבע רקע לבן לעמוד השני.

• רקע: #ffffff

אומד

לאחר מכן שנה את פרמטרי הגודל.

• השוואת גובה עמודות: כן

המרווח

הסר גם את כל ריפודי ברירת המחדל המותאמים אישית.

• ריפוד (למעלה ולמטה): 0 פיקסלים

רדיוס גבול עמודה

הוסף רדיוס גבול לשתי העמודות בכרטיסייה המתקדמת.

border-radius: 10px;

הוסף מודול טקסט לעמודה 1

הוסף תוכן

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

הגדרות טקסט

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

• טקסט:
  • גופן: לספק
  • צבע טקסט: #333333
  • גודל: 100 פיקסלים
  • גובה קו: 1 אמ
  • יישור: מרכז

המרווח

הוסף גם ערכי מילוי מותאמים אישית.

• ריפוד (עליון): 600 פיקסלים
• ריפוד (למטה): 100px

תיבת צל

כדי להוסיף עומק לעיצוב, השתמש בצל קופסה עדין.

• חוזק טשטוש צללי קופסה: 80 פיקסלים
• חוזק התפשטות הצללים של התיבה: -16 פיקסלים
• צבע צל: rgba(0,0,0,0.3)

הוסף מודול תמונה לעמודה 2

העלה תמונה

המשך על ידי הוספת מודול תמונה לעמודה השנייה. העלה תמונה לפי בחירתך.

אומד

שנה את הגדרות הגודל עבור מודול זה.

• רוחב: 25% (שולחן עבודה), 50% (טאבלט), 60% (טלפון)
• יישור מודול: מרכז

המרווח

צור חפיפה באמצעות שוליים עליונים שליליים.

• שוליים (עליון): -60%

גבול

שנה את גבולות התמונה באופן הבא:

• פינות מעוגלות: 100 פיקסלים (כל הפינות)

הוסף מודול טקסט מס' 1 לעמודה 2

הוסף תוכן

ממש מתחת למודול תמונה, הוסף מודול טקסט עם תוכן.

הגדרות טקסט

ערוך את הגדרות הטקסט עבור מודול זה.

• טקסט:
  • גופן: לספק
  • צבע טקסט: #333333
  • גודל טקסט: 44 פיקסלים
  • אוריינטציה: מרכז

הוסף מודול טקסט מס' 2 לעמודה 2

הוסף תוכן

לאחר מכן הוסף מודול טקסט נוסף.

הגדרות טקסט

שנה גם את הגדרות הטקסט עבור מודול זה.

• טקסט:
  • גופן: Arial
  • צבע טקסט: #ffd400
  • צבע טקסט: 18 פיקסלים
  • מרווח בין אותיות: 2 פיקסלים
  • אוריינטציה: מרכז

המרווח

ואז הוסף שוליים תחתונים.

• שוליים (למטה): 100 פיקסלים

הוסף את מודול טופס יצירת קשר לעמודה 2

הפעל את האפשרות "הפוך ברוחב מלא" בשדה שם ואימייל

המודול האחרון הדרוש הוא מודול טופס צור קשר. לפני שתעשה משהו אחר, פתח את שדות השם והדוא"ל ושנה את הפריסה.

• עשה רוחב מלא: כן

הוסף שדה נושא

כדי ליצור עיצוב זה, הוספנו שדה נוסף לנושא.

הגנה מפני דואר זבל

לאחר מכן השבת את אפשרות ה-captcha.

• השתמש ב-Captcha בסיסי: לא

הגדרות טקסט בשדה טופס

בצע כמה שינויים בהגדרות הטקסט של שדה הטופס של מודול טופס יצירת קשר זה

• שדות:
  • צבע רקע: rgba(255,255,255,0)
  • גופן: Arial
  • משקל גופן: קל
  • גודל טקסט: 16 פיקסלים
  • מרווח בין אותיות: 2 פיקסלים

הגדרות לחצן

אנחנו גם משנים את מראה הכפתורים.

• השתמש בגודל מותאם אישית עבור כפתור: כן
• כפתור:
  • צבע טקסט: #ffd400
  • רוחב גבול: 0 פיקסלים
  • מרווח בין אותיות: 2 פיקסלים
  • גופן: Arial
  • סיגנון גופן: U
  • קו תחתון צבע: #4c00ff

המרווח

לאחר מכן הוסף כמה ערכי ריפוד מותאמים אישית.

• ריפוד (למטה): 100 פיקסלים
• ריפוד (משמאל וימין): 50 פיקסלים

גבול

והוסיפו גבול תחתון עדין לכל אחד מהשדות.

• כניסות רוחב גבול תחתון: 2 פיקסלים
• קלט צבע גבול תחתון: #efefef

מרווח בין שדות בודדים

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

• שוליים (למטה): 20 פיקסלים

יצירת טופס יצירת קשר מס' 2

הוסף מקטע חדש

רקע צבעוני

בואו נעבור לדוגמא הבאה! הוסף קטע חדש עם רקע הדרגתי.

• עצירות שיפוע:
  • 50%: #562fef
  • 50%: #ffffff
• סוג שיפוע: ליניארי

המרווח

הוסף ערכי ריפוד מותאמים אישית להגדרות המרווח בסעיף זה.

• ריפוד (למעלה ולמטה): 200 פיקסלים

הוסף שורה חדשה

מבנה העמודה

הוסף שורה חדשה באמצעות מבנה העמודות הבא:

צבע רקע

מבלי להוסיף מודולים עדיין, פתח את הגדרות השורה והוסף צבע רקע לשורה.

• צבע רקע: #ffffff

רקע שיפוע 2 עמודות

הוסף רקע הדרגתי לעמודה השנייה בשורה.

• עצירות שיפוע:
  • 0%: #9932ff
  • 100%: #562fef
  • סוג: ליניארי
  • היגוי: 160 מעלות

אומד

שנה גם את פרמטרי גודל הקו.

• השתמש ברוחב מרזב מותאם אישית: כן
• רוחב המרזב: 1
• השוואת גובה עמודות: כן

המרווח

לאחר מכן, הוסף ערכי ריווח מותאמים אישית.

• שורה:
  • ריפוד (למעלה ולמטה): 0 פיקסלים

• עמודה 1:
  • ריפוד: 100 פיקסלים (עליון), 50 פיקסלים (למטה)
  • ריפוד (משמאל וימין): 50 פיקסלים

• עמודה 2:
  • ריפוד (למעלה ולמטה): 100 פיקסלים
  • ריפוד (משמאל וימין): 50 פיקסלים

גבול

הוסף '20px' לכל אחד מגבולות השורות.

תיבת צל

לבסוף, הוסף צללית עדינה לקופסה.

• חוזק טשטוש צללי קופסה: 45 פיקסלים
• חוזק התפשטות הצלליות של התיבה: -11 פיקסלים
• צבע צל: rgba(0,0,0,0.3)

הוסף מודול טקסט לעמודה 1

הוסף תוכן

הגיע הזמן להתחיל להוסיף את המודולים! התחל עם מודול טקסט בעמודה הראשונה.

הגדרות טקסט

ערוך את הגדרות הטקסט עבור מודול זה.

• טקסט:
  • משקל גופן: מודגש במיוחד
  • סגנון גופן: TT
  • צבע: #562fef
  • גודל: 100 פיקסלים (שולחן עבודה), 80 פיקסלים (טאבלט), 60 פיקסלים (טלפון)
  • מרווח בין אותיות: -10 פיקסלים
  • גובה קו: 1 אמ

המרווח

הוסף גם שוליים תחתונים.

• שוליים (למטה): 50 פיקסלים

הוסף את מודול טופס יצירת קשר לעמודה 1

אלמנטים

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

• השתמש ב-Captcha בסיסי: לא

הגדרות טקסט בשדה טופס

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

• צבע רקע שדות: #ffffff

הגדרות לחצן

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

• השתמש בסגנונות מותאמים אישית עבור כפתור: כן
• כפתור:
  • גודל טקסט: 73 פיקסלים
  • צבע טקסט: rgba(0,0,0,0) (ברירת מחדל),
  • צבע רקע: rgba(255,255,255,0) (רחף)
  • רוחב גבול: 0 פיקסלים
  • צבע סמל: #9932ff
• הצג רק סמל עם ריחוף עבור לחצן: לא

תיבת צל

לבסוף, הוסף צל תיבה עדין לכל אחד מהשדות.

• חוזק טשטוש צל של קופסה: 36 פיקסלים
• חוזק התפשטות הצללים של התיבה: -14 פיקסלים
• צבע צל: rgba(0,0,0,0.3)

הוסף מודול טקסט לעמודה 2

הוסף תוכן

המודול הראשון שנצטרך בעמודה השנייה הוא מודול Text נוסף.

הגדרות טקסט

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

• טקסט:
  • משקל גופן: מודגש במיוחד
  • סגנון גופן: TT
  • צבע: #ffffff
  • גודל: 23 פיקסלים
  • מרווח בין אותיות: -1 פיקסלים

הוסף מודול Blurb #1 לעמודה 2

הוסף תוכן

המודול השני שנצטרך הוא מודול Blurb. קדימה והזן פרטי קשר.

בחר בסמל

לאחר מכן בחר סמל מתאים.

הגדרות אייקון

שנה את ההגדרות עבור סמל זה.

• צבע סמל: #ffffff
• מיקום תמונה/סמל: מימין

הגדרות טקסט כותרת

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

• גודל טקסט כותרת: 15 פיקסלים
• מרווח אותיות כותרת: -0,5 פיקסלים

המרווח

והוסיפו שוליים עליונים.

• שוליים (עליון): 120 פיקסלים

מודול Clone Blurb פעמיים

לאחר שתסיים לערוך את מודול Blurb הראשון, תוכל להמשיך ולשכפל את המודול פעמיים.

שנה את התוכן ואת הסמל של שני הכפילויות

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

שנה את המרווח של שני הכפילויות

יש לשנות גם את השוליים העליונים של שני הכפילויות.

• שוליים (עליון): 30 פיקסלים

יצירת טופס יצירת קשר מס' 3

הוסף מקטע חדש

צבע רקע

נעבור לדוגמא השלישית! הוסף קטע חדש עם צבע הרקע הבא:

• צבע רקע: #3491CE

המרווח

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

• ריפוד (למעלה ולמטה): 200 פיקסלים

הוסף שורה מס' 1

מבנה העמודה

לאחר מכן, הוסף שורה חדשה באמצעות מבנה העמודות הבא:

הוסף מודול טקסט

הוסף תוכן

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

הגדרות טקסט

לאחר מכן, שנה את הגדרות הטקסט.

• טקסט:
  • משקל גופן: מודגש במיוחד
  • צבע טקסט: rgba(255,255,255,0.24)
  • גודל טקסט: 100 פיקסלים (שולחן עבודה), 70 פיקסלים (טאבלט), 36 פיקסלים (טלפון)
  • גובה קו: 1 אמ
  • אוריינטציה: מרכז

המרווח

הוסף גם שוליים תחתונים שליליים.

• שוליים (למטה): -100 פיקסלים

הוסף שורה 2

מבנה העמודה

השורה השנייה שאנו צריכים כדי להשלים דוגמה זו מכילה את מבנה העמודות הבא:

רקע צבעוני

מבלי להוסיף מודולים עדיין, פתח את הגדרות הקו והוסף רקע שיפוע.

• עצירות שיפוע:
  • 50%: #11CE84
  • 50%: #10C77F
• סוג שיפוע: ליניארי
• היגוי: 160 מעלות

אומד

שנה גם את פרמטרי הגודל.

• השתמש ברוחב מרזב מותאם אישית: כן
• רוחב המרזב: 1
• השוואת גובה עמודות: כן

המרווח

לאחר מכן הוסף כמה ערכי ריפוד.

• ריפוד: 150 פיקסלים (עליון), 100 פיקסלים (למטה)
• ריפוד: 50 פיקסלים (שמאל וימין)

גבול

לאחר מכן עבור להגדרות הגבול והוסף '20px' לכל אחת מהפינות. השתמש גם בגבול תחתון.

• פינות מעוגלות: 20 פיקסלים
• רוחב גבול תחתון: 10 פיקסלים
• צבע גבול תחתון: #1ba35a

תיבת צל

השלם את הגדרות הקו על ידי הוספת צל תיבה עדין.

• חוזק טשטוש צל של קופסא: 80 פיקסלים
• חוזק התפשטות הצללים של התיבה: -24 פיקסלים
• צבע צל: rgba(0,0,0,0.3)

הוסף את מודול טופס יצירת קשר לעמודה 1

הפעל את האפשרות "הפוך ברוחב מלא" בשדה שם ואימייל

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

• צור רוחב מלא: כן

אלמנטים

לאחר מכן השבת את ה-captcha.

• השתמש ב-Captcha בסיסי: לא

הגדרות לחצן

ושנו את הגדרות הכפתורים.

• השתמש בסגנונות מותאמים אישית עבור כפתור: כן
• צבע טקסט לחצן: #ffffff
• עצירות שיפוע:
  • 50%: #3AA0E3
  • 50%: #3491CE
• סוג שיפוע: ליניארי
• כיוון שיפוע: 155 מעלות -
• רוחב גבול הלחצן: 0 פיקסלים
• רדיוס גבול לחצן: 10 פיקסלים
• חוזק התפשטות הצללים של התיבה: -2 פיקסלים
• צבע גוון: #0a60af

ראה גם: Divi: כיצד להתאים אישית את סמלי הסל והחיפוש של מודול "תפריט ברוחב מלא".

גבול

אנו מוסיפים גם '5px' של פינות מעוגלות לכל אחד מהשדות.

הוסף מודול טקסט לעמודה 2

הוסף תוכן

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

צבע רקע

לאחר מכן שנה את צבע הרקע.

• רקע: rgba(255,255,255,0.13)

הגדרות טקסט

ערוך גם עם הגדרות טקסט.

• טקסט:
  • משקל גופן: קל
  • צבע טקסט: #ffffff
  • גודל טקסט: 15 פיקסלים
  • מרווח בין אותיות: -0,5 פיקסלים

המרווח

והוסיפו ריפוד מותאם אישית כדי לתת למודול מקום לנשום.

• ריפוד (למעלה ולמטה): 12 פיקסלים
• ריפוד (משמאל וימין): 10 פיקסלים

גבול

אנו מוסיפים גם '20px' בפינה השמאלית העליונה והשמאלית התחתונה. נוסף על כך, נוסיף גבול שמאלי.

• פינות מעוגלות: 20 פיקסלים (למעלה משמאל ולמטה משמאל)
• רוחב גבול שמאל: 34 פיקסלים
• צבע גבול שמאל: #edf000

הנראה

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

מודול שיבוט טקסט פעמיים

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

שנה את התוכן של שני הכפילויות

שנה את התוכן של שני הכפילויות למשהו אחר.

שנה את המרווח של שני הכפילויות

והוסף שוליים עליונים כדי ליצור מרווח בין כל אחד מהמודולים.

• שוליים (עליון): 20 פיקסלים

שנה את הגבול של שני הכפילויות

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

• צבע 1: #00faff
• צבע 2: #00f76f

עיין גם במאמר שלנו בנושא כיצד ליצור מחוון אקורדיון רספונסיבי

סקירה

גרסת שולחן העבודה

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

סלולרי

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

הורד את DIVI עכשיו!!!

סיכום

בפוסט זה, שיתפנו 3 עיצובים מדהימים של מודול Divi Contact Form שתוכלו להשתמש בהם ולשנות בקלות עבור כל אתר שתיצור. 

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

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

אפשר גם להתייעץ המשאבים שלנו, אם אתה זקוק ליותר אלמנטים לביצוע הפרויקטים שלך ליצירת אתרי אינטרנט.

אל תהססו להתייעץ גם עם המדריך שלנו בנושא יצירת בלוג וורדפרס או על אחד על Divi: הנושא הטוב ביותר בוורדפרס בכל הזמנים.

אבל בינתיים, שתף מאמר זה ברשתות החברתיות השונות שלך.

...