Divi: كيفية الكشف عن المحتوى عند المرور فوق مقسم القسم

Divi: كيفية الكشف عن المحتوى عند المرور فوق مقسم القسم

هل ترغب في معرفة كيفية الكشف عن المحتوى عند المرور فوق حاجز القسم في Divi؟

لا تزال فواصل الأقسام عنصرًا شائعًا في تصميم Divi. هناك العديد من أنماط المقسمات للاختيار من بينها مع خيارات مفيدة تجعل من السهل إضافة انتقالات وخلفيات فريدة إلى صفحتك.

في هذا البرنامج التعليمي ، سنستخدم فواصل الأقسام بشكل مختلف قليلاً. يسمح لك Divi بضبط ارتفاع وتخطيط كل فاصل. هذا يسمح لنا بوضع الفواصل فوق مناطق معينة أو محتوى قسم. 

باستخدام خيار التمرير لارتفاع المقسم ، يمكننا إضافة تأثيرات تحويم فريدة تكشف عن محتوى مخفي جزئيًا. يعمل هذا بشكل رائع لجذب الانتباه إلى عبارة معينة تحث المستخدم على اتخاذ إجراء أو زر تريد أن ينقر عليه الزوار.

مسح

تحميل DIVI Now !!!

قم بإنشاء صفحة جديدة باستخدام Divi Builder

من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.

فاصل القسم في Divi

أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder

ثم انقر فوق ابدأ البناء (البناء من الصفر)

بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.

تصميم تأثير تحوم مقسم القسم في Divi

إنشاء القسم والخط

أنشئ قسمًا عاديًا بصف من عمودين.

قبل إضافة وحدة نمطية ، افتح إعدادات القسم وقم بتحديث ما يلي:

تدرج الخلفية (يسار): # 73ba57
تدرج الخلفية (يمين): # 2a4c23
العرض: 80٪
العرض الأقصى: 1 بكسل
محاذاة القسم: المركز

تأثير تحوم مقسم القسم

أضف عنوان القسم

لإضافة عنوان القسم ، أنشئ وحدة نصية وأدخل النص التالي:

<h2>The Juice</h2>

بعد ذلك ، قم بتحديث التصميم على النحو التالي:

الخط: Lato
حجم النص: 80 بكسل
تباعد الأحرف: -5 بكسل
الهامش: -50 بكسل (أعلى) ، -40 بكسل (أسفل)
مؤشر Z: -1

سيسمح الهامش المخصص وفهرس z للنص بالبقاء خلف الصورة التي سنضيفها في الخطوة التالية.

إضافة صورة

ضمن وحدة النص مع العنوان في العمود 1 ، أضف وحدة صورة. ثم قم بتحميل صورة بخلفية شفافة. نستخدم صورة من حزمة التخطيط محل عصير 240 × 300 بكسل.

ضبط محاذاة الصورة في المركز.

أضف وحدة "الحث على اتخاذ إجراء" في العمود 2

في العمود 2 ، أضف وحدة Call To Action.

أضف عنوان URL لرابط الزر لضمان عرض الزر.

تصميم خلفية الحث على الشراء ونص العنوان

بعد ذلك ، قم بتحديث إعدادات التصميم التالية:

الخلفية: #ffffff
لون النص: غامق
خط العنوان: Lato
وزن خط العنوان: ثقيل
نمط الخط: TT
حجم نص العنوان: 18 بكسل

تخصيص زر الحث على الشراء

قم بتحديث تصميم الزر على النحو التالي:

  • استخدام الأنماط المخصصة للزر: نعم
  • لون نص الزر: #ffffff
  • لون خلفية الزر: # 73ba57
  • عرض الحدود: 0 بكسل

تخصيص حدود CTA Module

ثم أضف حدًا لتأطير الوحدة على النحو التالي:

عرض الحدود: 10 بكسل
لون الحدود: rgba (115,186,87,0.15،XNUMX،XNUMX،XNUMX)

تمت إضافة تأثير التمرير إلى الفاصل للكشف عن وحدة "Call To Action"

حان الوقت الآن لإضافة تأثير التمرير إلى مقسم القسم للكشف عن وحدة "Call To Action". للقيام بذلك ، نحتاج أولاً إلى إنشاء فواصل الأقسام الخاصة بنا.

اقرأ أيضا: Divi: كيفية الكشف عن المحتوى عند التمرير فوق علامات التبويب

إضافة الفاصل العلوي

افتح معلمات القسم والفاصل العلوي مع المعلمات التالية.

نمط الفاصل العلوي: انظر الصورة
لون الفاصل العلوي: # 73ba57
ارتفاع الحاجز: 70٪ (افتراضي) ، 0٪ (تحوم)
الوجه الفاصل العلوي: أفقي

لاحظ أن ارتفاع الفاصل يبدأ بارتفاع افتراضي 70٪ ، ثم يتغير إلى ارتفاع 0٪ عند التمرير.

تمت إضافة الفاصل السفلي

ثم أضف فاصلًا أدنى مشابهًا للقسم مع المعلمات التالية.

  • نمط الحاجز السفلي: انظر الصورة
  • لون الحاجز السفلي: # 73ba57
  • ارتفاع الحاجز: 70٪ (افتراضي) ، 0٪ (تحوم)
  • فاصل الوجه: أفقي
  • الترتيب: فوق محتوى القسم

