3

هل فيه طريقة ذكية للتحويل؟

  • maheladawy

السلام عليكم،

لدي موقع شركة  يعمل على WordPress بقالب Astra.

المشكلة: كل قسم في الصفحة الرئيسية (حوالي 12-16 قسم) مبني عبر HTML Code Section. التعديل بقى ممل جداً وكل تغيير صغير يحتاج دخول الكود.

أفكر أحوّل التصميم كله لـ Elementor بحيث كل قسم يكون widget مستقل وسهل التعديل.

الموقع الحالي: www.alafdall.com.sa

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

شاكر لكم.


0
Mustafa_Suleiman أضف ردا

قالب Astra متوافق مع Elementor، لكن لا توجد أداة لتحويل كود HTML إلى Widgets في Elementor تلقائياً.

الإضافات التي تدعي ذلك تقوم فقط بوضع الكود داخل ودجت HTML في Elementor، وبالتالي لن تحل مشكلتك ستظل مضطراً لتعديل الكود من الداخل.

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

لكن يجب ضبط إعدادات قالب Astra في إعدادات الصفحة الجديدة، اجعل تخطيط الصفحة Page Layout على خيار Elementor Full Width.

قبل البدء في Elementor، افتح الصفحة الحالية في المتصفح، ومن خلال أداة الفحص Inspect Element أو من داخل محرر WordPress:

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

ثم ادخل إلى إعدادات موقع Elementor (Site Settings) واضبط الألوان العالمية Global Colors لتطابق ألوان شركتك، ثم اضبط الخطوط العالمية Global Fonts لتطابق الخطوط الحالية.

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

ثم أعد البناء قسم بقسم بواسطة الحاويات Containers:

  • استخدم نظام Flexbox Containers في Elementor.
  • خذ كل قسم HTML من الموقع القديم، وحاول تقليده باستخدام الويدجتس الأساسية: (Heading, Text Editor, Image, Button, Icon Box).
  • بالنسبة لقسم معقد جداً مثل خريطة أو نموذج، استخدم ويدجت HTML فقط لذاك الجزء الصغير.

ووظف ميزة القوالب المحفوظة Saved Templates في Elementor بما أن لديك 12-16 قسماً، بعضها سيكون متشابهاً في التصميم مثلاً قسم خدماتنا وقسم مميزاتنا، بمجرد أن تنتهي من تصميم قسم، احفظه كـ Block أو Template.

وبالنسبة لتأثيرات بصرية معينة (Hover effects, shadows)، يمكنك نسخ أكواد الـ CSS الخاصة بها ولصقها في تبويب Custom CSS الخاص بكل ويدجت في Elementor وذلك متاح في نسخة Pro أو من خلال إضافة CSS Classes للويدجت ووضع الكود في ملف القالب الفرعي Child Theme.

وبخصوص الـ SEO بمجرد انتهائك من الصفحة الجديدة، قم بنسخ نفس الـ SEO Meta Title و Description من الصفحة القديمة إن كنت تستخدم Yoast أو RankMath.