كيفية بناء موقع ويب مع Divi 5 (انضم مبكرًا والمضي قدمًا)

فكر في العودة إلى عندما أدركت أولاً مدى سرعة تجميع موقع ويب جميل مع Divi. شعرت وكأنه التوازن المثالي بين الإبداع والبساطة. أعطى Divi 4 الجميع أدوات تصميم رائعة وباني بصري ناعم ، لكننا في مواضيع أنيقة لن نستقر.

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

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

Divi 5 جاهز للاستخدام على مواقع الويب الجديدة ، ولكن ليس جاهزًا تمامًا للترحيل المواقع الموجودة.

ما الذي يجعل Divi 5 مختلفًا؟

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

تستمر الويب في التطور ، مع زيادة التصفح المتزايد وتوقعات المستخدمين. لقد تكيف Divi دائمًا مع هذه التغييرات ، ويواصل Divi 5 هذا التقليد من خلال تبني أحدث المعايير.

عند فتح Divi 5 ، قد تفكر ، "هذا يبدو جديدًا". ثم تبدأ في البناء ، وذلك عندما تلاحظ ذلك.

"انتظر ، هل تم تحميل هذا القسم على الفور؟"

نعم ، لقد فعلت. وهذه مجرد البداية.

يحتفظ Divi 5 بما كان يعمل في Divi 4 ولكنه يحدد الإحباطات التي ربما تعلمتها التعايش معها. لقد بنينا ذلك لأن جيدة بما فيه الكفاية لم تعد جيدة بما يكفي ، وليس لنا ، وبالتأكيد ليس لك. تحتاج المواقع التي تبنيها اليوم إلى بذل المزيد من الجهد والتحميل بشكل أسرع.

دعونا نستكشف أبرز أبرز ما يشحن ألفا الحالي لـ Divi 5 مع:

من الرموز القصيرة إلى الهيكل القائم على كتلة

قام Divi 4 بتخزين تخطيطاتك على شكل رموز مختصرة: تلك القطع من الكود بين قوسين مربعة تقرأها WordPress لإنشاء صفحاتك. لقد عملوا ، لكنهم لم يكونوا مثاليين.

في Divi 5 ، قمنا بإعادة بناء كيفية تخزين المحتوى الخاص بك. لا مزيد من الرموز المختبرة في قاعدة البيانات الخاصة بك! نستخدم الآن نهجًا نظيفًا قائمًا على الكتل يناسب اتجاه WordPress بشكل أفضل.

ستشعر بالفرق عند تحرير الصفحات. انقر على شيء ما ، ويستجيب على الفور. لا يوجد تأخير ، لا انتظار الرموز القصيرة للمعالجة. التغييرات الخاصة بك تحدث فقط.

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

واجهة Divi 5 الجديدة

يقدم Divi 5 واجهة أنظف تعيد التركيز على أعمال التصميم الخاصة بك. يتميز Visual Builder الآن بلوحات جانبية بدلاً من الصناديق العائمة التي تستخدم لتغطية المحتوى الخاص بك. سيحدث هذا التغيير فرقًا كبيرًا في كيفية عملك مع Divi.

تم إعادة تنظيم شريط الأدوات. الإجراءات الشائعة الآن في متناول يدك ، في حين تظل الأدوات المتخصصة متاحة دون تشوش مساحة العمل الخاصة بك.

تظهر ألوان ألوان ، وعناصر التحكم في الطباعة ، وتعديلات التباعد سياقًا عند الحاجة.

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

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

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

مساحة عمل متعددة الألواح

يجلب Divi 5 المنعش أن يتفاعل مع كيفية تفاعلك مع تصاميمك. على الرغم من أن Divi 4 أعطانا واجهة مستخدم بديهية ، إلا أن التصميم الجديد الأول للوحة في Divi 5 يرتبها بطرق أكثر طبيعية في أعمال التصميم.

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

يتيح لك الإعداد الجديد متعدد الألواح الحفاظ على أدواتك منتشرة ولكن لا تزال في متناول اليد.

يمكنك فتح إعدادات النص على جانب واحد مع تغيير التباعد على الجانب الآخر. لن تحتاج إلى إغلاق شيء ما للعمل على شيء آخر.

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

