هل تريد إنشاء صفحة مدونة باستخدام وحدة المدونة de ديفي؟
عادةً ما يتم نشر كل حزمة تخطيط Divi على أنيقة ثيمات يقدم تخطيطًا للمدونة، مما يساعدك على الإنشاء بلوق الخاص بك سريع كفاية. ولكن هل سبق لك أن أردت معرفة كيفية إنشاء إحدى صفحات المدونة هذه بنفسك؟
في هذه المقالة ، سنرى كيفية إنشاء صفحة مدونة باستخدام وحدة مدونة Divi. سوف نمر بكل إعداد خطوة بخطوة.
لنبدأ!
مسح
قبل أن نبدأ ، دعنا أولاً نلقي نظرة عامة على ما سننشئه.
قم بإنشاء صفحة مدونة جديدة
قم بإنشاء صفحة جديدة
أولاً ، سننشئ صفحتنا. في لوحة تحكم WordPress ، انقر فوق الصفحات > إضافة.
امنح الصفحة عنوانًا منطقيًا بالنسبة لك.
- عنوان الصفحة: مدونة على Divi
قم بالتبديل إلى Divi Builder
انقر فوق الزر البنفسجي في وسط الصفحة: استخدم Divi Builder .
أضف قسمًا لعنوان صفحة المدونة
تخصيص القسم
سنبدأ بالقسم الأول. افتحهم معلمات القسم .
انتقل إلى خلفية وتغيير اللون إلى # f9f3fd. أدخل المدونة كتسمية المسؤول. أغلق إعدادات القسم.
- الخلفية: # f9f3fd
- تسمية المسؤول: مدونة
إنشاء عنوان صفحة المدونة
ثم سنضيف ملف خط على العنوان. حدد الأيقونة الخضراء واختر صف العمود الفردي.
ثم أضف ملف وحدة نصية على الخط.
تخصيص وحدة نص عنوان المدونة
افتحها إعدادات وحدة النص وحدد H1. أضف العنوان مدونتنا.
- الخط: العنوان 1
- النص: مدونتنا
ثم انتقل إلىعلامة تبويب النمط وقم بتعيين المحاذاة إلى توسيط. بالنسبة إلى نص عنوان H1 ، اختر Cormorant Infant للخط واجعله غامقًا.
- محاذاة النص: توسيط
- نص العنوان: H1
- خط الرأس: رضيع الغاق
- رأس خفيف خفيف: نص غامق
اضبط اللون على # 442854 ، والحجم على 130 بكسل ، وارتفاع الخط على 0,8em.
- اللون: #442854
- حجم نص سطح المكتب: 130 بكسل
- ارتفاع الخط: 0,8em
قم بإنشاء أحدث مقال وقسم دعوة للعمل
يتكون قسمنا من أحدث مقال وبريد إلكتروني للتفعيل.
أضف خطًا جديدًا تحت صفنا الأول وحدد تصميم العمود 2/3 يسار و 1/3 يمينًا.
افتحها معلمات الخط من خلال النقر على رمز الترس.
حدد ملفعلامة تبويب النمط، انتقل إلى مباعدة وأضف 0 بكسل إلى الهامش الداخلي السفلي. أغلق الإعدادات.
- الهامش الداخلي السفلي: 0 بكسل
أضف وخصص وحدة نشر المدونة المميزة
ثم سنضيف ملف بلوق وحدة . سيحتوي هذا على مقالتنا الأخيرة. انقر فوق رمز علامة الجمع الرمادي في العمود الأيسر من صفنا الجديد وأضف وحدة المدونة.
محتويات
سو محتويات ، أدخل 1 لعدد المشاركات.
- عدد المناصب: 1
عناصر
انتقل إلى عناصر وقم بإلغاء تحديد المؤلف وتقسيم الصفحات. سنترك البقية عند التخلف عن السداد.
- عرض المؤلف: لا
- إظهار ترقيم الصفحات: لا
توفير
ثم حدد ملف علامة تبويب النمط واختر Full Screen للتخطيط وأوقف تشغيل تراكب الصور المميز.
- الموديل: شاشة كاملة
- تراكب الصور المحدد: معطل
نص العنوان
انتقل إلى نص العنوان . حدد H2 واختر Cormoran Infant. حدد غامق وقم بتغيير اللون إلى # 442854.
- أدخل العنوان الثالث: H2
- عنوان الخط: Cormorant Infant
- عنوان خفيف خافت: نص غامق
- لون نص العنوان: # 442854
اضبط حجم الخط على 30 بكسل. قم بتغيير ارتفاع الخط إلى 1.1em.
- الحجم: 30 بكسل لسطح المكتب ، 20 بكسل للجهاز اللوحي ، 18 بكسل للهاتف
- ارتفاع سطر العنوان: 1,1 إم
نص النص
ثم قم بالتمرير لأسفل إلى نص أساسي . اختر Cabin للخط ، وقم بتغيير اللون إلى # 442854 ، وقم بتغيير ارتفاع الخط إلى 1,8em.
- فيلق الشرطة: الكابينة
- لون النص الأساسي: # 442854
- ارتفاع خط الجسم: 1,8 م
البيانات الوصفية للنص
ثم قم بالتمرير لأسفل إلى نص البيانات الوصفية . اضبط المعلمات على النحو التالي:
- خط البيانات الوصفية: Cormorant Infant
- ضوء خافت للبيانات الوصفية: عادي
- نمط نسخ البيانات الوصفية: لا شيء
- لون نص البيانات الوصفية: # 442854
- حجم نص البيانات الوصفية: سطح المكتب 16 بكسل ، الكمبيوتر اللوحي 15 بكسل ، الهاتف 14 بكسل
- ارتفاع صف البيانات الوصفية: 1,8 em
مباعدة
ثم قم بالتمرير لأسفل إلى مباعدة وقم بتغيير الهامش العلوي إلى 0vw.
- الهامش العلوي: 0vw
صندوق الظل
أخيرًا ، قم بالتمرير لأسفل إلى صندوق الظل وتعطيله.
- مربع الظل: تعطيل
إضافة وتخصيص وحدة نص البريد الإلكتروني للمدونة
الآن سننتقل إلى العمود الأيمن و إنشاء دعوة للعمل عبر البريد الإلكتروني . أولاً ، أضف وحدة نصية في العمود الأيمن. انقر فوق رمز علامة الجمع الرمادي وابحث عن النص.
محتويات
حدد العنوان 2 وأدخل النص اشترك في عروضنا.
- الخط: العنوان 2
- نص: اشترك في عروضنا
نص العنوان
ل النصوص من العنوان ، حدد Center Alignment ، واختر H2 ، وحدد Cormorant Infant واضبطه على Bold.
- محاذاة النص: توسيط
- نص العنوان: H2
- خط الرأس: رضيع الغاق
- رأس ضوء ناعم: جريء
قم بتغيير اللون إلى # 442854 ، والحجم إلى 32 بكسل ، وارتفاع الخط إلى 0,95em.
- لون نص الرأس: # 442854
- حجم نص الرأس: 32 بكسل
- ارتفاع خط الرأس: 0,95 em
مباعدة
أخيرًا ، قم بالتمرير لأسفل إلى مباعدة وأضف 10 بكسل إلى الهامش السفلي. أغلق إعدادات وحدة النص.
- الهامش السفلي: 10 بكسل
إضافة وتخصيص وحدة Blog Email Optin
ثم نذهب خلق استمارتنا بريد إلكتروني . أضف وحدة Email Optin أسفل وحدة Text في العمود الأيمن.
محتويات
أولاً ، قم بإزالة العنوان والنص الأساسي.
- العنوان: لا يوجد
- النص الأساسي: لا شيء
انتقل إلى حساب البريد الإلكتروني وأضف مزود الخدمة الخاص بك.
ثم قم بالتمرير لأسفل إلى خلفية وقم بإلغاء تحديد لون الخلفية.
- استخدام لون الخلفية: لا
حقول
اذهب إلى علامة تبويب النمط وقم بتغيير لون خلفية الحقول إلى rgba (255,255,255,0،442854،XNUMX،XNUMX) ولون النص إلى # XNUMX.
- حقول لون الخلفية: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)
- حقول لون النص: # 442854
انتقل لأسفل إلى خيارات الخط وقم بتغيير الخط إلى الكابينة ، والحجم إلى 16 بكسل وارتفاع الخط إلى 1,8em.
- حقول الخط: الكابينة
- حقول حجم النص: 16 بكسل
- ارتفاع صف المجال: 1,8 م
بعد ذلك ، اضبط الزاوية الدائرية للحقول على 32 بكسل ، وعرض الحد إلى 2 بكسل ، وقم بتغيير لون الحد إلى # 442854.
- ضوابط مستطيل مدور: 32 بكسل
- حقول عرض الحدود: 2 بكسل
- حقول لون الحدود: # 442854
زر
قم بالتمرير إلى الزر وحدد استخدم الأنماط المخصصة للزر . قم بتغيير الحجم إلى 18ps ، ولون الزر إلى الأبيض ، ولون خلفية الزر إلى # 442854.
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 18 بكسل
- لون نص الزر: #ffffff
- زر الخلفية: # 442854
قم بتغيير نصف قطر الحد إلى 50 بكسل ، والخط إلى Cormorant Infant ، واجعل الوزن غامقًا.
- زر نصف قطر الحدود: 50 بكسل
- زر الخط: الغاق الرضع
- زر Soft Light: نص غامق
أخيرًا ، دعنا نضيف بعض الهوامش. أدخل 20 بكسل للهامش العلوي ، و 12 بكسل للحشوة العلوية والسفلية ، و 32 بكسل للحشوة اليمنى واليسرى. أغلق إعدادات البريد الإلكتروني.
- زر الهامش العلوي: 20 بكسل
- زر الحشو العلوي والسفلي: 12 بكسل
- زر الحشو الأيسر والأيمن: 32 بكسل
أضف سطرًا جديدًا لقائمة منشورات المدونة
نحن ذاهبون الآن إنشاء قائمة بالعناصر من الصفحة. أولاً ، أضف صفًا جديدًا مكونًا من عمود واحد أسفل القسم السابق.
إعدادات الخط
الوصول إلى علامة تبويب النمط وأضف 0 بكسل إلى الهامش الداخلي لـ Vertex. إغلاق إعدادات الخط.
- رأس الهامش الداخلي: 0 بكسل
أضف وحدة مدونة إلى خطك
أضف بلوق وحدة إلى الخط الجديد الخاص بك عن طريق النقر فوق رمز زائد الرمادي والنقر فوق مدونة.
تصميم موجز مشاركة المدونة
دعنا نغير خلاصة صفحة المدونة.
محتوى موجز المدونة
افتحها إعدادات وحدة المدونة وادخل 3 لعدد المشاركات. يتيح لك هذا اختيار عدد المشاركات التي يتم عرضها على الشاشة.
يسمح لنا الرقم الأقل ، مثل 3 ، بالتركيز على المشاركات الحديثة وتقليل حجم الصفحة. يعد هذا اختيارًا جيدًا إذا كنت لا تنشر كثيرًا أو ترغب في الحفاظ على نظافة الصفحة. يُعد عرض المزيد من المشاركات ، مثل 6-9 ، فكرة جيدة إذا كنت تريد التركيز على تدفق المدونة.
- عدد المشاركات: 3
أدخل 1 للإزاحة. هذا يخبر Divi أن تبدأ مع منشور المدونة الثاني ، مما يمنعنا من عرض نفس المقالة التي تم عرضها بالفعل في منشور المدونة المعروض أعلاه.
- رقم الإزاحة اللاحق: 1
عناصر
انتقل إلى عناصر . تمكين الصورة المميزة والتاريخ ومقتطف الفئات والصفحات الفاصلة للصفحات. تعطيل الباقي.
- إظهار الصورة المميزة: نعم
- البيانات: نعم
- الفئات: نعم
- مقتطفات: نعم
- ترقيم الصفحات: نعم
خلفية
الوصول إلى خلفية وقم بتعيين لون خلفية تجانب الشبكة على rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)
- لون خلفية بلاط شبكة الشبكة: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)
تخطيط وتراكب
ثم انتقل إلى علامة تبويب النمط . اترك التخطيط مضبوطًا على الشبكة. لقد اخترنا تنسيق العرض الكامل لمنشور المدونة المميز أعلاه. سنستخدم تخطيط الشبكة لخلاصة المدونة هذه ، وهو الخيار الافتراضي. تعطيل تراكب الصور المميز.
- التخطيط: الشبكة
- تراكب الصور المحدد: معطل
نص العنوان
ل نص العنوان ، حدد H2. اختر Cormorant Infant ، واضبطه على Bold وأدخل # 442854 للون.
- أدخل العنوان الثالث: H2
- عنوان الخط: Cormorant Infant
- عنوان خفيف خافت: نص غامق
- لون نص العنوان: # 442854
اختر 20 بكسل لحجم النص. اضبط ارتفاع الخط على 1,1 em.
- حجم نص العنوان: سطح المكتب 20 بكسل
- ارتفاع سطر العنوان: 1,1 إم
نص النص
انتقل إلى نص أساسي واختر المقصورة. اضبط اللون على # 442854.
- فيلق الشرطة: الكابينة
- لون النص الأساسي: # 442854
اضبط ارتفاع الخط على 1,8 em.
- ارتفاع الخط: 1,8 م
البيانات الوصفية للنص
انتقل إلى نص البيانات الوصفية واختيار Cormorant Infant. اضبط الوزن على الوضع العادي والأسلوب على لا شيء واللون على # 442854.
- خط البيانات الوصفية: Cormorant Infant
- ضوء خافت للبيانات الوصفية: عادي
- نمط نسخ البيانات الوصفية: لا شيء
- لون نص البيانات الوصفية: # 442854
- حجم نص البيانات الوصفية: سطح المكتب 16 بكسل ، الجهاز اللوحي 15 بكسل ، الهاتف 14 بكسل
- ارتفاع صف البيانات الوصفية: 1,8 em
نص ترقيم الصفحات
الآن دعنا نذهب إلى ترقيم الصفحات . بالنسبة للخط ، اختر Cormorant Infant ، حدد Bold وقم بتغيير اللون إلى # 442854.
- عرض الخط ترقيم الصفحات: الغاق الرضع
- إظهار ضوء خفيف للترحيل: جريء
- عرض لون النص ترقيم الصفحات: # 442854
مباعدة
ثم ننتقل إلى ملف تباعد وأضف الهامش 0vw في الأعلى. هذا يمنع وحدة لدينا من التداخل مع الوحدة السابقة.
- الهامش العلوي: 0vw
الحدود
انتقل إلى الحدود وأدخل 0 بكسل لجميع الزوايا الأربع. هذا يعطينا الشكل المربع للبطاقة.
- تخطيط شبكة مستطيل مدور: 0 بكسل
صندوق الظل
أخيرًا ، قم بالتمرير لأسفل إلى مربع الظل وتعطيله. أغلق إعدادات المدونة. قسم المدونة كامل.
- مربع الظل: لا شيء
أضف قسمًا جديدًا "عبارة تحث المستخدم على اتخاذ إجراء" إلى صفحة المدونة
ثم نذهب أنشئ قسم "الحث على اتخاذ إجراء" من الصفحة. يتضمن هذا القسم صورة خلفية المنظر بملء الشاشة ، التواصل وروابط المتابعة الاجتماعية.
أضف قسم جديد
انقر فوق الرمز الأزرق ل إضافة قسم عادي جديد في أسفل الصفحة.
- القسم: منتظم
نمط قسم الدعوة إلى العمل
افتحها معلمات القسم من خلال النقر على رمز الترس الخاص به.
خلفية
انتقل إلى خلفية واختر علامة التبويب "صورة". انقر فوق الرمز الرمادي المسمى صورة الخلفية.
اختر صورة ملء الشاشة من مكتبة الوسائط الخاصة بك. حدد استخدام تأثير المنظر ، ثم اختر CSS لطريقة المنظر.
- صورة الخلفية
- استخدام تأثير المنظر: نعم
- طريقة المنظر: CSS
قم بالتمرير لأسفل إلى تسمية المسؤول وأدخل "تذييل الصفحة" في الحقل. سيساعدك هذا على تتبع الأقسام.
- علامة المسؤول: التذييل
ثم انتقل إلى علامة تبويب النمط.
- الهامش الداخلي: 10vw (أعلى وأسفل)
أضف سطرًا جديدًا
انقر فوق رمز زائد الأخضر و أضف صفًا إلى عمود واحد لمحتوانا.
التحجيم
افتحها معلمات الخط وانتقل إلى علامة التبويب "النمط".
- أقصى عرض: 320 بكسل
وحدة نص العنوان
يتم تقديم قسم الدعوة إلى العمل مع عنوان. لإنشاء هذا ، إضافة وحدة نصية على الخط.
تخصيص نص العنوان
أضف العنوان الخاص بك وقم بتغيير الخط إلى العنوان 3.
- الخط: العنوان 3
- النص: كل شيء عن ديفي
نص العنوان
الوصول إلى علامة تبويب النمط وانتقل إلى نص الترجمة . اختر مركزًا للمحاذاة ، وحدد H3 ، واختر Cormorant Infant ، واضبطه على Bold واختر اللون الأبيض للون.
- محاذاة النص: الوسط
- نص العنوان: H3
- خط الرأس: رضيع الغاق
- رأس ضوء ناعم: جريء
- لون نص العنوان: #ffffff
- حجم نص الرأس: 42 بكسل لسطح المكتب ، و 20 بكسل للجهاز اللوحي ، و 16 بكسل للهاتف
- ارتفاع خط الرأس: 1,1 em
مباعدة
أخيرًا ، قم بالتمرير لأسفل إلى مباعدة وأضف 10 بكسل إلى الهامش السفلي. أغلق إعدادات الوحدة.
- الهامش السفلي: 10 بكسل
وحدة نصية للعنوان
أضف وحدة نصية أخرى عن عنوانك الفعلي.
نمط وحدة نص العنوان الفعلي
نص العنوان
أضف عنوانك كنص فقرة.
- النمط: فقرة
- النص: عنوانك
نص الفقرة
ثم انتقل إلى Text in the علامة تبويب النمط واختر Cormorant Infant ، شبه جريء ، واضبطه على الأبيض.
- الخط: الغاق الرضع
- نص خفيف خفيف: شبه عريض
- لون النص: #ffffff
- حجم نص النص: 28 بكسل لسطح المكتب ، 20 بكسل للجهاز اللوحي ، 16 بكسل للهاتف
- ارتفاع سطر النص: 1,2 إم
أضف الوحدة تابعنا على الشبكات الاجتماعية
آخر وحدة لدينا هي الوحدة تابعونا على الشبكات الاجتماعية . أضفه إلى أسفل السطر.
Stylize تابعنا على وحدة الوسائط الاجتماعية
سنبدأ بـ علامة تبويب النمط هذه المرة. حدد Center for Module Alignment وقم بتغيير لون الأيقونة إلى # 442854.
- محاذاة الوحدة: المركز
- لون الأيقونة: # 442854
انتقل إلى بوردأضف 23 بكسل للزوايا الدائرية.
- مستطيل مستدير الزوايا: 32 بكسل
أضف وخصص شبكات التواصل الاجتماعي الخاصة بك
عد الآن إلى علامة التبويب "المحتوى" وأضف أي شبكات اجتماعية تريد تضمينها. انقر فوق رمز زائد الرمادي.
افتحها إعدادات لكل شبكة من شبكات التواصل الاجتماعي الخاصة بك ، اختر الشبكة وأضف الرابط إلى حسابك. اضبط لون الخلفية على # f9f3fd. أغلق إعدادات الوحدة الفرعية.
- الشبكة الاجتماعية: اختيارك
- عنوان URL لرابط الحساب: الارتباط الخاص بك
- لون الخلفية: # f9f3fd
احفظ صفحة المدونة واخرج من المنشئ المرئي
Enfin، احفظ الصفحة في الزاوية اليمنى السفلى وحدد قم بإنهاء Visual Builder في أعلى الصفحة. أنت جاهز لرؤية عملك.
معاينة صفحة المدونة
ها هي نتائجنا.
تحميل DIVI Now !!!
وفي الختام
لذا ! هذه نظرتنا إلى كيفية إنشاء صفحة مدونة باستخدام Divi.
يجعل Divi Builder من السهل إنشاء تخطيطات مثيرة للاهتمام ، وهناك طرق متعددة لاستخدام كل وحدة من الوحدات. كما اكتشف هذا البرنامج التعليمي ، من الممكن استخدام إصدارات متعددة من وحدة المدونة في نفس الصفحة لعرض موجز المدونة بطرق مختلفة.
إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
