بيفر بيلدر ضد ديفي 2022

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

تم تكثيف هذا التبني منذ أن قدم WordPress محرر الكتلة الجديد المسمى Gutenberg في WordPress 5.0 في عام 2018. بالطبع ، لا يزال المحرر الكلاسيكي متاحًا لمن يفضلون المحرر المرئي القديم.

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

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

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

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

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

يتوفر إصدار خفيف من Beaver Builder على WordPress.org ، ولكن نظرًا لأن الإصدار المجاني يفتقد العديد من الميزات ، ستركز هذه المقالة بدلاً من ذلك على الإصدار الكامل من Beaver Builder.

واجهة بيفر منشئ

يعد Beaver Builder محررًا للواجهة الأمامية يمكن إطلاقه من عدة مناطق مختلفة في WordPress.

عند إنشاء منشور مدونة جديد أو صفحة أو نوع منشور مخصص داخل محرر قوالب WordPress ، سترى خيارًا لـ "Launch Beaver Builder" أو "Use Standard Editor".

لا يتم عرض الزر "Launch Beaver Builder" تلقائيًا في محرر Gutenberg. يظهر فقط عند إضافة كتلة Beaver Builder إلى صفحتك.

إذا لم تكن كتلة Beaver Builder متاحة ، فتحقق من صفحة إعدادات Beaver Builder للتأكد من تمكين نوع المنشور المقابل.

يمكن أيضًا إطلاق Beaver Builder من المحرر الكلاسيكي وصفحة القائمة الرئيسية للمشاركات والصفحات وأنواع المنشورات المخصصة.

عند تسجيل الدخول ، سترى خيارًا لتعديل صفحة في شريط إدارة WordPress أيضًا.

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

يؤدي النقر فوق رمز X أعلاه إلى إغلاق القائمة ، ولكن يمكنك إعادة تحميل القائمة بالنقر فوق الرمز + المعروض الآن.

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

يُظهر الجانب العلوي الأيسر من الصفحة المنشور أو الصفحة أو نوع المنشور المخصص الذي تقوم بتحريره. سيؤدي النقر فوقه إلى تحميل قائمة أدوات Beaver Builder.

هناك الكثير من الإعدادات والميزات مخفية في هذه القائمة.

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

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

يوجد على يمين قائمة الأدوات جرس إعلام يعرض تحديثات المكون الإضافي وأحدث المنشورات من مدونة Beaver Builder.

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

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

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

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

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

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

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

يتيح لك Beaver Builder تصميم كل جانب من جوانب التخطيط الخاص بك ، ولكن كما سترى ، تقدم Divi العديد من خيارات التخصيص عند إنشاء التخطيطات.

واجهة Divi Builder

تستخدم السمات الأنيقة كلمة Divi لوصف سمة WordPress الشهيرة ومنشئ صفحات السحب والإفلات.

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

في الوقت الحالي ، أود التركيز على Divi Builder. تم دمج مُنشئ الصفحة هذا في Divi Theme ولكنه متاح أيضًا كمكوِّن إضافي مستقل لبرنامج WordPress لأولئك الذين يرغبون في استخدامه مع سمات WordPress الأخرى.

بمجرد تنشيط Divi Builder ، سترى خيارًا لـ "Use Divi Builder" عند إضافة منشور جديد أو صفحة أو نوع منشور مخصص.

سيؤدي هذا إلى تشغيل المنشئ المرئي للواجهة الأمامية ، ولكن سيتوفر أيضًا محرر خلفية يسمى Legacy Builder.

يمكنك التبديل إلى Divi Builder في أي وقت من محرر قوالب WordPress الافتراضي.

يمكن أيضًا تشغيل Divi Builder من صفحات القوائم الرئيسية للمشاركات والصفحات وأنواع المنشورات المخصصة.

مثل Beaver Builder ، إذا قمت بتسجيل الدخول ، فسترى خيارًا لتمكين Divi Builder من شريط إدارة WordPress.

تحتوي السمات الأنيقة أيضًا على Divi Layout Block.

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

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

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

هناك 20 صفًا متاحًا للاختيار ، ولكل صف هيكل عمود مختلف.

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

يقوم Divi Builder بعد ذلك بتحميل مربع الإعدادات للوحدة التي حددتها.

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

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

لتحميل القائمة الرئيسية ، انقر فوق الزر الذي يحتوي على ثلاث نقاط أفقية أسفل الصفحة.