يبدأ هذا الحاجز السفلي أيضًا بارتفاع 70٪ وينخفض ​​إلى 0٪ عند التحويم. ومع ذلك ، نظرًا لأن خيار ترتيب التقسيم قد تم تعيينه أعلى المحتوى ، فإن فاصل القسم يخفي الجزء السفلي من وحدة "Call To Action" في العمود 1. ثم عند التمرير ، يتم الكشف عن بقية الوحدة.

تحقق من النتيجة حتى الآن.

تحميل DIVI Now !!!

تمت إضافة تأثير تحويم ظل الصندوق لانتقال وتصميم فريد

للحصول على انتقال وتصميم فريد عند التمرير ، يمكننا إضافة تأثير تحويم ظل الصندوق الذي سيحدث في وقت واحد مع تأثير التحويم الفاصل. للقيام بذلك ، قم بإضافة ظل المربع التالي إلى القسم.

  • Box Shadow: انظر لقطة الشاشة
  • الوضع الأفقي: 0 بكسل
  • الوضع الرأسي: 0 بكسل
  • قوة انتشار الظل المربع: 0 بكسل (افتراضي) ، 150 بكسل (تحوم)
  • لون الظل: # 73ba57

إبطاء مدة الانتقال

لخطوة أخيرة ، دعنا نبطئ مدة الانتقال.

مدة الانتقال: 700 مللي ثانية

نتيجة نهائية

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نرى النتيجة النهائية.

فاصل القسم في Divi

تحميل DIVI Now !!!

في الختام

نأمل أن تكون هذه المقالة قد أعطتك بعض الإلهام لإنشاء تأثيرات تحويم فريدة لمقسم الأقسام للكشف عن المحتوى. 

في الواقع ، يمكن أن يكون ضبط مقسم التمرير عنصر تصميم رائعًا بمفرده. بالإضافة إلى ذلك ، يجب أن تساعدك تصميمات العينات على بدء الاستكشاف والتصميمات الخاصة بك.

نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.

يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...

Divi: كيفية الكشف عن المحتوى عند التمرير فوق علامات التبويب

Divi: كيفية الكشف عن المحتوى عند التمرير فوق علامات التبويب

هل ترغب في الحصول على محتوى يكشف عن نفسه عند المرور فوق علامات تبويب الزاوية القابلة للتوسيع في Divi؟

من الممتع دائمًا اكتشاف طرق إبداعية جديدة للتفاعل مع المستخدمين باستخدام تأثيرات التمرير. هناك طريقة رائعة للقيام بذلك وهي الكشف عن المحتوى عند التمرير باستخدام علامات تبويب الزاوية القابلة للتوسيع. يسمح هذا للمستخدم بالمرور فوق علامة تبويب في زاوية عمود أو صورة لتوسيع تراكب بمحتوى إضافي مفيد للمستخدم.

في هذا البرنامج التعليمي ، سننشئ تخطيط Divi فريدًا تمامًا من شأنه أن يكشف عن المحتوى عند التمرير باستخدام علامات تبويب الزاوية القابلة للتوسيع. في الواقع ، سوف نوضح لك كيفية تصميم علامة تبويب زاوية قابلة للتوسيع للأركان الأربعة للعمود في Divi.

دعونا نبدأ!

مسح

فيما يلي نظرة سريعة على تخطيط علامات تبويب الزاوية القابلة للتمديد التي سنقوم ببنائها معًا. لاحظ مدى جمال التناسق بين تأثيرات ومحتوى التمرير.

قم بإنشاء صفحة جديدة باستخدام Divi Builder

من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.

علامات تبويب زاوية قابلة للتوسيع في Divi

أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder

ثم انقر فوق ابدأ البناء (البناء من الصفر)

بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.

إنشاء تخطيط تراكبات المحتوى القابل للتوسيع في Divi

تصميم ميتري زاوية قابل للتمديد من الموضع الأيمن السفلي

للبدء ، أضف صفًا من عمودين إلى القسم العادي.

قبل إضافة وحدة نمطية ، قم بتحديث معلمات الخط على النحو التالي:

  • استخدام عرض مزراب مخصص: نعم
  • عرض الحضيض: 4

بالنسبة لهذا العنصر الأول الموضح ، سننشئ صورة خلفية عمود بها علامة تبويب زاوية (باستخدام وحدة نمطية دعاية مغالى فيها) في الجزء السفلي الأيمن من العمود الذي يتم توسيعه ويغطي العمود / الصورة بالكامل عند التمرير.

اقرأ أيضا دليلنا على ديفي: كيفية إنشاء شبكة عمود السوائل عند المرور فوقها

لنبدأ بإضافة وحدة Blurb.

أضف الوحدة النمطية للدعاية إلى العمود 1

إعدادات العمود 1

بمجرد وضع الدعاية المغلوطة في مكانها ، افتح إعدادات الصف ، وقم بتحديث ما يلي:

  • صورة الخلفية [إدراج الصورة]
  • حجم صورة الخلفية: الحجم الفعلي

