האם תרצה ליצור טופס יצירת קשר באתר האינטרנט שלך באמצעות מודול טופס יצירת הקשר של Divi? הנה 3 רעיונות להתאמה אישית...
Les formulaires de contact sont une partie essentielle de nombreux sites Web. Leur objectif principal est d'être intuitif et d'aider les visiteurs à entrer facilement en contact.
Mais cela ne signifie pas que tous les formulaires de contact doivent avoir une apparence précise et prédéfinie. Vous pouvez facilement combiner une expérience intuitive avec un beau design. C'est exactement ce que nous allons faire dans ce tutoriel.
אנחנו הולכים לשתף 3 עיצובים ייחודיים של מודול טופס יצירת קשר מ... Divi שתוכל ליצור רק באמצעות האפשרויות המובנות של Divi.
בואו נלך!
סקירה כללית של העיצובים של מודול טופס יצירת קשר של Divi
גרסאות שולחן עבודה
נתחיל בהסתכלות על גרסת שולחן העבודה של העיצובים השונים של מודול טופס צור קשר שנעצב במדריך זה.
גרסאות ניידות
Et voici à quoi ressemblent ils ressemblent sur des tailles d'écran plus petites :
הורד את DIVI עכשיו!!!
כיצד להתאים אישית את מודול טופס יצירת הקשר של Divi: 3 דוגמאות
יצירת טופס יצירת קשר מס' 1
הוסף מקטע חדש
רקע צבעוני
Commençons par le premier exemple ! Ajoutez une nouvelle section, accédez aux paramètres d'arrière-plan et ajoutez un arrière-plan dégradé.
- שיפוע עצירות
- 34%: #4c00ff
- 34%: #ffd400
- סוג: עגול
- כיוון שיפוע: שמאל למטה
המרווח
Ensuite, accédez à l'option Spacing dans l'onglet( Design et modifier les paramètres comme suit.
- ריפוד (למעלה ולמטה): 200 פיקסלים
הוסף שורה חדשה
מבנה העמודה
הוסף שורה חדשה באמצעות מבנה העמודות הבא:
Colonne 1 : Couleur d'arrière-plan
Sans ajouter encore de modules, ouvrez les paramètres de ligne, puis les paramètres de la colonne 1 et ajoutez la couleur d'arrière-plan ci-dessous
- רקע: rgba(255,255,255,0.55)
Colonne 1 : Image d'arrière-plan
Ajoutez également une image d'arrière-plan à la première colonne.
- חזרה על תמונת רקע: ללא חזרה
- תערובת תמונת רקע: מסך
Colonne 2 : Image d'arrière-plan
וצבע רקע לבן לעמוד השני.
- רקע: #ffffff
אומד
לאחר מכן שנה את פרמטרי הגודל.
- השוואת גובה עמודות: כן
המרווח
הסר גם את כל ריפודי ברירת המחדל המותאמים אישית.
- ריפוד (למעלה ולמטה): 0 פיקסלים
רדיוס גבול עמודה
Ajoutez un rayon de bordure aux deux colonnes dans l'onglet avancé.
border-radius: 10px;
הוסף מודול טקסט לעמודה 1
הוסף תוכן
הגיע הזמן להתחיל להוסיף את המודולים השונים! הוסף מודול טקסט לעמודה הראשונה עם תוכן לבחירתך.
הגדרות טקסט
Ensuite, accédez à l'onglet Design du module Text et apportez quelques modifications.
- טקסט:
- גופן: לספק
- צבע טקסט: #333333
- גודל: 100 פיקסלים
- גובה קו: 1 אמ
- יישור: מרכז
המרווח
הוסף גם ערכי מילוי מותאמים אישית.
- ריפוד (עליון): 600 פיקסלים
- ריפוד (למטה): 100px
תיבת צל
כדי להוסיף עומק לעיצוב, השתמש בצל קופסה עדין.
- חוזק טשטוש צללי קופסה: 80 פיקסלים
- חוזק התפשטות הצללים של התיבה: -16 פיקסלים
- צבע צל: rgba(0,0,0,0.3)
הוסף מודול תמונה לעמודה 2
העלה תמונה
המשך על ידי הוספת מודול תמונה לעמודה השנייה. העלה תמונה לפי בחירתך.
אומד
שנה את הגדרות הגודל עבור מודול זה.
- רוחב: 25% (שולחן עבודה), 50% (טאבלט), 60% (טלפון)
- יישור מודול: מרכז
המרווח
צור חפיפה באמצעות שוליים עליונים שליליים.
- שוליים (עליון): -60%
גבול
Modifier les bordures de l'image comme suit :
- פינות מעוגלות: 100 פיקסלים (כל הפינות)
הוסף מודול טקסט מס' 1 לעמודה 2
הוסף תוכן
ממש מתחת למודול תמונה, הוסף מודול טקסט עם תוכן.
הגדרות טקסט
ערוך את הגדרות הטקסט עבור מודול זה.
- טקסט:
- גופן: לספק
- צבע טקסט: #333333
- גודל טקסט: 44 פיקסלים
- אוריינטציה: מרכז
הוסף מודול טקסט מס' 2 לעמודה 2
הוסף תוכן
לאחר מכן הוסף מודול טקסט נוסף.
הגדרות טקסט
שנה גם את הגדרות הטקסט עבור מודול זה.
- טקסט:
- גופן: Arial
- צבע טקסט: #ffd400
- צבע טקסט: 18 פיקסלים
- מרווח בין אותיות: 2 פיקסלים
- אוריינטציה: מרכז
המרווח
ואז הוסף שוליים תחתונים.
- שוליים (למטה): 100 פיקסלים
הוסף את מודול טופס יצירת קשר לעמודה 2
Activer l'option "Make Fullwidth" sur le champ Nom et e-mail
Le dernier module nécessaire est le module Contact Form. Avant de faire quoi que ce soit d'autre, ouvrez les champs de nom et d'e-mail et modifiez la mise en page.
- עשה רוחב מלא: כן
Ajouter un champ d'objet
כדי ליצור עיצוב זה, הוספנו שדה נוסף לנושא.
הגנה מפני דואר זבל
Désactivez ensuite l'option captcha.
- השתמש ב-Captcha בסיסי: לא
הגדרות טקסט בשדה טופס
בצע כמה שינויים בהגדרות הטקסט של שדה הטופס של מודול טופס יצירת קשר זה
- שדות:
- צבע רקע: rgba(255,255,255,0)
- גופן: Arial
- משקל גופן: קל
- גודל טקסט: 16 פיקסלים
- מרווח בין אותיות: 2 פיקסלים
הגדרות לחצן
Nous modifions également l'apparence des boutons.
- השתמש בגודל מותאם אישית עבור כפתור: כן
- כפתור:
- צבע טקסט: #ffd400
- רוחב גבול: 0 פיקסלים
- מרווח בין אותיות: 2 פיקסלים
- גופן: Arial
- סיגנון גופן: U
- קו תחתון צבע: #4c00ff
המרווח
לאחר מכן הוסף כמה ערכי ריפוד מותאמים אישית.
- ריפוד (למטה): 100 פיקסלים
- ריפוד (משמאל וימין): 50 פיקסלים
גבול
והוסיפו גבול תחתון עדין לכל אחד מהשדות.
- כניסות רוחב גבול תחתון: 2 פיקסלים
- קלט צבע גבול תחתון: #efefef
מרווח בין שדות בודדים
Enfin, ajoutez une marge inférieure à chacun des champs individuels, à l'exception de celui du message.
- שוליים (למטה): 20 פיקסלים
יצירת טופס יצירת קשר מס' 2
הוסף מקטע חדש
רקע צבעוני
Passons à l'exemple suivant ! Ajoutez une nouvelle section avec un arrière-plan dégradé.
- עצירות שיפוע:
- 50%: #562fef
- 50%: #ffffff
- סוג שיפוע: ליניארי
המרווח
Ajoutez des valeurs de remplissage personnalisées aux paramètres d'espacement de cette section.
- ריפוד (למעלה ולמטה): 200 פיקסלים
הוסף שורה חדשה
מבנה העמודה
הוסף שורה חדשה באמצעות מבנה העמודות הבא:
צבע רקע
Sans ajouter encore de modules, ouvrez les paramètres de la ligne et ajoutez une couleur d'arrière-plan à la ligne.
- צבע רקע: #ffffff
רקע שיפוע 2 עמודות
הוסף רקע הדרגתי לעמודה השנייה בשורה.
- עצירות שיפוע:
- 0%: #9932ff
- 100%: #562fef
- סוג: ליניארי
- היגוי: 160 מעלות
אומד
שנה גם את פרמטרי גודל הקו.
- השתמש ברוחב מרזב מותאם אישית: כן
- רוחב המרזב: 1
- השוואת גובה עמודות: כן
המרווח
Ensuite, ajoutez des valeurs d'espacement personnalisées.
- שורה:
- ריפוד (למעלה ולמטה): 0 פיקסלים
- עמודה 1:
- ריפוד: 100 פיקסלים (עליון), 50 פיקסלים (למטה)
- ריפוד (משמאל וימין): 50 פיקסלים
- עמודה 2:
- ריפוד (למעלה ולמטה): 100 פיקסלים
- ריפוד (משמאל וימין): 50 פיקסלים
גבול
Ajoutez '20px' à chacune des bordures de la ligne.
תיבת צל
לבסוף, הוסף צללית עדינה לקופסה.
- חוזק טשטוש צללי קופסה: 45 פיקסלים
- חוזק התפשטות הצלליות של התיבה: -11 פיקסלים
- צבע צל: rgba(0,0,0,0.3)
הוסף מודול טקסט לעמודה 1
הוסף תוכן
הגיע הזמן להתחיל להוסיף את המודולים! התחל עם מודול טקסט בעמודה הראשונה.
הגדרות טקסט
ערוך את הגדרות הטקסט עבור מודול זה.
- טקסט:
- משקל גופן: מודגש במיוחד
- סגנון גופן: TT
- צבע: #562fef
- גודל: 100 פיקסלים (שולחן עבודה), 80 פיקסלים (טאבלט), 60 פיקסלים (טלפון)
- מרווח בין אותיות: -10 פיקסלים
- גובה קו: 1 אמ
המרווח
הוסף גם שוליים תחתונים.
- שוליים (למטה): 50 פיקסלים
הוסף את מודול טופס יצירת קשר לעמודה 1
אלמנטים
Le deuxième module dont nous aurons besoin dans la première colonne est un module Contact Form Une fois que vous avez ajouté le module, désactivez l'option 'Use Basic Captcha'.
- השתמש ב-Captcha בסיסי: לא
הגדרות טקסט בשדה טופס
Modifiez ensuite la couleur d'arrière-plan des champs du formulaire.
- צבע רקע שדות: #ffffff
הגדרות לחצן
Jouez également avec les paramètres du bouton pour créer un bouton d'icône au lieu d'un bouton contenant du texte.
- השתמש בסגנונות מותאמים אישית עבור כפתור: כן
- כפתור:
- גודל טקסט: 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. קדימה והזן פרטי קשר.
Sélectionnez l'icône
לאחר מכן בחר סמל מתאים.
Paramètres de l'icône
שנה את ההגדרות עבור סמל זה.
- צבע סמל: #ffffff
- מיקום תמונה/סמל: מימין
הגדרות טקסט כותרת
המשך על ידי ביצוע כמה שינויים בהגדרות טקסט הכותרת הבא.
- גודל טקסט כותרת: 15 פיקסלים
- מרווח אותיות כותרת: -0,5 פיקסלים
המרווח
והוסיפו שוליים עליונים.
- שוליים (עליון): 120 פיקסלים
מודול Clone Blurb פעמיים
לאחר שתסיים לערוך את מודול Blurb הראשון, תוכל להמשיך ולשכפל את המודול פעמיים.
Modifier le contenu et l'icône des deux doublons
Modifiez le contenu et les icônes des deux doublons pour partager différents types d'informations de contact avec les visiteurs.
Modifier l'espacement des deux doublons
יש לשנות גם את השוליים העליונים של שני הכפילויות.
- שוליים (עליון): 30 פיקסלים
יצירת טופס יצירת קשר מס' 3
הוסף מקטע חדש
צבע רקע
Passons au troisième exemple ! Ajoutez une nouvelle section avec la couleur d'arrière-plan suivante :
- צבע רקע: #3491CE
המרווח
Continuez en ajoutant des valeurs de remplissage personnalisées dans les paramètres d'espacement.
- ריפוד (למעלה ולמטה): 200 פיקסלים
הוסף שורה מס' 1
מבנה העמודה
לאחר מכן, הוסף שורה חדשה באמצעות מבנה העמודות הבא:
הוסף מודול טקסט
הוסף תוכן
הגיע הזמן להתחיל להוסיף מודולים! המודול הראשון שנצטרך להוסיף לעמודה הראשונה הוא מודול טקסט. הזן תוכן לבחירה.
הגדרות טקסט
לאחר מכן, שנה את הגדרות הטקסט.
- טקסט:
- משקל גופן: מודגש במיוחד
- צבע טקסט: rgba(255,255,255,0.24)
- גודל טקסט: 100 פיקסלים (שולחן עבודה), 70 פיקסלים (טאבלט), 36 פיקסלים (טלפון)
- גובה קו: 1 אמ
- אוריינטציה: מרכז
המרווח
הוסף גם שוליים תחתונים שליליים.
- שוליים (למטה): -100 פיקסלים
הוסף שורה 2
מבנה העמודה
השורה השנייה שאנו צריכים כדי להשלים דוגמה זו מכילה את מבנה העמודות הבא:
רקע צבעוני
מבלי להוסיף מודולים עדיין, פתח את הגדרות הקו והוסף רקע שיפוע.
- עצירות שיפוע:
- 50%: #11CE84
- 50%: #10C77F
- סוג שיפוע: ליניארי
- היגוי: 160 מעלות
אומד
שנה גם את פרמטרי הגודל.
- השתמש ברוחב מרזב מותאם אישית: כן
- רוחב המרזב: 1
- השוואת גובה עמודות: כן
המרווח
לאחר מכן הוסף כמה ערכי ריפוד.
- ריפוד: 150 פיקסלים (עליון), 100 פיקסלים (למטה)
- ריפוד: 50 פיקסלים (שמאל וימין)
גבול
Ensuite, allez dans les paramètres de bordure et ajoutez '20px' à chacun des coins. Utilisez également une bordure inférieure.
- פינות מעוגלות: 20 פיקסלים
- רוחב גבול תחתון: 10 פיקסלים
- צבע גבול תחתון: #1ba35a
תיבת צל
השלם את הגדרות הקו על ידי הוספת צל תיבה עדין.
- חוזק טשטוש צל של קופסא: 80 פיקסלים
- חוזק התפשטות הצללים של התיבה: -24 פיקסלים
- צבע צל: rgba(0,0,0,0.3)
הוסף את מודול טופס יצירת קשר לעמודה 1
Activer l'option "Make Fullwidth" sur le champ Nom et e-mail
Le premier module dont nous avons besoin dans la première colonne de la ligne est un module Contact Form. Ouvrez le champ du nom et de l'e-mail et modifiez les paramètres de mise en page.
- צור רוחב מלא: כן
אלמנטים
לאחר מכן השבת את ה-captcha.
- השתמש ב-Captcha בסיסי: לא
הגדרות לחצן
ושנו את הגדרות הכפתורים.
- השתמש בסגנונות מותאמים אישית עבור כפתור: כן
- צבע טקסט לחצן: #ffffff
- עצירות שיפוע:
- 50%: #3AA0E3
- 50%: #3491CE
- סוג שיפוע: ליניארי
- כיוון שיפוע: 155 מעלות -
- רוחב גבול הלחצן: 0 פיקסלים
- רדיוס גבול לחצן: 10 פיקסלים
- Force de propagation de l'ombre de la boîte : -2px
- Couleur de l'ombre : #0a60af
ראה גם: Divi: כיצד להתאים אישית את סמלי הסל והחיפוש של מודול "תפריט ברוחב מלא".
גבול
Nous ajoutons également '5px' de coins arrondis à chacun des champs.
הוסף מודול טקסט לעמודה 2
הוסף תוכן
בעמודה השנייה, המודול הראשון שנצטרך הוא מודול טקסט. קדימה והזן קצת תוכן.
צבע רקע
Ensuite, changez la couleur de l'arrière-plan.
- רקע: rgba(255,255,255,0.13)
הגדרות טקסט
ערוך גם עם הגדרות טקסט.
- טקסט:
- משקל גופן: קל
- צבע טקסט: #ffffff
- גודל טקסט: 15 פיקסלים
- מרווח בין אותיות: -0,5 פיקסלים
המרווח
Et ajoutez un rembourrage personnalisé pour donner au module de l'espace pour respirer.
- ריפוד (למעלה ולמטה): 12 פיקסלים
- ריפוד (משמאל וימין): 10 פיקסלים
גבול
Nous ajoutons également '20px' dans les coins supérieur gauche et inférieur gauche. En plus de cela, nous ajouterons une bordure gauche.
- פינות מעוגלות: 20 פיקסלים (למעלה משמאל ולמטה משמאל)
- רוחב גבול שמאל: 34 פיקסלים
- צבע גבול שמאל: #edf000
הנראה
Pour que ce design corresponde aux différentes tailles d'écran, nous allons désactiver le module Text sur le téléphone et la tablette.
מודול שיבוט טקסט פעמיים
לאחר שתסיים לערוך את מודול הטקסט הראשון, המשך לשכפל את המודול פעמיים.
שנה את התוכן של שני הכפילויות
Changez le contenu des deux doublons en quelque chose d'autre.
Modifier l'espacement des deux doublons
Et ajoutez une marge supérieure pour créer de l'espace entre chacun des modules.
- שוליים (עליון): 20 פיקסלים
שנה את הגבול של שני הכפילויות
לבסוף, שנה את צבע הגבול השמאלי של כל אחד מהכפילויות בנפרד.
- צבע 1: #00faff
- צבע 2: #00f76f
עיין גם במאמר שלנו בנושא כיצד ליצור מחוון אקורדיון רספונסיבי
סקירה
גרסת שולחן העבודה
Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil aux conceptions du module Contact Form Divi sur ordinateur de bureau.
סלולרי
Et voici ce que vous pouvez attendre des conceptions du module Contact Form de Divi sur des tailles d'écran plus petites :
הורד את DIVI עכשיו!!!
סיכום
Dans cet article, nous avons partagé 3 superbes design du module Contact Form de Divi que vous pouvez facilement utiliser et modifier pour n'importe quel site Web que vous créez.
Les formulaires de contact sont une partie essentielle de nombreux sites Web, il est donc important de s'assurer que votre conception convainc vos visiteurs d'entrer en contact.
אנו מקווים שהמדריך הזה יתן לך השראה לפרויקטים הבאים של Divi. אם יש לך חששות או הצעות, מצא אותנו פרק התגובות לדון בזה.
אפשר גם להתייעץ המשאבים שלנו, אם אתה זקוק ליותר אלמנטים לביצוע הפרויקטים שלך ליצירת אתרי אינטרנט.
אל תהססו להתייעץ גם עם המדריך שלנו בנושא יצירת בלוג וורדפרס או על אחד על Divi: הנושא הטוב ביותר בוורדפרס בכל הזמנים.
אבל בינתיים, שתף מאמר זה ברשתות החברתיות השונות שלך.
...