تنقسم خيارات القائمة الرئيسية إلى ثلاثة أعمدة.

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

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

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

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

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

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

هناك سبعة خيارات في القائمة الوسطى. الزر X في المنتصف يغلق القائمة لأسفل.

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

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

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

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

يمكن حفظ التخطيط الخاص بك ونشره على الجانب الأيمن من الصفحة.

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

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

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

يحتوي Divi Builder على عنصر أعلى الصفوف يسمى الأقسام.

يمكن أن تحتوي الأقسام على عدة صفوف ، ويمكن أن يحتوي كل صف على أعمدة متعددة. يمنحك القليل من المرونة الإضافية في كيفية إنشاء الصفحات.

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

لحسن الحظ ، لا يزال المحرر القديم متاحًا في Divi Builder.

لتنشيط Legacy Builder ، تحتاج أولاً إلى الانتقال إلى القسم المتقدم من منطقة خيارات البرنامج المساعد Divi ، وتعطيل أحدث تجربة Divi Builder وتمكين Classic Editor.

تشبه واجهة المستخدم الخاصة بـ Legacy Builder وضع عرض الإطار الشبكي المتاح في المحرر المرئي.

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

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

يمكن القول إن تضمين وضع الإطار الشبكي و Legacy Builder يجعل من Divi Builder حلاً أكثر مرونة أيضًا.

لإلقاء نظرة أكثر شمولاً على كيفية عمل Divi Builder ، يرجى مراجعة المراجعة الكاملة لـ Divi Builder.

التخطيطات مسبقة الصنع بيفر بيلدر

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

لا يقدم Beaver Builder العديد من التخطيطات المعدة مسبقًا مثل Divi ، ولكن جودة كل قالب عالية.

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

قوالب الصفحة المقصودة هي قوالب صفحة كاملة كاملة. يتوفر ما مجموعه 15 قالبًا للصفحة المقصودة مع قالب صفحة قماش فارغ.

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

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

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

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

قوالب صفحة المحتوى هي قوالب عامة لجزء من الصفحة مناسبة لأي نوع من مواقع الويب.

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

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

سوف تجدهم تحت علامات تبويب الصفوف في قائمة المحتوى الرئيسية.

إذا كنت تستخدم نظام قوالب Beaver Builder ، فيمكنك تقليل الوقت المستغرق لإنشاء تخطيطات جديدة بشكل كبير.

يمكن حفظ التخطيطات في أي وقت وإعادة استخدامها عدة مرات كما يحلو لك.

يمكن إدارة جميع القوالب المحفوظة من قائمة إدارة Beaver Builder الرئيسية وتعديلها لاحقًا إذا لزم الأمر.

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

قام Beaver Builder بعمل رائع بدمج التخطيطات المعدة مسبقًا في واجهة المستخدم الخاصة بهم. يمكن إدراج التخطيطات في ثوانٍ ويمكن حفظ التخصيصات واستخدامها مرارًا وتكرارًا.

تخطيطات Divi مسبقة الصنع

مثل Beaver Builder ، تقدم Divi للمستخدمين مجموعة متنوعة من التخطيطات المعدة مسبقًا.

أكثر من 1100 حزمة تخطيط متاحة للاختيار.

150 من هذه التخطيطات عبارة عن حزم تخطيط تتضمن تصميمات لعدد من المناطق على موقع الويب الخاص بك مثل الصفحة الخاصة بك والمدونة والصفحة المقصودة والمعرض.

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

يمكن أيضًا تحميل مكتبة Divi من القائمة الرئيسية.

تتيح لك مكتبة Divi إدراج التخطيطات المعدة مسبقًا والتخطيطات المحفوظة وصفحات كاملة.

يمكنك تضييق نطاق البحث عن تخطيط مناسب باستخدام مربع البحث أو تحديد إحدى الفئات الـ 13 التي تم تعيين التخطيطات لها.

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

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

للمساعدة في توضيح هذه النقطة ، ألق نظرة على المنطقة التجريبية لتصميم Divi Web Freelancer الموضح في لقطة الشاشة أدناه.

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

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

يمكن حفظ التخطيطات في مكتبة Divi في أي وقت من قائمة Divi الرئيسية.

يمكنك تسمية كل تخطيط وتجميعها في فئات.

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

Divi Theme Builder هي أداة رائعة تتيح لك إنشاء قوالب صفحات مخصصة. يمكنك بعد ذلك تعيين القوالب للمشاركات والصفحات وأنواع المنشورات المخصصة.

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

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