يفضل بعض المصممين الإعدادات على اليمين والبعض الآخر على اليسار. ليس عليك تسوية الخيار الذي لا تفضله. يتيح لك Divi 5 اختيار ما هو أكثر راحة. يمكنك تكديسها في علامات التبويب أيضًا ، مما يساعد عند تشويش العديد من العناصر.

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

لقد صممنا اللوحات لتكون جزءًا من مساحة العمل الخاصة بك ، وليس انقطاعًا إليها. مع واجهة مستخدم Divi 5 ، يمكنك التركيز على المكان الذي ينتمي إليه: على قماش تصميم الويب الخاص بك.

الانتقال من صفوف ثابتة إلى صفوف متداخلة

في Divi 4 ، عندما تحاول بناء شيء معقد ، يمكنك ضرب الجدران فجأة بهيكل عمود صف القسم ويجب أن تعتمد إما على أقسام متخصصة أو CSS المخصصة. Divi 5 يعمل على إصلاح هذا الصداع مع الصفوف المتداخلة. قد يبدو الأمر بسيطًا ، لكن هذا التغيير يفتح تمامًا ما يمكنك إنشاؤه دون اختراق الحلول.

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

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

ميزات بارزة أخرى

إلى جانب التغييرات الهيكلية الرئيسية ، يحتوي Divi 5 على ميزات جديدة تجعل بناء موقع الويب أكثر سلاسة وأكثر سهولة. دعونا نلقي نظرة على بعض الإضافات البارزة في ألفا الحالية التي ستغير كيفية عملك:

• تركز متغيرات التصميم على اختيارات التصميم الخاصة بك وإجراء تغييرات على مستوى الموقع. حدد الألوان والخطوط والأحجام والصور والعناصر الأخرى مرة واحدة ، ثم قم بتطبيقها في جميع أنحاء موقعك. هل تحتاج إلى تحديث ألوان علامتك التجارية؟ قم بتغيير المتغير ، ويتم تحديث كل مثيل تلقائيًا.
• نقرة واحدة تجعل التفاعل مع المحتوى الخاص بك بلا مجهود. فقط انقر على أي وحدة لتحريره. لا مزيد من البحث عن أيقونات التروس الصغيرة أو أزرار الإعدادات. يوفر هذا التغيير الصغير عددًا لا يحصى من النقرات طوال يوم عملك.
• يتيح لك Canvas Scaling رؤية كيف يبدو تصميمك على أحجام شاشة مختلفة دون تبديل طرق العرض. اسحب حافة القماش لتغيير حجمها ومشاهدة التصميم الخاص بك بالتكيف في الوقت الفعلي - مثالي للتحقق من السلوك المستجيب دون تبديل علامات تبويب ثابتة.
• يفتح دعم الوحدات المتقدمة إمكانيات جديدة للتصميمات الدقيقة المستجيبة. استخدم وظائف CSS مثل CALC () و CLAMP () و MIN ()/MAX () مباشرة في حقول إعدادات DIVI لإنشاء تخطيطات سائلة تتكيف تمامًا مع أي حجم شاشة.
• تحسين الأداء من خلال تجنب تحميل البرامج النصية والوحدات غير الضرورية
• تتوسع نقاط التوقف القابلة للتخصيص من ثلاثة فقط (سطح المكتب ، الجهاز اللوحي ، الجوال) إلى سبعة خيارات قابلة للتعديل. يساعدك هذا الرقابة المدفوعة على صياغة تخطيطات مثالية لكل شيء من الهواتف الصغيرة إلى شاشات Ultrawide.

بناء موقع ويب مع Divi 5: دليل خطوة بخطوة

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

1. تثبيت Divi 5

الحصول على Divi 5 الركض يستغرق بضع خطوات فقط. قم بتنزيل أحدث إصدار من Alpha من منطقة أعضائك ، وقم بتحميله إلى WordPress من خلال قسم السمة ، وقم بتنشيطه كما تفعل بشكل طبيعي.

2. تخصيص مساحة العمل الخاصة بك

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

يمكنك التبديل بين الضوء والوضع المظلم بناءً على تفضيلاتك أو وقت عملك.

إنشاء مساحة عمل تعمل من أجلك

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

