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

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

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

معاينة

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

سطح المكتب

لوح

هاتف

سطح المكتب

لوح

متحرك

قم بتنزيل قوالب وحدة التعليقات مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لنقم بإعادة إنشاء تصميم وحدة التعليقات رقم 1

إنشاء تصميم الخلفية

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

1. في Adobe Illustrator ، قم بإنشاء لوح رسم فارغ يبلغ ارتفاعه حوالي 1920 بكسل + عرض 670 بكسل.
2. قم بإنشاء دائرة سوداء داخل مربع أبيض بهوامش نصف حجم الدائرة تقريبًا.
3. حدد كلا الشكلين وقم بعمل نمط من خلال النقر على كائن> نمط> صنع.
4. في صانع النماذج ، اختر "لبنة بعمود" واحفظها كحامل نمط.
5. قم بإنشاء شكل بحجم لوح الرسم وقم بتطبيق النمط.
6. بالنسبة لأحجام الشاشة سريعة الاستجابة ، قم بتقليص الشكل إلى نصف حجمه. اضغط على shift للحفاظ على نسبة الدوائر.
7. انسخ والصق الشكل المنقوش بجوار الأول والآن لديك نفس النمط مع دوائر أصغر.
8. قم بتنزيل كلاهما بشكل منفصل.

افتح مُنشئ القوالب وأضف قالبًا جديدًا

حان الوقت الآن لفتح أداة إنشاء السمات. أضف قالبًا جديدًا.

حدد القالب لجميع المنشورات

استخدم القالب الجديد في جميع المنشورات.

إضافة جسم مخصص وبناء من الصفر

أخيرًا وليس آخرًا ، ابدأ في بناء الجسم المخصص للقالب.

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

خلفية

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

• الخلفية: التدرج
• اللون 1: أبيض شبه شفاف rgba (255،255،255،0.96)
• اللون 2: أبيض #ffffff
• وضع التدرج فوق صورة الخلفية: نعم
• صورة:
  • سطح المكتب: صورة نمط النقاط 1
  • الجهاز اللوحي والهاتف: صورة نمط النقاط 2

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

هيكل العمود

الآن ، أضف صفًا جديدًا بعمودين.

تحجيم

ثم اضبط حجم الصف.

• عرض مزراب مخصص: 2
• العرض: 80٪
• العرض الأقصى: 100٪

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

الحدود

في إعدادات الأعمدة ، أضف حدًا علويًا إلى العمود الثاني.

• النمط: الجزء العلوي فقط
• العرض: 3 بكسل
• اللون: أسود #ffffff

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

المحتوى

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

• النص: فقرة

نص العنوان

بعد ذلك ، في علامة تبويب التصميم ، حدد نمط نص العنوان.

• مستوى العنوان: H3
• الخط: GFS Didot
• اللون: أسود # 000000
• مقاس:
  • سطح المكتب: 5vw
  • الجهاز اللوحي: 9vw
  • هاتف: 13vw

تباعد

أيضا ، اضبط التباعد.

• حشوة سفلية
  • سطح المكتب: 3vw
  • الجهاز اللوحي والهاتف: 7vw

أضف وحدة الشهادة إلى العمود 1

المحتوى

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

• المؤلف: القارئ المخلص
• المسمى الوظيفي: مسؤول تسويق المحتوى
• الشركة: شركة تايجر ميديا
• النص الأساسي: نص فقرة
• الصورة: صورة شخصية

خلفية

تأكد من أن الخلفية شفافة

• لون الخلفية: شفاف

عناصر

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

• إظهار رمز الاقتباس: نعم

رمز الاقتباس

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

• اللون: أسود # 000000
• الخلفية: أبيض #ffffff
• حجم خط الرمز:
  • سطح المكتب: 2vw
  • الجهاز اللوحي: 5vw
  • الهاتف: 9vw

صورة

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

• العرض والارتفاع:
  • سطح المكتب: 110 بكسل
  • الجهاز اللوحي والهاتف: 90 بكسل
• الزوايا الدائرية: 90 بكسل
• لون الحدود: شفاف

نص

قم بتغيير محاذاة النص أيضًا.

• المحاذاة: المركز

نص أساسي

ثم ، نمط النص الأساسي.

• الخط: Verdana
• لون أسود
• مقاس:
  • سطح المكتب: 0.7vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 3vw

