يحتاج كل موقع إلكتروني إلى قسم للتواصل، لكن هذا لا يعني الاكتفاء بتصميم تقليدي. مع تأثيرات التمرير في Divi، يمكنك إنشاء قسم تواصل عائم مميز. حسّن تجربة المستخدم من خلال تصميم قسم تواصل بتمرير رأسي يشجع الزوار على التفاعل مع نموذج الاتصال. في هذه المقالة، سنوضح لك كيفية إنشاء قسم تواصل عائم بعرض كامل يمكنك إضافته إلى أي صفحة. يمكنك حتى إضافته إلى أعلى تذييل الموقع باستخدام أداة إنشاء قوالب Divi.
ستجد أدناه مجلدًا مجانيًا قابلًا للتنزيل يحتوي على تصميم JSON لتحميله إلى مكتبة Divi الخاصة بك. كما أضفنا قالب PSD لمساعدتك في إعادة إنشاء خلفية الخريطة، بالإضافة إلى ملف SVG لدبوس الخريطة لتتمكن من تخصيصه بألوانك الخاصة.
إنشاء بنية عنصرية
في هذا التصميم، سنستخدم صورة خلفية تمثل الموقع الذي ترغب في إبرازه من خرائط جوجل. يمكنك إنشاء هذه الصورة باستخدام برنامج فوتوشوب أو أي برنامج آخر لتحرير الصور.
إضافة قسم جديد
حان الآن وقت البدء في إنشاء قسم الاتصال العائم باستخدام أداة إنشاء Divi! أول شيء سنفعله هو فتح صفحة جديدة أو صفحة موجودة وإضافة قسم جديد.
في علامة تبويب المحتوى، أضف خلفية الخريطة التي أنشأتها في برنامج فوتوشوب.
- صورة الخلفية: خريطتك المعدلة
مباعدة
بعد ذلك، قم بتخصيص إعدادات تباعد الأقسام في علامة تبويب التصميم.
- الهامش العلوي والسفلي: 50vh
- الحشو السفلي: 0vw
رؤية
ثم قم بتعيين الفائض المرئي.
- التدفق الأفقي والرأسي: مرئي
الموقع الحالي
وأخيرًا، اضبط مؤشر Z للقسم على 10.
- مؤشر Z: 10
أضف سطرًا جديدًا
هيكل العمود
حان الآن وقت إضافة بعض العناصر. أولاً، أضف صفًا بعمودين.
التحجيم
افتح معلمات الخط واضبط التحجيم على النحو التالي.
- عرض
- المكتب: 90٪
- الجهاز اللوحي والهاتف: 80٪
- أقصى عرض: 90 ٪
رؤية
انقر على علامة التبويب "متقدم" ثم اضبط إعدادات التجاوز.
- التدفق الأفقي والرأسي: مرئي
الموقع الحالي
أكمل إعدادات الصف بتعديل إعدادات الموضع.
- المنصب: نسبي
- تعويض الإزاحة: أعلى اليسار
- إزاحة رأسية
- سطح المكتب: -8vw
إعدادات العمود 1
نبذة عامة
قبل إضافة الوحدات ، سنحتاج إلى تصميم الأعمدة الفردية. أضف لون الخلفية إلى العمود 1.
- لون خالص: # 25274d
التباعد
اضبط إعدادات التباعد بعد ذلك.
- الحشو العلوي والسفلي
- سطح المكتب والكمبيوتر اللوحي: 7vw
- المساحة المتروكة اليمنى واليسرى
- سطح المكتب: 3vw
- الكمبيوتر اللوحي والهاتف: 6vw
الحدود
ثم ، أضف بعض الزوايا المستديرة إلى إعدادات الحدود.
- زوايا دائرية: 10 بكسل لجميع الزوايا الأربع
تأثيرات التمرير
أخيرًا وليس آخرًا ، استخدم بعض الحركة الرأسية في إعدادات تأثيرات التمرير. هذا سوف يساعدنا على خلق تأثير عائم.
- تأثيرات تحويل التمرير: الحركة العمودية
- عمودي / مجموعة سطح المكتب
- تعويض البداية: 4
- الإزاحة المتوسطة: 0 (بنسبة 50٪)
- الإزاحة المنتهية: -4
- الحركة العمودية / الكمبيوتر اللوحي ومجموعة الهاتف
- تعويض البداية: 4
- متوسط الإزاحة: 0 (بنسبة 40٪ و 60٪)
- تعويض النهاية: -3
- مُشغِّل تأثير الحركة: نقطة منتصف العنصر
إعدادات العمود 2
الموقع الحالي
الآن دعنا ننتقل إلى معلمات العمود الثاني. اضبط إعدادات الموضع وفقًا لذلك.
- المنصب: نسبي
- أصل الإزاحة: أعلى اليسار
- إزاحة رأسية
- المكتب: 25vw
تأثيرات التمرير
نضيف أيضًا حركة رأسية لهذا العمود.
- تأثيرات تحويل التمرير: الحركة العمودية
- تحديد الحركة الرأسية / المكتبية
- تعويض البداية: 2
- متوسط الإزاحة: 0 (بنسبة 50 ٪)
- تعويض النهاية: -2
- تحديد الحركة العمودية / الكمبيوتر اللوحي والهاتف
- تعويض البداية: 0
- متوسط الإزاحة: 0 (بنسبة 50 ٪)
- تعويض النهاية: -2
- مُشغِّل تأثير الحركة: أعلى العنصر
إضافة وحدة نمطية النص إلى العمود 1
محتويات
حان وقت إضافة الوحدات، بدءًا بوحدة نصية في العمود 1. أضف محتوى H2 الذي تختاره.
نص العنوان
انتقل إلى علامة التبويب "التصميم" وقم بتنسيق نص H2 كما يلي.
- مستوى العنوان: H2
- الخط: Palanquin Dark
- وزن الخط: غامق
- نمط الخط: TT
- اللون: أصفر # ffd868
- حجم
- المكتب: 5vw
- الكمبيوتر اللوحي: 10vw
- الهاتف: 12vw
- تباعد الحروف: 4 بكسل
إضافة وحدة نموذج اتصال إلى العمود 1
محتويات
أسفل وحدة النص، أضف نموذج اتصال. هذه هي الحقول التي نستخدمها:
- الاسم
- البريد الإلكتروني
- مادة
- رسالتك
الحماية من البريد المزعج
قبل تصميم نموذج الاتصال، قم بتمكين الحماية من البريد العشوائي وتوصيل حساب ReCaptcha الخاص بك.
- استخدم خدمة الحماية من البريد العشوائي: نعم
- مقدم الخدمة: ReCaptcha
- حدد حسابًا
حقول
انتقل إلى علامة التبويب "التصميم" وقم بتنسيق الحقول كما يلي.
- لون الخلفية: أزرق داكن #25274d
- لون النص: رمادي فاتح # d1d1d1
- لون خلفية التركيز: أزرق داكن #25274d
- لون نص التركيز: رمادي فاتح # d1d1d1
- الخط: Palanquin
- نمط: TT
- حجم النص
- المكتب: 0.9vw
- الكمبيوتر اللوحي: 2vw
- الهاتف: 3vw
- تباعد الحروف: 1 بكسل
زر
ثم أسلب الزر.
- الأنماط المخصصة: نعم
- حجم النص: 20px
- لون النص: أزرق داكن # 25274d
- لون الخلفية: أصفر #ffd868
- نصف قطر الحدود: 7 بكسل
- لون الأيقونة: أزرق داكن #25274d
- الهامش العلوي: 5px
التحجيم
ثم نقوم بتعديل معلمات التحجيم.
- العرض: 100٪
- أقصى عرض: 100 ٪
مباعدة
سنضيف أيضًا الحشو العلوي.
- الحشو العلوي: 4vw
الحدود
أكمل معلمات الوحدة بتخصيص معلمات الحدود.
- مداخل بزوايا مستديرة: 6 بكسل عند الزوايا الأربع
- إدخالات أنماط الحدود: جميع الجوانب الأربعة
- عرض حد المدخل: 2 بكسل
- إدخالات لون الحدود: أصفر # ffd868
أضف وحدة تتبع وسائل التواصل الاجتماعي إلى العمود 2
محتويات
انتقل إلى العمود 2 وأضف وحدة وسائط اجتماعية. استخدم جميع الشبكات الاجتماعية التي تحتاجها.
- فيسبوك
- تويتر
- لينكد إن
امتياز
قبل التصميم ، أضف روابط إلى الشبكات المقابلة.
سياق المقال
الآن، افتح أول شبكة تواصل اجتماعي وقم بتغيير لون الخلفية.
- اللون: أزرق داكن # 25274d
أيقونة العنصر
في علامة تبويب التصميم الخاصة بنفس العنصر، قم بتعديل إعدادات الأيقونة كما يلي.
- اللون: أصفر # ffd868
- حجم خط الأيقونة
- المكتب والجهاز اللوحي: 31 بكسل
- الهاتف: 26 بكسل
تباعد العناصر
ثم أضف هامشًا صغيرًا لفصل الرموز عن بعضها البعض.
- الهامش الأيمن: 1vw
انسخ والصق أنماط العناصر
لتنسيق أيقونات وسائل التواصل الاجتماعي المتبقية، ارجع إلى نافذة المحتوى الرئيسية وانسخ أنماط العناصر من الأيقونة الأولى. ثم الصق أنماط العناصر على أيقونات وسائل التواصل الاجتماعي المتبقية.
انحياز
انتقل إلى علامة تبويب التصميم الرئيسية وتأكد من محاذاة الوحدة إلى اليسار.
- محاذاة الوحدة: اليسار
التحجيم
ثم اضبط حجم الوحدة.
- العرض: 100٪
مباعدة
قم أيضًا بمسح كل التعبئة الافتراضية.
- المساحة المتروكة العلوية والسفلية واليسرى واليمنى: 0vw
الحدود
أخيرًا ، أضف الزوايا الدائرية في إعدادات الحدود. سيؤدي هذا إلى ضبط حدود جميع الرموز مرة واحدة.
- تدوير الزوايا
- أعلى اليسار واليمين: 7 بكسل
- أسفل اليسار واليمين: 0 بكسل
إضافة وحدة نمطية النص إلى العمود 2
محتويات
ضمن وحدة الوسائط الاجتماعية ، أضف وحدة نصية أخرى. أضف محتوى من اختيارك. أضفنا عنوانين ، رقم هاتف وبريد إلكتروني. استخدم الخط الغامق على عنوان كل عنصر بأحرف كبيرة.
- المقر الرئيسي : 1587 سوكومفيت سوي 21 ، بانكوك ، تايلاند.
- نقطة البيع : امبوريوم مول - الدور الثاني
- الهاتف: (321) 564 2398
- البريد الإلكتروني : [email protected]
السياق
قم بتغيير لون خلفية الوحدة.
- اللون: أزرق داكن # 25274d
نص
انتقل إلى علامة التبويب "التصميم" وقم بتنسيق النص.
- الخط: Palanquin
- اللون: أصفر # ffd868
- الحجم: 18 بكسل
مباعدة
أضف أيضًا قيم تباعد مخصصة.
- الهامش العلوي
- المكتب: -60px
- الكمبيوتر اللوحي والهاتف: -50 بكسل
- الحشو العلوي والسفلي واليسار واليمين
- المكتب: 3vw
- الكمبيوتر اللوحي: 6vw
- الهاتف: 8vw
الحدود
وأكمل الوحدة بإضافة زوايا مستديرة في إعدادات الحدود. هذا كل شيء!
- زوايا دائرية: 10 بكسل في أعلى اليمين وأسفل اليسار وأسفل اليمين.
مسح
الآن وقد انتهينا من إعادة إنشاء قسم جهات الاتصال العائمة، ألقِ نظرة أخيرة على النتيجة على أحجام الشاشات المختلفة.
موارد إضافية
يمكن لهذه الموارد أن تُكمّل ما قرأته للتو. ويمكن استخدامها بالإضافة إلى، أو من قِبل، أولئك الذين لا يستخدمون قالب Divi.
- كيفية إضافة نموذج الاتصال المنبثقة على وورد
- كيفية إضافة نموذج قائمة منسدلة إلى رأس الصفحة الرئيسي في Divi
- 5 ملحقات لإنشاء نماذج اتصال
إلى إنهاء
باستخدام تأثيرات التمرير الجديدة في Divi، يمكنك تحويل أي تصميم قياسي إلى تصميم رائع. من خلال إنشاء خلفيتك الخاصة، ستتمتع بمزيد من التحكم في مظهر التصميم النهائي. إذا كانت لديك أي أسئلة أو اقتراحات، اترك تعليقًا في قسم التعليقات أدناه!