افتح لوحين إعدادتين مختلفتين واسحب واحدة على الآخر. سوف يجمعون في تخطيط علامات التبويب ، مما يتيح لك التبديل بينهما بنقرة.

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

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

تسريع سير العمل الخاص بك

يمكن لاختصارات لوحة المفاتيح تسريع عملية التصميم الخاصة بك بشكل كبير في Divi 5. اضغط على خيار (؟) للوصول إلى قائمة المساعدة ، حيث ستجد قائمة كاملة من الاختصارات. تعلم فقط عدد قليل من المجموعات الرئيسية يمكن أن تحلق ساعات من المشاريع الكبيرة.

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

انقر فوق أيقونة لوحة Layers في شريط الأدوات الأيسر للاستفادة منه. يمنحك عرضًا لهيكل الصفحة بأكمله كقائمة متداخلة ، مما يجعل من الأسهل تحديد عناصر محددة عند العمل مع تخطيطات معقدة.

2. إعداد المتغيرات الديناميكية

قم بتصميم متغيرات Divi 5 تغيير كيفية إدارة العناصر المرئية لموقع الويب الخاص بك. يمنحك مكانًا مركزيًا للتحكم في تصميم موقعك وتبسيط تحديثه. فكر فيهم كاختصارات يمكنك استخدامها عبر موقع الويب الخاص بك.

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

إعداد الألوان العالمية

أولاً ، قم بإعداد بعض متغيرات الألوان. انقر فوق علامة التبويب "ألوان" ، وأضف ألوانك ، وتسمية شيء لا يُنسى مثل "العلامة التجارية الأزرق" أو "اللون الأساسي". انقر فوق حفظ ، وقمت بإنشاء متغيرك الأول.

افعل نفس الشيء لألوانك الثانوية ، وظلاتك الخلفية ، وألوان النص. إن وجود كل ألوان علامتك التجارية المحفوظة كمتغيرات يعني أنك لن تحتاج أبدًا إلى تذكر رموز السداسي مرة أخرى.

إنشاء متغيرات الخط والرقم

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

بالنسبة لمتغيرات الأرقام ، فكر في القياسات الشائعة مثل:

• الحشو القياسي (ربما 30 بكسل للأقسام)
• نصف قطر الحدود (إذا كنت تريد زوايا مستديرة)
• أقصى عرض لحاويات المحتوى
• أحجام الخطوط

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

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

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

وبالمثل ، أضف متغيرات الصورة للصور الشائعة الاستخدام ، مثل الشعارات.

استخدام المتغيرات مع الوحدات المتقدمة

يصبح Divi 5 أكثر قوة عند الجمع بين متغيرات التصميم ووحدات CSS المتقدمة. قم بإنشاء متغير رقم باستخدام وظائف CSS مثل Clamp () للطباعة المستجيبة التي تتوافق بين أحجام الشاشة.

على سبيل المثال ، قم بإنشاء متغير حجم العنوان مع: clamp (36px ، 5vw ، 72px).

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

الجمع بين المتغيرات والوحدات المتقدمة يزيل الكثير من العمل الشاق للتصميم المستجيب. يتم ضبط النص والتباعد الخاص بك تلقائيًا دون تعيين نقاط توقف متعددة يدويًا.

3. بناء الصفحات والقوالب مع Divi

الآن بعد أن قمت بتخصيص مساحة العمل الخاصة بك وأنشأت متغيرات التصميم الخاصة بك ، فقد حان الوقت لبناء صفحتك الأولى باستخدام Divi 5. يمنحك الباني المرئي عدة طرق لبدء إنشاء المحتوى.

الخيار 1: قم ببناء موقع الويب الخاص بك باستخدام Divi AI

مع Divi Quick Sites + Divi AI ، يمكنك على الفور إنشاء موقع ويب عاملة يضم صفحات متعددة ، وتخطيطات منشئ السمات ، وإعدادات التصميم الشاملة ، وشريط تنقل جاهز ، وتكوينات WordPress المحسنة من خلال توفير موجه نص أساسي.

عند إنشاء موقع ويب مع Divi AI ، انتقل إلى لوحة معلومات WordPress وانقر فوق أيقونة Divi في القائمة. ابحث عن مربع Divi السريع للمواقع واضغط على زر "إنشاء موقع جديد".

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

