Elementor vs Divi: مقارنة ميزات التصميم

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

في المقالة السابقة ، كتبنا مقالًا يقارن الميزات العامة لمنشئي الصفحة. هذه المرة ، سنقارن ميزات التصميم التفصيلية التي يقدمها كل من Elementor و Divi.

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

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

هناك العشرات من ميزات التصميم التي يقدمها Elementor و Divi. لتسهيل معرفة الاختلافات ، سنقسم المقارنة إلى ستة أقسام.

الأصول والوسائط

- مكتبة الأيقونات

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

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

إذا كان لديك مجموعات أيقونات خاصة بك تم تنزيلها من Fontello أو IcoMoon أو Fontastic ، فإن Elementor يسمح لك باستخدامها.

ماذا عن ديفي؟

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

في الآونة الأخيرة ، تم دمج Divi أيضًا مع Font Awesome. بمعنى أنه يمكنك أيضًا إضافة رمز يوفره Font Awesome تمامًا مثل Elementor. بمعنى آخر ، لدى Divi مزوّدان للرموز: مكتبة أيقونات Divi الأصلية نفسها و Font Awesome. على عكس Elementor ، لا يسمح لك Divi بتحميل مجموعة الرموز المخصصة.

- مقاطع فيديو الخلفية

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

وفي الوقت نفسه ، يسمح لك Elementor بإضافة فيديو الخلفية من مصدر خارجي (YouTube و Vimeo). يمكنك أيضًا إضافة مقطع فيديو ديناميكي باستخدام مكون إضافي للحقول المخصصة مثل ACF أو JetEngine.

- عرض شرائح الخلفية

بالإضافة إلى الفيديو ، يتيح لك Elementor أيضًا استخدام عرض الشرائح كخلفية للقسم. نفس الميزة غير متوفرة في Divi.

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

- قناع الخلفية

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

إليك كيفية عمل الميزة:

ماذا عن Elementor؟

إلى حد بعيد ، لا يحتوي Elementor على ميزة قناع الخلفية الأصلية حتى الآن.

- نمط الخلفية

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

لا يحتوي Elementor على ميزة أصلية لإضافة نمط إلى الخلفية حتى الآن.

- مقسم الشكل

يسمح لك مقسم الشكل بتزيين الجزء السفلي أو العلوي من القسم عن طريق إضافة شكل معين. يسمح لك كل من Divi و Elementor بإضافة مقسم شكل إلى قسم.

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

- اخفاء الصورة

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

لا يوجد لدى Divi ميزة إخفاء الصورة الأصلية.

اللون والتأثيرات

- ألوان عالمية

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

يأتي كل من Elementor و Divi بميزة عالمية. يمكنك قراءة هذا المنشور لمعرفة كيفية استخدام اللون العام في Elementor. أثناء وجود Divi ، يمكنك قراءة هذا المنشور.

- التدرجات

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

تدعم ميزة التدرج في Elementor لونين فقط.

- تراكب الخلفية

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

يحتوي Elementor على كتلة إعداد في لوحة الإعدادات المخصصة لإضافة تراكب الخلفية. يمكنك استخدام لون خالص أو متدرج. يتيح لك Divi أيضًا إضافة تراكب خلفية (صلب ومتدرج) تمامًا مثل Elementor.

- أوضاع المزج

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

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

- مرشحات CSS

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

في Elementor ، لديك خمسة خيارات لتصفية CSS. أثناء تواجدك في Divi ، هناك 8 خيارات لتصفية CSS يمكنك الاختيار من بينها:

- بوكس ​​شادو

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

الطباعة

- الطباعة العالمية

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

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

Elementor هو منشئ صفحات يحتوي على هذا النوع من الميزات. لسوء الحظ ، ليس لدى Divi مثل هذه الميزة حتى الآن.

- التحكم في الطباعة

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

تتوفر خيارات الإعداد التالية لتخصيص خط في Elementor و Divi:

• اللون
• بحجم
• وزن
• تحويل (أحرف كبيرة ، صغيرة ، كبيرة)
• النمط (عادي ، مائل ، مائل)
• زخرفة (تسطير ، تسطير ، خط من خلال)
• ارتفاع خط
• تباعد الأحرف
• تباعد الكلمات

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

- خطوط عادية

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

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

إذا كنت تستخدم Adobe Fonts ، فإن Elementor يدعم التكامل مع Adobe Fonts للسماح لك باستخدام خط من Adobe Fonts دون تنزيل ملف الخط أولاً. لا يدعم Divi التكامل مع Adobe Font. لذلك ، تحتاج إلى تنزيل ملف الخط أولاً لاستخدام خط من Adobe Fonts.