ملاحظة: في هذا المثال ، نستخدم صور بيرة خلفية شفافة مأخوذة من حزمة التخطيط «مصنع الجعة". هم 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 بكسل (الهاتف)
  • عرض المحتوى: 100٪
  • ارتفاع: 100٪
  • الحشو (سطح المكتب): 15٪ (أعلى وأسفل) ، 8٪ (يسار ويمين)
  • الحشو (التمرير): 8٪ (أعلى ، أسفل ، يسار ويمين)
  • الزوايا الدائرية (سطح المكتب): 20 بكسل أعلى اليسار
  • الزوايا الدائرية (تحوم): 10 بكسل أعلى اليسار
  • عرض الحدود (العلوي واليسار): 4 بكسل (سطح المكتب) ، 2 بكسل (تحوم)
  • لون الحد (العلوي واليسار): # e94558
خيار التحويل (سطح المكتب)
  • مقياس التحويل (X و Y): 50٪
  • تحويل الترجمة
    • المحور ص: 50٪
    • المحور س: 30٪

اقرأ أيضًا دليلنا على: ديفي: كيفية إنشاء تذييل لاصق بتأثير "كشف"

  • أصل التحويل: أسفل ويمين
خيارات التحويل (تحوم)
  • مقياس التحويل (Y و X) (تحوم): 100٪
  • ترجمة التحويل (Y و X) (تحوم): 0٪

من أجل قلب الصورة المميزة على الجانب الأيمن ، أضف 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 وقم بتحديث ما يلي:

  • الزوايا الدائرية (سطح المكتب): 20 بكسل أسفل اليسار
  • الزوايا الدائرية (تحوم): 10 بكسل أسفل اليسار
  • عرض الحد العلوي: 0 بكسل
  • عرض الحد السفلي: 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 وقم بتحديث ما يلي:

  • الزوايا الدائرية (سطح المكتب): 20 بكسل أسفل اليمين
  • الزوايا الدائرية (تحوم): 10 بكسل أسفل اليمين
  • عرض الحد العلوي: 0 بكسل
  • عرض الحد السفلي: 4 بكسل (سطح المكتب) ، 2 بكسل (تحوم)
  • لون الحد السفلي: # e94558

ثم قم بتحديث خيارات التحويل:

  • ترجمة التحويل (المحور الصادي) (سطح المكتب): -50٪
  • أصل التحويل: أعلى اليسار
عرف المغلق

ثم أضف CSS المخصص التالي إلى المنطقة عنوان دعاية :

position: absolute;
bottom: 0%;
right: 0%;

أضف أيضًا CSS التالية في المربع محتوى دعاية :

height: 100%;

الانتهاء من تصميم المخطط

لون خلفية القسم

أضف لون خلفية القسم كما يلي:

  • الخلفية: #efefef

أضف عنوانا

لإنشاء العنوان ، أضف سطرًا إلى عمود في منتصف السطرين

ثم أضف وحدة نصية.

أضف المحتوى: "موسمي".

ثم قم بتحديث الإعدادات التالية:

  • الخط: Merriweather
  • وزن الخط: عريض
  • النمط: TT
  • محاذاة النص: توسيط
  • لون النص: # 999999
  • الحجم: 50 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 24 بكسل (هاتف)
  • تباعد الأحرف: 1em
قابل للتوسيع في Divi
  • المساحة المتروكة (يسار): 50 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 24 بكسل (هاتف)
قابل للتوسيع في Divi

نتيجة نهائية

تحقق من النتيجة النهائية للتخطيط مع توسيع علامات تبويب الزاوية.

علامات تبويب زاوية قابلة للتوسيع في Divi

وهنا التصميم على الهاتف المحمول.

علامات تبويب زاوية قابلة للتوسيع في Divi

تحميل DIVI Now !!!

في الختام

ستعمل علامات تبويب الزاوية الموضحة في هذا البرنامج التعليمي بالتأكيد مع أي نوع من المحتوى الذي تريد عرضه على موقع Divi الخاص بك. 

ليس عليك أيضًا استخدام الزوايا الأربع. على سبيل المثال ، يمكنك إنشاء تخطيط شبكة للصور باستخدام علامات تبويب الزاوية اليمنى العليا فقط لإظهار المحتوى عند التمرير.

نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع 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 المخصصة للمساعدة في تشغيل تأثيرات التمرير على الوحدات النمطية. للقيام بذلك ، افتح إعدادات الصفحة.

اقرأ أيضًا دليلنا على: ديفي: كيفية إنشاء تذييل لاصق بتأثير "كشف"

أضف كود CSS

وانسخ والصق الأسطر التالية من كود CSS:

.hover-column:hover .hover-title {
background-color: #000000;
}
 
.hover-column:hover .hover-title h3 {
color: white !important;
}
 
.hover-button {
color: black;
}
 
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
 
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
 
.hover-column:hover::before {
opacity: 0;
}

مسح

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على كيفية ظهورها على أحجام الشاشات المختلفة.

مكتب

شبكة مع ديفي السائل على تحوم

الجوال

شبكة مع ديفي السائل على تحوم

تحميل DIVI Now !!!

في الختام

في هذه المقالة ، أوضحنا لك كيفية إنشاء تصميم جميل للتمرير. 

