إنشاء أوصاف خدمة منبثقة عند التمرير باستخدام Divi
نشرت: 2019-07-20يمكن أن يكون إنشاء أوصاف خدمة منبثقة عند التمرير طريقة فعالة لإعلام المستخدمين وإشراكهم بمعلومات إضافية. تمامًا مثل تلميح الأدوات ، ستكشف هذه الأوصاف المنبثقة عن مزيد من المعلومات حول خدمتك عند التمرير. ولكن مع Divi ، لديك مجموعة كاملة من أدوات التصميم المتاحة في Divi builder لإنشاء تصميمات مذهلة منبثقة دون أي CSS مخصص إضافي.
في هذا البرنامج التعليمي ، سنوضح لك مدى سهولة إنشاء أوصاف خدمة منبثقة على موقع Divi الخاص بك. تكمن الحيلة في وضع الوحدات النمطية الخاصة بك بطريقة تجعلها تنزلق خلف بعضها البعض وتخرج عندما تقوم بضبط عرض الصف عند التمرير.
هيا بنا نبدأ!
نظرة خاطفة
قم بتنزيل Layout مجانًا
لتضع يديك على التصميمات من هذا البرنامج التعليمي ، ستحتاج أولاً إلى تنزيلها باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.
تنزيل مجاني
انضم إلى رسالة Divi الإخبارية وسنرسل لك نسخة من حزمة Divi Landing Page Layout النهائية ، بالإضافة إلى الكثير من موارد ونصائح وحيل Divi المذهلة والمجانية الأخرى. تابع معنا وستكون سيد Divi في أي وقت من الأوقات. إذا كنت مشتركًا بالفعل ، فاكتب ببساطة عنوان بريدك الإلكتروني أدناه وانقر فوق تنزيل للوصول إلى حزمة التخطيط.
لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!
اشترك في قناتنا على اليوتيوب
لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.
دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟
ما تحتاجه للبدء
للبدء ، ستحتاج إلى ما يلي:
- موضوع Divi مثبت ونشط
- تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)
- الصور لاستخدامها لمحتوى وهمي. سنستخدم زوجين من حزمة تخطيط شركة الاستثمار لهذا البرنامج التعليمي.
بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.
إنشاء أوصاف الخدمة المنبثقة على Hover with Divi
قم بإنشاء القسم والصف
أولاً ، قم بإنشاء قسم عادي جديد بصف من عمود واحد.
قبل إضافة أي وحدات نمطية ، قم بتحديث إعدادات الصف كما يلي:
أضف صورة خلفية داكنة أو لون خلفية داكن. أنا أستخدم صورة خلفية مجردة من حزمة تخطيط شركة الاستثمار. ولكن إذا كنت لا ترغب في استخدام ذلك ، يمكنك فقط إضافة لون الخلفية # 161c29.
- عرض الحضيض: 1
- العرض: 100٪
- الارتفاع: 320 بكسل (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف) \
- المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل
أضف وحدة دعاية مغالى فيها
بعد ذلك ، أضف وحدة دعاية مغالى فيها إلى صفك.
وقم بتحديث إعدادات وحدة blurb كما يلي:
- العنوان: الخدمة
- الرمز: انظر لقطة الشاشة
احذف محتوى النص الافتراضي أيضًا.
- صورة الخلفية: أضف صورة بحجم حوالي 320 × 215 بكسل
- حجم صورة الخلفية: صالح
- موضع صورة الخلفية: المركز العلوي
- تدرج الخلفية اللون الأيسر: rgba (31،72،192،0.61)
- تدرج الخلفية اللون الأيمن: # 161c29
- موقف البداية: 34٪
- موضع النهاية: 71٪
- وضع التدرج فوق صورة الخلفية: نعم
- لون الأيقونة: #ffffff
- محاذاة النص: مركز
- خط العنوان: Archivo
- لون نص العنوان: #ffffff
- حجم نص العنوان: 38 بكسل
- العنوان تباعد الحروف: 4 بكسل
- العرض الأقصى: 320 بكسل
- محاذاة الوحدة: مركز
- الارتفاع: 320 بكسل
- الحشو: 68 بكسل في الأعلى
- الزوايا الدائرية: 10 بكسل
- الفهرس Z: 1
تعد إضافة قيمة الفهرس z 1 أمرًا بالغ الأهمية للتأكد من بقاء الوحدة النمطية للدعاية المبتكرة فوق الوحدات الأخرى التي سيتم تكديسها في النهاية خلفها.
أضف وحدة دعوة إلى العمل
بعد ذلك ، نحتاج إلى إضافة وحدة دعوة إلى العمل والتي سيتم وضعها على يسار وحدة الدعاية.
ستكون هذه هي أولى مناطق المحتوى الخاصة بنا والتي ستظهر في النهاية عند المرور فوقها.
نحتاج الآن إلى إخراج لون الخلفية الافتراضي وتحديث إعدادات التصميم على النحو التالي:
- محاذاة النص: يسار
- خط العنوان: Archivo
- حجم نص العنوان: 22 بكسل
- العرض: 320 بكسل
- محاذاة الوحدة: يسار (سطح المكتب) ، في المنتصف (كمبيوتر لوحي وهاتف)
- الارتفاع: 320 بكسل (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)
- الهامش: -320 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
- المساحة المتروكة: 40 بكسل للجزء العلوي ، 40 بكسل لليسار ، 40 بكسل لليمين
قم بتكرار وحدة Call to Action وقم بمحاذاة إلى اليمين
لإنشاء الكتلة الثانية من المحتوى التي ستظهر على يمين الدعاية المغلوطة ، يمكننا نشر وضع عرض الإطار الشبكي وتكرار وحدة الحث على اتخاذ إجراء. ثم افتح إعدادات النسخة المكررة وقم بتحديث محاذاة الوحدة إلى اليمين.
إليك ما يجب أن يبدو عليه التصميم حتى الآن.
إنشاء الزر
العنصر الأخير الذي نحتاج إلى إضافته إلى تصميمنا هو الزر. يمكنك إضافة زر داخل أي من وحدات الدعوة إلى اتخاذ إجراء إذا كنت ترغب في ذلك. لكن بالنسبة لهذا التصميم ، اعتقدت أنه سيكون من الأفضل إضافة زر يظل مرئيًا أسفل صفنا.
لإنشاء الزر ، انشر وحدة عرض الإطار السلكي وأضف وحدة زر مباشرة أسفل وحدة استدعاء الإجراء الثانية بحيث تكون الوحدة الأخيرة في الصف / العمود.
افتح إعدادات وحدة الزر ثم قم بتبديل وضع عرض سطح المكتب بحيث يمكنك تحرير الزر بصريًا.
أضف نص الزر "معرفة المزيد".
ثم قم بتحديث نمط الزر على النحو التالي:
- محاذاة الزر: المركز
- لون نص الزر: #ffffff
- لون خلفية الزر: # 1f48c0
- عرض حد الزر: 0 بكسل
- نصف قطر حدود الزر: 10 بكسل
- تباعد حرف الزر: 4 بكسل
- خط الزر: Archivo
الآن كل ما علينا القيام به هو وضع الزر الخاص بنا.
- الهامش (سطح المكتب): -25 بكسل للأعلى
- الهامش (الجهاز اللوحي والهاتف): 25 بكسل للأعلى و 50 بكسل للأسفل
- الفهرس Z: 2
ستتأكد قيمة فهرس z البالغة 2 من بقاء الزر أعلى وحدة الدعاية الدعاية (التي تحتوي على فهرس من الألف إلى الياء بقيمة 1).
إنشاء تأثير التمرير المنبثق
يتضمن تأثير التمرير الرئيسي الذي نحتاجه لإنجاز أوصاف الخدمة المنبثقة تغيير عرض الصف عند التمرير. للقيام بذلك ، سنحتاج إلى منح صفنا عرضًا ضيقًا افتراضيًا. سيؤدي ذلك إلى تكديس الوحدات النمطية خلف بعضها البعض والبقاء مخفية خلف الوحدة النمطية. سنقوم بعد ذلك بتوسيع عرض الصف عند التمرير من أجل الكشف عن وحدتي استدعاء العمل المخفيتين.
افتح إعدادات الصف وقم بتحديث العرض كما يلي:
- العرض الأقصى (سطح المكتب): 320 بكسل
- أقصى عرض (تحوم): 1080 بكسل
- العرض الأقصى (الجهاز اللوحي والهاتف) 1080 بكسل
ثم لللمسة النهائية ، أضف نصف قطر حد للصف وقم بتحديث خيار تجاوز الرؤية حتى لا يختفي الزر.
- الزوايا الدائرية: 10 بكسل
- الفائض الأفقي: مرئي
- الفائض العمودي: مرئي
النتيجة النهائية
تحقق من أوصاف الخدمة المنبثقة حتى الآن.
وها هو على شاشة الكمبيوتر اللوحي والهاتف.
المزيد من خيارات التصميم التي يمكنك تجربتها
من الممتع دائمًا تجربة المزيد من خيارات التصميم الآن بعد أن أصبح لدينا الإعداد الأساسي في مكانه. فيما يلي بعض الاقتراحات التي يمكنك تجربتها للحصول على أوصاف الخدمة المنبثقة.
إضافة لون خلفية القسم
إذا كنت ترغب في ذلك ، يمكنك إضافة لون خلفية إلى القسم الذي يتطابق مع لون / صورة خلفية الصف لتصميم فريد منبثق.
انتقل إلى إعدادات الصف وقم بتحديث ما يلي:
- لون الخلفية: # 161c29
ثم تحقق من النتيجة.
باستخدام وحدتين فقط
إذا كنت تريد إخراجًا أكثر إحكاما باستخدام وحدتين فقط ، فيمكنك حذف إحدى وحدات الدعوة إلى اتخاذ إجراء ثم محاذاة وحدة blurb إلى اليسار بحيث يصبح الاثنان مرئيين عند التمرير.
للقيام بذلك ، انشر وضع عرض الإطار الشبكي. ثم احذف أول دعوة للعمل من خلال وحدة الدعاية المباشرة.
بعد ذلك ، قم بتحديث وحدة blurb بمحاذاة الوحدة اليسرى.
- محاذاة الوحدة: يسار (سطح مكتب) ، مركز (كمبيوتر لوحي)
أخيرًا ، قم بتقليل العرض الأقصى للصف عند التمرير لجعله أكثر إحكاما. افتح إعدادات الصف وقم بتحديث ما يلي:
- أقصى عرض (تحوم): 700 بكسل
- العرض الأقصى (الجهاز اللوحي): 700 بكسل
هنا هو النتيجة النهائية.
وها هو على خلفية بيضاء.
افكار اخيرة
يعد إنشاء أوصاف خدمة منبثقة عند التمرير طريقة فريدة لجذب الزوار إلى المحتوى الخاص بك. تعمل هذه الوظيفة مثل تلميح أدوات خيالي وغني بالمعلومات مليء بجميع إمكانيات تصميم Divi. ومن السهل جدا القيام به. بمجرد أن تحصل على حجم الوحدات وتوضعها ، كل ما عليك فعله هو ضبط عرض الصف عند التمرير. لا تتردد في تجربة وحدات ومحتوى مختلف لمزيد من التطبيقات. إذا كان هناك أي شيء ، آمل أن يمنحك هذا المزيد من الإلهام لفعل المزيد مع Divi.
أتطلع إلى الاستماع منك في التعليقات.
هتافات!