تَخطِيط

- تخطيط الصفحة

في Elementor ، قبل أن تبدأ في إنشاء تصميم صفحتك ، يمكنك تعيين تخطيط الصفحة أولاً. هناك أربعة خيارات لتخطيط الصفحات يمكنك الاختيار من بينها:

• الافتراضي: تخطيط الصفحة الافتراضي الذي قمت بتعيينه من إعدادات الموقع
• لوحة العنصر: تخطيط الصفحة الفارغة. بدون رأس وتذييل
• Elementor Full-width: على غرار Elementor Canvas ، ولكن مع الرأس والتذييل
• الموضوع: قالب الصفحة الافتراضي لموضوعك

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

يتيح لك Divi أيضًا إنشاء صفحة فارغة (بدون تذييل وشريط جانبي). ومع ذلك ، تحتاج إلى ضبطه عبر لوحة إعدادات Gutenberg بدلاً من لوحة إعدادات Divi Builder.

- تحديد المواقع المخصص

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

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

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

- الهامش والحشو

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

- مؤشر Z

Z-index هي خاصية CSS تحدد ترتيب مكدس العنصر. يكون العنصر الذي يحتوي على ترتيب مكدس أكبر دائمًا أمام عنصر ذي ترتيب مكدس أقل. يسمح لك كل من Elementor و Divi بتعيين قيمة مؤشر z لعنصر.

- محاذاة Flexbox

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

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

يدعم Divi أيضًا محاذاة Flexbox. ومع ذلك ، تحتاج إلى إضافة كود CSS معين ، وهو أمر مزعج للمبتدئين. خاصة بالنسبة لأولئك الذين ليس لديهم معرفة بـ CSS.

- تحديد المواقع المضمنة

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

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

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

الرسم المتجاوب

- نقاط توقف مخصصة

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

في Elementor و Divi ، يمكنك تحسين تخطيط التصميم الخاص بك على ثلاثة أنواع من الأجهزة (سطح المكتب والكمبيوتر اللوحي والجهاز). ماذا لو كنت ترغب في تحسين تصميمك للأجهزة ذات حجم شاشة معين (على سبيل المثال ، سطح مكتب بشاشة كبيرة)؟

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

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

لمعلوماتك ، ها هي أحجام شاشات أنواع الأجهزة:

• شاشة عريضة: 2400 بكسل
• سطح المكتب: 1209 بكسل
• الكمبيوتر المحمول: 1025 بكسل
• الجهاز اللوحي: 881 بكسل
• الهاتف المحمول (الهاتف الذكي): 360 بكسل

- أعمدة عكسية

عندما يكون لديك قسم يتكون من عمودين (أو أكثر) ، فسيتم وضع العمود الأول (أقصى اليسار) في الجزء العلوي على الجهاز المحمول. ألق نظرة على صورة GIF المتحركة التالية.

لسبب معين ، قد ترغب في وضع العمود الثاني في الأعلى. في Elementor ، يمكنك تحقيق ذلك بسهولة بفضل ميزة عكس العمود المضمنة.

يتيح لك Divi أيضًا ضبط العمود العكسي في القسم. ومع ذلك ، تحتاج إلى التعامل مع كود CSS.

- إظهار / إخفاء العناصر

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

الحركات والتفاعلات

- تأثيرات التمرير

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

يمكن تطبيق تأثيرات التمرير على القسم والعمود والقطعة / الوحدة.

- تأثيرات الماوس

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

يوجد مؤثران للماوس يمكنك تطبيقهما في Elementor: Mouse Track و 3D Tilt

- تحوم الرسوم المتحركة وتحويل CSS

هل تريد إضافة تأثير يحدث فقط عند تحريك الماوس؟

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

بالإضافة إلى ذلك ، يأتي Elementor و Divi أيضًا مع CSS Transform التي يمكنك تطبيقها على كلتا الحالتين (عادي وتحوم).

- الرسوم المتحركة للدخول والخروج

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

- المنظر

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

تقدم Divi تأثيرًا واحدًا فقط للمنظر ، بينما يقدم Elementor ستة تأثيرات اختلاف المنظر على النحو التالي:

• التمرير العمودي
• التمرير الأفقي
• الشفافية
• طمس
• استدارة
• مقياس

- تأثيرات مثبتة

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

يسمح لك كل من Elementor و Divi بإضافة تأثير لاصق إلى عنصر. يمكنك تعيين عنصر للالتصاق سواء في الأسفل أو الأعلى. يمكنك أيضًا تعيين قيمة الإزاحة لتطبيق التأثير اللاصق.

الخط السفلي

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

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

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