كيفية تحويل PSD إلى WordPress باستخدام Elementor & WidgetKit
نشرت: 2019-12-12هل تبحث عن حل تحويل PSD إلى WordPress؟ هل تريد تحويل PSD لموقع الويب الجاهز الخاص بك إلى WordPress ، لكن لا تعرف كيف؟ حسنًا ، يمكنني مساعدتك في هذا الأمر.
أنت تعلم بالفعل أن WordPress هو أحد أكثر منصات CMS استخدامًا وتنوعًا في الآونة الأخيرة. الآن ، أصبح إنشاء موقع ويب كامل الوظائف من PSD إلى WordPress بدون ترميز أكثر راحة مع منشئ الصفحات مثل Elementor.
في هذه المقالة ، سأوضح لك "كيفية تحويل ملف PSD إلى WordPress باستخدام Elementor & WidgetKit" خطوة بخطوة.
دعونا نرى كيف.
اختيار تصميم PSD
قبل تحويل PSD إلى قالب WordPress ، فإن أول شيء عليك القيام به هو اختيار تصميم PSD لموقع ويب. باختصار ، PSD اختصار لـ PhotoShop Design ، وهي واحدة من أكثر أدوات التصميم شيوعًا مع تصميم مواقع WordPress الأكثر شيوعًا.
يمكنك اختيار أي من تصميمات PSD المفضلة لديك من مجموعة كبيرة من PSDHUB.
أنها توفر قوالب PSD مجانية عالية الجودة لموقع الويب الخاص بك ، للاستخدام الشخصي والتجاري. تذكر ، يجب أن يكون تصميم PSD الذي اخترته بسيطًا ومعاصرًا.
تحقق من العوامل التالية أثناء اختيار تصميم PSD ،
- هيكل التصميم: أول شيء يجب عليك مراعاته هو هيكل التصميم. التصميم ليس له حدود ولكن الترميز له حدود.
- تصميم أنيق وأنيق : الشيء الثالث هو أن تصميم PSD المفضل لديك يجب أن يكون نظيفًا وأنيقًا. يساعد المطور على إنشاء موقع ويب مثالي للبكسل من تصميم نظيف وأنيق.
- وفاء الغرض: الشيء الثاني هو ، إذا كان التصميم يحقق غرضك أم لا. لنفترض أنك بحاجة إلى موقع ويب خاص بالسفر ، فيجب أن يكون تصميم PSD الخاص بك هو موقع PSD الخاص بالسفر.
- التعقيد: أخيرًا ، حاول تجاهل التعقيد كما هو الحال مع PSD أيضًا في الاختيار.
هنا نستخدم نموذج Eventia-Conference and Event Management من PSDHUB.
قم بتثبيت WordPress
يشتهر WordPress بسهولة التثبيت. في معظم الظروف ، يعد تثبيت WordPress عملية بسيطة للغاية ويستغرق إكمالها أقل من خمس دقائق. لتحويل قالب PSD إلى WordPress ، فإن تثبيت WordPress هو الخطوة الثانية التي يجب مراعاتها.
يوفر WordPress.org مقالة مفصلة حول "كيفية تثبيت WordPress" في صفحة الدعم الخاصة بالموقع. ومع ذلك؛ إليك الإرشادات الأساسية لتثبيت WordPress لك ،
- قم أولاً بتنزيل وفك ضغط حزمة WordPress.
- قم بإنشاء قاعدة بيانات لـ WordPress على خادم الويب الخاص بك ، بالإضافة إلى MySQL.
- قم بتحميل ملفات WordPress إلى الموقع المطلوب على خادم الويب الخاص بك:
- إذا كنت ترغب في دمج WordPress في جذر المجال الخاص بك ، فقم بنقل أو تحميل جميع محتويات دليل WordPress الذي تم فك ضغطه إلى الدليل الجذر لخادم الويب الخاص بك.
- إذا كنت ترغب في تثبيت WordPress في الدليل الفرعي الخاص به على موقع الويب الخاص بك ، فقم بإنشاء دليل المدونة على الخادم الخاص بك وقم بتحميل محتويات حزمة WordPress غير المضغوطة إلى الدليل عبر FTP.
- قم بتشغيل البرنامج النصي لتثبيت WordPress من خلال الوصول إلى عنوان URL في متصفح الويب.
هذا هو! يجب الآن تثبيت WordPress.
قم بتثبيت Elementor
تدور المقالة حول تحويل PSD إلى سمة WordPress باستخدام Elementor. لذلك ، نحتاج إلى Elementor لتخصيص وتحرير ملف PSD. دعونا نرى بعد ذلك ، كيفية تثبيت Elementor.
Elementor هي واحدة من أفضل منصات التصميم الكاملة لإنشاء تصميم مثالي للبكسل في WordPress. إنه الأفضل لنهج التصميم القابل للتوسيع سهل الاستخدام. عملية تثبيت Elementor هي أيضًا مهمة بسيطة. ما عليك سوى اتباع بعض الخطوات البسيطة وستكون جاهزًا لتصميم PSD الخاص بك في منشئ الصفحة Elementor.
هناك طريقتان لتثبيت المكون الإضافي Elementor. يتم وصف عملية التثبيت أدناه ،
عبر موقع Elementor
- انتقل أولاً إلى elementor.com وانقر فوق تنزيل.
- في لوحة معلومات WordPress ، انقر فوق الإضافات> إضافة جديد .
- انقر فوق تحميل البرنامج المساعد ، واختر الملف الذي قمت بتنزيله لـ Elementor.
عبر لوحة تحكم WordPress
- من لوحة التحكم الرئيسية ، انقر فوق المكونات الإضافية> إضافة جديد.
- في حقل البحث ، أدخل Elementor واختر Elementor page builder للتثبيت.
- بعد التثبيت ، انقر فوق تنشيط.
هذا كل ما عليك فعله لتثبيت Elementor page builder. يمكنك أيضًا متابعة الفيديو أدناه لمعرفة المزيد عن عملية التثبيت.
تثبيت WidgetKit
WidgetKit for Elementor - مجموعة العناصر الإضافية الأكثر تقدمًا وقوة والتي تعزز قدرات بناء موقع الويب الخاص بك عن طريق إضافة المزيد من العناصر والتخطيطات. هنا نستخدم عناصر واجهة المستخدم وعناصرها لتحويل PSD إلى WordPress.
يمكنك إنشاء أي نوع من الصفحات تقريبًا من PSD باستخدام WordPress و WidgetKit. تثبيت Widgetkit بسيط مثل تصميم PSD لموضوع WordPress معه. من لوحة تحكم WordPress ، يمكنك إضافة WidgetKit بسهولة باتباع بعض الخطوات السهلة. دعنا نرى،
قم بتثبيت WidgetKit عبر لوحة تحكم WordPress
- من لوحة التحكم الرئيسية ، انقر فوق المكونات الإضافية> إضافة جديد.
- أدخل WidgetKit في حقل البحث واختر WidgetKit لتثبيته Elementor .
- بعد التثبيت الناجح ، انقر فوق تنشيط .
WidgetKit جاهز للاستخدام مع Elementor الآن. إذا كان لديك أي ارتباك بعد ، فما عليك سوى متابعة الفيديو. سيساعدك هذا أيضًا في كيفية استخدام WidgetKit.
قم بتحويل PSD الخاص بك إلى WordPress
تم الانتهاء من جزء التثبيت. حان الوقت الآن لتحويل PSD إلى WordPress Elementor و WidgetKit. هناك الكثير من PSD لمزود خدمة WordPress الذين يقدمون PSD إلى WordPress بالإضافة إلى PSD لتحويل Joomla حاليًا. ومع ذلك؛ يمكنك تصميم طريقتك المفضلة. هنا نعرض فقط طريقة أساسية لتحويل PSD إلى WordPress.
إلى جانب ذلك ، يمكنك أيضًا اختيار أي من السمات والقالب الجاهزين لدينا من المجموعة الواسعة من دليل سمات وملحقات WordPress.
حاول اتباع التسلسل أثناء تصميم مخطط من PSD. هذا سيساعدك كثيرا،
قم بإنشاء صفحة جديدة
أول شيء عليك القيام به هو إنشاء صفحة جديدة من لوحة تحكم WordPress. من الجانب العلوي الأيسر من لوحة معلومات WordPress ، انقر فوق الصفحات> إضافة جديد.
ثم انقر فوق تحرير باستخدام Elementor للدخول إلى Elementor Page Builder. سترى لوحة Elementor كما هو موضح أدناه.
قم ببناء صفحتك من ملف PSD
لإنشاء صفحة أو تحويل PSD إلى قالب WordPress ، هناك ثلاثة أشياء رئيسية يجب مراعاتها ؛ الأقسام والأعمدة والأدوات. الأقسام هنا هي أكبر الكتل الإنشائية ، وتلتقط الأعمدة. يمكنك وضع الأدوات داخل الأعمدة. بالنقر فوق خيار التحرير ، يمكنك التحكم في القسم والعمود والأدوات بمقبضها.
إضافة قسم الرأس
لقسم الرأس هنا ، نستخدم Theme Eventia من Themexpert. في WordPress ، يمكنك استخدام سمة موجودة كإطار لتصميم قالب وإلا فإن WordPress نفسه يضيف واحدًا لك. ثم يمكنك إضافة شعار وصفحات متعددة باستخدام تصميم أو تخطيط السمة الحالي.
إضافة قسم البطل
الآن نقوم بتحويل قسم البطل. أولاً نضيف صورة خلفية مثل PSD ثم نضيف عمودًا إلى العمود لإضافة محتوى وأيقونة متعددة.
بالنسبة لخيار العداد هنا ، نستخدم عنصر WidgetKit Countdown. الإخراج وخيار التحرير أدناه.
إضافة قسم داخلي
حان الوقت الآن لتصميم القسم الداخلي. هنا نستخدم عناصر Elementor لإضافة خلفية ونص بين عمودين.
هذا هو تحرير قسم حول هذا الحدث باستخدام عنصر Elementor. نضيف هنا بعض النص وصورة البانر داخل عمود القسم. المنظر ينظر أدناه.
باستخدام الرمز الرأسي لفريق WidgetKit ، نقوم بتصميم قسم السماعات في ملف PSD. هناك نضيف الصور وأيقونة الموقع الاجتماعي في عمود مختلف بالاسم والتسمية.
في هذا القسم ، نضيف فقط بعض الرموز العشوائية من PSD ونعطي العنوان.
لا يمكننا أن نجعل كل شيء مع Elementor. في مثل هذه الحالة ماذا نفعل؟ نستخدم ملحقًا من موضوع مختلف أو نصنع ملحقًا خاصًا بنا. هذا شيء شائع أثناء تصميم PSD إلى WordPress Theme. هنا نستخدم الجدول الملحق من Eventia Theme.
بالنسبة لقسم المدونة ، نستخدم عنصر حلقة مدونة WidgetKit. مع محتوى مرئي مختلف ، يمكنك إضافة خلفية حتى قراءة المزيد من الأزرار أيضًا.
لقسم التذييل هنا ، نستخدم Theme Eventia من Themexpert كما نفعل قبل قسم الرأس. هنا نحصل على رمز موقع اجتماعي متعدد وزر اشتراك.
معاينة ونشر صفحتك
بمجرد الانتهاء من تصميم صفحتك من PSD ، يمكنك معاينة عملك ونشره . يمكنك أيضًا تحرير صفحة منشورة وحفظ عملك كمسودة . هذا يعني أنك لن تفسد صفحتك المنشورة أثناء حفظ عملك كمسودة . هنا معاينة بصرية Eventia PSD.
كلمة أخيرة
هذا كل شيء لهذا اليوم يا شباب. آمل أن تستمتع بالمقال وتكون لديك فكرة واضحة حول كيفية تحويل PSD إلى WordPress باستخدام منشئ الصفحة Elementor و WidgetKit. قم بتطبيق المورد ، وبالطبع ، لا تنس مشاركة تجربتك وآرائك القيمة في قسم التعليقات أدناه.