على وجه التحديد ، لقد أنشأنا شبكة عمودية تبدأ بشكل بسيط ونظيف. بمجرد أن يحوم الزائرون فوق عنصر شبكة معين ، يتم الكشف عن صورة الخلفية وتتغير أنماط الوحدة.

يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...

Divi: كيفية إنشاء رأس جانبي عالمي

Divi: كيفية إنشاء رأس جانبي عالمي

هل ترغب في إنشاء رأس جانبي عالمي باستخدام Divi؟

في هذا البرنامج التعليمي ، سنوضح لك كيفية إنشاء رأس مستدير عام يظهر على الجانب الأيسر من صفحاتك ومنشوراتك. لون خلفية العنوان شفاف تمامًا ، مما يسمح بعرض محتوى الصفحة / المنشور. 

لقد تأكدنا من أن العنوان العام يظل ثابتًا على الجانب الأيسر أثناء التمرير ، كما جعلنا القائمة نسخة متوافقة مع الجوّال. 

في هذا البرنامج التعليمي ، سنوضح لك كيفية إعادة إنشاء التصميم من البداية!

دعونا نذهب.

مسح

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة التي نريد تحقيقها.

رأس عالمي جانبي مع Divi

انتقل إلى منشئ سمات Divi وابدأ في إنشاء رأس عالمي

من لوحة تحكم WordPress ، انتقل إلى ديفي> باني الموضوع

انقر "إضافة رأس عام"

اختر "إنشاء رأس عام".

ابدأ في إنشاء رأس الجانب العام

إضافة قسم جديد

لون الخلفية

بمجرد الدخول إلى محرر النماذج ، يمكنك فتح القسم الموجود بالفعل وتغيير لون الخلفية على أحجام الشاشات المختلفة.

  • لون الخلفية: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX) (سطح المكتب) ، #FFFFFF (الجهاز اللوحي والهاتف)

التحجيم

انتقل إلى علامة التبويب تصميم، اسحب الخيار التحجيم ثم قم بتغيير معلمات تحجيم القسم.

  • العرض: 5vw (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)
  • الحد الأدنى للارتفاع: 100 vw (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)

مباعدة

ثم اسحب خيار التباعد وقم بتغيير الإعدادات على النحو التالي:

  • الحشو (العلوي والسفلي): 2vw

صندوق الظل

ثم اذهب الى مربع الظل وإضافة ظل مربع مخصص على أحجام الشاشات المختلفة.

  • مربع الظل الأفقي: 32 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
  • مربع قوة طمس الظل: 49 بكسل
  • قوة الانتشار: 0 بكسل (سطح المكتب) ، 19 بكسل (الجهاز اللوحي والهاتف)
  • لون الظل: rgba (0,0,0,0.12،XNUMX،XNUMX،XNUMX)

إضافة CSS مخصص

سنتأكد أيضًا من أن رأس الجانب العام يظل ثابتًا على الجانب الأيسر عن طريق إضافة بضعة أسطر من كود CSS إلى عنصر القسم الرئيسي.

position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;

عند التمرير فوق القسم

تأكد أيضًا من إضافة هذه الأسطر من كود CSS إلى العنصر الرئيسي عند المرور فوق القسم.

position: fixed;
top: 0;

الرؤية الافتراضية

ثم قم بزيادة مؤشر z في معلمات الموضع.

  • الفهرس Z: 99999

تحوم الرؤية

تأكد من تطبيق نفس القيمة عند التمرير.

  • الفهرس Z: 99999

أضف سطرًا جديدًا

هيكل العمود

بمجرد الانتهاء من إعدادات القسم ، تابع بإضافة صف جديد باستخدام بنية العمود التالية:

التحجيم

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الخط وقم بتغيير إعدادات التحجيم.

  • استخدام عرض مزراب مخصص: نعم
  • عرض الحضيض: 1

مباعدة

قم أيضًا بإزالة جميع الهوامش الافتراضية.

  • المساحة المتروكة (أعلى وأسفل): 0 بكسل

معلمات العمود

تمت إضافة CSS مخصص (الجهاز اللوحي والهاتف)

على الجهاز اللوحي والهاتف ، نختار شاشة مختلفة تمامًا. سنضع ثلاث وحدات مختلفة بجانب بعضها البعض. للقيام بذلك ، سنحتاج إلى إضافة بعض أكواد CSS. 

افتح إعدادات العمود ، وانتقل إلى علامة التبويب متقدم وأدخل الأسطر التالية من كود CSS في الفراغ العنصر الرئيسي للجهاز اللوحي والهاتف:

display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;

أضف وحدة صورة إلى العمود

تنزيل الشعار

حان الوقت لبدء إضافة الوحدات! الوحدة الأولى التي نحتاجها هي وحدة صورة. قم بتحميل ملف صورة شعار شبه شفاف من اختيارك.

التحجيم

ثم انتقل إلى علامة التبويب تصميم وتغيير العرض على أحجام الشاشات المختلفة.

  • العرض: 4 vw (Desktop) ، 12 vw (Tablet) ، 16 vw (Phone)

مقياس التحول

قم بزيادة حجم الوحدة عن طريق تغيير إعدادات مقياس التحويل بعد ذلك.

  • يمينًا: 170٪ (كمبيوتر مكتبي) ، 100٪ (جهاز لوحي وهاتف)
  • منخفضة: 170٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)