إذا كان لديك منتجات للبيع ، فتأكد من تثبيت خيار WooCommerce أثناء الإعداد ، وسيقوم Divi تلقائيًا بإنشاء صفحات المتجر الخاصة بك مع جميع المكونات اللازمة.

بالنسبة للصور ، يمكنك اختيار خيار Divi Quick Sites للوصول إلى مجموعة Unsplash ، أو اترك Divi إنشاء صور مخصصة بناءً على وصف عملك ، أو تحديد "استخدام النائب" إذا كنت تخطط لإضافة صورك الخاصة لاحقًا.

ستحصل على تخصيص الألوان والخطوط. يمكنك إما تحديد ألوان علامتك التجارية والطباعة يدويًا إذا كان لديك متطلبات محددة ، أو السماح لـ Divi بالوصول إلى مجموعات تكميلية.

بعد أن يقوم Divi بإنشاء صفحتك ، استبدل أي قيم ألوان ثابتة بمتغيرات التصميم الخاصة بك. هذا يربط أقسامك التي تم إنشاؤها مباشرة بنظام التصميم الخاص بك. إذا كان عميلك يريد اللون الأزرق الداكن لاحقًا ، فعليك فقط تحديثه مرة واحدة.

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

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

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

استخدم زر "إنشاء القسم مع الذكاء الاصطناعى" لإنشاء قسم جديد بسرعة. يمكنك وصف ما تحتاجه إلى Divi AI ، وسيقوم بإنشاء قسم لك.

تحسين الأقسام التي ينشئها الذكاء الاصطناعي

بمجرد إنشاء Divi المحتوى الخاص بك ، يمكنك بسهولة تخصيصه لتناسب احتياجاتك. يظل كل جزء من موقعك قابلاً للتخصيص بالكامل من خلال أدوات Divi المعتادة. قم بتغيير أي نص ، ومبادلة الصور ، وضبط التباعد ، واستخدم ألوان علامتك التجارية مع متغيرات التصميم.

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

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

الخيار 2: قم ببناء موقع الويب الخاص بك باستخدام التخطيطات الممتازة

لإضافة واحدة من 2000+ التصميمات الجاهزة إلى صفحتك ، اضغط على زر Blue Plus في الزاوية العلوية اليسرى من الشاشة واختر "Premade Layout". ستظهر نافذة تظهر على إظهار جميع خياراتك.

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

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

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

إن النظر إلى مجموعة موقع المبتدئين لدينا يستحق وقتك. كل واحد يتميز بصور فريدة وأعمال فنية لن تراها في مكان آخر.

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

بعد تطبيق تخطيط ...

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

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

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

سيكون لديك موقع الويب النهائي جاهز في دقائق. كل شيء يتناسب معًا بشكل مثالي: الألوان ، الخطوط ، الحزمة بأكملها. بعد انتهاء الأمر ، يمكنك ضبط أي شيء تريده ، تمامًا مثل أي موقع Divi.

الخيار 3: قم ببناء موقع الويب الخاص بك من الصفر

عند فتح صفحة جديدة ، سترى قماشًا نظيفًا مع إضافة قسم افتراضي. مثل Divi 4 ، يمكنك النقر فوق الزر الأخضر (+) لإضافة صف جديد والبدء في البناء من نقطة الصفر.

تمامًا مثل Divi 4 ، هناك مجموعة من الوحدات الجاهزة للاستخدام مع Divi 5.

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

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

هل تحتاج إلى منشورات مميزة في شبكة أعلى المشاركات العادية؟ مجرد عد صف آخر في الأسفل مع صف واحد مع إرادة البريد الإلكتروني ، ثم بنية من ثلاثة صفوف لصناديق المعلومات. نفس الهيكل قد يتطلب رمز مخصص في Divi 4.

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

هذه الحرية الهيكلية الجديدة تغير كيف تتعامل مع التخطيطات تمامًا. عرض المنتج مع صفوف النص/الصور بالتناوب ، ثم قسم ميزة من ثلاثة صفوف ، يعلوها شهادات العرض الكاملة؟ الكل في حاوية سائلة واحدة دون محاربة البناء.

إنشاء إعدادات مجموعة الخيارات

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

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

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

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

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

