إنشاء "ملاحظات لاصقة" بمحتوى قابل للتوسيع باستخدام Divi

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

دعنا نذهب اليها!

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط الملاحظات اللاصقة مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

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

لنبدأ في إعادة التكوين!

اشترك في قناتنا على اليوتيوب

أضف قسمًا عاديًا جديدًا

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

أضف صفًا جديدًا

هيكل العمود

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

مدة الانتقال

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف. نقوم بإنشاء انتقال فوري من خلال تغيير مدة الانتقال في علامة التبويب "خيارات متقدمة".

• مدة الانتقال: 0 مللي ثانية

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

إضافة محتوى

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

لون الخلفية

بعد ذلك ، انتقل إلى إعدادات الخلفية وقم بتغيير لون الخلفية وفقًا لذلك:

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

إعدادات نص H2

انتقل إلى إعدادات نص H2 وقم بإجراء بعض التغييرات هناك أيضًا:

• خط العنوان 2: زهرة مستقلة
• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: # 3a0cf2
• حجم نص العنوان 2: 40 بكسل

تباعد

لإنشاء الشكل والمظهر للملاحظة اللاصقة ، سنضيف بعض قيم الحشو المخصصة إلى الوحدة النمطية:

• الحشوة العلوية: 150 بكسل
• الحشو السفلي: 150 بكسل
• الحشو الأيسر: 20 بكسل
• الحشوة اليمنى: 20 بكسل

الحدود

نضيف أيضًا حدًا علويًا باستخدام الإعدادات التالية:

• عرض الحد العلوي: 20 بكسل
• لون الحد العلوي: # ffc300

أضف وحدة Divider Module إلى العمود 1

الرؤية

الوحدة التالية التي نحتاجها في العمود الأول هي Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

اللون

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير لون الفاصل.

• اللون: # ffc300

الأنماط

قم بتعديل إعدادات الأنماط للمقسم أيضًا.

• نمط المقسم: متقطع

تحجيم

وتغيير إعدادات التحجيم أيضًا.

• وزن الحاجز: 5 بكسل
• الارتفاع: 0 بكسل

تباعد

لإنشاء بعض المسافة بين الوحدة السابقة وهذه الوحدة ، نضيف بعض الهامش العلوي.

• الهامش الأعلى: 150 بكسل

استدارة التحويل

كما تلاحظ في معاينة هذا المنشور ، فإننا نتطلع إلى إنشاء حاجز رأسي بدلاً من حاجز أفقي. لتحقيق ذلك ، سنقوم بتغيير القيمة اليسرى في إعدادات تدوير التحويل لوحدة Divider:

• اليسار: 270 درجة

الرؤية

نريد أيضًا التأكد من ظهور وحدة Divider أسفل وحدة النص. للقيام بذلك ، سنقوم بتقليل الفهرس z للمقسم في علامة التبويب المتقدمة.

• الفهرس Z: -99

أضف وحدة النص رقم 2 إلى العمود 1

أضف رمزًا إلى Content Box

الوحدة التالية والأخيرة التي نحتاجها في العمود الأول هي وحدة نصية أخرى. أضف حرف "●" إلى مربع المحتوى.

إعدادات النص

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص.

• خط النص: Open Sans
• لون النص: # 3a0cf2
• حجم النص: 100 بكسل
• ارتفاع خط النص: 1em
• اتجاه النص: الوسط

تباعد

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

• الهامش الأعلى: -50 بكسل

أضف وحدة النص رقم 3 إلى العمود 2

أضف محتوى H3

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

إعدادات نص H3

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات نص H3 وفقًا لذلك:

• خط العنوان 3: زهرة مستقلة
• لون نص العنوان 3: # 3a0cf2
• حجم نص العنوان 3: 30 بكسل

تباعد

أضف بعض الهامش العلوي المخصص بعد ذلك:

• الهامش العلوي: 400 بكسل (سطح المكتب) ، 200 بكسل (جهاز لوحي) ، 150 بكسل (هاتف)

أضف وحدة النص رقم 4 إلى العمود 2

إضافة محتوى

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

إعدادات النص

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص.

• خط النص: Open Sans
• حجم النص: 13 بكسل
• ارتفاع خط النص: 2em

تحجيم

قم بتعديل عرض الوحدة بعد ذلك.

• العرض: 78٪

تباعد

وأضف بعض الهامش العلوي والسفلي.

• الهامش العلوي: 10 بكسل
• الهامش السفلي: 50 بكسل

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

أضف نسخة

آخر وحدة نحتاجها في العمود الثاني هي وحدة الأزرار. أدخل نسخة من اختيارك.

إعدادات الزر

بعد ذلك ، انتقل إلى علامة تبويب التصميم وحدد نمط الزر.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 20 بكسل
• لون نص الزر: # 3a0cf2
• لون خلفية الزر: # ffd800
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• خط الزر: أبها ليبر

تباعد

أضف بعض قيم المساحة المتروكة المخصصة أيضًا.

• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل
• الحشوة اليسرى: 60 بكسل
• الحشوة اليمنى: 60 بكسل

صف استنساخ مرتين

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

تعديل الصف المكرر رقم 1

تغيير لون الخلفية وحدة النص # 1

نحن بصدد تغيير لوحة الألوان لكلتا النسختين ، بدءًا من الأولى. افتح وحدة النص الأولى في العمود 1 وقم بتغيير لون الخلفية.

• لون الخلفية: # 00ffee

تغيير وحدة النص رقم 1 أعلى لون الحدود

قم بتعديل لون الحد العلوي أيضًا.

• لون الحد العلوي: # 00e0c2

تغيير لون الحاجز

ثم استخدم رمز اللون التالي للمقسم:

• لون المقسم: # 00e0c2

تغيير لون خلفية وحدة الزر

وتغيير لون خلفية الزر.

• لون خلفية الزر: # 00ffee

تعديل الصف المكرر رقم 2

تغيير لون الخلفية وحدة النص # 1

انتقل إلى الصف المكرر الثاني ، وافتح وحدة النص الأولى في العمود 1 وقم بتغيير لون الخلفية.

• لون الخلفية: # 42ff21

تغيير وحدة النص رقم 1 أعلى لون الحد

قم بتعديل لون الحد العلوي أيضًا.

• لون الحد العلوي: # 1de524

تغيير لون الحاجز

ثم افتح Divider Module واستخدم لون الحاجز التالي:

• لون الفاصل: # 1de524

تغيير لون خلفية وحدة الزر

وأخيرًا وليس آخرًا ، قم بتغيير لون خلفية الزر:

• لون خلفية الزر: # 42ff21

إنشاء محتوى قابل للتوسيع

إضافة حجم الصف الافتراضي لجميع الصفوف

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

• أقصى ارتفاع: 397 بكسل

أضف تحويم الصفوف لجميع الصفوف

قم بتعديل الحد الأقصى للارتفاع عند التمرير إلى "100٪". سيسمح هذا للصف بأخذ حجمه الأولي مرة أخرى.

• إرتفاع max: 100٪

تغيير الفائض لجميع الصفوف

تأكد من إخفاء الفائض لكل صف من الصفوف أيضًا ، وقد انتهيت!

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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