كيفية إنشاء مربع تصميم مواد أنيق في بلوجر و وردبريس خطوة بخطوة

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

كيفية إنشاء مربع تصميم مواد أنيق في بلوجر و وردبريس

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

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

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

لإنشاء مربع تصميم مواد أنيق في بلوجر اتبع الخطوات التالية:

الخطوة 1. إضافة كود CSS إلى قالب بلوجر.

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

الخطوة 2: أولاً، عليك تسجيل الدخول إلى لوحة تحكم بلوجر. ثم انقر فوق المظهر من القائمة الموجودة على الجانب الأيسر. بعد ذلك، انتقل إلى  تخصيص > تحرير HTML.

الخطوة 3: الآن أضف CSS إلى القالب. انسخ الكود أدناه والصقه أعلاه ]]></b:skin> .

/* material design box by bytesvibe.com */
.bytesvibebox {
  background-color: #fff;
  position: relative;
  margin: 40px 2px;
  padding: 40px 15px 15px;
  border: 1px solid rgba(230, 230, 230, 1);
  border-radius: 5px;
  box-shadow: 0 10px 20px 0 rgba(30, 30, 30, 0.07);
}
.bytesvibebox h2 {
  background-color: #02d07a;
  border-radius: 3px;
  padding: 8px 20px !important;
  position: absolute;
  margin: 0 !important;
  font-size: 17px !important;
  color: #fff;
  top: -20px;
  font-weight: bold;
  left: 30px;
  text-transform: uppercase;
}
.bytesvibebox.box-yellow h2 {
  background: #e2c601;
}
.bytesvibebox.box-blue h2 {
  background: #2ad2c9;
}
.bytesvibebox.box-red h2 {
  background: #f7176a;
}

/* table detail */
table {
  width: 100%;
  margin: 20px 0px;
  border: 1px solid rgba(230, 230, 230, 1);
  border-radius: 7px;
  overflow: hidden;
  font-size: 14px;
}
table th {
  background-color: transparent;
  padding: 15px 20px;
  border: 1px solid #ddd;
  border-left: 0;
  font-family: Noto Sans;
  font-size: 13px;
}
table td {
  padding: 15px 20px;
  border: 1px solid #ddd;
  border-left: 0;
  border-top: 0;
  vertical-align: middle;
}

الآن قم بحفظ جميع التغييرات. سيتيح لنا هذا CSS إنشاء أشكال مختلفة من مربعات المحتوى بألوان خلفية مختلفة.

الخطوة 4. أضف كود HTML لإنشاء المربعات.

الآن بعد أن أضفنا CSS لمربع التصميم الأنيق لمدونة بلوجر، يمكننا استخدام كود HTML التالي لعرض هذه المربعات على منشورات أو صفحات بلوجر. ما عليك سوى نسخ ولصق هذا الكود HTML في عرض HTML لمحرر منشورات بلوجر ورؤية سحر صندوق بتصميم مواد أنيق. لقد أضفت عرضًا توضيحيًا لجميع أمثلة التصميم مواد، لذا يمكنك التحقق منها أيضًا.

المثال 1: المربع الأساسي

<div class="bytesvibebox"><h2>Title</h2><!--Your content here--></div> 

المثال 2: مربع برأس أزرق

<div class="bytesvibebox box-blue"><h2>Title</h2><!--Your content here--></div>

المثال 3: مربع يحتوي على رأس وقائمة باللون الأصفر

<div class="bytesvibebox box-yellow"><h2>Bytes Vibe</h2><ul><li>First item</li><li>Second item</li></ul></div>

المثال 4: صندوق بلوجر الأنيق مع طاولة

<div class="bytesvibebox"><h2>Title</h2><table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody><tr><td><b>Name</b></td> <td>Bytes Vibe</td></tr><tr><td><b>License</b></td> <td>Personal</td></tr><tr><td><b>Version</b></td> <td>1.0</td></tr><tr><td><b>Price</b></td> <td>$100</td></tr></tbody></table></div>

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

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

يمكننا بسهولة تخصيص المربعات عن طريق تغيير ألوان الخلفية أو الحشو أو حجم الخط داخل CSS. على سبيل المثال، إذا أردنا إنشاء مربع أحمر، فما علينا سوى إضافة الفئة box-red كما يلي:

<div class="bytesvibebox box-red">
  <h2>Red Header</h2>
  <p>This is a red box with content.</p>
</div>

الأسئلة الشائعة:

1. هل يمكنني استخدام هذه الصناديق لمنصات أخرى غير بلوجر؟

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

2. كيف يمكنني إزالة تأثير الظل من الصندوق؟

إذا أردنا إزالة تأثير الظل من صندوق بتصميم مواد أنيق، فيمكننا تعديل ظل الصندوق الخاصية في CSS مثل هذا:

bytesvibebox {box-shadow: none;}

3. هل يمكنني إنشاء مربعات متعددة بألوان مختلفة على صفحة واحدة؟

بالتأكيد! إذا أردت، يمكنك مزج ومطابقة المربعات ذات الرؤوس ذات الألوان المختلفة باستخدام الفئات. الصندوق-الأزرق او الصندوق-الأصفر أو الصندوق-الأحمر.

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

إذا كانت هناك أي مشاكل مع الصناديق، قم بالتعليق عليها أدناه وسأقوم بمساعدتك. دمتم في رعاية الله وحفظة.

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