نص المؤلف

تواصل عن طريق تصميم نص المؤلف.

• الخط: GFS Didot
• الوزن: جريء
• اللون: أسود #ffffff
• مقاس:
  • سطح المكتب: 1.2vw
  • الجهاز اللوحي: 2.5vw
  • الهاتف: 4vw
• تباعد الأحرف: 1 بكسل

نص المركز

ثم نص الموضع.

• الخط: GFS Didot
• اللون: أسود #ffffff
• مقاس:
  • سطح المكتب: 0.9vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 3vw
• ارتفاع الخط: 2em

نص الشركة

أيضا ، نص الشركة.

• الخط: GFS Didot
• اللون: أسود #ffffff
• مقاس:
  • سطح المكتب: 0.7vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 3vw
• ارتفاع الخط: 2em

تحجيم

تابع عن طريق ضبط حجم الوحدة.

• عرض:
  • سطح المكتب: 60٪
  • الجهاز اللوحي: 65٪
  • الهاتف: 75٪
• محاذاة الوحدة: المركز

تباعد

أيضا ، اضبط التباعد.

• الحشوة العلوية:
  • سطح المكتب: 1.5vw
  • الجهاز اللوحي: 5vw
  • الهاتف: 6vw

الحدود

أخيرًا ، أضف حدًا علويًا إلى الوحدة النمطية.

• أنماط الحدود: الجزء العلوي فقط
• العرض: 2 بكسل
• اللون: أسود #ffffff

إضافة وحدة التعليقات إلى العمود 2

عناصر

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

• إظهار الصورة الرمزية للمؤلف: لا
• إظهار زر الرد: نعم
• إظهار عدد التعليقات:

مجالات

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

• لون النص: أسود #oooooo
• لون الخلفية: رمادي باهت # f7f7f7
• لون نص التركيز: أسود #oooooo
• لون خلفية التركيز: رمادي باهت # f7f7f7
• الخط: GFS Didot
• حجم الخط:
  • سطح المكتب: 0.9vw
  • الجهاز اللوحي: 1.5vw
  • هاتف: 2.5vw
• تباعد الأحرف: 1 بكسل

نص عنوان النموذج

قم بتعديل إعدادات نص عنوان النموذج بعد ذلك.

• الخط: GFS Didot
• اللون: أسود #ffffff
• مقاس:
  • سطح المكتب: 0.9vw
  • الجهاز اللوحي: 2.5vw
  • الخط: 3.5vw

نص ميتا

تواصل عن طريق تصميم نص التعريف.

• الخط: GFS Didot
• اللون: أسود #ffffff
• مقاس:
  • سطح المكتب: 1.3vw
  • الجهاز اللوحي: 3vw
  • الهاتف: 4vw

نص التعليق

أيضا ، نص التعليق.

• الخط: Verdana
• اللون: أسود #ffffff
• مقاس:
  • سطح المكتب: 0.7vw
  • الجهاز اللوحي: 1.7vw
  • الهاتف: 2.7vw
• تباعد الأحرف: 1 بكسل
• ارتفاع الخط: 1.8em

زر

الانتقال إلى نمط الأزرار.

• حجم الخط:
  • سطح المكتب: 0.9vw
  • الجهاز اللوحي: 2.5vw
  • الهاتف: 3.5vw
• لون النص: أبيض # 000000
• الخلفية: أسود #ffffff
• تباعد الأحرف: 1 بكسل
• الخط: GFS Didot

تحجيم

بعد ذلك ، اضبط إعدادات تغيير حجم الوحدة.

• العرض: 90٪
• محاذاة الوحدة: المركز

تباعد

أخيرًا ، التباعد أيضًا.

• الحشوة العلوية:
  • سطح المكتب: 4vw
  • الجهاز اللوحي والهاتف: 8vw
• الحشوة اليسرى واليمنى: 3vw

لنقم بإعادة إنشاء تصميم وحدة التعليقات رقم 2

إنشاء تصميم الخلفية

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

