التحكم الكامل ⚙️

ربط قسم الـ Hero بلوحة التحكم

سنجعل النصوص والصور قابلة للتغيير من قسم "التنسيق" دون الحاجة لفتح محرر الأكواد في كل مرة.

هل سئمت من الدخول إلى محرر الأكواد في كل مرة تريد فيها تغيير جملة تسويقية أو تحديث صورة منتجك في واجهة المدونة؟ في هذا الدرس، سننتقل بمدونتك من "القوالب الجامدة" إلى "الأنظمة الديناميكية". سنتعلم معاً كيف نستخدم قوة وسوم بلوجر البرمجية b:section لتحويل قسم الـ Hero إلى لوحة تحكم مصغرة تسمح لك بتعديل محتواك بضغطة زر من صفحة التنسيق.

إنشاء قسم الهيرو في بوجر
الفكرة البرمجية

تحويل التصميم إلى ودجت (Widgets)

بدلاً من كتابة الروابط والصور يدوياً، سنقوم بإنشاء "حاويات" (Sections) تستقبل الأدوات من لوحة تحكم بلوجر، مما يجعل القالب مرناً وسهل التعديل لأي مستخدم.

الخطوة الأولى

هيكل HTML الديناميكي

قم بالبحث عن وسام </nav> في قالبك، وضعه مباشرة تحت وسم </nav> أو في المكان المخصص لعرض الهيدر.

أداة النصوص (Title & Description): في قسم hero-text-section، اضغط على "إضافة أداة" واختر "رأس الصفحة" (Header). سيقوم هذا بجلب عنوان ووصف مدونتك تلقائياً.
أداة الأزرار (Buttons): في قسم hero-buttons-section، اضغط على "إضافة أداة" واختر "قائمة روابط" (Link List). اسم الرابط سيكون هو نص الزر، وعنوان URL سيكون وجهة الزر.
أداة الصورة (Hero Image): في قسم hero-image-section، اضغط على "إضافة أداة" واختر "صورة" (Image). يمكنك رفع صورة منتجك أو شعار موقعك لتظهر بجانب النصوص مع تأثير الحركة.
Blogger XMLتوضع داخل <body>
<!-- قسم الهيرو الديناميكي -->
<section class='hero-section' id='hero'>
  <div class='hero-container'>
 
    <div class='hero-content'>
      <!-- 1. حاوية النصوص -->
      <b:section class='hero-text-section' id='hero-text-section' maxwidgets='1' showaddelement='yes'>
      </b:section>

      <!-- 2. حاوية الأزرار -->
      <div class='hero-btns'>
        <b:section class='hero-buttons-section' id='hero-buttons-section' showaddelement='yes'>
        </b:section>
      </div>
    </div>

    <div class='hero-image'>
      <!-- 3. حاوية الصورة -->
      <b:section class='hero-image-section' id='hero-image-section' maxwidgets='1' showaddelement='yes'>
      </b:section>
    </div>

  </div>
</section>
الخطوة الثانية

تنسيقات CSS المتقدمة

انسخ هذه التنسيقات وضعها فوق وسم ]]></b:skin>. لقد صممنا هذه الأكواد لتعرف تلقائياً متى يتم إضافة رابط (ليتحول لزر) ومتى يتم إضافة صورة (ليتم توسيطها وتحريكها).

CSS3توضع في منطقة التنسيق
/* =========================================
   تنسيقات قسم الهيرو الشاملة
   ========================================= */

.hero-section {
  padding: 150px 0 100px;
  background: radial-gradient(circle at top right, #fdfcfb 0%, #e2d1c3 100%);
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  gap: 50px;
}

/* تنسيق النصوص (أداة الرأس) */
.hero-content { flex: 1; }
.hero-content .Header h1 {
  font-size: 3.5rem;
  color: #0f172a;
  font-weight: 800;
  margin-bottom: 20px;
}
.hero-content .Header .description {
  font-size: 1.2rem;
  color: #64748b;
  margin-bottom: 30px;
}

/* تنسيق الأزرار (أداة قائمة الروابط) */
.hero-btns ul { 
  list-style: none; 
  padding: 0; 
  display: flex; 
  gap: 15px; 
}
.hero-btns ul li a {
  display: inline-block;
  background: var(--primary);
  color: white !important;
  padding: 15px 35px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
  box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
}
.hero-btns ul li a:hover { transform: translateY(-3px); background: var(--primary-dark); }

/* تنسيق الصورة (أداة الصورة) */
.hero-image { flex: 1; text-align: center; }
.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 30px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@media (max-width: 992px) {
  .hero-container { flex-direction: column; text-align: center; }
  .hero-image { order: -1; }
  .hero-btns ul { justify-content: center; }
}
الخطوة الثالثة

تنسيق وضع التخطيط (Layout)

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

CSSخاص بلوحة التحكم
/* تحسين مظهر الأقسام في صفحة التنسيق */
body#layout #hero-text-section {
    margin-top: 110px;
    border: 2px dashed #6366f1;
    padding: 10px;
}
الخطوة الرابعة

تصميم قسم المميزات (Features)

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

قريبا
تم النسخ! جاهز للربط 🔗

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)