دليل Divi 5 المبتدئين: كيفية إتقان الأساسيات

إذا كنت تسمع عن Divi 5 وتتساءل عن الحالة الحالية ، فإن دليل Divi 5 المبتدئ هو لك.

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

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

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

ما هو Divi 5؟

Divi 5 هو أحدث إصدار من موضوع Divi WordPress ، لكنه أكثر من تحديث. إنها إعادة بناء كاملة لإطار بناء موقع الويب الخاص بـ Divi ، مصمم لتمنحك تحكمًا إبداعيًا كاملاً دون كتابة رمز مخصص.

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

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

• منشئ بصري في الوقت الفعلي الذي يستجيب بسرعة أكبر ويشعر أخف وزنا ويتيح لك سحب وإسقاط وتخصيص مع تأخر أقل وأكثر دقة. اختبره لنفسك هنا.
• تخطيطات DIVI مصممة مسبقًا تساعدك على تطبيق تصميمات الصفحة الجميلة المصممة على صناعات وأهداف مختلفة.
• العشرات من وحدات Divi التي تتعامل مع كل شيء من النص والصور إلى المنزلقات والمعارض والأشكال وطاولات التسعير والمزيد.
• أدوات التسويق مثل Divi تقود للاختبار المنقسمة ، و Bloom for Email Opt-ins ، و Monarch للمشاركة الاجتماعية.
• تتيح لك خيارات التخصيص المتقدمة مثل الإعدادات المسبقة ، ومتغيرات التصميم ، والأساليب العالمية ، أن تبقي التصميم الخاص بك ثابتًا وعلى العلامة التجارية.

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

هل من السهل الانتقال من Divi 4 إلى Divi 5؟

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

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

يقدم Divi 5 Builder أداءً أسرع وأكثر تحسينًا

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

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

لاحظ أن Milliseconds Divi 4 (على اليسار) يأخذ لتحميل البناء المرئي. Divi 5 يحملها على الفور تقريبا.

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

يقدم Divi 5 تجربة تحرير أسهل وأبسط

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

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

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

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

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

Divi 5 يبسط إدارة الإعدادات وتصميم منظمة

يجلب Divi 5 نظامًا أكثر تنظيماً وبديهية لإدارة الأنماط وإعدادات التخطيط والتعديلات المستجيبة.

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

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

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

ميزات Divi 5 الجديدة التي يجب أن تعرف عنها

دعونا نلقي نظرة على الميزات الجديدة التي أضفناها مؤخرًا إلى Divi 5 وكيف تساعدك على بناء مواقع الويب بشكل أسرع:

1. توفر نقاط التوقف القابلة للتخصيص مرونة أكثر استجابة

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

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

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

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

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

2. متغيرات التصميم تساعدك على تحديد نظام العلامات التجارية المتسق

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

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

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

داخل Visual Builder ، انقر فوق أيقونة Manager المتغير واختر من بين ستة أنواع متغيرة: الأرقام والنصوص والصور والروابط والألوان والخطوط.

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

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

3. خيار مجموعة الإعدادات المسبقة تبسيط نظام التصميم المستند إلى الإعداد المسبق

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

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

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

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

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

4. الصفوف المتداخلة لتصميمات التصميم المعقدة

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

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

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

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

5. مجموعات الوحدة لتنظيم وحداتك

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

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

مجموعة الوحدة النمطية موجودة كوحدة DIVI 5 أخرى. اختر وحدة المجموعة لإضافتها. يمكنك إضافة المزيد من الوحدات داخلها ، وسيتم تجميعها جميعًا كمجموعة وحدة واحدة.

6. الوحدات المتقدمة تساعدك على تحسين تصميم أكثر ذكاءً مستجيبة

في Divi 4 ، اقتصرت معظم مدخلات التصميم على الوحدات الأساسية مثل وحدات البكسل والنسب المئوية. مع الوحدات المتقدمة ، يمكنك الآن استخدام مجموعة واسعة من وحدات CSS ، بما في ذلك REM و EM و VW و VH و ٪ وحتى وظائف CSS القوية مثل Clamp () كإعدادات مرئية في Divi 5. هذه الميزة مفيدة للمصممين الذين يهتمون بالتصميم المستجيب والطباعة القابلة للتطوير.

على سبيل المثال ، يمكنك أيضًا استخدام Clamp () لتعيين القيمة الحد الأدنى والمثالية والحد الأقصى للحشو أو حجم الخط بحيث يبدو التصميم الخاص بك مصقولًا عبر الأجهزة دون إنشاء عشرات نقاط التوقف المخصصة. ستقوم Clamp's Clamp (36px ، 4vw ، 48px) بتعيين حجم الخط للبدء من 36 بكسل ، ومقياس على أساس 4 ٪ من عرض إطار العرض ، والتوقف عن النمو عند 48 بكسل.

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

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

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

نظرة داخل ديفي 5

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

1. قم بتنزيل وتثبيت وتفعيل Divi 5

إليك برنامج تعليمي للفيديو لشراء وتثبيت وتفعيل Divi:

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

ارجع إلى لوحة معلومات WordPress الخاصة بك. اتبع هذا الاستعلام: المظهر> الموضوعات> إضافة السمة> تحميل السمة. ثم قم بتحميل ملف divi 5 zip من جهاز الكمبيوتر الخاص بك وانقر فوق تثبيت الآن.

بمجرد تثبيتها ، قم بتفعيل السمة.

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

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

ابدأ مع Divi