1. قم بإنشاء لوحة قماشية بعرض 1800 بكسل وارتفاعها حوالي 1800 بكسل.
2. أضف دائرتين ، إحداهما أكبر من الأخرى.
3. لون الدوائر وأضف بعض الشفافية.
4. ضع الدائرتين متراكبتين قليلاً في أعلى يسار اللوحة.
5. قم بتجميع الدوائر ككائن واحد وقم بتكرارها.
6. اقلب الدوائر وضعها قطريًا لأسفل ويمينًا من الأولين.
7. تأكد من ترك مساحة في الأعلى والأسفل. عندما يكون هناك الكثير من التعليقات ، ستتكرر الصورة ويتم تجانبها عموديًا.

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

افتح مُنشئ القوالب وأضف قالبًا جديدًا

حان الوقت الآن لفتح أداة إنشاء السمات. أضف قالبًا جديدًا.

حدد القالب لجميع المنشورات

قم بتطبيق القالب على جميع المنشورات.

إضافة جسم مخصص وبناء من الصفر

وابدأ في بناء الجسم المخصص للقالب.

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

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

خلفية

• الخلفية: التدرج
• التدرج اللوني 1: أبيض شفاف rgba (255،255،255،0.55)
• التدرج اللوني 2: أبيض شفاف rgba (255،255،255،0.55)
• الصورة: خلفية الدوائر

تباعد

أيضًا ، اضبط تباعد القسم قبل إضافة صف.

• الحشوة العلوية والسفلية: 200 بكسل

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

هيكل العمود

أضف الآن صفًا يحتوي على ثلاثة أعمدة.

تحجيم

قبل إضافة الوحدات ، اضبط حجم الصف.

• عرض مزراب مخصص: 2
• العرض: 80٪
• العرض الأقصى: 100٪

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

خلفية

الآن ، قم بتصميم العمود الثاني عن طريق إضافة خلفية زرقاء.

• لون الخلفية: أزرق # 51a2ff

الحدود

تواصل بتقريب الحدود.

• الزوايا الدائرية: 1vw من جميع الزوايا الأربع

مربع الظل

أخيرًا ، أضف ظل الصندوق أيضًا.

• الظل: الخيار الثالث
• قوة التعتيم: 80 بكسل
• اللون: rgba (0،0،0،0.13)

أضف وحدة الشخص إلى العمود 1

المحتوى

حان الوقت لإضافة الوحدات. ابدأ بوحدة شخص في العمود 1 وأضف المحتوى.

• الاسم: جيني مكابي
• المنصب: مساهم منتظم
• النص الأساسي: نص فقرة
• الصورة: صورة شخصية

خلفية

أضف خلفية بيضاء للوحدة.

• لون الخلفية: أبيض # 000000

صورة

في علامة تبويب التصميم ، حدد نمط حدود الصورة على النحو التالي.

• الزوايا الدائرية: 0.5vw في أعلى اليسار وأعلى اليمين
• أنماط الحدود: الحد السفلي
  • العرض: 5 بكسل
  • اللون: أزرق # 51a2ff

نص العنوان

تابع عن طريق تصميم نص العنوان.

• مستوى العنوان: H4
• الخط: Alegreya Sans SC
• النمط: TT
• اللون: # 021859
• مقاس:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 3vw
  • الهاتف: 5vw
• تباعد الأحرف: 1 بكسل
• ارتفاع الخط: 1.6em

نص أساسي

ثم أيضًا ، النص الأساسي.

• الخط: Lato
• اللون: أزرق # 1a1f73
• مقاس:
  • سطح المكتب: 0.7vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 3vw
• ارتفاع الخط: 2em

نص المركز

تواصل مع نص الموقف.

• الخط: Lato
• النمط: مائل
• اللون: # 021859
• مقاس:
  • سطح المكتب: 0.8vw
  • الجهاز اللوحي: 3vw
  • الهاتف: 3.5vw

تحجيم

ثم اضبط الحجم.

• عرض:
  • سطح المكتب: 100٪
  • الجهاز اللوحي: 50٪
  • الهاتف: 70٪
• محاذاة الوحدة: المركز

تباعد

أيضا ، التباعد.

• الحشوة العلوية والسفلية: 4vw

الحدود

ثم أضف بعض الزوايا الدائرية.

• الزوايا الدائرية: o.5vw على الزوايا الأربع
• أنماط الحدود: 24 بكسل جميع الجوانب الأربعة
  • اللون: أبيض #ffffff

مربع الظل

أخيرًا ، أضف ظل الصندوق.

• الظل: الخيار الثالث
• قوة التعتيم: 80 بكسل
• اللون: rgba (0،0،0،0.13)

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

