هل ترغب في إنشاء ملف نموذج الاتصال لزج في DIVI؟
تتيح لك الخيارات اللاصقة المضمنة في Divi إنشاء تأثيرات بصرية مذهلة على صفحتك ببضع نقرات فقط.
يمكنك تطبيق التأثيرات اللاصقة على أي عنصر في صفحتك ، ولكن في هذا البرنامج التعليمي سنركز على كيفية إنشاء ملف نموذج الاتصال مثبت على أي صفحة Divi تقوم بإنشائها.
اقرأ أيضا دليلنا على كيفية إنشاء رأس عام ثابت في DIVI
في هذا المثال، سنضيف الصور ومعلومات الاتصال التي سيتم تمريرها على هيئة ملف نموذج الاتصال سيبقى في مكانه.
مسح
إليك معاينة لما سنصممه. على الهاتف المحمول ، لا نطبق تأثيرًا ثابتًا.
كيفية إضافة نموذج اتصال لزج إلى صفحة Divi الخاصة بك
قم بإنشاء صفحة جديدة بتخطيط محدد مسبقًا
لنبدأ باستخدام تخطيط محدد مسبقًا من مكتبة Divi. في هذا المثال ، سنستخدم صفحة الاتصال الخاصة بـ حزمة تخطيط منتجات التجميل .
أضف صفحة جديدة إلى ملف موقع انترنت وأعطها عنوانًا ، ثم حدد خيار "Use Divi Builder".
سنستخدم تخطيطًا مُعد مسبقًا من مكتبة Divi لهذا المثال ، لذا حدد "اختر التخطيط".
ابحث عن ملف صفحة الاتصال من التخطيط "منتج تجميل".
يختار 'اختر التخطيط"لإضافة التخطيط إلى صفحتك.
نحن الآن جاهزون لمواصلة برنامجنا التعليمي.
تغيير نموذج الاتصال اللاصق
بالنسبة لهذا البرنامج التعليمي ، نريد أن يظل نموذج الاتصال في العمود الأيسر (العمود 1) ثابتًا أثناء قيام المستخدم بالتمرير عبر وحدات المحتوى الأخرى في العمود الأيمن (العمود 2). سيعطينا هذا تأثير تمرير ديناميكي سيجعل نموذج الاتصال الخاص بك بارزًا. لنبدأ بتعديل نموذجنا المحدد مسبقًا.
انظر أيضا: كيفية إنشاء قائمة منزلقة ودفع في DIVI
قم بإنشاء قسم جديد
أضف قسمًا جديدًا إلى صفحتك.
ثم أدخل صفًا جديدًا بعمودين. يمكنك إضافة هذا القسم في أي مكان على الصفحة ، وستتم إزالة الأقسام الأخرى في النهاية أثناء تقدمنا في هذا البرنامج التعليمي.
افتح إعدادات القسم وقم بتغيير لون الخلفية لمطابقة تصميم التخطيط:
- الخلفية: # EEE8E2
إضافة الوحدات النمطية اللاصقة إلى العمود 1
أضف وحدة نموذج الاتصال في العمود 1. إذا كنت تتبع هذا البرنامج التعليمي أو لديك بالفعل نموذج اتصال على صفحتك ، يمكنك ببساطة سحب الوحدة "نموذج الاتصال"الموجودة في العمود 1.
انقل وحدة النص اتصل بنا في الجزء العلوي من هذا القسم. سيكون أيضًا لزجًا. أضف حدًا أبيض في إعدادات النص لمطابقة نمط التخطيط:
- عرض الحدود: 20 بكسل
- لون الحدود: #FFFFFF
تضمن التصميم الأصلي مساحة بين النص والحد ، لكننا سنتخطى ذلك لأنه يقطع الجزء السفلي من نموذج جهة الاتصال على الشاشات الأصغر.
أضف وحدات التمرير النمطية في العمود 2
في العمود 2 ، أضف جميع وحدات التمرير النمطية الخاصة بك. بالنسبة إلى حالتنا ، انقل وحدتي الصور ومعلومات الاتصال ومعلومات الموقع إلى العمود 2. بمجرد نقل الوحدات النمطية إلى القسم الجديد ، يمكنك حذف أي أقسام فارغة متبقية.
نصيحة: إذا كنت بحاجة إلى نقل عدة وحدات في نفس الوقت ، فاضغط مع الاستمرار على مفتاح "قدعلى لوحة المفاتيح وحدد الوحدات التي تريد نقلها. استخدم وظيفة نقل الوحدة لتحريك جميع الوحدات في نفس الوقت.
يمكن أن تتسبب صورة الإزاحة الكبيرة للتخطيط الذي اخترناه في حدوث مشكلات في التمرير الأفقي. لذلك دعونا نغير بعض الإعدادات لحل هذه المشكلة.
اقرأ أيضا: كيفية إنشاء رأس عام باستخدام نموذج تسجيل الدخول في DIVI
افتح إعدادات القسم. تحت متقدم، انتقل إلى Visibility ، ثم قم بتحديث إعدادات الفائض الأفقي والرأسي:
- الفائض الأفقي: مخفي
- الفائض العمودي: مخفي
يجب أن تبدو صفحتك الآن على هذا النحو ، مع المحتوى الثابت الخاص بك في العمود 1 ومحتوى التمرير في العمود 2.
نحن على استعداد لاتخاذ الخطوة الأخيرة: جعل نموذج الاتصال ثابتًا.
اجعل نموذج الاتصال لزجًا
من خلال التخطيط في مكانه الصحيح ، يمكننا تمكين الإعدادات الثابتة لنموذج الاتصال الخاص بنا. يختار 'إعدادات الصف، ثم حدد إعدادات العمود 1.
ضمن علامة التبويب خيارات متقدمة ، انتقل إلى "تأثيرات التمرير". هذا هو المكان الذي سنقوم فيه بتعيين المعلمات اللاصقة.
- موقف مثبت: التمسك بالأعلى
- إزاحة أعلى العصا: 15 بكسل
- حد الالتصاق السفلي: الخط
وهذا كل شيء! لقد أضفت الآن إعدادات ثابتة إلى العمود 1 ، مما يجعل نموذج الاتصال والعنوان ثابتًا أثناء التمرير لأسفل الصفحة. يجب أن تشاهد محتويات العمود 2 ، وهي تنتقل إلى جانب نموذج جهة الاتصال.
نتيجة نهائية
الآن دعنا نلقي نظرة على نموذج الاتصال اللاصق الخاص بنا قيد التنفيذ.
تحميل DIVI Now !!!
وفي الختام
لذا ! هذا كل شيء لهذه المقالة. تعد إعدادات Divi اللاصقة طريقة سهلة لتحسين مظهر نموذج الاتصال الخاص بك - أو أي عنصر آخر في صفحتك. يمكنك تطبيق الإعدادات الثابتة على أي قسم أو صف أو وحدة ، مما يؤدي إلى عرض أي شيء في ملف موقع انترنت لزج.
إذا كنت تريد معرفة المزيد حول ما يمكنك القيام به باستخدام ميزات Divi اللاصقة ، فراجع البرامج التعليمية الخاصة بنا. يمكنك على سبيل المثال الرجوع إلى البرنامج التعليمي الخاص بنا على كيفية إضافة نموذج اتصال إلى العنوان العام.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
