توضيح: بعض اللينكات في الدليل ده لينكات أفلييت (تسويق بالعمولة). لو اشتريت من خلالها، Floux ممكن تاخد عمولة من غير أي تكلفة زيادة عليك. إحنا بنرشح بس الأدوات اللي شايفينها مناسبة للمبتدئين.
لو لسه منزّل WordPress وحاسس إنك تايه بين الثيمات والإضافات والبلوكات، الدليل ده معمول عشانك. في دليل ديفي للمبتدئين ده هنشرحلك يعني إيه ثيم ويعني إيه page builder، وليه Divi من أسهل الطرق إنك تصمم موقعك بشكل مرئي، وإزاي تبني أول صفحة خطوة بخطوة من غير ما تكتب سطر كود واحد.
أهم النقاط
- Divi ثيم لـ WordPress جواه page builder مرئي، يعني بتصمم على الصفحة نفسها مش في شاشة إعدادات.
- اختيارنا للمبتدئين: Divi by Elegant Themes، عشان بيجمع القوالب الجاهزة والـ Theme Builder والألوان والخطوط الموحدة في أداة واحدة.
- حدد ألوانك وخطوطك الأساسية الأول، ابدأ من قالب جاهز، وبص على شكل الصفحة على الموبايل قبل ما تنشر.
محتوى المقال
الفرق بين الثيم والـ page builder
WordPress نفسه بيخزن محتواك ويديره: الصفحات والمقالات والصور والإعدادات. الثيم هو اللي بيحدد شكل الموقع كله: الخطوط والألوان والهيدر والفوتر وشكل المقالات. أما الـ page builder فهو أداة بتصمم بيها محتوى كل صفحة بأقسام وأعمدة وعناصر، وغالباً في محرر مرئي.
مواقع كتير بتستخدم ثيم خفيف ومعاه إضافة page builder منفصلة. Divi بيعمل الاتنين: ثيم وبيلدر في باكدج واحدة من Elegant Themes. حاجات أقل تتعلمها، وده سبب كبير إن اسمه بيتكرر في أي ترشيحات ديفي للمبتدئين. ولو حابب تفهم الثيمات والإضافات من المصدر الرسمي، توثيق WordPress.org واضح ومجاني.
ليه Divi مناسب للمبتدئين؟
- **تعديل مرئي بالسحب والإفلات:** بتدوس على العنوان وتكتب، وتسحب الصورة لمكانها وتشوف النتيجة فوراً.
- **قوالب جاهزة:** مئات الـ layout packs المتصممة باحتراف لعيادات ومطاعم وشركات ومتاجر، فمش هتبدأ من صفحة فاضية.
- **Theme Builder:** بتصمم الهيدر والفوتر وقالب المقالات مرة واحدة ويتطبقوا على الموقع كله.
- **ألوان وخطوط موحدة:** تغير لون البراند في مكان واحد، وكل زرار وعنوان بيستخدمه يتغير معاه.
- **تحكم في الموبايل والتابلت:** تقدر تحدد حجم خط ومسافات مختلفة لكل شاشة، أو تخفي عنصر على الموبايل.
- **دعم العربي والـ RTL:** Divi بيشتغل مع اللغات اللي بتتكتب من اليمين للشمال، ودي حاجة مهمة لو عملاءك في مصر أو الخليج بالعربي والإنجليزي.
معلومة حقيقية تقدر تتأكد منها: موقع Floux اللي إنت بتقراه دلوقتي متبني بـ Divi 5، أحدث إصدار من البيلدر. ومع ذلك، Divi منتج مدفوع بترخيص، ومش هو الاختيار الوحيد الكويس. لو محتاج مدونة بسيطة بس، محرر البلوكات المجاني مع ثيم خفيف ممكن يكفيك. شوف الخطط الحالية على موقع Elegant Themes قبل ما تشتري.
قبل ما تبدأ: استضافة كويسة ونسخة احتياطية
Divi بيشتغل على أي استضافة WordPress عادية، بس السيرفر البطيء هيخلي أي بيلدر تقيل. لو لسه بتختار، Hostinger اختيار مناسب للمبتدئين بننصح بيه، فيه تنصيب WordPress بضغطة واحدة ولوحة تحكم بسيطة. وأياً كانت الاستضافة، اتأكد إن فيها إصدار PHP حديث وشهادة SSL مجانية.
ولو هتضيف Divi على موقع عليه محتوى بالفعل، خد نسخة احتياطية كاملة الأول. إضافة مجانية زي WPvivid بتخليك ترجع لآخر نسخة في دقايق لو حاجة باظت بعد تغيير الثيم.
ديفي للمبتدئين: ابني أول صفحة خطوة بخطوة
الخطوة 1: نزّل Divi وفعّله
اشترك من Elegant Themes وبعدها نزّل ثيم Divi كملف ZIP من حسابك. من لوحة WordPress روح على Appearance ثم Themes ثم Add New، وارفع الملف ودوس Activate. بعدها افتح Theme Options في Divi وحط اسم المستخدم والـ API key في تبويب Updates عشان التحديثات توصلك أوتوماتيك.
الخطوة 2: حدد الألوان والخطوط الأول
قبل ما تصمم أي حاجة، اختار 2 أو 3 ألوان للبراند وخط أو اتنين. ضيفهم كألوان موحدة وحدد خط العناوين وخط النص في إعدادات الثيم. الخطوة دي بتوفر عليك ساعات بعدين، لأن كل عنصر هتضيفه هيطلع متناسق مع البراند من الأول.
الخطوة 3: اعمل صفحة وحمّل قالب جاهز
روح على Pages ثم Add New، اكتب عنوان الصفحة واختار إنك تبنيها بـ Divi. هتلاقي اختيار تبدأ من الصفر أو تستخدم قالب جاهز. افتح مكتبة القوالب وهتشوف صور مصغرة متقسمة حسب المجال. اختار الأقرب لشغلك ودوس عليه، والصفحة كلها هتظهر في ثواني.
الخطوة 4: افهم الـ sections والـ rows والـ modules
أي صفحة في Divi متبنية من 3 مستويات:
- **Sections:** الشرايح الكبيرة في الصفحة، زي قسم البداية أو قسم آراء العملاء.
- **Rows:** جوه كل section وبتقسمه لأعمدة، عمود أو اتنين أو تلاتة.
- **Modules:** المحتوى نفسه جوه الأعمدة: نص، صورة، زرار، فورم تواصل، أيقونات.
لما تقف بالماوس على أي عنصر هيظهرلك شريط صغير خاص بالمستوى ده، منه تفتح الإعدادات أو تكرر أو تحرك أو تمسح. أول ما الفكرة دي تثبت في دماغك، رحلة ديفي للمبتدئين هتبقى أسهل بكتير.
الخطوة 5: عدّل النصوص والصور والزراير
دوس على أي عنوان أو فقرة واكتب كلامك. عشان تغير صورة، افتح الـ image module وارفع صورتك من مكتبة الوسائط. وفي الزراير، غيّر النص لحاجة واضحة زي «احجز مكالمة» وحط لينك صفحة التواصل. وقبل ما تنشر، شيل كل النصوص والصور التجريبية اللي جاية مع القالب.
الخطوة 6: بص على شكل الموبايل
افتح المعاينة واختار شاشة التابلت والموبايل. العناوين اللي شكلها شيك على اللابتوب غالباً بتطلع كبيرة على الموبايل. صغّر الخطوط والمسافات للشاشات الصغيرة، واتأكد إن الزراير كبيرة كفاية تتداس بالصباع.
الخطوة 7: احفظ وعاين وانشر
احفظ شغلك، افتح المعاينة في تاب جديد وجرّب كل زرار ولينك. لما كله يشتغل، انشر. وبعدين كرر نفس الخطوات لباقي الصفحات واستخدم تاني الأقسام اللي صممتها.
أساسيات Theme Builder
الـ Theme Builder بيتحكم في الأجزاء اللي بتتكرر في كل صفحة. من قايمة Divi افتح Theme Builder، هتلاقي قالب الموقع الأساسي. ضيف هيدر وفوتر عام، صممهم مرة واحدة وهيظهروا في كل حتة.
وتقدر كمان تعمل قوالب لمحتوى معين، زي كل المقالات أو صفحة التصنيفات أو صفحة الخطأ 404، وتحدد كل قالب يشتغل على أنهي صفحات. في الأول خليها بسيطة: هيدر واحد وفوتر واحد وقالب واحد للمقالات بيكفوا معظم مواقع البيزنس الصغيرة.
خلي موقع Divi سريع
- صغّر الصور قبل ما ترفعها. صورة 4000 بكسل في مربع صغير بتخلي الزائر ينزّل الملف كله. اضغطها واستخدم صيغ حديثة زي WebP.
- متكترش من الأنيميشن. حركة أو اتنين خفاف شكلهم شيك، لكن تحريك كل عنصر بيخلي الموقع تقيل ومشتت.
- متنزلش كذا إضافة بتعمل نفس الشغلانة.
- سيب إعدادات الأداء المدمجة في Divi شغالة، وضيف كاش لو الاستضافة بتوفره.
السرعة جزء من الرعاية الدورية للموقع، زي التحديثات والحماية. قايمة مهام صيانة WordPress بتوضحلك تراجع إيه كل شهر.
أشهر أخطاء ديفي للمبتدئين
- تظبيط كل عنصر بإيدك بدل ما تستخدم الألوان والخطوط والـ presets الموحدة، فالصفحات تطلع مش متناسقة.
- استخدام خطوط وألوان كتير في نفس الموقع.
- التصميم للكمبيوتر بس من غير ما تبص على الموبايل.
- رفع صور ضخمة على طول من الكاميرا أو الموبايل.
- نسيان نصوص وصور تجريبية أو لينكات فاضية من القالب.
- التجريب على الموقع الحي من غير نسخة احتياطية.
إمتى تستعين بمحترف؟
Divi ممتاز لموقع تعريفي بسيط أو بورتفوليو أو موقع بيزنس صغير عايز تديره بنفسك. لكن يستاهل تستعين بمحترف لو محتاج متجر إلكتروني، أو موقع بالعربي والإنجليزي بتفاصيل RTL مظبوطة، أو خصائص مخصوصة، أو هيكل مبني صح لمحركات البحث. خدمة تصميم مواقع WordPress ودليل هيكل الموقع للـ SEO بيوضحولك الشغل الاحترافي بيشمل إيه.
الأسئلة الشائعة
هل Divi مناسب للمبتدئين؟
أيوه. المحرر المرئي والقوالب الجاهزة والستايلات الموحدة بيخلوه من أسهل الطرق لبناء موقع WordPress شكله حلو من غير كود. هتحتاج وقت بسيط تفهم فيه الـ sections والـ rows والـ modules، وبعدها الشغل بيمشي بسرعة.
محتاج أعرف برمجة عشان أستخدم Divi؟
لأ. تقدر تبني صفحات كاملة من غير كود. شوية CSS بيساعدوا في التفاصيل الدقيقة، لكنهم مش ضروريين لمعظم مواقع البيزنس الصغيرة.
Divi بيدعم العربي والمواقع RTL؟
أيوه. Divi بيدعم اللغات RTL. خلي لغة موقع WordPress عربي وجرّب كل صفحة، خصوصاً القوايم والأيقونات والمسافات، لأن بعض القوالب محتاجة تعديلات بسيطة.
هل Divi بطيء؟
مش بطبيعته. معظم مواقع Divi البطيئة سببها صور تقيلة أو أنيميشن كتير أو إضافات زيادة أو استضافة ضعيفة. اتعامل مع الحاجات دي وموقعك هيفتح بسرعة.
الخلاصة إن ديفي للمبتدئين بيعتمد على كام عادة بسيطة: حدد الستايلات الموحدة الأول، ابدأ من قالب، خلي الصفحات خفيفة، وبص دايماً على الموبايل. ولو تفضّل حد محترف يبنيلك الموقع، اطلب عرض سعر مجاناً وهنرد عليك خلال يوم عمل واحد.
