2. بنية الصفحة وتصميم قسم Hero - Bricks Builder 2026

في هذا الفيديو التعليمي الشامل، نتابع رحلة بناء موقع إلكتروني احترافي باستخدام Bricks Builder في عام 2026. يركز الفيديو بشكل أساسي على تصميم قسم Hero (قسم الهيرو)، وهو الجزء الأهم الذي يقع في أعلى الصفحة. سنتعلم كيفية تنظيم هيكلة الصفحة (Page Structure) باستخدام السكاشن والكونتينرز، بالإضافة إلى نظام التصميم (Design System) لضبط الألوان والخطوط بشكل موحد لضمان سرعة الموقع وتحسين محركات البحث (SEO) عبر استخدام صيغ صور حديثة مثل WebP. 00:00 - مراجعة الأساسيات وتحديثات Bricks 2026 - استكمال ما تم بناؤه في المحاضرة السابقة، مع تسليط الضوء على الميزات الجديدة في الإصدار الأخير من Bricks Builder وأهمية تحديث المهارات لمواكبتها. 00:49 - فن استخراج المتطلبات من العميل - شرح سيكولوجية التعامل مع العميل وكيفية تحديد هدف الموقع (براندنج، مبيعات، أو تجميع بيانات) وكيف ينعكس ذلك على تخطيط البنية والتسعير. 04:38 - الهوية البصرية والمدرسة التصميمية للمواقع الطبية - لماذا نختار الأزرق والأخضر؟ وكيفية عرض نماذج (Templates) للعميل لتحديد ذوقه الفني قبل البدء في التنفيذ الفعلي لتوفير الوقت. 08:23 - تخطيط صفحات الموقع (Site Mapping) - تأسيس الصفحات الأساسية (الخدمات، الحجز، من نحن) والفرق بين تصميم الموقع كصفحة هبوط واحدة (Landing Page) أو صفحات متعددة. 13:26 - بنية الصفحة وفلسفة الحاويات (Sections & Containers) - شرح تقني عميق لهيكلة الصفحة في Bricks، والفرق بين "السكشن" للعرض الكامل و"الكونتينر" للمحتوى المتوسط، وأهمية تسمية العناصر في الـ Structure panel. 19:10 - تحسين الصور وتقنيات SEO للـ Hero Section - البدء بتصميم قسم الـ Hero، وشرح عملي لكيفية ضغط الصور وتحويلها لصيغة WebP لضمان أعلى سرعة تحميل (LCP) وتحسين نتائج محركات البحث. 32:02 - هندسة الصفوف والأعمدة (Layout Logic) - تخطيط القسم بعقلية المطور؛ تقسيم المحتوى إلى صفوف وأعمدة، وشرح الفرق بين تقنيات Flexbox و Grid في توزيع البلوكات. 42:05 - بناء نظام التصميم (Global Design System) - تأسيس الألوان والخطوط الشاملة للموقع (Global Styles) باستخدام المتغيرات (Variables) لضمان سهولة التعديل الشامل بضغطة واحدة من مكان واحد. 01:03:00 - هندسة المساحات (Spacing: Padding & Margin) - تطبيق قواعد المسافات البيضاء لإعطاء راحة بصرية، وشرح الفرق الجوهري بين الهامش الداخلي والخارجي وكيفية ضبطهما لجميع الشاشات. 01:14:41 - تنسيق الأزرار (Buttons) واللمسات النهائية - إنشاء ستايلات الأزرار (Primary & Secondary) وتخصيص الأيقونات، مع ضبط الحواف الدائرية (Border Radius) لتناسب الهوية الطبية. --- #BricksBuilder #WordPress #WebDesign #UIUX #SEO #تطوير_مواقع #تصميم_مواقع --- سجل في منصة الأكاديمية https://academy.muhammadalaa.com