الجمع بين المسبقة لمجموعة الخيارات مع متغيرات التصميم

هنا حيث يصبح Divi 5 قويًا حقًا. عند إنشاء الإعدادات المسبقة ، لا تستخدم فقط الألوان أو الأحجام الثابتة - استخدم متغيرات التصميم بدلاً من ذلك.

قل أنك تصنع زر مسبقًا. بدلاً من اختيار لون معين ، انقر فوق أيقونة المتغيرات في منتقي الألوان وحدد متغير "العلامة التجارية الأزرق". الآن ستستخدم مسبقك دائمًا لون علامتك التجارية ، وإذا قمت بتغيير هذا اللون لاحقًا ، فسيتم تحديث جميع الأزرار التي تستخدم هذا الإعداد المسبق تلقائيًا.

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

عند الحاجة ، ما عليك سوى تحديث المتغير مرة واحدة ، وسيقوم بتحديث كل مثيل من تلقاء نفسه ، دون صداع صيد كل عنصر عندما يريد العميل "أن يكون هذا اللون الأزرق أغمق قليلاً".

يتيح لك Divi 5 أيضًا تضمين وحدات متقدمة في أي حقل حجم. هل تريد قسمًا لا يتوسع أبدًا من 1200 بكسل ولكنه يتقلص على الهاتف المحمول؟ اكتب "Min (1200px ، 90 ٪)" في مربع العرض. منتهي. ستبقى الحاوية بعرض 90 ٪ حتى تتجاوز 1200 بكسل ، ثم توقف عن النمو. لا توجد حاجة إلى CSS مخصصة. يمكن أيضًا تطبيق هذه الوحدات المتقدمة على المتغيرات الديناميكية.

مسبقات بناء عنصر

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

لإنشاء واحدة ، نمط الوحدة النمطية تمامًا ، وعندما تبدو مثالية ، انقر فوق أيقونة الإعداد المسبق في رأس الوحدة النمطية (وليس داخل مجموعة خيارات محددة). حدد "مسبقًا جديدًا من الأنماط الحالية" ، أعطه اسمًا مثل "بطاقة الميزات" أو "Team Bio" ، وحفظه.

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

قم ببناء صفحات أخرى بناءً على نظام التصميم الخاص بك (المتغيرات والإعدادات المسبقة)

بمجرد إنشاء نظام التصميم الخاص بك مع المتغيرات والإعدادات المسبقة ، يصبح إنشاء صفحات إضافية أكثر كفاءة. مع Divi 5 ، توجد أسسك في مكانها ، يمكنك الآن توسيع موقع الويب الخاص بك مع الحفاظ على الاتساق التام.

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

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

بناء القوالب الخاصة بك

مع منشئ موضوع Divi ، يمكنك إنشاء وتخصيص كل زاوية وركن من موقع الويب الخاص بك. الرؤوس ، تذييلات ، قوالب البريد ، قوالب نوع النشر المخصصة ، صفحات التسوق ، سمها ما شئت.

Access Access's Divi's theme Builder من خلال التنقل عبر لوحة معلومات WordPress: Divi → Builder. في الجزء العلوي ، ستجد القالب الافتراضي الخاص بك - يدير هذا القالب المظهر العام لموقع الويب الخاص بك بالكامل. انقر على قسم Add Global Header واختر "Build Global Header" لفتح مساحة العمل الخاصة بك. وبالمثل ، يمكنك تحديد إضافة تذييل عالمي لتصميم تذييل موقع الويب الخاص بك.

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

إنشاء قوالب نوع المحتوى المخصص

ما وراء الرؤوس والتذييلات ، يمكنك تصميم قوالب متخصصة لأنواع المحتوى المختلفة باستخدام منشئ السمة.

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

قم بإنشاء قالب لمشاركات المدونة مع تباعد مناسب لقابلية القراءة ، ووضع الصور المميز ، ومعلومات المؤلف. قد تحتاج صفحات المنتج إلى تخطيطات المعرض وطاولات التسعير.

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

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

باستخدام Divi AI لتصميم القالب

Divi AI يقطع وقت بناء القالب من ساعات إلى دقائق. في Builder theme ، اختر ما تحتاجه - رأس أو تذييل أو تخطيط مدونة أو صفحة منتج.