يمكن عرض جميع التخطيطات المحفوظة من صفحة "مكتبة Divi" المرتبطة بقائمة مسؤول Divi الرئيسية.

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

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

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

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

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

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

هناك الكثير من الخيارات في Divi Builder أيضًا ، حيث يقدم المكون الإضافي 950 قالبًا للصفحة المقصودة مقابل 15 من Beaver Builder's 15. تتوفر مجموعة كبيرة من تخطيطات الجهات الخارجية لـ Divi أيضًا.

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

تحقق من صفحة Divi Layouts لمعرفة المخططات المعدة مسبقًا المتوفرة مع Divi Builder.

وحدات محتوى بيفر منشئ

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

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

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

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

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

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

لا يحتوي Beaver Builder على أكبر مجموعة من وحدات المحتوى ، ولا يقدم العديد من خيارات التخصيص مثل Divi.

ومع ذلك ، أعتقد أن Beaver Builder لديه كل ما تحتاجه لإنشاء تخطيطات جميلة ، حيث يمكن إدراج الوظائف المفقودة في التخطيطات عبر أدوات WordPress.

وحدات محتوى Divi Builder

38 وحدة محتوى متاحة للاختيار في Divi Builder.

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

يضيف Divi Builder أيضًا نوع منشور مخصص جديدًا للمشاريع.

مثل Beaver Builder ، يحتوي Divi على وحدة شريط جانبي بحيث يمكنك دمج عناصر واجهة مستخدم WordPress في تخطيطاتك.

يستخدم Divi Builder نظامًا مرمزًا بالألوان لمساعدتك في إنشاء تخطيطات أنيقة.

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

يمكنك إضافة وحدة جديدة بالمرور فوق عمود والنقر على زر "إضافة وحدة جديدة".

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

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

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

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

تكوين Beaver Builder

يمكن تحميل مربع الإعدادات العامة من قائمة الأدوات داخل واجهة مستخدم Beaver Builder.

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

تنقسم صفحة إعدادات Beaver Builder الرئيسية إلى عدة أقسام.

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

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

تتيح لك منطقة إعدادات وصول المستخدم تحديد ما يمكن لمجموعات مستخدمي WordPress استخدام Beaver Builder. يتم تقسيم الأذونات إلى خمس مناطق مختلفة مثل الوصول إلى المنشئ وقائمة إدارة Beaver Builder.

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

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

تكوين Divi Builder

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

تحتوي صفحة خيارات المكون الإضافي الرئيسية على علامة تبويب لإدخال اسم مستخدم Elegant Themes ومفتاح API. تحتاج إلى إكمال هذا لتلقي تحديثات البرنامج المساعد التلقائية.

في علامة التبويب التالية ، يمكنك إدخال مفتاح Google API الخاص بك. يعد هذا ضروريًا إذا كنت تريد استخدام وحدة الخريطة. يمكن تعطيل خطوط Google من هذه الصفحة أيضًا.

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

في علامة التبويب "خيارات متقدمة" ، يمكنك تمكين وتعطيل تصغير CSS وجافا سكريبت. هذا هو المكان الذي يمكنك فيه تمكين محرر Legacy Builder.

يمنحك Divi Builder تحكمًا كاملاً في ما يمكن لكل مجموعة مستخدمين على موقع الويب الخاص بك القيام به وما لا يمكنهم فعله.

بينما يسمح لك Beaver Builder بتقييد الوصول إلى بعض المجالات الرئيسية ، يتيح لك Divi Builder تحديد الميزات التي يمكن للمستخدمين الوصول إليها بالضبط.

على سبيل المثال ، يمكنك منع المستخدمين من تحميل التخطيطات أو تعطيل الميزات داخل Divi Builder.

يقدم مركز دعم Divi تقريرًا عن نظامك. يمكن أن يساعدك هذا في تشخيص أي مشكلات تتعلق بإعداد الاستضافة الخاص بك.

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

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

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

يتم عرض الأخطاء في هذه الصفحة أيضًا ، إذا تم تمكين WP_DEBUG_LOG.

Divi Builder هو مكون إضافي بسيط لبرنامج WordPress يتم إعداده ، مع عدد قليل من الإعدادات للتحقق بعد التثبيت.

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

موضوع بيفر منشئ