"ترجم"

وادفع الوحدة إلى اليمين عن طريق تعديل المعلمات التالية

  • الجزء السفلي: 1vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

أضف وحدة قائمة إلى العمود

حدد القائمة لإضافتها

الوحدة التالية التي نحتاجها هي وحدة القائمة. حدد قائمة من اختيارك.

قم بإزالة لون الخلفية

ثم قم بإزالة لون الخلفية من الوحدة.

توفير

ثم انتقل إلى علامة التبويب تصميم وتغيير إعدادات التخطيط.

  • النمط: توسيط
  • اتجاه القائمة المنسدلة: لأسفل

إعدادات نص القائمة

قم أيضًا بتغيير إعدادات نص القائمة.

  • لون الارتباط النشط: #cecece
  • خط القائمة: مونتسيرات
  • وزن خط القائمة: غامق
  • لون النص: # 000000
  • حجم نص القائمة: 0,9 vw (سطح المكتب) ، 2 vw (جهاز لوحي) ، 2,5 vw (هاتف)

نص القائمة عند التمرير

قم بتغيير لون نص القائمة عند التمرير.

  • لون نص القائمة: # عفافاف

قائمة منسدلة

نحن أيضًا نجري بعض التغييرات على إعدادات القائمة المنسدلة.

  • لون خط القائمة المنسدلة: 000000 #
  • لون نص القائمة المنسدلة: # 000000

الرموز

ثم قم بتغيير لون رمز قائمة الهامبرغر.

  • لون أيقونة قائمة همبرغر: # 000000

مباعدة

وإضافة قيم هامش مخصصة على أحجام الشاشات المختلفة.

  • الهامش (أعلى وأسفل): 18 vw (سطح المكتب) ، 0 vw (كمبيوتر لوحي وهاتف)
  • الهامش (يسار ويمين): -13vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

تحويل الدوران

الآن ، لإنشاء تأثير الدوران ، سنلعب بقيم دوران تحويل الوحدة.

  • اليسار: 270 درجة (سطح المكتب) ، 0 درجة (الكمبيوتر اللوحي والهاتف)

أضف وحدة "متابعة الوسائط الاجتماعية" إلى العمود

إضافة الشبكات الاجتماعية

دعنا ننتقل إلى وحدة "متابعة الوسائط الاجتماعية" ، وهي الوحدة التالية والأخيرة التي نحتاجها لإكمال العنوان المحوري العالمي. أضف بعض الشبكات الاجتماعية من اختيارك.

إعادة تعيين أنماط أيقونات الوسائط الاجتماعية

تابع عن طريق إعادة ضبط الإعدادات لكل شبكة اجتماعية على حدة. سيساعدنا هذا في التخلص من لون الخلفية.

انحياز

ثم انتقل إلى علامة التبويب تصميم من الوحدة وتغيير محاذاة الوحدة على أحجام الشاشة المختلفة.

  • وحدة المحاذاة: يسار (سطح المكتب) ، يمين (كمبيوتر لوحي وهاتف)

إعدادات الرمز

أخيرًا ، قم بتغيير إعدادات الرمز أيضًا.

  • لون الأيقونة: # 000000
  • استخدام حجم رمز مخصص: نعم
  • حجم خط الأيقونة: 2,1 vw

حفظ التغييرات المنشئ وعرض النتيجة

بمجرد الانتهاء من جميع الوحدات ، يمكنك حفظ القالب ، والخروج من Divi theme builder ، وعرض النتيجة على موقع الويب الخاص بك!

مسح

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة.

مكتب

رأس عالمي جانبي مع Divi

تحميل DIVI الآن !!!

في الختام

في هذه المقالة ، أوضحنا لك كيفية إنشاء رأس عام مستدير. ما لم تختر خلاف ذلك ، سيظهر العنوان العام الذي أنشأناه في جميع منشوراتك وصفحاتك.

إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.

انظر أيضا مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...

Divi: كيفية إنشاء قسم "متابعة الوسائط الاجتماعية" مثبت

Divi: كيفية إنشاء قسم "متابعة الوسائط الاجتماعية" مثبت

هل تريد أن تجعل أيقونات الوسائط الاجتماعية الخاصة بك مثبتة مع Divi؟

من خلال خيارات Divi المدمجة ، يمكنك بسهولة تصميم وحدة "متابعة الوسائط الاجتماعية" اللاصقة التي ستحافظ على أيقونات الوسائط الاجتماعية هذه في المقدمة والوسط بينما يقوم المستخدم بالتمرير لأسفل الصفحة. 

بالإضافة إلى ذلك ، من خلال إضافة نمط مخصص إلى الوحدة النمطية في الحالة اللاصقة ، يمكننا إنشاء انتقالات تصميم فريدة عند التبديل إلى الحالة اللاصقة أثناء التمرير. 

لذا ، إذا كنت تبحث عن تحكم كامل في تصميم زر الوسائط الاجتماعية ، فهذا البرنامج التعليمي يناسبك!

مسح

فيما يلي نظرة عامة مختصرة على النتيجة التي سنحصل عليها في هذا البرنامج التعليمي.

الشبكات الاجتماعية اللاصقة مع Divi