الشبكات

أسفل وحدة الشخص ، أضف وحدة متابعة لوسائل التواصل الاجتماعي مع ثلاث شبكات اجتماعية.

• موقع التواصل الاجتماعي الفيسبوك
• ينكدين
• تويتر

اعدادات الشبكة

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

• الخلفية: شفافة

انتقام

في إعدادات التصميم الرئيسية ، قم بتوسيط محاذاة الوحدة.

• محاذاة الوحدة: المركز

أيقونة

أخيرًا ، قم بتلوين الأيقونات باللون الأزرق.

• اللون: أزرق # 51a2ff
• مقاس:
  • سطح المكتب: 1vw
  • الجهاز اللوحي والهاتف: 4vw

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

المحتوى

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

• النص: اترك لنا تعليق

خلفية

أضف خلفية بيضاء.

• لون الخلفية: أبيض #ffffff

نص العنوان

ثم انتقل إلى علامة تبويب التصميم وحدد نص العنوان.

• مستوى العنوان: H3
• الخط: Alegreya Sans SC
• الوزن: جريء
• نمط الخط: TT
• اللون: أزرق # 021859
• مقاس:
  • سطح المكتب: 2vw
  • الجهاز اللوحي والهاتف: 5.5vw

تباعد

أخيرًا ، اضبط التباعد.

• الحشوة العلوية:
  • سطح المكتب: 3vw
  • الجهاز اللوحي: 2vw
  • الهاتف: 6vw
• حشوة سفلية
  • سطح المكتب والكمبيوتر اللوحي: 3vw
• الحشوة اليسرى واليمنى:
  • سطح المكتب والكمبيوتر اللوحي: 1vw

إضافة وحدة التعليقات إلى العمود 2

عناصر

أضف الآن وحدة التعليقات إلى العمود 2. قم بتمكين جميع العناصر.

• إظهار الصورة الرمزية للمؤلف: نعم
• إظهار زر الرد: نعم
• إظهار عدد التعليقات: نعم

خلفية

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

• لون الخلفية: أبيض #ffffff

مجالات

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

• لون الخلفية: أبيض #ffffff
• لون النص: أزرق # 1a1f73
• لون خلفية التركيز: أبيض #ffffff
• لون نص التركيز: أزرق # 1a1f73
• الخط: Alegreya Sans SC
• النمط: TT
• مقاس:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 3vw
  • الهاتف: 4vw
• الزوايا الدائرية: 5 بكسل لجميع الزوايا

صورة

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

• الزوايا الدائرية: 5 بكسل
• نمط الحدود: جميع الجوانب
• العرض: 3 بكسل
• اللون: أزرق # 1a1f73

نص عدد التعليقات

ثم ، نص العد التعليق.

• مستوى العنوان: H3
• الخط: Alegreya Sans SC
• نمط الخط: TT
• اللون: أزرق # 021859
• مقاس:
  • سطح المكتب: 1.3vw
  • الجهاز اللوحي: 3vw
  • الهاتف: 5vw
• ارتفاع الخط: 2 م

نص عنوان النموذج

أيضا ، نمط نص عنوان النموذج.

• مستوى العنوان: H3
• الخط: Alegreya Sans SC
• نمط الخط: TT
• اللون: أزرق # 021859
• مقاس:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 3vw
  • الهاتف: 5vw
• ارتفاع الخط: 2 م

نص ميتا

انتقل إلى نص التعريف والنمط على النحو التالي.

• الخط: Lato
• اللون: # 021859
• مقاس:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 2.7vw
  • الهاتف: 3.5vw

نص التعليق

ثم نص التعليق.

• الخط: Lato
• اللون: # 021859
• مقاس:
  • سطح المكتب: 0.9vw
  • الجهاز اللوحي: 1.8vw
  • هاتف: 2.5vw

زر

لا تنس تصميم الأزرار أيضًا.

• حجم الخط:
  • سطح المكتب: 0.9vw
  • الجهاز اللوحي: 2.5vw
  • الهاتف: 3.5vw
• لون النص: أبيض #ffffff
• نصف قطر الحدود: 5 بكسل
• الخط: Lato

تباعد

أيضا ، التباعد بين وحدة التعليقات.