Beaver Builder Theme هو إطار عمل HTML5 و Bootstrap WordPress مضمن في خطط Beaver Builder Pro و Agency.

إنه تصميم WordPress بسيط يعمل كلوحة فارغة لإنشاء تصميمات باستخدام Beaver Builder. تتوفر الخطافات والمرشحات داخل السمة لمساعدة المطورين على تعديل تصميم موقع الويب ، كما أنها تدعم WooCommerce بشكل كبير.

جميع إعدادات Beaver Builder Theme موجودة في مُخصص WordPress.

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

بينما في جوهره ، يظل Beaver Builder سمة WordPress بسيطة ، فقد قطع المطورون شوطًا إضافيًا لإضافة العديد من خيارات التخصيص الإضافية.

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

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

إنه خيار رائع إذا كنت تبحث عن استخدام تخطيطات Beaver Builder على موقع الويب الخاص بك.

موضوع ديفي

يقوم Beaver Builder بتسويق تصميمه كموضوع إطار عمل لـ Beaver Builder ، في حين يقوم متجر The Elegant Themes بترويج Divi Theme باعتباره سمة WordPress متعددة الاستخدامات ومتعددة الاستخدامات.

يسلط هذا الضوء على مدى تأثير التسويق نظرًا لوجود أوجه تشابه بين Beaver Builder Theme و Divi Theme أكثر مما يعتقده الناس.

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

لذلك مع دمج معظم الوظائف في Divi Builder ، يمكن اعتبار Divi Theme إطار عمل مثل Beaver Builder Theme. لذلك ، إذا كنت تمتلك كلا المنتجين ، فيمكنك استخدام Divi Theme مع Beaver Builder أو Beaver Builder Theme مع Divi Builder.

بمجرد تنشيط Divi Theme ، سترى بعض التغييرات الطفيفة في قائمة مشرف Divi.

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

بصرف النظر عن منطقة الإعدادات التي يتم توسيعها ، يظل كل شيء كما هو.

ومن المثير للاهتمام ، إذا تم تنشيط Divi Theme ، فسيتم تلقائيًا إلغاء تنشيط المكون الإضافي Divi Builder. يعد هذا ضروريًا نظرًا لأن وظيفة Divi Builder مدمجة مباشرةً في Divi Theme (وموضوع WordPress الإضافي الخاص بالسمات الأنيقة).

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

لا يزال Divi Builder يتحكم في منطقة المحتوى الرئيسية للمشاركات والصفحات وأنواع المنشورات المخصصة.

عندما يتعلق الأمر بتخصيص تصميم موقع الويب الخاص بك ، لا أعتقد أن Divi Theme أفضل أو أسوأ من Beaver Builder Theme. هناك عدد قليل من المجالات التي يمنحك فيها Divi Theme المزيد من الخيارات وعدد قليل من المناطق التي يوفر فيها Beaver Builder Theme المزيد.

تم دمج جميع خيارات المكون الإضافي لـ Divi Builder في منطقة الخيارات الأكثر شمولاً لـ Divi Theme.

على سبيل المثال ، تتوفر الآن إعدادات نوع المنشور في علامة تبويب المنشئ ، والخيارات من صفحة الإعدادات المتقدمة موجودة الآن في صفحة الخيارات العامة.

تحتوي صفحة الإعدادات العامة أيضًا على حقول لرموز الوسائط الاجتماعية والتمرير ورمز CSS المخصص والمزيد.

تتوفر أيضًا خيارات إضافية لمستخدمي Divi Theme.

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

هناك أيضًا صفحات لإضافة شعار 468 × 60 بكسل وتفاصيل تحسين محركات البحث العامة حول موقع الويب الخاص بك.

مثل Beaver Builder Theme ، Divi Theme هو سمة WordPress بسيطة تم تحسينها للاستخدام مع Divi Builder.

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

تكلفة بيفر بيلدر

تعد الميزات والوظائف عاملين تحتاج إلى مراعاتهما عند مراجعة Beaver Builder و Divi ، ولكنك تحتاج أيضًا إلى مراعاة تكلفة هذه المنتجات والميزانية المتاحة لمشاريعك.

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

تعتبر Beaver Builder و Elegant Themes أكثر سخاءً ، حيث تقدم الدعم والتحديثات لعدد غير محدود من مواقع الويب.

بينما ركزت هذه المقالة بشكل أساسي على الإصدار المتميز من Beaver Builder ، ما زلت أوصي بمراجعة Beaver Builder Lite.