قم بإنشاء صفحة جديدة باستخدام "Divi Builder"

من لوحة تحكم WordPress ، انتقل إلى "صفحات> إضافة جديد"

أعطه عنوانًا منطقيًا لك ثم انقر فوق "استخدم DiviBuilder"

في هذا البرنامج التعليمي ، سنستخدم تخطيطًا محددًا مسبقًا. للقيام بذلك ، انقر فوق "تصفح التنسيقات"

ابحث عن التخطيط وحدده "مصمم أزياء"

اختر التخطيط "هبوط" ثم انقر فوق "استخدم هذا التخطيط"

تصميم وحدة "متابعة الوسائط الاجتماعية" في Divi

انشاء القسم

أضف قسمًا عاديًا جديدًا إلى التخطيط.

ثم انقل القسم الجديد إلى أعلى الصفحة (أو في أي مكان تريد إضافة روابط متابعة الوسائط الاجتماعية الخاصة بك).

افتح إعدادات القسم وقم بتحديث لون الخلفية لمطابقة التخطيط كما يلي:

  • لون الخلفية: # fff9f2

تحت علامة التبويب تصميم، قم بتوسيع خيار التباعد وتعديل المعلمات التالية:

  • المساحة المتروكة (أعلى وأسفل): 10 بكسل

إنشاء الخط

داخل القسم ، أضف صفًا إلى عمود.

افتح إعدادات الخط ، واسحب خيار التباعد وقم بتغيير الإعدادات على النحو التالي:

  • استخدام عرض مزراب مخصص: نعم
  • عرض الحضيض: 1
  • العرض: 100٪
  • العرض الأقصى: 100٪

استمر بالتمرير لأسفل الخيار التباعد

  • المساحة المتروكة (أعلى وأسفل): 0 بكسل

إنشاء وحدة "متابعة وسائل التواصل الاجتماعي" اللاصقة

بمجرد وضع القسم والخط في مكانهما ، أضف وحدة نمطية جديدة "متابعة وسائل التواصل الاجتماعي" على الخط.

تحديث إعدادات الوحدة

افتح إعدادات وحدة "متابعة الوسائط الاجتماعية". 

أول شيء يتعين علينا القيام به هو إضافة موضع ثابت إلى الوحدة. 

تحت علامة التبويب متقدم، اسحب الخيار تأثيرات التمرير وتحديث ما يلي:

  • موقف مثبت: التمسك بالأعلى

بمجرد أن يكون الموضع في الحالة اللاصقة ، ستتمكن من استهداف نمط الوحدة في الحالة اللاصقة (مثلما يمكنك في حالة التمرير). يمكن القيام بذلك عن طريق التمرير فوق أحد الخيارات والنقر فوق رمز الدبوس.

تحت علامة التبويب تصميم، قم بتحديث ما يلي:

  • وحدة المحاذاة: المركز
  • لون الرمز: # 000000 (سطح المكتب) ، #ffffff (تحوم) ، #ffffff (مثبت)
  • العرض: 100٪
  • العرض الأقصى: 100٪
  • المساحة المتروكة: 20 بكسل (أعلى) ، 12 بكسل (أسفل) ، 10 بكسل (يسار ويمين)

إعدادات الوسائط الاجتماعية

بمجرد أن تصبح إعدادات الوحدة جاهزة ، يمكننا الآن تحويل انتباهنا إلى تصميم أيقونات الوسائط الاجتماعية الفردية. 

للقيام بذلك ، سنخصص أولاً رمز شبكة اجتماعية. ثم سنكرر الشبكة الاجتماعية لإنشاء الشبكات الأخرى.

يجب أن يكون لديك بالفعل شبكتان اجتماعيتان ضمن علامة تبويب المحتوى الافتراضية. احذف واحدة وانقر لتعديل المتبقي.

بمجرد الدخول إلى إعدادات الشبكة الاجتماعية ، حدد شبكة اجتماعية وقم بتحديث ألوان الخلفية لسطح المكتب وحالة الماوس والحالة الثابتة.

  • الشبكة الاجتماعية: TikTok (أو أيا كان)
  • الخلفية: شفافة (سطح المكتب) ، # fe2c55 (تحوم) ، # 000000 (مثبت)

حيلة : سيتغير لون الخلفية تلقائيًا ليلائم علامة الوسائط الاجتماعية. يمكنك نسخ هذا اللون وإضافته كلون خلفية حالة التمرير للرمز. سيعرض هذا لون الخلفية الافتراضي للشبكة الاجتماعية عندما تحوم فوق الرمز.

يمكنك الآن التبديل بين علامات التبويب لرؤية لون الخلفية لجميع الحالات الثلاث (سطح المكتب ، وتحوم ، ولصق).

بعد ذلك ، دعنا نمنح الرمز شكلًا بيضاويًا لطيفًا وحدودًا تلائم التخطيط بشكل أفضل. تحت علامة التبويب تصميم، قم بتحديث ما يلي:

  • زوايا دائرية: 50٪
  • عرض الحدود: 1 بكسل
  • لون الحد: # 000000 (سطح المكتب) ، شفاف (تحوم)