2. قم بإنشاء موقع الويب الخاص بك باستخدام Divi 5

أسرع طريقة لبناء موقع ويب بأكمله مع Divi 5 هي استخدام مواقع Divi السريعة.

اخترت بين خيارين:

• استخدم موقع بداية مسبقًا ، وسيقوم Divi 5 بإنشاء موقع ويب أساسي باستخدام العلامة التجارية والمحتوى المحدد للموقع.
• أو قم بإنشاء موقعك باستخدام AI لتوجيه Divi AI لإنشاء موقع ويب فريد.

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

وإليك كيف يعمل مع الذكاء الاصطناعي. أنت تخبر Divi AI عن موقع الويب الخاص بك وانتظر حتى يطبخ:

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

إذا كنت ترغب في إنشاء صفحة جديدة من نقطة الصفر أو الوصول إلى Divi Visual Builder ، فانتقل إلى الصفحات> إضافة صفحة.

الآن ، قم بتسمية صفحتك وانقر فوق استخدام Divi Builder.

ستدخل Divi Visual Builder.

3. تعرف على Divi 5 Visual Builder Basics

إذا كنت تصل إلى Divi 5 Visual Builder لأول مرة ، فسترى العديد من الرموز ، لذا إليك تجول سريع:

• (1.) لوحة الشريط الجانبي الأيسر: تتضمن هذه اللوحة أدوات البناء. يمكنك إضافة تخطيطات مسبقة الصنع ، والوصول إلى مكتبة التخطيط الخاصة بك ، وعرض الهيكل باستخدام الطبقات ، والتبديل إلى عرض الإطار السلكي ، وحفظ متغيرات التصميم ، وضبط إعدادات البناء ، والحصول على المساعدة.
• (2.) الشريط العلوي: يمكنك التبديل بين أوضاع الاستجابة. تساعدك عناصر التحكم في العرض والتكبير على ضبط التصميم عبر نقاط التوقف. ستجد أيضًا Undo/Redo ، تخطيط واضح ، تاريخ ، وحفظ الخيارات هنا. بالإضافة إلى الخروج والمعاينة وحفظ المسودة ونشر الأزرار لإدارة تقدمك.
• (3.) الشريط الجانبي الأيمن: عند النقر فوق أي وحدة ، تفتح إعداداته على اليمين. يمكنك إضافة المحتوى ، ونمطه ، وإضافة CSS مخصصة هنا. تُظهر فتات الخبز في الجزء العلوي (صفحة> صف> صف>) المكان الذي تعيش فيه الوحدة في التصميم.

بعد ذلك ، لديك عنصرين للحاويات: أقسام (ممثلة باللون الأزرق) والصفوف (خضراء دائمًا). داخل الصفوف ، لديك أعمدة حيث يمكنك إضافة وحدات (باللون الأسود) .

لإضافة قسم ، سوف تنقر على زر Blue Plus. بالنسبة للصف ، إنه زر Green Plus ، والأسود لوحدة النمط. تحصل على أنواع مختلفة من خيارات الصفوف للاختيار من بينها. داخل الصف هي أعمدة.

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

تتيح لك وحدة مجموعة الوحدة النمطية الحديثة تجميع عناصر مختلفة حتى تتمكن من إنشاء وحفظ الوحدات النمطية الخاصة بك. ( يمثل اللون الرمادي مجموعة الوحدة النمطية.)

4. قم بإنشاء صفحات موقعك باستخدام Divi 5

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

(1.) يتيح لك الاختيار من بين 2500+ تخطيط قبل الصنع و (2.) يتيح لك إرشاد Divi AI لإنشاء صفحتك. إليك كيفية عمل تخطيط ما قبل الصيد:

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

تخصيص تصميم صفحتك

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

سيتم تطبيق هذه القيم العالمية (مثل ألوانك الأساسية وخطوطك) تلقائيًا أينما كنت تستخدمها. لتعديلها ، ما عليك سوى تغيير القيمة المتغيرة في المدير المتغير.

لتحرير أي وحدة ، انقر فوقه ، وتظهر الإعدادات في اللوحة الجانبية اليمنى.

تتضمن كل لوحة إعدادات وحدة ثلاث علامات تبويب:

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

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

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

ابدأ مع Divi

5 نصائح لتحقيق أقصى استفادة من Divi 5

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

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

1. ابق على تحديث مع الإصدارات الجديدة

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

للبقاء في الحلقة ، اشترك في قناة YouTube للأنيقة ، حيث يشارك Nick بانتظام الإرشادات والإعلانات.

اشترك في قناتنا على YouTube

2. جرب Builder Divi 5 الجديد

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

اجعل من المعتاد زيارة مدونة SELANT للمواضيع الأنيقة بانتظام لإيجاد طرق إبداعية لاستخدام DIVI 5.

3. شارك وابحث عن Divi 5 Tips & Tricks في مجتمع Divi

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

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

4. بناء مواقع ويب جديدة مع Divi 5

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

ولكن إذا كنت تعمل مع موقع Divi 4 الحالي ، فمن الأفضل الانتظار لفترة أطول قليلاً قبل ترحيله إلى Divi 5.

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

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

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

5. بناء نظام تصميم Divi

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

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

6. الإبلاغ عن الحشرات عند مواجهتها

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

اختر Divi 5 لبدء رحلة تصميم الويب الخاصة بك

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

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

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

Divi 5 جاهز للاستخدام على مواقع الويب الجديدة اليوم.