كيفية إنشاء أقسام مدونة ديناميكية جميلة وجذابة

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

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

معاينة

قبل أن نتعمق في البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة النهائية لجميع الأمثلة الثلاثة التي سننشئها.

مثال 1

المثال رقم 2

المثال رقم 3

أضف منشور مدونة جديد

تفاصيل المنشور

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

إعدادات صفحة Divi

قبل التبديل إلى Visual Builder ، قم بتغيير إعدادات Divi Page في الزاوية اليمنى العليا من منشور المدونة الجديد.

• تخطيط الصفحة: عرض كامل
• عنوان الوظيفة: إخفاء

قم بالتبديل إلى Visual Builder

حان الوقت للتبديل إلى Visual Builder لبدء إنشاء الأمثلة المختلفة!

إنشاء الوحدات

أضف مقطعًا جديدًا + صف عمود واحد

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

وحدة نص عنوان المشاركة

حدد عنوان المشاركة المحتوى الديناميكي

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

إعدادات النص

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

• خط النص: لاتو
• وزن خط النص: غامق
• لون النص: # 000000
• حجم النص: 58 بكسل (سطح المكتب) ، 45 بكسل (جهاز لوحي) ، 35 بكسل (هاتف)
• ارتفاع خط النص: 1em
• اتجاه النص: الوسط

تباعد

قم بتغيير قيم التباعد أيضًا.

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

وحدة نص تاريخ النشر

حدد نشر المحتوى الديناميكي لتاريخ النشر

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

إعدادات النص

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

• وزن خط النص: خفيف
• لون النص: # 000000
• حجم النص: 30 بكسل (سطح المكتب) ، 20 بكسل (جهاز لوحي) ، 16 بكسل (هاتف)
• تباعد حروف النص: 14 بكسل
• اتجاه النص: الوسط

تباعد

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

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

وحدة نص فئات المشاركة

حدد فئات المحتوى الديناميكي

آخر وحدة سنضيفها هي وحدة نصية تحتوي على محتوى ديناميكي لفئات النشر.

إعدادات النص

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

• اتجاه النص: الوسط

إعدادات نص الارتباط

بعد ذلك ، قم بتطبيق بعض التعديلات على إعدادات نص الارتباط.

• وزن خط الارتباط: عريض للغاية
• نمط خط الارتباط: أحرف كبيرة
• لون نص الرابط: # 000000
• حجم نص الرابط: 15 بكسل
• تباعد حروف الارتباط: 5 بكسل

تباعد

أضف الحشوة السفلية بعد ذلك.

• الحشو السفلي: 20 بكسل

الحدود

وتنتهي مع حد سفلي دقيق.

• عرض الحد السفلي: 1 بكسل
• لون الحد السفلي: # 000000

إنشاء المثال رقم 1

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

تباعد

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

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

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

هيكل العمود

تابع بإضافة صف جديد بهيكل العمود التالي:

تحجيم

افتح إعدادات التحجيم لهذا الصف وغير الأشياء.

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم

تباعد

أضف بعض قيم التباعد المخصصة بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشوة العلوية للعمود 2: 130 بكسل
• الحشوة السفلية للعمود 2: 130 بكسل
• الحشوة اليسرى للعمود 2: 50 بكسل
• الحشوة اليمنى للعمود 2: 50 بكسل

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

حدد المحتوى الديناميكي للصور المميزة

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

افتراضي الحدود

نضيف أيضًا حدًا أيمنًا عند التمرير. للقيام بذلك ، اختر عرض الحد الافتراضي التالي أولاً:

• عرض الحد الأيمن: 0 بكسل

تحوم الحدود

وأضف الإعدادات التالية عند التمرير:

• عرض الحد الأيمن: 24 بكسل
• لون الحد الأيمن: #FFFFFF

مربع الظل الافتراضي

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

• مربع الظل الوضع الرأسي: 0 بكسل
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 80 بكسل
• لون الظل: rgba (255،255،255،0)

مربع الظل تحوم

وتغيير الأشياء عند المرور فوقها:

• مربع الظل الأفقي: 600 بكسل
• مربع الظل الوضع الرأسي: 0 بكسل
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 80 بكسل
• لون الظل: # E4BAC7