حاليًا ، يحتوي الرمز على شكل دائرة. للحصول على شكل بيضاوي أكثر ، سنقوم بتغيير إعدادات التباعد على النحو التالي:

  • الهامش (يسار ويمين): 15 بكسل (سطح المكتب) ، 0 بكسل (مثبت) ، 0 بكسل (الهاتف)
  • الحشو (يسار ويمين): 16 بكسل (سطح المكتب) ، 14 بكسل (كمبيوتر لوحي) ، 0 بكسل (هاتف)

شبكة اجتماعية مكررة

الآن وقد انتهينا من تصميم أول شبكة اجتماعية ، يمكننا تكرار الرمز لإنشاء شبكات أخرى. 

للقيام بذلك ، افتح إعدادات الوحدة وسائل الاعلام الاجتماعية وانقر فوق الرمز المكرر. في هذا المثال ، لنقم بإنشاء 4 أخرى.

الآن كل ما يتعين علينا القيام به هو تحديث كل شبكة من الشبكات الاجتماعية الجديدة. نظرًا لأن هذا سيؤدي إلى تغيير لون الخلفية ، فستحتاج أيضًا إلى تحديث لون الخلفية لكل منها.

للقيام بذلك ، افتح إعدادات الشبكة الاجتماعية الثانية وقم بتحديث ما يلي:

  • الشبكة الاجتماعية: Facebook
  • الخلفية: شفافة (سطح المكتب) ، # 3b5998 (تحوم)

استمر في نفس العملية لتحديث بقية الشبكات الاجتماعية.

نتيجة نهائية

الآن دعنا نرى النتيجة التي تم الحصول عليها على أحجام الشاشات المختلفة.

الشبكات الاجتماعية اللاصقة مع Divi

تحميل DIVI Now !!!

الشبكات الاجتماعية اللاصقة مع Divi
الشبكات الاجتماعية اللاصقة مع Divi

تحميل DIVI Now !!!

في الختام

تعد أزرار الوسائط الاجتماعية دائمًا ميزة أساسية على موقع الويب. إنها إحدى الطرق الأساسية لربط قنوات التواصل الاجتماعي بموقع ويب. هذا هو السبب في الوحدة "متابعة وسائل التواصل الاجتماعي" يحتوي Divi على جميع أيقونات الشبكة وخيارات التصميم التي تحتاجها لإنشاء الحل الأمثل لموقعك. 

نأمل أن يكون هذا البرنامج التعليمي مفيدًا لك في مشاريع Divi التالية. إذا كنت تريد معرفة المزيد عن Divi ، فلا تتردد في زيارة الكتالوج الخاص بنا دروس ديفي. يمكنك أيضا استشارة كيفية إنشاء صفحة المدونة باستخدام وحدة Divi Blog 

إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.

ومع ذلك ، يمكنك أيضا استشارة مواردناإذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك لإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

لكن في غضون ذلكشارك هذا المقال على الشبكات الاجتماعية المختلفة.

...

Divi: كيفية إنشاء جهاز لوحي بمحتوى دعابة قابل للتمرير

Divi: كيفية إنشاء جهاز لوحي بمحتوى دعابة قابل للتمرير

هل ترغب في إضافة محتوى دعابة إلى جهاز لوحي قابل للتمرير على Divi؟

يمكن أن تكون إضافة محتوى تشويقي إلى موقع الويب الخاص بك استراتيجية تسويقية فعالة. إنه يعمل بشكل جيد بشكل خاص للترويج لأشياء مثل الكتب الإلكترونية. أنت تمنحهم معاينة للمحتوى حتى يريدون المزيد. 

في البرنامج التعليمي اليوم ، سنوضح لك كيفية عرض محتوى دعابة في جهاز لوحي منسدل في Divi. 

للقيام بذلك ، سوف نستفيد من خيارات Divi المضمنة لتحويل عمود إلى حاوية قائمة منسدلة (مصممة لتبدو وكأنها جهاز لوحي) يمكن أن تتضمن أي نوع من المحتوى الذي تريده. 

يمكنك استخدامه للترويج للفصول الأولى من أي كتاب إلكتروني ، أو عرض نماذج للتصاميم من محفظتك ، أو أي نوع آخر من المحتوى.

دعونا نبدأ!

مسح

إليك نظرة سريعة على الجهاز اللوحي الذي يحتوي على محتوى قابل للتمرير سننشئه في هذا البرنامج التعليمي.

قم بإنشاء صفحة جديدة باستخدام Divi Builder

في لوحة معلومات WordPress ، انتقل إلى "صفحات> إضافة جديد"

أعط عنوانًا منطقيًا بالنسبة لك ، ثم انقر فوق "استخدم DiviBuilder"

ثم انقر فوق "بدء البناء"

تصميم الجهاز اللوحي مع محتوى دعابة قابل للتمرير في Divi

إنشاء حاوية الجهاز اللوحي المنسدلة بعمود Divi

أضف صف

للبدء ، قم بإنشاء صف من عمودين بقسم عادي.

إعدادات العمود 1

لون الخلفية

افتح إعدادات العمود 1 وأضف خلفية بيضاء إلى العمود.

  • الخلفية: #ffffff
الحدود والهامش

انتقل إلى علامة التبويب تصميم خيار القائمة المنسدلة التباعد وقم بتغيير الإعدادات كما يلي:

  • المساحة المتروكة (أعلى ، أسفل ، يسار ويمين): 25 بكسل (أعلى ، أسفل ، يسار ، يمين)

