هل تريد إنشاء صفحة مدونة باستخدام وحدة المدونة de ديفي؟
عادةً ما يتم نشر كل حزمة تخطيط Divi على أنيقة ثيمات يُقدّم هذا الموقع قالبًا لتصميم المدونة يُساعدك على إنشاء مدونتك بسرعة. ولكن هل رغبت يومًا في معرفة كيفية إنشاء إحدى صفحات المدونة هذه بنفسك؟
في هذه المقالة ، سنرى كيفية إنشاء صفحة مدونة باستخدام وحدة مدونة Divi. سوف نمر بكل إعداد خطوة بخطوة.
لنبدأ!
مسح
قبل أن نبدأ، دعونا نلقي نظرة أولية على ما سنقوم بإنشائه.
قم بإنشاء صفحة مدونة جديدة
قم بإنشاء صفحة جديدة
أولاً، سنقوم بإنشاء صفحتنا. في لوحة تحكم ووردبريس، انقر على الصفحات > إضافة.
امنح الصفحة عنوانًا منطقيًا بالنسبة لك.
- عنوان الصفحة: مدونة على 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
عناصر
انتقل إلى عناصر وقم بإلغاء تحديد المؤلف وتقسيم الصفحات. سنترك البقية عند التخلف عن السداد.
- عرض المؤلف: لا
- إظهار ترقيم الصفحات: لا
توفير
ثم حدد علامة تبويب النمط ثم اختر وضع ملء الشاشة للتخطيط وقم بتعطيل تراكب الصورة المميزة.
- الموديل: شاشة كاملة
- تراكب الصورة المحددة: معطل
نص العنوان
انتقل إلى نص العنوان . حدد 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.
- حقول لون الخلفية: rgba (255,255,255,0)
- حقول لون النص: # 442854
انزل إلى الأسفل إلى خيارات الخط وقم بتغيير الخط إلى الكابينة ، والحجم إلى 16 بكسل وارتفاع الخط إلى 1,8em.
- حقول الخط: الكابينة
- حقول حجم النص: 16 بكسل
- ارتفاع صف المجال: 1,8 م
بعد ذلك ، اضبط الزاوية الدائرية للحقول على 32 بكسل ، وعرض الحد إلى 2 بكسل ، وقم بتغيير لون الحد إلى # 442854.
- ضوابط مستطيل مدور: 32 بكسل
- حقول عرض الحدود: 2 بكسل
- حقول لون الحدود: # 442854
زر
قم بالتمرير لأسفل إلى الزر وحدده استخدم الأنماط المخصصة للزر قم بتغيير الحجم إلى 18 بنسًا، ولون الزر إلى الأبيض، ولون خلفية الزر إلى #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)
- لون خلفية بلاط شبكة الشبكة: 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، واضبطه على غامق، واختر اللون الأبيض.
- محاذاة النص: الوسط
- نص العنوان: H3
- خط الرأس: رضيع الغاق
- رأس ضوء ناعم: جريء
- لون نص العنوان: #ffffff
- حجم نص الرأس: 42 بكسل لسطح المكتب ، و 20 بكسل للجهاز اللوحي ، و 16 بكسل للهاتف
- ارتفاع خط الرأس: 1,1 em
مباعدة
أخيرًا ، قم بالتمرير لأسفل إلى مباعدة وأضف 10 بكسل إلى الهامش السفلي. أغلق إعدادات الوحدة.
- الهامش السفلي: 10 بكسل
وحدة نصية للعنوان
أضف وحدة نصية أخرى عن عنوانك الفعلي.
قم بتصميم وحدة نص العنوان الفعلي
نص العنوان
أضف عنوانك كنص فقرة.
- النمط: فقرة
- النص: عنوانك
نص الفقرة
ثم انتقل إلى قسم النص في علامة تبويب النمط واختر Cormorant Infant ، شبه جريء ، واضبطه على الأبيض.
- الخط: الغاق الرضع
- نص خفيف خفيف: شبه عريض
- لون النص: #ffffff
- حجم نص النص: 28 بكسل لسطح المكتب ، 20 بكسل للجهاز اللوحي ، 16 بكسل للهاتف
- ارتفاع سطر النص: 1,2 إم
أضف الوحدة تابعنا على الشبكات الاجتماعية
آخر وحدة لدينا هي الوحدة تابعونا على الشبكات الاجتماعية . أضفه إلى أسفل السطر.
Stylize تابعنا على وحدة الوسائط الاجتماعية
سنبدأ بـ علامة تبويب النمط هذه المرة. حدد "توسيط" لمحاذاة الوحدة وقم بتغيير لون الأيقونة إلى #442854.
- محاذاة الوحدة: المركز
- لون الأيقونة: #442854
انتقل إلى بوردأضف 23 بكسل للزوايا الدائرية.
- مستطيل مستدير الزوايا: 32 بكسل
أضف وخصص شبكات التواصل الاجتماعي الخاصة بك
والآن، ارجع إلى علامة التبويب "المحتوى" أضف جميع الشبكات الاجتماعية التي ترغب في تضمينها. انقر على أيقونة الزائد الرمادية.
افتحها إعدادات لكل شبكة من شبكات التواصل الاجتماعي الخاصة بك حدد الشبكة وأضف الرابط إلى حسابك. اضبط لون الخلفية على #f9f3fd. أغلق إعدادات الوحدة الفرعية.
- الشبكة الاجتماعية: اختيارك
- عنوان URL لرابط الحساب: الارتباط الخاص بك
- لون الخلفية: # f9f3fd
احفظ صفحة المدونة واخرج من المنشئ المرئي
Enfin، احفظ الصفحة في الزاوية اليمنى السفلى وحدد قم بإنهاء Visual Builder في أعلى الصفحة. أنت جاهز لرؤية عملك.
معاينة صفحة المدونة
ها هي نتائجنا.
تحميل DIVI Now !!!
خاتمة
إليكم الأمر! هذه هي طريقتنا لإنشاء صفحة مدونة باستخدام Divi.
يُسهّل Divi Builder إنشاء تصميمات جذابة، وهناك عدة طرق لاستخدام كل وحدة من وحداته. وكما أوضحنا في هذا الدرس، يُمكن استخدام نسخ متعددة من وحدة المدونة على نفس الصفحة لعرض موجز المدونة بطرق مختلفة.
إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...