الانتقالات

لإنشاء انتقال سلس ، قم بتغيير مدة الانتقال في علامة التبويب خيارات متقدمة.

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

ضع الوحدات الديناميكية في العمود 2

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

إنشاء المثال رقم 2

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

أعلى الحاجز الافتراضي

إلى التالي! أضف قسمًا جديدًا باستخدام الحاجز العلوي التالي:

• نمط الحاجز: البحث في القائمة
• لون الفاصل: #FFFFFF
• ارتفاع الحاجز: 50 بكسل
• ترتيب الفاصل: فوق محتوى القسم

تحوم فوق الحاجز

قم بتغيير ارتفاع الحاجز عند التمرير.

• ارتفاع الحاجز: 174 بكسل

تباعد

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

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

الانتقالات

لإنشاء انتقال سلس للمقسم ، قم بتغيير مدة الانتقال في علامة التبويب خيارات متقدمة.

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

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

هيكل العمود

الآن ، امض قدمًا وأضف صفًا إلى القسم الخاص بك باستخدام بنية العمود التالية:

لون الخلفية الافتراضي

أضف لون الخلفية التالي إليها:

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

تحوم لون الخلفية

قم بتغيير لون الخلفية عند التمرير.

• لون الخلفية: rgba (255،255،255،0.56)

صورة خلفية ديناميكية مميزة

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

• مزيج صورة الخلفية: شاشة

تحجيم

اسمح للصف بأن يشغل عرض الشاشة بالكامل عن طريق تغيير إعدادات التحجيم.

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

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

• الحشوة العلوية: 200 بكسل
• الحشو السفلي: 200 بكسل
• الحشو الأيسر: 100 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 20 بكسل (هاتف)
• الحشو الأيمن: 100 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 20 بكسل (هاتف)

الانتقالات

أخيرًا وليس آخرًا ، قم بإنشاء انتقال سلس عن طريق تغيير مدة الانتقال.

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

ضع الوحدات الديناميكية في العمود

يمكنك الآن وضع جميع الوحدات النمطية الديناميكية في عمود الصف وتنتهي من المثال الثاني!

إنشاء مثال # 3

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

صورة خلفية ديناميكية مميزة

إلى المثال الأخير! أضف قسمًا جديدًا وحدد الصورة المميزة كصورة خلفية القسم.

التباعد الافتراضي

بعد ذلك ، قم بإزالة كل المساحة المتروكة الافتراضية المخصصة للقسم.

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

تباعد تحوم

أضف بعض الهامش المخصص عند التمرير لإنشاء تأثير متقلص.

• الحشو الأيسر: 150 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 30 بكسل (هاتف)
• الحشوة اليمنى: 150 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 30 بكسل (هاتف)

الانتقالات

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

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

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

هيكل العمود

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

لون الخلفية الافتراضي

أضف لون الخلفية التالي:

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

تحوم لون الخلفية

قم بتغيير لون الخلفية عند التمرير.

• لون الخلفية: rgba (255،255،255،0.46)

خلفية متدرجة

أضف خلفية متدرجة شعاعي أيضًا.

• اللون 1: rgba (41،196،169،0)
• اللون 2: #ffffff
• نوع التدرج: شعاعي
• موقف البداية: 29٪
• موضع النهاية: 29٪

تحجيم

قم بتغيير إعدادات التحجيم للصف التالي.

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

وأضف بعض قيم الحشو المخصصة.

• الحشوة العلوية: 200 بكسل
• الحشو السفلي: 200 بكسل
• الحشو الأيسر: 100 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 20 بكسل (هاتف)
• الحشو الأيمن: 100 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 20 بكسل (هاتف)

الانتقالات

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

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

ضع الوحدات الديناميكية في العمود

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

تغيير اتجاه النص لكافة الوحدات النمطية

الشيء الوحيد الذي ستحتاج إلى تغييره بشأن هذه الوحدات هو اتجاه النص وقد انتهيت!

• اتجاه النص: يسار

معاينة

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

مثال 1

المثال رقم 2

المثال رقم 3

افكار اخيرة

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