كيفية إضافة قوالب مخصصة وتصميم إلى تنسيقات منشورات مدونة Divi (الجزء 3 من 3)

مرحبًا بكم في اليوم 3 من 3 ، اليوم الأخير في سلسلتنا حول كيفية إضافة أنماط مخصصة إلى تنسيقات منشورات مدونة Divi. بشكل افتراضي ، تأتي Divi مع ستة تنسيقات لنشر المدونة: قياسي ، وفيديو ، وصوت ، واقتباس ، ومعرض ، ورابط. في هذه السلسلة ، نعلمك كيفية تخصيصها باستخدام php و css.

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

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

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

فيما يلي لمحة عن الشكل الذي ستبدو عليه صفحة مدونتك بعد البرنامج التعليمي اليوم (أنا أستخدم وحدة Divi Blog Module مع تخطيط شبكي في gif أدناه).

هيا بنا نبدأ.

إعداد إعدادات التصميم العامة في أداة تخصيص السمات

نحتاج أولاً إلى إجراء بعض التغييرات العامة في النمط باستخدام أداة تخصيص السمات. من لوحة معلومات WordPress ، انتقل إلى Divi → Theme Customizer → General Settings → Layout Settings وتغيير ما يلي:

عرض مزراب موقع الويب: 2
حدد استخدام Custom Sidebar Width
عرض الشريط الجانبي: 30

أيضًا ضمن Theme Customizer ، انتقل إلى Color Schemes وحدد Orange.

الآن دعنا نلقي نظرة على الشكل الذي تبدو عليه منشورك القياسي حتى الآن:

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

تصميم قسم البطل لجميع تنسيقات المنشورات

نظرًا لأن كل تنسيقات منشوراتك ستشارك نفس قسم البطل وتصميم الشريط الجانبي ، يمكنك إضافة CSS المخصص أولاً. ارجع إلى Theme Customizer ، وانقر فوق CSS إضافي في الأسفل ، وأضف CSS المخصص التالي:

.hero-section {
	padding-top: 120px;
	padding-bottom: 120px;
	background-repeat: no-repeat;
	background-size: cover;
	position:relative;
	max-height: 450px;
	background-color: #333;
}

.single-post #main-content #left-area {padding-top: 0px;}

/* ---- Sidebar Settings ---- */
.single #sidebar {background: #efefef; padding-top: 20px; padding-right: 20px; padding-left: 20px; padding-bottom: 20px;}

/* ---- Standard Post Title & Post Meta ---- */
.single h1.entry-title,.attachment h1.entry-title, .single p.post-meta {
width: 100%;
text-align: center;
padding-left: 8px;
padding-right: 8px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}

 @media only screen and (min-width: 980px) {
/*** Set title font size for desktop ***/
.single h1.entry-title {
font-size: 65px !important;
}
 }

تحقق الآن من شكل المنشور القياسي الآن.

مع وجود قسم البطل وتصميم الشريط الجانبي ، فأنت جاهز لتصميم تنسيقات المنشورات الفردية.

تصميم تنسيق المنشور القياسي

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

كل ما سنفعله لهذا التنسيق القياسي هو إضافة الصورة المميزة. نظرًا لأن هذه الصورة المميزة ستمتد عرض الشاشة بالكامل ، أقترح استخدام صورة تبلغ 2000 × 600. أنا أستخدم صورًا من موقع unsplash.com.

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

تصميم تنسيق مشاركة الفيديو

لتصميم تنسيق منشور الفيديو ، تأكد من تحديد تنسيق الفيديو لمشاركتك.

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

في هذا المثال ، أنا فقط أستخدم عنوان url لفيديو youtube.

أضف صورتك المميزة 2000 × 600 إلى المنشور.

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

انتقل إلى Theme Customizer → CSS الإضافي وأضف CSS المخصص التالي:

/* ---- Format the Position of the Video Wrapper ---- */
 