• الهامش العلوي:
  • سطح المكتب: -1vw
  • الجهاز اللوحي والهاتف: -3.3vw
• الحشوة العلوية:
  • سطح المكتب والكمبيوتر اللوحي: 3vw
  • الهاتف: 4vw
• الحشوة السفلية:
  • سطح المكتب: 3vw
  • الهاتف والكمبيوتر اللوحي: 0vw
• الحشوة اليسرى واليمنى:
  • سطح المكتب: 2vw
  • الجهاز اللوحي: 4vw
  • الهاتف: 7vw

الحدود

أخيرًا ، أضف بعض الزوايا الدائرية إلى وحدة التعليقات.

• أنماط الحدود: 2 بكسل على الجوانب الأربعة
• اللون: أزرق # 1a1f73

أضف وحدة اختيار البريد الإلكتروني إلى العمود 3

المحتوى

انتقل إلى العمود 3 ووحدة اختيار البريد الإلكتروني. امنح الوحدة عنوانًا.

• نص: احصل على تحديثات منتظمة
• النص الأساسي: نص فقرة

حساب البريد الإلكتروني

قم بإعداد موفر البريد الإلكتروني الخاص بك في علامة تبويب حساب البريد الإلكتروني. اختر قائمة وأضف مفتاح API الخاص بك.

• مزود البريد الإلكتروني
  • قائمة
  • مفتاح API

مجالات

ثم حدد لاستخدام حقل اسم واحد فقط.

• استخدم حقل الاسم الفردي: نعم

خلفية

أضف خلفية بيضاء للوحدة.

• لون الخلفية: أبيض

تخطيط

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

• التخطيط: الجسم على اليسار ، النموذج على اليمين
• عرض الاسم بالكامل: نعم
• الاسم الأول Fullwidth: نعم
• عرض الاسم الأخير Fullwidth: نعم
• عرض البريد الإلكتروني بالكامل: نعم

مجالات

ثم ، نمط إعدادات الحقول.

• لون النص: أزرق # 1a1f73
• لون الخلفية: أبيض #ffff
• لون نص التركيز: أزرق # 1a1f73
• لون خلفية التركيز: أبيض # fffff
• الخط: Lato
• حجم الخط:
  • سطح المكتب: 0.7vw
  • الجهاز اللوحي: 2.2vw
  • الهاتف: 3.2vw
• تباعد الأحرف: 1 بكسل
• الزوايا المستديرة: 0.2vw في جميع الزوايا
• أنماط الحدود: جميع الجوانب الأربعة
  • العرض: 2 بكسل
  • اللون: أزرق # 1a1f73

نص العنوان

يليه نص العنوان.

• مستوى العنوان: H4
• الخط: Alegreya Sans SC
• الوزن: متوسط
• نمط الخط: TT
• اللون: أزرق # 1a1f73
• مقاس:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 4vw
  • الهاتف: 5vw
• تباعد الأحرف: 1 بكسل

نص أساسي

أيضا ، النص الأساسي.

• الخط: Lato
• اللون: أزرق # 1a1f73
• مقاس:
  • سطح المكتب: 0.7vw
  • الجهاز اللوحي: 2.3vw
  • الهاتف: 3vw

نتيجة رسالة نص

لا تنس نص رسالة النتيجة.

• الخط: Lato
• اللون: أزرق # 1a1f73
• مقاس:
  • سطح المكتب: 0.7vw
  • الجهاز اللوحي: 2.3vw
  • الهاتف: 3vw

زر

أيضا ، نمط الزر.

• حجم الخط:
  • سطح المكتب: 0.7vw
  • الجهاز اللوحي: 2.3vw
  • الهاتف: 3vw
• لون النص: أبيض #ffffff
• لون الخلفية: أزرق # 51a2ff
• الخط: Lato

تباعد

اضبط التباعد.

• الحشوة العلوية والسفلية: 4vw

الحدود

ثم أضف بعض الزوايا الدائرية.

• الزوايا الدائرية: o.5vw على الزوايا الأربع

مربع الظل

أخيرًا ، أضف ظل الصندوق.

• الظل: الخيار الثالث
• قوة التعتيم: 80 بكسل
• اللون: rgba (0،0،0،0.13)

معاينة

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

سطح المكتب

لوح

هاتف

سطح المكتب

لوح

متحرك

إنها التفاف وحدة التعليقات!

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