هل ترغب في معرفة كيفية الكشف عن المحتوى عند المرور فوق حاجز القسم في Divi؟
لا تزال فواصل الأقسام عنصرًا شائعًا في تصميم Divi. هناك العديد من أنماط المقسمات للاختيار من بينها مع خيارات مفيدة تجعل من السهل إضافة انتقالات وخلفيات فريدة إلى صفحتك.
في هذا البرنامج التعليمي ، سنستخدم فواصل الأقسام بشكل مختلف قليلاً. يسمح لك Divi بضبط ارتفاع وتخطيط كل فاصل. هذا يسمح لنا بوضع الفواصل فوق مناطق معينة أو محتوى قسم.
باستخدام خيار التمرير لارتفاع المقسم ، يمكننا إضافة تأثيرات تحويم فريدة تكشف عن محتوى مخفي جزئيًا. يعمل هذا بشكل رائع لجذب الانتباه إلى عبارة معينة تحث المستخدم على اتخاذ إجراء أو زر تريد أن ينقر عليه الزوار.
افتح معلمات القسم والفاصل العلوي مع المعلمات التالية.
نمط الفاصل العلوي: انظر الصورة لون الفاصل العلوي: # 73ba57 ارتفاع الحاجز: 70٪ (افتراضي) ، 0٪ (تحوم) الوجه الفاصل العلوي: أفقي
لاحظ أن ارتفاع الفاصل يبدأ بارتفاع افتراضي 70٪ ، ثم يتغير إلى ارتفاع 0٪ عند التمرير.
تمت إضافة الفاصل السفلي
ثم أضف فاصلًا أدنى مشابهًا للقسم مع المعلمات التالية.
نمط الحاجز السفلي: انظر الصورة
لون الحاجز السفلي: # 73ba57
ارتفاع الحاجز: 70٪ (افتراضي) ، 0٪ (تحوم)
فاصل الوجه: أفقي
الترتيب: فوق محتوى القسم
يبدأ هذا الحاجز السفلي أيضًا بارتفاع 70٪ وينخفض إلى 0٪ عند التحويم. ومع ذلك ، نظرًا لأن خيار ترتيب التقسيم قد تم تعيينه أعلى المحتوى ، فإن فاصل القسم يخفي الجزء السفلي من وحدة "Call To Action" في العمود 1. ثم عند التمرير ، يتم الكشف عن بقية الوحدة.
تمت إضافة تأثير تحويم ظل الصندوق لانتقال وتصميم فريد
للحصول على انتقال وتصميم فريد عند التمرير ، يمكننا إضافة تأثير تحويم ظل الصندوق الذي سيحدث في وقت واحد مع تأثير التحويم الفاصل. للقيام بذلك ، قم بإضافة ظل المربع التالي إلى القسم.
Box Shadow: انظر لقطة الشاشة
الوضع الأفقي: 0 بكسل
الوضع الرأسي: 0 بكسل
قوة انتشار الظل المربع: 0 بكسل (افتراضي) ، 150 بكسل (تحوم)
لون الظل: # 73ba57
إبطاء مدة الانتقال
لخطوة أخيرة ، دعنا نبطئ مدة الانتقال.
مدة الانتقال: 700 مللي ثانية
نتيجة نهائية
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نرى النتيجة النهائية.
نأمل أن تكون هذه المقالة قد أعطتك بعض الإلهام لإنشاء تأثيرات تحويم فريدة لمقسم الأقسام للكشف عن المحتوى.
في الواقع ، يمكن أن يكون ضبط مقسم التمرير عنصر تصميم رائعًا بمفرده. بالإضافة إلى ذلك ، يجب أن تساعدك تصميمات العينات على بدء الاستكشاف والتصميمات الخاصة بك.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
هل ترغب في الحصول على محتوى يكشف عن نفسه عند المرور فوق علامات تبويب الزاوية القابلة للتوسيع في Divi؟
من الممتع دائمًا اكتشاف طرق إبداعية جديدة للتفاعل مع المستخدمين باستخدام تأثيرات التمرير. هناك طريقة رائعة للقيام بذلك وهي الكشف عن المحتوى عند التمرير باستخدام علامات تبويب الزاوية القابلة للتوسيع. يسمح هذا للمستخدم بالمرور فوق علامة تبويب في زاوية عمود أو صورة لتوسيع تراكب بمحتوى إضافي مفيد للمستخدم.
في هذا البرنامج التعليمي ، سننشئ تخطيط Divi فريدًا تمامًا من شأنه أن يكشف عن المحتوى عند التمرير باستخدام علامات تبويب الزاوية القابلة للتوسيع. في الواقع ، سوف نوضح لك كيفية تصميم علامة تبويب زاوية قابلة للتوسيع للأركان الأربعة للعمود في Divi.
دعونا نبدأ!
مسح
فيما يلي نظرة سريعة على تخطيط علامات تبويب الزاوية القابلة للتمديد التي سنقوم ببنائها معًا. لاحظ مدى جمال التناسق بين تأثيرات ومحتوى التمرير.
قم بإنشاء صفحة جديدة باستخدام Divi Builder
من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.
أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder
ثم انقر فوق ابدأ البناء (البناء من الصفر)
بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.
إنشاء تخطيط تراكبات المحتوى القابل للتوسيع في Divi
تصميم ميتري زاوية قابل للتمديد من الموضع الأيمن السفلي
للبدء ، أضف صفًا من عمودين إلى القسم العادي.
قبل إضافة وحدة نمطية ، قم بتحديث معلمات الخط على النحو التالي:
استخدام عرض مزراب مخصص: نعم
عرض الحضيض: 4
بالنسبة لهذا العنصر الأول الموضح ، سننشئ صورة خلفية عمود بها علامة تبويب زاوية (باستخدام وحدة نمطية دعاية مغالى فيها) في الجزء السفلي الأيمن من العمود الذي يتم توسيعه ويغطي العمود / الصورة بالكامل عند التمرير.
بمجرد وضع الدعاية المغلوطة في مكانها ، افتح إعدادات الصف ، وقم بتحديث ما يلي:
صورة الخلفية [إدراج الصورة]
حجم صورة الخلفية: الحجم الفعلي
ملاحظة: في هذا المثال ، نستخدم صور بيرة خلفية شفافة مأخوذة من حزمة التخطيط «مصنع الجعة". هم 128 بكسل في 359 بكسل ، وهذا هو سبب استخدامنا لحجم الصورة الفعلي.
حدود العمود 1
الزوايا الدائرية: 10 بكسل أسفل اليمين
عرض الحدود (لليمين ولأسفل): 2 بكسل
لون الحد (يمين وأسفل): # e94558
CSS مخصص و overflow
ضمن علامة التبويب خيارات متقدمة ، أضف CSS المخصص التالي إلى العنصر الرئيسي:
height: 400px;
خيار القائمة المنسدلة "الرؤية" وقم بإجراء التغييرات التالية:
الفائض الأفقي: مخفي
الفائض العمودي: مخفي
إضافة محتوى إلى الوحدة النمطية Blurb
نحن الآن جاهزون لبدء تخصيص وحدة Blurb داخل العمود 1. افتح إعدادات الوحدة وقم بتحديث ما يلي:
العنوان: Mango IPA
الجسم :
<p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
<p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
<p>4.8% ABV / 4 IBUs</p>
صورة: أضف نفس الصورة المستخدمة لخلفية العمود
تخصيص وحدة الدعاية والإعلان
امنح الدعاية الدعاية لون خلفية تحوم على النحو التالي:
الخلفية (سطح المكتب): شفافة
سطح المكتب (تحوم): rgba (255,255,255,0.9،XNUMX،XNUMX،XNUMX)
تحت علامة التبويب تصميم، قم بتحديث ما يلي:
وضع الصورة / الرمز: صحيح
خط العنوان: أوزوالد
وزن الخط: شبه عريض
نمط الخط: TT
حجم النص: 40 بكسل
لون النص الأساسي (سطح المكتب): شفاف
لون النص الأساسي (تحوم): # 121212
عرض الصورة / الرمز: 100 بكسل (سطح المكتب) ، 64 بكسل (الهاتف)
من أجل قلب الصورة المميزة على الجانب الأيمن ، أضف CSS المخصص التالي إلى المنطقة محتوى دعاية :
direction: rtl
ملاحظة: "rtl" تعني "من اليمين الى اليسار"، والذي يغير الترتيب الافتراضي للمحتوى (من اليسار إلى اليمين).
نتيجة
دعونا نرى النتيجة النهائية لتوسيع علامة تبويب الزاوية من الموضع الأيمن السفلي. لاحظ كيف يتم توسيعه لملء العمود بأكمله عند التمرير.
تصميم ميتري زاوية قابل للتمديد من الموضع الأيسر السفلي
عمود مكرر
لإنشاء علامة تبويب الزاوية تتوسع من الموضع الأيسر السفلي ، يمكننا إعادة تشغيل التصميم عن طريق تكرار العمود بأكمله. افتح إعدادات الصف والعمود المكرر 1. ثم احذف العمود الإضافي بحيث يكون لديك نسختان مكررتان فقط.
تحديث إعدادات عمود 2
بعد ذلك ، افتح إعدادات العمود 2 وقم بتحديث ما يلي:
الزوايا الدائرية: 10 بكسل أسفل اليسار
عرض الحدود (يمين): 0 بكسل
عرض الحدود (يسار): 2 بكسل
اللون: # e94558
تحديث معلمات وحدة Blurb
بعد ذلك ، قم بتحديث إعدادات Blurb كما يلي:
محاذاة النص: صحيح
الزوايا الدائرية (سطح المكتب): 20 بكسل أعلى اليمين
الزوايا الدائرية (تحوم): 10 بكسل أعلى اليمين
عرض الحد الأيسر: 0 بكسل
عرض الحد الأيمن: 4 بكسل (سطح المكتب) ، 2 بكسل (تحوم)
لون الحد الأيمن: # e94558
ترجمة التحويل (المحور السيني) (سطح المكتب): -30٪
Transform Origin (سطح المكتب): أسفل اليسار
ثم تأكد من إزالة CSS المخصص في منطقة محتوى Blurb.
نتيجة
ها هي النتيجة. لاحظ كيف يكون هذا متماثلًا مع الأول وينمو من الموضع الأيسر السفلي للعمود.
تصميم ميتري زاوية قابل للتمديد من الموضع العلوي الأيمن
نحن الآن جاهزون لبدء التصميمين الأخيرين لمقياس الزاوية المتوسعة. للحصول على السبق ، دعنا نكرر الصف بأكمله الذي يحتوي على الدعاية التي قمنا بتصميمها بالفعل.
تحديث إعدادات عمود 1
ثم افتح إعدادات الصف المكرر ، ثم افتح إعدادات العمود 1 وقم بتحديث ما يلي:
الزوايا الدائرية: 10 بكسل أعلى اليمين
عرض الحد السفلي: 0 بكسل
عرض الحد العلوي: 2 بكسل
لون الحد العلوي: # e94558
تحديث معلمات وحدة Blurb
بعد ذلك ، افتح إعداد الوحدة النمطية Blurb وقم بتحديث ما يلي:
عرض الحد السفلي: 4 بكسل (سطح المكتب) ، 2 بكسل (تحوم)
عرض الحد السفلي: # e94558
ترجمة التحويل (المحور ص) (سطح المكتب): -50٪
أصل التحويل: أعلى اليمين
عرف المغلق
في الوقت الحالي ، يمكننا فقط رؤية الجزء السفلي الأيسر من وحدة العرض التقديمي الذي لا يعرض عنواننا مثل العرضين التقديميين الآخرين في الصف أعلاه. لعرض العنوان في علامة التبويب ، نحتاج إلى تغيير موضع العنوان إلى أسفل يسار الدعاية المغلوطة باستخدام CSS مخصص.
أضف CSS المخصص التالي إلى المنطقة عنوان دعاية :
position: absolute;
bottom: 0;
left: 15px;
ثم أضف CSS التالي إلى منطقة المحتوى محتوى دعاية :
direction: rtl;
height: 100%;
تصميم ميتري زاوية قابل للتمديد من أعلى الموضع الأيسر
للحصول على تأثير التمرير الرابع والأخير لعلامة تبويب الزاوية الموسعة ، سنضعه في الزاوية اليسرى العلوية لإكمال التصميم المتماثل لتخطيط الشبكة بالكامل.
تحديث إعدادات عمود 2
ضمن إعدادات الصف ، افتح إعدادات العمود 2 وقم بتحديث ما يلي:
زوايا الحدود: 10 بكسل أعلى اليسار
عرض الحد السفلي: 0 بكسل
عرض الحد العلوي: 2 بكسل
لون الحد العلوي: # e94558
تحديث معلمات وحدة Blurb
بعد ذلك ، افتح إعدادات نص الوحدة النمطية Blurb في العمود 2 وقم بتحديث ما يلي:
ستعمل علامات تبويب الزاوية الموضحة في هذا البرنامج التعليمي بالتأكيد مع أي نوع من المحتوى الذي تريد عرضه على موقع Divi الخاص بك.
ليس عليك أيضًا استخدام الزوايا الأربع. على سبيل المثال ، يمكنك إنشاء تخطيط شبكة للصور باستخدام علامات تبويب الزاوية اليمنى العليا فقط لإظهار المحتوى عند التمرير.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
هل ترغب في إنشاء شبكة مع Divi تكون سائلة عند المرور فوقها؟
إذا كنت تحب إنشاء مواقع الويب مع وضع تفاعل المستخدم في الاعتبار ، فستحب هذا البرنامج التعليمي.
سنشرح لك اليوم كيفية إنشاء شبكة شفافة يتم الكشف عن صورتها الخلفية بمجرد أن يحوم شخص ما فوق أحد العناصر. التصميم في البداية بسيط ونظيف. ينتج عن هذا تجربة تحوم لطيفة.
في هذا البرنامج التعليمي ، سنرشدك خلال عملية الإنشاء خطوة بخطوة.
دعونا نذهب.
مسح
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة على أحجام الشاشات المختلفة.
افتح أولاً إعدادات القسم وقم بتطبيق لون خلفية بيضاء.
الخلفية: #ffffff
أضف السطر رقم 1
هيكل العمود
تابع بإضافة صف جديد باستخدام بنية العمود التالية:
التحجيم
بدون إضافة أي وحدات بعد ، افتح إعدادات الخط ، وانتقل إلى علامة التبويب تصميم، اسحب الخيار التحجيم وتعديل معلمات التحجيم على النحو التالي:
استخدام عرض مزراب مخصص: نعم
مزراب مع: 1
العرض: 100٪
العرض الأقصى: 100٪
مباعدة
ثم اسحب الخيار التباعد وقم بتغيير الإعدادات التالية:
المساحة المتروكة (أعلى وأسفل): 0 بكسل
الحدود
في خيار Border ، قم أيضًا بإجراء التغييرات التالية:
أنماط الحدود (أعلى وأسفل): 1 بكسل
لون الحد (أعلى وأسفل): # d3d3d3
إعدادات العمود 1
تحوم الخلفية
بعد ذلك ، دعنا نخصص إعدادات العمود 1. قم بتطبيق خلفية متدرجة على التمرير.
اللون 1: rgba (255,255,255,0،XNUMX،XNUMX)
اللون 2: # 000000
نوع التدرج: خطي
لون المركز 1: 30٪
وضع التدرج فوق الصورة المتدرجة: نعم
صورة الخلفية عند التمرير
قم أيضًا بتحميل صورة الخلفية التي ستظهر عند التمرير.
حجم صورة الخلفية: الغلاف
موقف صورة الخلفية: المركز
فئة CSS
وأكمل إعداد العمود عن طريق تعيين فئة CSS التالية في علامة التبويب متقدم :
فئة CSS: عمود التمرير
أضف وحدة نص # 1 إلى العمود 1
إضافة نص بحجم H3 (العنوان 3)
حان الوقت لإضافة وحدات نمطية ، بدءًا من أول وحدة نصية في العمود 1. أدخل نصًا من اختيارك.
إعدادات نص H3
ثم انتقل إلى علامة التبويب تصميم الوحدة النمطية وتعديل معلمات نص H3 على النحو التالي:
الخط: أوزوالد
وزن الخط وزن الخط: خفيف للغاية
نمط خط العنوان 3: TT
لون النص: # 0a0a0a
حجم نص العنوان 3:
سطح المكتب: 3vw
الجهاز اللوحي: 7vw
الهاتف: 14vw
العنوان 3 تباعد الأحرف: -2 بكسل
التحجيم
قم بتغيير العرض على أحجام الشاشات المختلفة في إعدادات التحجيم.
عرض :
سطح المكتب: 44٪
الأجهزة اللوحية: 48٪
الهاتف: 50٪
مباعدة
لنقم أيضًا بتغيير المعلمات التالية في الخيار التباعد .
الهامش (السفلي): 25vh
الحشو (العلوي والسفلي): 5٪
الحشو (يسار ويمين): 4٪
الحدود
بعد ذلك ، سنضيف حدودًا إلى اليمين وأسفل.
عرض الحدود (لليمين ولأسفل): 1 بكسل
لون الحد (يمين وأسفل): # d3d3d3
فئة CSS
وسنكمل أيضًا إعدادات الوحدة عن طريق تعيين فئة CSS التالية إلى وحدة النص:
فئة CSS: hover-title
أضف وحدة نص # 2 إلى العمود 1
إضافة محتوى
أضف وحدة نصية أخرى أسفل الوحدة السابقة مباشرةً بمحتوى وصف من اختيارك.
إعدادات النص
التبديل إلى علامة التبويب تصميم من الوحدة وتعديل معلمات النص وفقًا لذلك:
خط النص: كارلا
لون النص: #ffffff
الحجم:
سطح المكتب: 0,8 vw
الجهاز اللوحي: 2vw
الهاتف: 3.6vw
ارتفاع الخط: 2,2 م
مباعدة
قم أيضًا بتطبيق قيم الهامش المخصصة.
الحشو (السفلي): 10٪
الحشو (يسار ويمين): 9٪
فئة CSS
وأكمل معلمات الوحدة باستخدام فئة CSS التالية للوحدة:
فئة CSS: نص التمرير
أضف وحدة "زر" إلى العمود 1
إضافة وصف
الوحدة التالية والأخيرة التي نحتاجها هي وحدة نمطية أزرار. أدخل وصفا من اختيارك.
إعدادات زر
قم بتعديل معلمات الوحدة كما يلي:
استخدام الأنماط المخصصة للزر: نعم
حجم نص الزر:
سطح المكتب: 1vw
الكمبيوتر اللوحي: 2,5 فولت
الهاتف: 4vw
عرض حد الزر: 0 بكسل
نصف قطر الحدود: 0 بكسل
خط الزر: كارلا
إظهار رمز الزر: نعم
وضع رمز الزر: الحق
فقط إظهار الأيقونة على أكثر للزر: لا
مباعدة
أضف أيضًا قيم التباعد المخصصة.
الهامش (السفلي): 8٪
الهامش (يسار ويمين): 9٪
الحشو (السفلي): 5٪
الحشو (يمين): 20٪
ظل الصندوق
بعد ذلك ، قم بتطبيق ظل الصندوق.
مربع الظل الوضع الأفقي: 0 بكسل
مربع الظل الوضع الرأسي: 2 بكسل
لون الظل: # 000000
فئة CSS
وأكمل إعدادات الوحدة عن طريق تخصيص فئة CSS التالية للزر:
فئة CSS: زر التمرير
إعادة استخدام العمود 1
تحذف الأعمدة 2 و 3 و 4
الآن بعد أن أنشأنا العمود الأول ، يمكننا إعادة استخدامه. أول شيء سنفعله هو إزالة الأعمدة الفارغة من صفنا.
العمود 1 استنساخ ثلاث مرات
سنعيد استخدام العمود 1 عن طريق استنساخه ثلاث مرات.
قم بتغيير صور الخلفية عند تمرير مؤشر الماوس فوق الأعمدة المكررة
ثم قم بتغيير صور خلفية العمود المكررة في كل عمود مكرر.
تحرير المحتوى المكرر
قم أيضًا بتغيير محتوى الوحدة النمطية في كل عمود مكرر.
حدود العمود الفريدة
العمود 1
سنحتاج إلى تطبيق إعدادات حدود فريدة على كل عمود ، بدءًا من العمود 1.
عرض الحد (يمين):
سطح المكتب: 1 بكسل
الجهاز اللوحي: 1 بكسل
الهاتف: 0 بكسل
اللون (يمين): # d3d3d3
عرض الحدود (سفلي):
سطح المكتب: 0 بكسل
الجهاز اللوحي: 1 بكسل
الهاتف: 1 بكسل
لون الحد (أسفل): # d3d3d3
العمود 2
بعد ذلك لدينا العمود 2.
عرض الحد (يمين):
سطح المكتب: 1 بكسل
الجهاز اللوحي: 1 بكسل
الهاتف: 0 بكسل
اللون (يمين): # d3d3d3 عرض الحدود (أسفل):
سطح المكتب: 0 بكسل
الجهاز اللوحي: 1 بكسل
الهاتف: 1 بكسل
لون الحد (أسفل): # d3d3d3
العمود 3
وسنستخدم إعدادات الحدود التالية للعمود 3:
عرض الحد (يمين):
سطح المكتب: 1 بكسل
الجهاز اللوحي: 1 بكسل
الهاتف: 0 بكسل
اللون (يمين): # d3d3d3
عرض الحدود (سفلي):
سطح المكتب: 0 بكسل
الجهاز اللوحي: 1 بكسل
الهاتف: 1 بكسل
لون الحد (أسفل): # d3d3d3
أضف CSS مخصصًا إلى إعدادات الصفحة
افتح إعدادات الصفحة
الآن بعد أن أصبح التصميم بالكامل في مكانه الصحيح ، كل ما تبقى هو إضافة بعض رموز CSS المخصصة للمساعدة في تشغيل تأثيرات التمرير على الوحدات النمطية. للقيام بذلك ، افتح إعدادات الصفحة.
في هذه المقالة ، أوضحنا لك كيفية إنشاء تصميم جميل للتمرير.
على وجه التحديد ، لقد أنشأنا شبكة عمودية تبدأ بشكل بسيط ونظيف. بمجرد أن يحوم الزائرون فوق عنصر شبكة معين ، يتم الكشف عن صورة الخلفية وتتغير أنماط الوحدة.
في هذا البرنامج التعليمي ، سنوضح لك كيفية إنشاء رأس مستدير عام يظهر على الجانب الأيسر من صفحاتك ومنشوراتك. لون خلفية العنوان شفاف تمامًا ، مما يسمح بعرض محتوى الصفحة / المنشور.
لقد تأكدنا من أن العنوان العام يظل ثابتًا على الجانب الأيسر أثناء التمرير ، كما جعلنا القائمة نسخة متوافقة مع الجوّال.
في هذا البرنامج التعليمي ، سنوضح لك كيفية إعادة إنشاء التصميم من البداية!
دعونا نذهب.
مسح
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة التي نريد تحقيقها.
انتقل إلى منشئ سمات Divi وابدأ في إنشاء رأس عالمي
من لوحة تحكم WordPress ، انتقل إلى ديفي> باني الموضوع
انقر "إضافة رأس عام"
اختر "إنشاء رأس عام".
ابدأ في إنشاء رأس الجانب العام
إضافة قسم جديد
لون الخلفية
بمجرد الدخول إلى محرر النماذج ، يمكنك فتح القسم الموجود بالفعل وتغيير لون الخلفية على أحجام الشاشات المختلفة.
الآن ، لإنشاء تأثير الدوران ، سنلعب بقيم دوران تحويل الوحدة.
اليسار: 270 درجة (سطح المكتب) ، 0 درجة (الكمبيوتر اللوحي والهاتف)
أضف وحدة "متابعة الوسائط الاجتماعية" إلى العمود
إضافة الشبكات الاجتماعية
دعنا ننتقل إلى وحدة "متابعة الوسائط الاجتماعية" ، وهي الوحدة التالية والأخيرة التي نحتاجها لإكمال العنوان المحوري العالمي. أضف بعض الشبكات الاجتماعية من اختيارك.
إعادة تعيين أنماط أيقونات الوسائط الاجتماعية
تابع عن طريق إعادة ضبط الإعدادات لكل شبكة اجتماعية على حدة. سيساعدنا هذا في التخلص من لون الخلفية.
انحياز
ثم انتقل إلى علامة التبويب تصميم من الوحدة وتغيير محاذاة الوحدة على أحجام الشاشة المختلفة.
وحدة المحاذاة: يسار (سطح المكتب) ، يمين (كمبيوتر لوحي وهاتف)
إعدادات الرمز
أخيرًا ، قم بتغيير إعدادات الرمز أيضًا.
لون الأيقونة: # 000000
استخدام حجم رمز مخصص: نعم
حجم خط الأيقونة: 2,1 vw
حفظ التغييرات المنشئ وعرض النتيجة
بمجرد الانتهاء من جميع الوحدات ، يمكنك حفظ القالب ، والخروج من Divi theme builder ، وعرض النتيجة على موقع الويب الخاص بك!
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة.
هل تريد أن تجعل أيقونات الوسائط الاجتماعية الخاصة بك مثبتة مع Divi؟
من خلال خيارات Divi المدمجة ، يمكنك بسهولة تصميم وحدة "متابعة الوسائط الاجتماعية" اللاصقة التي ستحافظ على أيقونات الوسائط الاجتماعية هذه في المقدمة والوسط بينما يقوم المستخدم بالتمرير لأسفل الصفحة.
بالإضافة إلى ذلك ، من خلال إضافة نمط مخصص إلى الوحدة النمطية في الحالة اللاصقة ، يمكننا إنشاء انتقالات تصميم فريدة عند التبديل إلى الحالة اللاصقة أثناء التمرير.
لذا ، إذا كنت تبحث عن تحكم كامل في تصميم زر الوسائط الاجتماعية ، فهذا البرنامج التعليمي يناسبك!
مسح
فيما يلي نظرة عامة مختصرة على النتيجة التي سنحصل عليها في هذا البرنامج التعليمي.
قم بإنشاء صفحة جديدة باستخدام "Divi Builder"
من لوحة تحكم WordPress ، انتقل إلى "صفحات> إضافة جديد"
أعطه عنوانًا منطقيًا لك ثم انقر فوق "استخدم DiviBuilder"
في هذا البرنامج التعليمي ، سنستخدم تخطيطًا محددًا مسبقًا. للقيام بذلك ، انقر فوق "تصفح التنسيقات"
ابحث عن التخطيط وحدده "مصمم أزياء"
اختر التخطيط "هبوط" ثم انقر فوق "استخدم هذا التخطيط"
تصميم وحدة "متابعة الوسائط الاجتماعية" في Divi
انشاء القسم
أضف قسمًا عاديًا جديدًا إلى التخطيط.
ثم انقل القسم الجديد إلى أعلى الصفحة (أو في أي مكان تريد إضافة روابط متابعة الوسائط الاجتماعية الخاصة بك).
افتح إعدادات القسم وقم بتحديث لون الخلفية لمطابقة التخطيط كما يلي:
لون الخلفية: # fff9f2
تحت علامة التبويب تصميم، قم بتوسيع خيار التباعد وتعديل المعلمات التالية:
المساحة المتروكة (أعلى وأسفل): 10 بكسل
إنشاء الخط
داخل القسم ، أضف صفًا إلى عمود.
افتح إعدادات الخط ، واسحب خيار التباعد وقم بتغيير الإعدادات على النحو التالي:
استخدام عرض مزراب مخصص: نعم
عرض الحضيض: 1
العرض: 100٪
العرض الأقصى: 100٪
استمر بالتمرير لأسفل الخيار التباعد
المساحة المتروكة (أعلى وأسفل): 0 بكسل
إنشاء وحدة "متابعة وسائل التواصل الاجتماعي" اللاصقة
بمجرد وضع القسم والخط في مكانهما ، أضف وحدة نمطية جديدة "متابعة وسائل التواصل الاجتماعي" على الخط.
تحديث إعدادات الوحدة
افتح إعدادات وحدة "متابعة الوسائط الاجتماعية".
أول شيء يتعين علينا القيام به هو إضافة موضع ثابت إلى الوحدة.
تحت علامة التبويب متقدم، اسحب الخيار تأثيرات التمرير وتحديث ما يلي:
موقف مثبت: التمسك بالأعلى
بمجرد أن يكون الموضع في الحالة اللاصقة ، ستتمكن من استهداف نمط الوحدة في الحالة اللاصقة (مثلما يمكنك في حالة التمرير). يمكن القيام بذلك عن طريق التمرير فوق أحد الخيارات والنقر فوق رمز الدبوس.
حيلة : سيتغير لون الخلفية تلقائيًا ليلائم علامة الوسائط الاجتماعية. يمكنك نسخ هذا اللون وإضافته كلون خلفية حالة التمرير للرمز. سيعرض هذا لون الخلفية الافتراضي للشبكة الاجتماعية عندما تحوم فوق الرمز.
يمكنك الآن التبديل بين علامات التبويب لرؤية لون الخلفية لجميع الحالات الثلاث (سطح المكتب ، وتحوم ، ولصق).
بعد ذلك ، دعنا نمنح الرمز شكلًا بيضاويًا لطيفًا وحدودًا تلائم التخطيط بشكل أفضل. تحت علامة التبويب تصميم، قم بتحديث ما يلي:
زوايا دائرية: 50٪
عرض الحدود: 1 بكسل
لون الحد: # 000000 (سطح المكتب) ، شفاف (تحوم)
حاليًا ، يحتوي الرمز على شكل دائرة. للحصول على شكل بيضاوي أكثر ، سنقوم بتغيير إعدادات التباعد على النحو التالي:
الآن وقد انتهينا من تصميم أول شبكة اجتماعية ، يمكننا تكرار الرمز لإنشاء شبكات أخرى.
للقيام بذلك ، افتح إعدادات الوحدة وسائل الاعلام الاجتماعية وانقر فوق الرمز المكرر. في هذا المثال ، لنقم بإنشاء 4 أخرى.
الآن كل ما يتعين علينا القيام به هو تحديث كل شبكة من الشبكات الاجتماعية الجديدة. نظرًا لأن هذا سيؤدي إلى تغيير لون الخلفية ، فستحتاج أيضًا إلى تحديث لون الخلفية لكل منها.
للقيام بذلك ، افتح إعدادات الشبكة الاجتماعية الثانية وقم بتحديث ما يلي:
الشبكة الاجتماعية: Facebook
الخلفية: شفافة (سطح المكتب) ، # 3b5998 (تحوم)
استمر في نفس العملية لتحديث بقية الشبكات الاجتماعية.
نتيجة نهائية
الآن دعنا نرى النتيجة التي تم الحصول عليها على أحجام الشاشات المختلفة.
تعد أزرار الوسائط الاجتماعية دائمًا ميزة أساسية على موقع الويب. إنها إحدى الطرق الأساسية لربط قنوات التواصل الاجتماعي بموقع ويب. هذا هو السبب في الوحدة "متابعة وسائل التواصل الاجتماعي" يحتوي Divi على جميع أيقونات الشبكة وخيارات التصميم التي تحتاجها لإنشاء الحل الأمثل لموقعك.
هل ترغب في إضافة محتوى دعابة إلى جهاز لوحي قابل للتمرير على Divi؟
يمكن أن تكون إضافة محتوى تشويقي إلى موقع الويب الخاص بك استراتيجية تسويقية فعالة. إنه يعمل بشكل جيد بشكل خاص للترويج لأشياء مثل الكتب الإلكترونية. أنت تمنحهم معاينة للمحتوى حتى يريدون المزيد.
في البرنامج التعليمي اليوم ، سنوضح لك كيفية عرض محتوى دعابة في جهاز لوحي منسدل في Divi.
للقيام بذلك ، سوف نستفيد من خيارات Divi المضمنة لتحويل عمود إلى حاوية قائمة منسدلة (مصممة لتبدو وكأنها جهاز لوحي) يمكن أن تتضمن أي نوع من المحتوى الذي تريده.
يمكنك استخدامه للترويج للفصول الأولى من أي كتاب إلكتروني ، أو عرض نماذج للتصاميم من محفظتك ، أو أي نوع آخر من المحتوى.
دعونا نبدأ!
مسح
إليك نظرة سريعة على الجهاز اللوحي الذي يحتوي على محتوى قابل للتمرير سننشئه في هذا البرنامج التعليمي.
قم بإنشاء صفحة جديدة باستخدام Divi Builder
في لوحة معلومات WordPress ، انتقل إلى "صفحات> إضافة جديد"
أعط عنوانًا منطقيًا بالنسبة لك ، ثم انقر فوق "استخدم DiviBuilder"
ثم انقر فوق "بدء البناء"
تصميم الجهاز اللوحي مع محتوى دعابة قابل للتمرير في Divi
إنشاء حاوية الجهاز اللوحي المنسدلة بعمود Divi
أضف صف
للبدء ، قم بإنشاء صف من عمودين بقسم عادي.
إعدادات العمود 1
لون الخلفية
افتح إعدادات العمود 1 وأضف خلفية بيضاء إلى العمود.
الخلفية: #ffffff
الحدود والهامش
انتقل إلى علامة التبويب تصميم خيار القائمة المنسدلة التباعد وقم بتغيير الإعدادات كما يلي:
كما ذكرنا سابقًا ، يحتوي العمود الآن على ارتفاع محدد سيؤدي حتمًا إلى تجاوز محتويات العمود رأسيًا.
لضمان إمكانية عرض المحتوى الفائض عن طريق التمرير لأسفل العمود ، اضبط خيار تجاوز الرؤية الرأسية على "التمرير". للقيام بذلك ، قم بتوسيع الخيار وضوح التبويب متقدم
تجاوز عمودي: التمرير
أضف محتوى الجملة المحفزة إلى عمود القائمة المنسدلة
في هذه المرحلة ، يكون العمود (أو الرف) جاهزًا للمحتوى. يمكنك استخدام أي وحدة Divi في هذا العمود لإنشاء محتوى المعاينة الخاص بك.
في هذا المثال ، نضيف محتوى كتاب إلكتروني وهمي يتكون من وحدة نمطية دعاية مغالى فيها (لعرض الدعوة الأولية للعمل) ، وحدة صورة (لعرض غلاف الكتاب) ووحدة نمطية نص (لعرض بعض فصول الكتاب الإلكتروني).
تمرير CTA (دعوة إلى العمل) مع خلفية غلاف الكتاب
أول عنصر محتوى تشويقي سنضيفه هو وحدة نمطية دعاية مغالى فيها والتي ستكون بمثابة دعوة للعمل "التمرير للمعاينة".
سنستخدم رمز العرض التقديمي والعنوان والخلفية مع غلاف الكتاب كصورة الخلفية وتراكب التدرج اللوني.
في عمود الكمبيوتر اللوحي ، أضف وحدة نمطية دعاية مغالى فيها.
قم بتحديث المحتوى على النحو التالي:
العنوان: قم بالتمرير لقراءة مقتطف
خيار القائمة المنسدلة "الصورة والرمز"
استخدام الأيقونة: نعم
الرمز: انظر لقطة الشاشة
ثم اسحب الخيار خلفيّة وإضافة تدرج
لون الجانب الأيسر: rbga (0,0,0,0,0.0،XNUMX،XNUMX،XNUMX،XNUMX)
لون الجانب الأيمن: #ffffff
موقف البداية: 20٪
المركز النهائي: 85٪
مربع التدرج فوق صورة الخلفية: نعم
ثم أضف صورة غلاف الكتاب. للحصول على أفضل النتائج ، أضف صورة تقريبًا 600 × 850 بكسل .
في علامة التبويب "تصميم" ، قم بتحديث الأنماط التالية للرمز والعنوان:
لون الأيقونة: # 000000
حجم خط الرمز: 80 بكسل (سطح المكتب والجهاز اللوحي) ، 70 بكسل (الهاتف)
خط العنوان: مونتسيرات
محاذاة نص العنوان: توسيط
لون النص: # 000000
ثم يمكننا نقل الرمز والعنوان لأسفل العمود عن طريق إضافة هامش علوي.
لتغيير حجم الدعاية المغلوطة ومساحتها ، قم بتحديث ما يلي:
ارتفاع: 100٪
الهامش: 25 بكسل (سفلي)
المساحة المتروكة: 400 بكسل (سطح مكتب وجهاز لوحي) ، 270 بكسل (هاتف)
صورة غلاف الكتاب
سيكون الجزء التالي من محتوى الجملة المحفزة عبارة عن صورة لغلاف الكتاب. لإضافة صورة ، ما عليك سوى إضافة وحدة صورة أسفل الوحدة النمطية Blurb.
ثم قم بتحميل نفس الصورة المستخدمة في الخلفية الدعائية.
محتويات معاينة النص
سيكون آخر جزء من المحتوى التشويقي هو النص الذي سيتضمن بعض الفصول الخيالية من كتابنا الإلكتروني. لإضافة النص ، أضف وحدة نصية جديدة أسفل الصورة السابقة.
ثم الصق كود HTML التالي في علامة تبويب النص الأساسي:
<h3>Chapitre 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<h3>Chapitre 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
ضمن علامة التبويب تصميم ، قم بتحديث نمط العنوان والتباعد كما يلي (العنوان 3):
الخط: مونتسيرات
وزن الخط: عريض للغاية
محاذاة النص: توسيط
ارتفاع الخط: 1,3 م
الحشو: 10٪ (علوي وسفلي)
بعض اللمسات الأخيرة
تحديث معلمات الخط
مع وجود المحتوى في مكانه الصحيح ، نحتاج إلى إجراء بعض التعديلات على الصف لجعل التصميم أكثر استجابة. افتح إعدادات الخط وقم بتحديث ما يلي:
في هذه المرحلة ، يمكننا إضافة محتوى إضافي إلى العمود 2 إذا لزم الأمر. في هذا المثال ، أضفنا وحدة نصية ووحدة زر وقمنا بتخصيصهما على غرار التصميم الموضح في حزمة تخطيط الكتاب الإلكتروني الخاصة بنا.
تحقق من محتوى القائمة المنسدلة المتاح داخل الكمبيوتر اللوحي المحمول.
وهذه هي الطريقة التي يتراكم بها التصميم على شاشة الجهاز اللوحي والهاتف.
في الختام
ربما يكون أفضل شيء في تصميم الجهاز اللوحي القابل للتمرير هو تعدد استخداماته. نظرًا لأن الجهاز اللوحي هو في الأساس عمود Divi ، يمكنك استخدام أي عدد من وحدات Divi (نص ، صورة ، زر) لتصميم المحتوى الذي تريد تقديمه.
نأمل أن يكون هذا مفيدًا في المرة القادمة التي تحتاج فيها إلى عرض محتوى تشويقي على موقع الويب الخاص بك.
السرية وملفات تعريف الارتباط: يستخدم هذا الموقع ملفات تعريف الارتباط. من خلال الاستمرار في تصفح هذا الموقع ، فإنك توافق على استخدامنا له.
لمعرفة المزيد ، بما في ذلك كيفية التحكم في ملفات تعريف الارتباط ، راجع ما يلي:
سياسة ملفات تعريف الارتباط