@media only screen and (min-width: 980px) {
 /*** elevate the video to overlap the hero section ***/
.single-post.single-format-video .et_main_video_container {margin-top: -120px; background: #fff; outline: 10px solid #ffffff !important; z-index: 100; margin-bottom: -100px;}
}

تحقق الآن من منشور تنسيق الفيديو الجديد الخاص بك.

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

تحقق الآن من منشور تنسيق الفيديو الكامل العرض:

تصميم تنسيق مشاركة الصوت

بالنسبة لتنسيق مشاركة الصوت ، تأكد من تحديد تنسيق الصوت لمنشورك.

أضف صورتك المميزة 2000 × 600.

بعد ذلك ، أضف ملف الصوت الخاص بك إلى منشورك. يمكن أن يكون هذا ملف .mp3 أو .m4a أو .ogg أو .wav. يمكنك تحميل ملف الصوت الخاص بك إلى مكتبة الوسائط الخاصة بك وإدراجها في منشورك بثلاث طرق مختلفة (تضمين مشغل الوسائط أو ارتباط إلى ملف الوسائط أو الارتباط بصفحة المرفقات).

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

الآن دعنا نلقي نظرة على منشور تنسيق الصوت.

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

انتقل إلى Theme Customizer → CSS الإضافي وأضف CSS المخصص التالي:

/* ----- Add Background Image to the Audio Player & Change size of the player ----- */
body.single .et_audio_content, .blog .et_audio_content {
margin-bottom: 0px !important;
height: 300px !important;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');
background-repeat: no-repeat;
background-size: cover;
 }

/* ---- Hide the Duplicate Audio Player  ------ */ 
div#mep_1 {display: none;}

ثم ابحث عن صورة وقم بتحميلها إلى معرض الوسائط الخاص بك (يجب أن تكون حوالي 700 × 300). ثم انسخ عنوان url والصقه في CSS أعلاه حيث تقول "أدخل عنوان URL للصورة هنا".

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

اذهب الآن للتحقق من منشور تنسيق الصوت الجديد الخاص بك.

تصميم تنسيق مشاركة الاقتباس

بالنسبة إلى تنسيق منشور الاقتباس ، تأكد من تحديد تنسيق عرض الأسعار لمنشورك.

ثم أضف صورة مميزة 2000 × 600 إلى المنشور.

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

تحقق الآن من منشورك.

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

انتقل إلى Theme Customizer → CSS الإضافي وأضف CSS المخصص التالي:

/* ---- Add Background Image to the Quote Box ---- */
 
.et_quote_content {
 
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE')!important;
background-repeat: no-repeat;
background-size: cover;
 
}

/* ---- Add the Quotation Symbol to the Quote Box ---- */
 
.et_quote_content blockquote p::before {
font-family: Cardo;
position: absolute;
top: 16px;
left: 5%;
margin-left: -16px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 70px; 
font-color: #fff;
content: "\201C" !important;
}

/* ---- Text Format Inside of quote ---- */
@media only screen and (min-width: 980px) {
.single-post.single-format-quote blockquote p {
font-size: 30px !important;
font-weight: 600 !important;
}
}

ابحث عن صورة وقم بتحميلها إلى معرض الوسائط الخاص بك (يجب أن تكون حوالي 700 × 300). ثم انسخ عنوان url والصقه في CSS أعلاه حيث تقول "أدخل عنوان URL للصورة هنا".

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

تحقق الآن من نتيجتك النهائية:

تصميم تنسيق معرض الصور

بالنسبة لتنسيق مشاركة المعرض ، تأكد من تحديد تنسيق المعرض لمشاركتك.

بعد ذلك ، تأكد من إضافة صورتك المميزة 2000 × 600.

يسمح لك تنسيق مشاركة المعرض بإنشاء معرض داخل محتوى المنشور من معرض الوسائط.

لإنشاء معرض لمشاركتك ، قم أولاً بتحميل 6 صور على الأقل في معرض الوسائط الخاص بك. يمكن أن يختلف حجم الصورة ولكن نظرًا لأن المعرض له تأثير Lightbox الذي يؤدي إلى تفجير الصور إلى الحجم الكامل ، يمكنك جعل الصور حوالي 1200 × 800.

حدد الآن صورك في معرض الوسائط ، وحدد إنشاء معرض ، وانقر فوق الزر "إنشاء معرض جديد".

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

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

اذهب الآن للتحقق من رسالتك.

دعنا نضيف بعض CSS إلى المعرض لرفعها قليلاً لتتداخل مع قسم البطل وتغيير الهوامش حول كل صورة.

انتقل إلى Theme Customizer → CSS الإضافي وأضف CSS المخصص التالي:

/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */
 
@media only screen and (min-width: 980px) {
 
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}
 
.et_post_gallery {
z-index: 100;
position: relative;
border-top: 8px solid #fff !important;
border-left: 8px solid #fff !important; 
background: #fff !important;
}

/* ---- Set Background Color, Margins & Padding for the Gallery Image ---- */
 
.et_gallery_item { margin: 0 0 0 0 !important;}
 
.et_gallery_item {
width: 33.3%;
margin: 0 0% 0% 0 !important;
padding-right: 8px !important;
background: #fff !important;
padding-bottom: 8px !important;
}
}