ثم اسحب الخيار الحدود وقم بتغيير الإعدادات وفقًا لذلك:

  • الزوايا الدائرية: 20 بكسل
  • عرض الحدود: 30 بكسل
  • لون الحدود: # 000000
صندوق الظل

لإضفاء بعض العمق على تصميم الجهاز اللوحي ، اسحب الخيار لأسفل مربع الظل وأضف ظل الصندوق التالي:

  • Box Shadow: انظر لقطة الشاشة
  • مربع الظل (أفقي ورأسي) الوضع: 5 بكسل
  • لون الظل: # 555555
ارتفاع وعرض العمود المخصصين باستخدام CSS

المفتاح لجعل محتوى العمود قابل للتمرير هو إعطائه ارتفاعًا محددًا. سيؤدي هذا إلى تجاوز المحتوى لارتفاع العمود. 

نريد أيضًا أن تظل نسبة العرض إلى الارتفاع للكمبيوتر اللوحي متسقة ، لذلك من الجيد إعطاء العمود أقصى عرض أيضًا. 

لمنح العمود ارتفاعًا وعرضًا مخصصين ، انتقل إلى علامة التبويب متقدم وتحديث ما يلي:

سو CSS مخصصة، أضف CSS التالي لشاشة سطح المكتب (العنصر الرئيسي):

height:650px;
max-width: 488px;

ثم قم بتنشيط علامة التبويب للعرض الآخر والصق CSS المخصص التالي لعرض الهاتف للعنصر الرئيسي:

max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;
الفائض العمودي: التمرير

كما ذكرنا سابقًا ، يحتوي العمود الآن على ارتفاع محدد سيؤدي حتمًا إلى تجاوز محتويات العمود رأسيًا.

لضمان إمكانية عرض المحتوى الفائض عن طريق التمرير لأسفل العمود ، اضبط خيار تجاوز الرؤية الرأسية على "التمرير". للقيام بذلك ، قم بتوسيع الخيار وضوح التبويب متقدم

  • تجاوز عمودي: التمرير

أضف محتوى الجملة المحفزة إلى عمود القائمة المنسدلة

في هذه المرحلة ، يكون العمود (أو الرف) جاهزًا للمحتوى. يمكنك استخدام أي وحدة 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.

ثم قم بتحميل نفس الصورة المستخدمة في الخلفية الدعائية.

محتويات معاينة النص

سيكون آخر جزء من المحتوى التشويقي هو النص الذي سيتضمن بعض الفصول الخيالية من كتابنا الإلكتروني. لإضافة النص ، أضف وحدة نصية جديدة أسفل الصورة السابقة.

قرص Divi مع محتوى التمرير لألعاب التشويش

ثم الصق كود 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٪ (علوي وسفلي)

بعض اللمسات الأخيرة

تحديث معلمات الخط

مع وجود المحتوى في مكانه الصحيح ، نحتاج إلى إجراء بعض التعديلات على الصف لجعل التصميم أكثر استجابة. افتح إعدادات الخط وقم بتحديث ما يلي:

  • العرض: 100٪ (سطح المكتب) ، 90٪ (الجهاز اللوحي والهاتف)
  • العرض الأقصى: 1 بكسل (سطح المكتب) ، 080 بكسل (الجهاز اللوحي والهاتف)

أضف محتوى إضافيًا إلى العمود 2

في هذه المرحلة ، يمكننا إضافة محتوى إضافي إلى العمود 2 إذا لزم الأمر. في هذا المثال ، أضفنا وحدة نصية ووحدة زر وقمنا بتخصيصهما على غرار التصميم الموضح في حزمة تخطيط الكتاب الإلكتروني الخاصة بنا.

تحميل DIVI Now !!!

نتيجة نهائية

الآن دعونا نرى النتيجة النهائية.

تحقق من محتوى القائمة المنسدلة المتاح داخل الكمبيوتر اللوحي المحمول.

قرص قابل للتمرير على Divi

وهذه هي الطريقة التي يتراكم بها التصميم على شاشة الجهاز اللوحي والهاتف.

قرص قابل للتمرير على Divi
قرص قابل للتمرير على Divi

في الختام

ربما يكون أفضل شيء في تصميم الجهاز اللوحي القابل للتمرير هو تعدد استخداماته. نظرًا لأن الجهاز اللوحي هو في الأساس عمود Divi ، يمكنك استخدام أي عدد من وحدات Divi (نص ، صورة ، زر) لتصميم المحتوى الذي تريد تقديمه. 

نأمل أن يكون هذا مفيدًا في المرة القادمة التي تحتاج فيها إلى عرض محتوى تشويقي على موقع الويب الخاص بك.

إذا كنت تريد معرفة المزيد عن Divi ، فلا تتردد في زيارة الكتالوج الخاص بنا دروس ديفي. يمكنك أيضا استشارة كيفية إنشاء صفحة المدونة باستخدام وحدة Divi Blog 

إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.

ومع ذلك ، يمكنك أيضا استشارة مواردناإذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك لإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

لكن في غضون ذلكشارك هذا المقال على الشبكات الاجتماعية المختلفة.

...