كيفية استخدام Divi Builder لإنشاء موقع مخصص

ما هو Divi Builder؟

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

تتمثل إحدى مزايا استخدام منشئ الصفحات هذا في أنه يتيح لك إنشاء تصميمات مخصصة بالكامل فريدة تمامًا.

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

إنه محرر WYSIWYG (ما تراه هو ما تحصل عليه) بالمعنى الحقيقي.

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

يوفر مرونة كبيرة من حيث النص المضمّن والتحرير سريع الاستجابة.

يمكنك أيضًا استخدام 40 عنصرًا من مواقع الويب ، و 800+ من التصميمات سابقة الإعداد ، و 100+ من حزم مواقع الويب الكاملة ، وفواصل الأشكال المختلفة ، وغير ذلك الكثير.

بالإضافة إلى ذلك ، يمكنك إضافة رمزك الخاص إذا كنت تريد خيارات تصفيف متقدمة.

في الخطوات التالية ، سنوضح لك كيفية استخدام Divi لإنشاء تصميماتك.

الخطوة 1: البدء باستخدام Divi Builder

لبدء استخدام Divi Builder ، تحتاج أولاً إلى تثبيت وتفعيل المكون الإضافي على موقع الويب الخاص بك.

إذا كنت لا تعرف كيفية القيام بذلك ، فاقرأ هذه المقالة حول كيفية تثبيت وتفعيل مكون إضافي .

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

الخطوة 2: بناء صفحتك الأولى باستخدام Divi Builder

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

ثم انقر فوق الزر استخدام Divi Builder :

سينقلك هذا إلى شاشة جديدة حيث سيكون لديك 3 خيارات.

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

من خلال تحديد الخيار الثاني ، يمكنك البدء فورًا لأن كل شيء مصمم بالفعل لك.

يتيح لك الخيار الثالث إعادة استخدام تصميم موجود.

يمكنك تحديد أيهما تعتقد أنه الخيار الأفضل لك.

الخطوة 3: استيراد موقع تخطيط / عرض مسبق الإنشاء

إذا كنت لا ترغب في إنشاء موقع الويب الخاص بك من الصفر ، يمكنك تحديد تخطيط مسبق الصنع.

لذلك ، ما عليك سوى تحديد خيار اختيار تخطيط مسبق . سيؤدي هذا إلى عرض مكتبة التخطيطات المصممة مسبقًا لك:

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

يمكنك بعد ذلك تحديد التنسيق الذي تريده. سيعرض لك هذا معاينة للتخطيط بخيارين مختلفين.

• شاهد العرض التوضيحي المباشر
• استخدم هذا التخطيط

حدد خيار استخدام هذا التخطيط . سيطلب منك هذا توثيق البرنامج المساعد. استخدم اسم المستخدم و API لمصادقته:

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

الخطوة 4: إضافة الصفوف والوحدات النمطية الخاصة بك

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

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

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

يمكنك استخدام مربع البحث للعثور على وحدة نمطية إذا كان لديك أي خيارات محددة في الاعتبار.

لقد أضفنا هنا وحدات نص وصورة وزر في ثلاثة صفوف مختلفة. تبدو صفحتنا الآن كما يلي:

إليك ملخص سريع لكيفية فعلنا ذلك:

لإضافة المزيد من الصفوف ، يمكنك استخدام رمز “+” أسفل صفك الحالي.

الخطوة 5: تخصيص الصفوف والوحدات النمطية

الآن بعد إضافة الصفوف والوحدات النمطية ، حان الوقت لتخصيصها. أولاً ، سنعمل على وحدة النص.

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

يمكنك استخدامها للعمل على كيفية ظهور النص الخاص بك. سيكون لديك 3 علامات تبويب هنا:

• المحتوى
• التصميم
• المتقدمة

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

هنا يمكنك العمل على تغيير العناوين وإضافة المسافات والحدود والرسوم المتحركة والمزيد.

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

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

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

يمكنك أيضًا إضافة لون خلفية لصورتك من الرابط الموجود بجوارها مباشرة.

للحصول على خيارات التصميم ، انقر فوق علامة التبويب ” التصميم” . هنا لديك خيارات لإضافة الرسوم المتحركة والتباعد والفلاتر والمزيد. تتيح لك علامة التبويب Advanced ( خيارات متقدمة) إضافة معرّف CSS الخاص بك وفئاته ، بالإضافة إلى CSS المخصصة. هذا الخيار للمستخدمين المتقدمين الذين يرغبون في إضافة رمزهم الخاص.

ولكن إذا لم تكن مبرمجًا ، فيمكنك تخطي علامة التبويب هذه تمامًا.

لا تنس النقر على علامة الاختيار الخضراء لحفظ إعداداتك.

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

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

الخطوة 6: إعدادات الصفحة

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

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

سيؤدي ذلك إلى توسيع شريط الإعدادات بعدة خيارات. انقر على رمز الترس (الإعداد):

سترى نافذة منبثقة لصفحة الإعدادات بها 3 علامات تبويب:

• المحتوى
• التصميم
• المتقدمة

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

لإضافة صورة مميزة ، انقر فوق علامة “+” وأضف صورة من مكتبة الوسائط أو قم بتحميل صورة جديدة من جهاز الكمبيوتر الخاص بك.

التالي هو علامة التبويب ” التصميم” . هنا يمكنك العمل على نظام الألوان والتباعد بين صفحتك ولون النص الخاص بك.

ما عليك سوى النقر على الخيار الذي ترغب في العمل عليه وإجراء التغييرات:

أخيرًا ، لديك علامة التبويب خيارات متقدمة . في علامة التبويب هذه ، يمكنك إضافة CSS المخصص الخاص بك ، وتمكين خيار إنشاء ملف CSS الثابت.

يمكنك أيضًا اختيار الطريقة التي تريد أن تظهر بها صفحتك للمستخدمين.

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

يمكنك أيضًا التراجع عن تغييراتك باستخدام الزر الأرجواني وإعادة التغييرات باستخدام الزر الأزرق بجوار علامة الاختيار الخضراء.

الخطوة 7: حفظ التخطيط الخاص بك للمستقبل

بمجرد إنشاء التخطيط الخاص بك ، يمكنك حفظها للاستخدام في المستقبل.

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

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

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

ثم انقر على خيار حفظ في المكتبة . سيتم حفظ التخطيط الخاص بك الآن للاستخدام في المستقبل.

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

يمكنك أيضًا حفظ وحدة نمطية معينة باتباع نفس العملية.

فقط تأكد من تحومك فوق العنصر للعثور على زر الحفظ في المكتبة .

الخطوة 8: التحقق من استجابة Divi Layout

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

يعرض لك الرمز الأول عرض إطار سلكي لتخطيطك.

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

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

يمكنك النقر على كل رمز من هذه الرموز لمعرفة ما إذا كان التنسيق متجاوبًا بما يكفي.

الخطوة 9: نشر مخطط Divi الخاص بك

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

سيتم نشر صفحتك بمجرد الضغط على زر النشر .

هذا هو مدى سهولة استخدام Divi Builder لإنشاء تخطيطاتك.

نأمل أن تعجبك هذه المقالة.

إذا كنت لا تزال غير متأكد مما إذا كان يجب عليك استخدام Divi أم لا ، فقد تبحث عن مُنشئي صفحات أخرى لموقع WordPress الخاص بك.