إنه حل جيد لمواقع الويب البسيطة ويساعدك أيضًا في معرفة كيفية عمل واجهة Beaver Builder.

يرجى ملاحظة ، مع ذلك ، أن الإصدار المجاني من Beaver Builder يفتقر إلى وحدات مفيدة مثل نموذج الاتصال وجدول التسعير والخريطة. There is no access to the Beaver Builder templating system or pre-made layouts either.

For the vast majority of projects, the full version of Beaver Builder is a better fit than the lite version.

Three different premium plans are available: Standard, Pro, and Agency. All plans come with one year of premium support and access to premium modules and templates.

The standard plan retails at $99 per year. To get WordPress multisite support and access to the Beaver Builder Theme, you need to upgrade to the $199 per year Pro plan.

The $399 per year Agency plan adds white labeling. Web design companies may be interested in this plan as it allows you to rebrand the plugin as your own and change all references to Beaver Builder in templates and the admin area.

يقدم Beaver Builder ضمان استعادة الأموال لمدة 30 يومًا.

يحصل جميع أعضاء Beaver Builder أيضًا على خصم 40٪ بعد عام واحد. يؤدي هذا إلى انخفاض سعر خطط Beaver Builder في السنوات اللاحقة إلى 59.40 دولارًا في السنة و 119.40 دولارًا في السنة و 239.40 دولارًا في السنة.

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

تكلفة Divi

تعتبر سياسة التسعير الخاصة بعضوية The Elegant Themes أكثر وضوحًا.

هناك خطتان متاحتان ، وكلتا الخطتين تمنحك الوصول الكامل إلى جميع منتجات السمات الأنيقة.

تبلغ تكلفة عضوية The Elegant Themes السنوية 89 دولارًا سنويًا.

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

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

تقدم السمات الأنيقة أيضًا ضمانًا لاسترداد الأموال لمدة 30 يومًا لجميع العملاء الجدد.

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

يمكن للأعضاء أيضًا طلب المساعدة عبر دعم التذاكر ، وهناك أيضًا منتدى مجتمعي كبير وشبكة Meetup ومجموعة Facebook الشهيرة.

من الصعب مقارنة تكلفة Beaver Builder و Divi نظرًا لوجود نماذج تسعير مختلفة قليلاً.

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

ومع ذلك ، أعتقد أن الإصدار الكامل من Beaver Builder هو الخيار الأفضل لغالبية مستخدمي WordPress.

بسعر 99 دولارًا ، يكلف الترخيص القياسي لـ Beaver Builder 10 دولارات أكثر من Elegant Themes ، ومع ذلك فإن التجديدات اللاحقة تكلف 59.40 دولارًا سنويًا فقط.

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

تتضمن عضوية Elegant Themes أيضًا Divi Theme ، حيث سيتعين عليك دفع 199 دولارًا للوصول إلى Beaver Builder Theme.

والأهم من ذلك ، أن عضوية The Elegant Themes تتضمن خمسة منتجات عالية الجودة: Divi Theme و Divi Builder و WordPress magazine theme Extra ومكوِّن WordPress الإضافي بلوم للوسائط الاجتماعية ومونارك للوسائط الاجتماعية.

نتيجة لهذا ، أعتقد أن عضوية The Elegant Themes تقدم قيمة أفضل مقابل المال لمعظم مستخدمي WordPress.

افكار اخيرة

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

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

تتشابه عملية إنشاء صفوف وأعمدة جديدة في كلا المنتجين ، لكنني أشعر أن واجهة Beaver Builder أسهل في التعلم وأسرع قليلاً أيضًا.

تقدم Divi العديد من خيارات التخصيص والمزيد من التخطيطات المعدة مسبقًا. مع تضمين خمسة منتجات في عضوية The Elegant Themes ، أود أن أزعم أنها تقدم قيمة أفضل مقابل المال أيضًا.

آمل أن تكون قد استمتعت بإلقاء نظرة متعمقة على Beaver Builder و Divi.

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

يمكنك التعرف على كيفية Divi على موقع ويب Elegant Themes وفي مراجعتنا الكاملة لـ Divi Builder. على الرغم من عدم توفر إصدار مجاني من Divi Builder ، يمكنك اختبار البرنامج المساعد على صفحة Divi Builder التجريبية. سيساعدك هذا في معرفة ما يمكن أن يفعله Divi Builder.

شكرا للقراءة.
كيفن