تصميم قسم المميزات المطور
سنتجاوز حدود الروابط البسيطة لنصمم بطاقات تحتوي على أيقونات ونصوص مخصصة يتم التحكم بها بسهولة.
كيف ستدير مميزات موقعك؟
بدلاً من كتابة الأكواد المعقدة في كل مرة، قمنا بتصميم نظام يتيح لك إضافة كل "ميزة" كأداة منفصلة من لوحة تحكم بلوجر. يمكنك الآن اختيار الأيقونة التي تعجبك، كتابة العنوان الذي تفضله، وإضافة وصف تفصيلي بكل سهولة مع إمكانية ترتيبها بالسحب والإفلات.
استدعاء مكتبة Font Awesome
قبل البدء، الأيقونات المستخدمة في هذا الشرح تعتمد على مكتبة Font Awesome. إذا لم تكن مضافة في قالبك، فلن تظهر الأيقونات. تأكد من إضافة رابط المكتبة داخل وسم <head> في تعديل HTML الخاص بالقالب.
<!-- رابط Font Awesome (أضفه داخل head) --> <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css' rel='stylesheet'/>
إضافة هيكل HTML الديناميكي (المطور)
ضع هذا الكود تحت قسم الهيرو. لقد قمنا بتطوير الهيكل ليشمل قسم خاص (Text) يحتوي على أيقونة وعنوان ووصف يمكن تعديلهم بالكامل من واجهة "التنسيق"، يليه حاوية features-grid التي تقبل إضافات متعددة.
<!-- قسم المميزات المطور -->
<section class='features-section' id='features'>
<!-- عنوان القسم (يُعدل من التنسيق عبر أداة نص) -->
<b:section id='features-title-area' class='section-title-wrapper' maxwidgets='1' showaddelement='yes'>
<b:widget id='Text99' locked='false' title='مميزاتنا' type='Text'>
<b:includable id='main'>
<div class='section-header'>
<i class='fas fa-th-large sub-icon'></i>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='section-desc'>
<data:content/>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
<!-- شبكة المميزات -->
<div class='features-grid'>
<b:section id='advanced-features-section' class='features-list' showaddelement='yes'>
<!-- إضافة المميزات كـ HTML/Javascript -->
</b:section>
</div>
</section>
تنسيقات الـ CSS الفاخرة
هذا الكود سيجعل البطاقات تبدو عصرية مع تأثيرات حركية عند تمرير الماوس وتنسيق خاص للأيقونات.
/* تنسيقات قسم المميزات */
.features-section {
padding: 80px 5%;
background: #ffffff;
}
.section-header {
text-align: center;
margin-bottom: 50px;
}
.section-header .sub-icon {
font-size: 1.5rem; color: var(--primary);
background: #e0e7ff; padding: 12px;
border-radius: 12px;
margin-bottom: 15px;
display: inline-block;
}
.section-header h2 {
font-size: 2.5rem;
color: var(--text-dark);
font-weight: 800;
margin: 10px 0;
}
.section-desc {
color: var(--text-gray);
max-width: 600px;
margin: 0 auto;
font-size: 1.1rem;
}
/* السطر السحري للتجاوب */
.features-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px; max-width: 1200px; margin: 0 auto;
}
/* توزيع الشبكة */
.features-grid .features-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
/* تنسيق بطاقة الميزة (الودجت) */
.features-list .widget {
background: #f8fafc;
padding: 40px;
border-radius: 30px;
border: 1px solid #f1f5f9;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.features-list .widget:hover {
background: #ffffff;
transform: translateY(-12px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}
/* تنسيق المحتوى داخل الودجت */
.feature-item { text-align: right; }
.feature-item i {
width: 60px;
height: 60px;
background: var(--accent-gradient);
color: #6366f0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
font-size: 1.5rem;
margin-bottom: 25px;
box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
}
.feature-item h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--text-dark);
font-weight: 700;
}
.feature-item p {
font-size: 1rem;
color: var(--text-gray);
line-height: 1.8;
margin: 0;
}
@media (max-width: 768px) {
.section-header h2 { font-size: 1.8rem; }
.features-list { grid-template-columns: 1fr; }
}
كيف يعمل التجاوب (Responsiveness)؟
لقد استخدمنا تقنية CSS Grid مع السطر السحري التالي:
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@media معقدة لكل حجم شاشة.
كيف تضيف ميزة من لوحة التحكم؟
اذهب إلى التنسيق (Layout) > ابحث عن قسم advanced-features-section > اضغط إضافة أداة > اختر HTML/JavaScript > ثم ضع الكود التالي في "المحتوى":
<div class="feature-item"> <i class="fas fa-rocket"></i> <h3>سرعة خارقة</h3> <p>نضمن لك تحميل صفحات موقعك في أقل من ثانية بفضل تقنياتنا المتطورة.</p> </div>
fa-rocket إلى أي اسم أيقونة من موقع Font Awesome (مثل: fa-shield-alt, fa-headset, fa-chart-line).
🛠️ كيف تتحكم في القسم من لوحة تحكم بلوجر؟
بعد إضافة الأكواد السابقة، لن تحتاج للدخول إلى محرر HTML مرة أخرى. يمكنك إدارة كل شيء من قائمة "التنسيق" (Layout) كالتالي:
1. تعديل العنوان الرئيسي والوصف
ابحث عن أداة باسم "مميزاتنا" (أو الاسم الذي اخترته) من نوع "نص" (Text) في لوحة التنسيق:
- العنوان (Title): اكتب هنا العنوان الذي يظهر في المنتصف (مثل: خدماتنا المتميزة).
- المحتوى (Content): اكتب هنا الوصف التفصيلي الذي يظهر أسفل العنوان.
- الأيقونة: تظهر الأيقونة تلقائياً حسب الكود، ويمكنك تغييرها برمجياً من المحرر إذا أردت تخصيصاً أكبر.
2. إضافة ميزة جديدة (Card)
داخل منطقة advanced-features-section، اضغط على "إضافة أداة" ثم اختر HTML/JavaScript:
- العنوان: يمكنك تركه فارغاً أو كتابة اسم الميزة للتنظيم الداخلي فقط.
- المحتوى: انسخ كود "الميزة الواحدة" (الذي يحتوي على الأيقونة والعنوان الصغير والوصف) والصقه هناك.
3. إعادة الترتيب (السحب والإفلات)
أجمل ما في هذا النظام هو المرونة؛ يمكنك سحب "ودجت" ميزة معينة ووضعها قبل أخرى، وسيتم تحديث الترتيب في الموقع فوراً دون أي تعديل في الكود.
نظام عرض المنتج
عرض المنتجات بتنسيق متجاوب مع أزرار طلب مباشرة.
ليست هناك تعليقات:
إرسال تعليق