الآن تحقق من النتيجة النهائية.

تصميم تنسيق مشاركة الرابط

بالنسبة لتنسيق مشاركة الرابط ، تأكد من تحديد تنسيق الرابط لمشاركتك.

بعد ذلك ، أضف صورتك المميزة 2000 × 600 إلى منشورك.

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

انطلق وأضف رابطًا إلى منشورك وتحقق من تصميم المنشور.

الآن دعنا نحسن التصميم قليلاً عن طريق إضافة صورة خلفية إلى مربع الارتباط المخصص ، وأيقونة على يسار عنوان url للرابط.
انتقل إلى Theme Customizer → CSS الإضافي وأضف CSS المخصص التالي:

/* ---- Add thick border to the left side and Lower the link box ---- */

.et_link_content {
border-bottom: 8px solid #ddd; 
background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(ENTER IMAGE URL HERE);
background-size: cover;
background-color:#edb059; 
border-radius: 25px; 
}

/* ---- Font Settings within the Link box ---- */

.et_link_content a.et_link_main_url { font-size: 21px; font-weight: 600; color: #fff !important;}

/* ---- Link Symbol on the right side ---- */
 
.et_link_content::before {
font-family: "ETmodules";
position: absolute;
top: 38%;
left: 5%;
margin-right: -26px;
border-radius: 31px;
background: rgba(255, 255, 255, .0);
font-size: 48px; 
color: #fff;
content: "\e02c";
}

/* ---- Position & Style the Gallery to Overlap the Featured Image ---- */

@media only screen and (min-width: 980px) {
 
.single-format-gallery .et_post_meta_wrapper { margin-top: -100px;}

ثم ابحث عن صورة وقم بتحميلها إلى معرض الوسائط الخاص بك (يجب أن تكون حوالي 700 × 300). ثم انسخ عنوان url والصقه في مقتطف CSS الذي أدخلته للتو حيث يقول "أدخل عنوان URL للصورة هنا".

background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('ENTER IMAGE URL HERE');

الآن تحقق من شكل المنشور.

هذا كل شيء!

الآن وقد تم تصميم جميع تنسيقات المنشورات لدينا ، فقد حان الوقت للتحقق من التصميم الرائع الذي ينشئه على صفحة المدونة. يمكنك أن ترى كيف يتم عرض جميع العناصر المميزة لصيغة المنشور المختلفة.

ملاحظة: يمكنك عرض مدونتك باستخدام المحرر الافتراضي أو Divi Builder وسيظل التصميم يعمل.

مستجيب؟

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

افكار اخيرة

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

يرجى تقديم تعليقاتك أدناه. إنني أتطلع إلى الاستماع منك.