اضغط على الزر الأزرق + في Visual Builder وحدد "إنشاء قسم مع الذكاء الاصطناعي".

وصفك يهم أكثر. كن محددًا بشأن ما تحتاجه:

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

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

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

وفر الوقت مع ميزات القالب المتقدم

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

تذكر أن تجعل القوالب تعمل جنبًا إلى جنب مع نظامك المسبق لإنشاء إطار تصميم شامل يجعل بناء موقع الويب أسرع وأكثر اتساقًا وأكثر احترافًا.

4. إتقان التصميم المستجيب

يقدم تصميم Divi 5 المستجيب تحسينات كبيرة على الإصدارات السابقة. يوفر النظام الجديد تحكمًا إضافيًا في كيفية تكييف موقع الويب الخاص بك مع أحجام شاشة مختلفة.

يقدم Divi 5 نظامًا متقدمًا لنظام التوقف يوفر تحكمًا غير مسبوق في استجابة الموقع. تتيح نقاط التوقف السبع القابلة للتخصيص استهدافًا دقيقًا للتصميم عبر أجهزة مختلفة:

• الهاتف: <767px يغطي معظم أحجام شاشة الهواتف الذكية
• Wide Phone: <860px يغطي معظم شاشات الهاتف في وضع المناظر الطبيعية
• الجهاز اللوحي: <980px مفيد لمعظم شاشات الكمبيوتر اللوحي في وضع الصورة
• أجهزة الكمبيوتر اللوحي: <1024px تعتبر قياسية لعرض المناظر الطبيعية في معظم أجهزة iPad و Samsung.
• شاشة عريضة: > 1280 بكسل هو عرض جيد لمعظم أجهزة الكمبيوتر المحمولة الأصغر
• Ultrawide: > 1440 بكسل يغطي شاشات سطح المكتب الأكبر

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

بالإضافة إلى ذلك ، عندما تحتاج ، يمكنك ضبط نقاط التوقف وفقًا لاحتياجاتك.

5. الحصول على ، تعيين ، الإطلاق!

تم تصميم موقع الويب الخاص بك DIVI 5 ، ومحسّن ، وجاهزًا لإبهار الزوار. دعنا نسير عبر الخطوات النهائية لأخذ موقعك على الهواء بثقة.

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

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

لمس التلميع النهائي

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

يمنحك Divi القدرة على إنشاء تصاميم مثالية للبكسل ، لذلك خذ لحظة لتقدير تماسك موقعك قبل الإطلاق. يجب أن يؤدي استخدام متغيرات التصميم الخاصة بك باستمرار إلى إنشاء نظرة مصقولة وموحدة طوال الوقت.

بعد الإطلاق ، يواصل Divi 5 تقديم مزايا. ستساعد تحسينات السرعة من إطاره الحديث في رؤية محرك البحث ، وسوف يقدر المستخدمون أوقات التحميل السريعة والتفاعلات السلسة.

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

إن الجمع بين إبداعك مع إطار Divi 5 القوي ينتج موقع ويب مثير للإعجاب بصريًا مبني على معايير الويب الحديثة. موقعك جاهز لتقديم تجارب رائعة للزوار مع منحك أساسًا مرنًا للنمو في المستقبل.

بناء مواقع الويب بشكل أسرع وأفضل مع Divi 5

Divi 5 يمثل فصلًا جديدًا لمبدعي الموقع. يحتفظ النظام الذي أعيد بناؤه بما كان يعمل أثناء إصلاح ما لم يفعل. ستلاحظ الفرق من اليوم الأول: التحميل الأسرع ، والتحرير الأكثر سلاسة ، وحرية التصميم التي كانت بعيدة عن متناول اليد من قبل.

لن يبدو موقع الويب الخاص بك التالي أفضل ، بل ستستمتع ببنائه. هذا ما يسلمه Divi 5: مواقع الويب التي تعمل من أجلك ولزوارك ، دون الصداع.

هل أنت مستعد لتجربته؟ قم بتنزيل Alpha العام اليوم وشاهد ما يمكن أن يكون عليه مشروعك التالي.

Divi 5 جاهز لاستخدامه على موقع الويب الجديد. انتظر الإصدار الكامل قبل ترحيل المواقع الموجودة.