كيفية إضافة صناديق تصميم مخصصة في موقع الويب الخاص بك

صناديق تصميم مخصصة

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

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

هيا بنا نبدأ في تجسيد الإبداع وإضافة صندوق تصميم مخصص في موقع الويب الخاص بك!

مميزات صندوق التصميم المخصص:

• يبدو رائعًا.
• سينبهر الزوار.
• سهل الاستخدام.
• يعطي مظهرًا جماليًا لموقعك.

تم استخدم كودين فقط، HTML و CSS. لذا لا داعي للقلق بشأن تأثيره على سرعة موقعك.

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

كيفية إضافة صندوق تصميم مواد مخصص في المدونة:

معاينة الإضافة :

معاينة الاضافة

كيفية إضافة صندوق تصميم مخصص:

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

الخطوة 1: قم بتسجيل الدخول إلى لوحة تحكم المدونة الخاصة بك.

الخطوة 2: انقر على "القالب" في لوحة تحكم المدونة.

الخطوة 3: انقر على السهم الذي يشير لأسفل بجانب زر "تخصيص".

الخطوة 4: انقر على "تحرير HTML"، ستتم إعادة توجيهك إلى صفحة التحرير.

الخطوة 5: الآن ابحث عن الكود ]]</b:skin> أو /*]]>*/</style> وقم بلصق الأكواد CSS التالية فوقه. أو يمكنك لصقها قبل علامة <head/>.

.mtbox{margin-top:17px;padding:15px;border-radius:10px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background-color: #ffffff; opacity: 1; background-image: radial-gradient(#e7e7e7 2px, #ffffff 2px); background-size: 40px 40px; } .box-info{padding:2px;border:1px solid #f0f0f0;margin-top:12px;border-radius:5px;background-color:#FFFFFFBF; } .mtbox h2{background:#f7176a;border-radius:5px;padding:8px 20px!important;margin:0!important;font-size:17px!important;color:#fff;top:-20px;font-weight:bold;left:30px;text-transform:uppercase;text-align: center;}
/*color by gamingsalt media */.mtbox.yellow h2{background-image: radial-gradient( circle 957px at 8.7% 50.5%, rgba(246,191,13,1) 0%, rgba(249,47,47,1) 90% );} .mtbox.red h2{background-image: radial-gradient( circle 905.6px at 4.9% 7.9%, rgba(218,0,0,1) 14.1%, rgba(168,2,144,1) 65%, rgba(102,2,110,1) 90% );} .mtbox.blue h2{background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(37,145,251,0.98) 0.1%, rgba(0,7,128,1) 99.8% );} .mtbox.black h2{background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(90,92,106,1) 0%, rgba(32,45,58,1) 81.3% );} .mtbox.pink h2{background-image: radial-gradient( circle 602px at 2.1% 5.1%, rgba(233,0,120,1) 0%, rgba(0,0,0,1) 90.1% );}
/* darkmode color */
.drK .mtbox{box-shadow: rgba(50, 50, 93, 225.25) 0px 2px 5px -1px, rgba(225, 225, 225.3) 0px 1px 3px -1px;background-color:#292929;background-image: radial-gradient(#363434 2px, #141313 2px); background-size: 40px 40px; }.drK .box-info{background-color: #363535B5;}

لا تنسى تغيير drK. بسمة وضع الظلام الخاصة بموقعك، إذا كان قالبك لا يحتوي على ميزة وضع الظلام، فاحتفظ بالقيمة الافتراضية!

الخطوة 6: قم بحفظ التغييرات في صفحة التحرير بالنقر على هذا الرمز  

الخطوة 7: ثم انتقل إلى المقالة/الصفحة أو المكان الذي ترغب في إضافة صندوق التصميم المخصص إليه.

الخطوة 8: ثم إذا كنت تقوم بذلك في صفحة/مقالة، في عرض محرر المقالة، انقر على الرمز في أسفل اليمين من العنوان.

- سيظهر خياران: عرض HTML وعرض الكتابة، حدد " عرض HTML ".

الخطوة 9: الآن قم بلصق الكود HTML التالي في المكان المناسب

<!--[  قم بتغيير رمز اللون حسب الحاجة. أحمر، أصفر، وردي، أزرق، أسود ]-->
<div class="mtbox red">
<!---[ عنوان h2 ]-->  
<h2>هنا تضع العنوان</h2>
<!---[ فقرة p ]-->
<div class="box-info">  
<p>هذا النص معاينة (مثال) للنص الدي يمكنك كتابة اة تعديله على الاضافة - معانية للنص فقط معانية للنص فقط معانية للنص فقط معانية للنص فقط رمعانية للنص فقط معانية للنص فقط معانية للنص فقط .</p>
</div></div>
<div class="mtbox yellow"><h2>هنا تضع العنوان</h2><div class="box-info"><p>هذا النص معاينة (مثال) للنص الدي يمكنك كتابة اة تعديله على الاضافة - معانية للنص فقط معانية للنص فقط معانية للنص فقط معانية للنص فقط رمعانية للنص فقط معانية للنص فقط معانية للنص فقط .</p></div></div><div class="mtbox blue"><h2>هنا تضع العنوان</h2><div class="box-info"><p>هذا النص معاينة (مثال) للنص الدي يمكنك كتابة اة تعديله على الاضافة - معانية للنص فقط معانية للنص فقط معانية للنص فقط معانية للنص فقط رمعانية للنص فقط معانية للنص فقط معانية للنص فقط .</p></div></div><div class="mtbox black"><h2>هنا تضع العنوان</h2><div class="box-info"><p>هذا النص معاينة (مثال) للنص الدي يمكنك كتابة اة تعديله على الاضافة - معانية للنص فقط معانية للنص فقط معانية للنص فقط معانية للنص فقط رمعانية للنص فقط معانية للنص فقط معانية للنص فقط .</p></div></div><div class="mtbox pink"><h2>هنا تضع العنوان</h2><div class="box-info"><p>هذا النص معاينة (مثال) للنص الدي يمكنك كتابة اة تعديله على الاضافة - معانية للنص فقط معانية للنص فقط معانية للنص فقط معانية للنص فقط رمعانية للنص فقط معانية للنص فقط معانية للنص فقط .</p></div></div>

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

الخطوة 10: انقر على "تحديث" أو "نشر" لحفظ التغييرات.

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

جميع الحقوق محفوظة ©
www.webwrd.com

انتقل إلى الرابط