تعلم التصميم في فيجما وإنشاء مواقع الويب على ووردبريس هي مهارات مهمة تسمح لك بإنشاء مواقع ويب جميلة وعملية.
فيجما هو أداة تصميم واجهة التي تسمح لك لخلق والنموذج وتبادل التصاميم مع الفريق. ووردبريس هي واحدة من أكثر المنصات شعبية لإنشاء مواقع الويب ، والتي توفر العديد من الاحتمالات لتخصيص التصميم وتحريره.
تحويل تصميم تم إنشاؤه في فيجما إلى موقع وورد العمل هو عملية تتطلب عدة خطوات. في هذا الدليل التفصيلي ، سنلقي نظرة على المراحل الرئيسية لهذه العملية ونشارك النصائح المفيدة لكل منها.
الخطوة 1: إعداد التصميم
الخطوة الأولى في تحويل تصميم فيجما إلى موقع وورد هو إعداد التصميم. كنت بحاجة للتأكد من أن التصاميم الخاصة بك منظمة تنظيما جيدا وسهلة القراءة. يمكنك استخدام التعليقات والتعليقات التوضيحية لتمييز التفاصيل المهمة والإشارة إلى ميزات التصميم.
الخطوة 2: إنشاء هتمل و كس
تتضمن الخطوة الثانية إنشاء هتمل و كس للتصميم الخاص بك. تحتاج إلى ترجمة التصميم بأكمله إلى هتمل ورمز كس. يجب أن تكون على دراية بأساسيات هتمل و كس لإكمال هذه الخطوة بنجاح. انتبه إلى التفاصيل مثل الخطوط والألوان والأحجام وترتيب العناصر.
الخطوة 3: إنشاء موضوع وورد
الخطوة الثالثة هي إنشاء موضوع وورد. يجب إنشاء ملفات لموضوع وورد, بما في ذلك ملفات القالب وملف نمط. سوف تحتاج أيضا معرفة فب لإضافة وظائف مخصصة والإعدادات إلى الموضوع الخاص بك.
باتباع هذا الدليل خطوة بخطوة ، سوف تكون قادرة على تحويل بنجاح التصميم الذي تم إنشاؤه في فيغما إلى موقع وورد وظيفية بالكامل. سيسمح لك ذلك بإنشاء مواقع ويب فريدة وفعالة ، تجمع بين التصميم والوظائف في توازن مثالي.
- إعداد التصميم في فيجما
- إنشاء مشروع ووردبريس جديد
- تركيب وتكوين موضوع وورد
- ترميز التصميم في هتمل و كس
- ,, و اخرين. قم بتعيين قيم السمات المناسبة لكل عنصر بحيث يتم عرضه ووظائفه تماما كما في فيجما. 4. انتقل إلى تصميم صفحة الويب الخاصة بك باستخدام كس. إنشاء ملف جديد في محرر التعليمات البرمجية وحفظه وفقا لذلك. ثم ربطه بمستند هتمل الخاص بك باستخدام العلامة. 5. إضافة رمز المغلق لكل عنصر التصميم. استخدم المحددات لتحديد العناصر المطلوبة وتعيين خصائص النمط المناسبة ، مثل اللون والخط والحجم وما إلى ذلك. قد تحتاج أيضا إلى استخدام استعلامات الوسائط لإجراء تغييرات في التخطيط بدقة شاشة مختلفة. 6. بعد الانتهاء من ترميز جميع عناصر التصميم الخاص بك ، حفظ الملفات وتحميلها على استضافة أو خادم وورد الخاص بك. سوف تحتاج أيضا إلى إنشاء ملف نمط جديد داخل موضوع وورد الخاص بك وإضافة رمز كس من تصميم المقابلة لذلك. سيسمح هذا لموقعك بإجراء انتقال كامل من تصميم في فيجما إلى موقع عمل على منصة ووردبريس.
- تكامل التصميم في ووردبريس
- 1. باستخدام موضوع وورد أسهل طريقة لدمج التصميم في وورد هو استخدام المواضيع الجاهزة. هناك عدد كبير من السمات المجانية والمدفوعة التي توفر فرصا كبيرة لتخصيص مظهر الموقع. لاستخدام التصميم الخاص بك ، سوف تحتاج إلى دراسة وثائق الموضوع المحدد وإجراء التغييرات المناسبة.
- 2. إنشاء موضوع وورد الخاص بك إذا كان لديك متطلبات تصميم معينة وتريد إنشاء موقع فريد من نوعه ، ثم خلق موضوع وورد الخاص بك قد يكون خيارا أكثر ملاءمة. للقيام بذلك ، سوف تحتاج إلى معرفة هتمل ، كس و فب. يمكنك تطوير المظهر الخاص بك من البداية أو استخدام منشئ السمات مثل الشرطات السفلية أو_.
- 3. استخدام الإضافات وورد إذا كنت بحاجة إلى إضافة وظائف أو كتل محددة لموقعك, يمكنك استخدام الإضافات وورد. هناك العديد من المكونات الإضافية التي تقدم ميزات متنوعة مثل إنشاء أشرطة التمرير ونماذج التعليقات ومعارض الصور والمزيد. بعد تثبيت البرنامج المساعد ، قد تحتاج إلى إجراء بعض التغييرات على قالب موقع الويب الخاص بك من أجل دمجه مع التصميم في فيجما.
- 4. التخصيص من خلال الحقول المخصصة وهناك طريقة أخرى لدمج التصميم في وورد هو استخدام الحقول المخصصة. وورد يسمح لك بإضافة حقول إضافية إلى المشاركات والصفحات التي يمكن استخدامها لإضافة محتوى أو سمات محددة في التصميم الخاص بك. للقيام بذلك ، قد تحتاج إلى إنشاء أنواع وقوالب سجلات مخصصة.
5. استخدام المكونات الإضافية لإنشاء صفحات إذا كنت بحاجة إلى إنشاء صفحات معقدة ذات تخطيط غير قياسي ، فيمكنك استخدام المكونات الإضافية التي توفر أدوات أكثر مرونة لإنشاء تخطيطات الصفحات. بعض الإضافات الشعبية تشمل إليمنتور ، ديفي باني ، بيفر باني ، الخ. تتيح لك هذه المكونات الإضافية إنشاء صفحات عن طريق سحب العناصر وإفلاتها وتخصيص مظهرها دون الحاجة إلى إنشاء رمز يدويا.
6. دليل لدمج تصميم فيجما في وورد إذا كنت ترغب في الحصول على تعليمات مفصلة حول دمج تصميم فيجما في وورد ، يجب الانتباه إلى أدلة خاصة ودروس الفيديو المتاحة على شبكة الإنترنت. أنها توفر تفسيرات خطوة بخطوة حول كيفية إنشاء موضوع وورد باستخدام تصميم من فيغما وكيفية تحويل العناصر البصرية إلى هتمل ورمز كس. يعتمد اختيار كيفية دمج التصميم في ووردبريس على احتياجاتك ومستوى مهارات البرمجة والتفضيلات في العمل مع السمات والمكونات الإضافية. من المهم أن تضع في اعتبارك أنه بعد دمج التصميم ، تحتاج أيضا إلى التفكير في وظائف موقعك وهيكله والتنقل فيه وتحسينها من أجل إنشاء تجربة مستخدم أفضل.
- تكامل التصميم في ووردبريس
- 1. باستخدام موضوع وورد
- 2. إنشاء موضوع وورد الخاص بك
- 3. باستخدام الإضافات وورد
- 4. التخصيص عبر الحقول المخصصة
إعداد التصميم في فيجما
عندما تقوم بإنشاء تصميم موقع الويب الخاص بك في فيجما ، هناك العديد من الخطوات التي تحتاج إلى اتباعها لإعداده للتكامل مع ووردبريس.
تصدير الصور. قبل البدء في العمل مع تصميم وورد ، يجب تصدير جميع الصور اللازمة من فيغما. للقيام بذلك ، يمكنك تحديد كل طبقة مع صورة في فيغما وتصديره في الشكل المطلوب (على سبيل المثال ، جبيغ أو ينغ). ثم احفظ الصور في مجلد منفصل على جهاز الكمبيوتر الخاص بك.
- تحديد العناصر. من المهم تحديد كل عنصر من عناصر التصميم الخاص بك من أجل فهم المكونات التي ستحتاج إليها لإنشاء موقع ووردبريس. تأكد من تعيين معرفات لكل عنصر في فيجما لفهم العناصر التي هي رأس ، القائمة ، تذييل الصفحة ، الخ.
- الأبعاد والهوامش. تحقق من الأحجام والهوامش التي استخدمتها لكل عنصر في التصميم الخاص بك. سيساعدك هذا في تحديد أنماط كس التي يجب عليك تطبيقها في ووردبريس للحفاظ على التخطيط الدقيق للعناصر.
- الخطوط والألوان. كتابة الخطوط والألوان من التصميم الخاص بك التي كنت قد استخدمت. سوف تحتاج إلى معلومات حول الخطوط والألوان التي قمت بتحديدها من أجل تطبيقها في وورد باستخدام أنماط كس المناسبة.
- تصدير رمز المغلق. بعد الانتهاء من إعداد جميع الصور وتحديد أنماط العنصر ، يمكنك تصدير رمز كس من فيغما. يحتوي هذا الرمز على جميع الأنماط المطبقة على التصميم الخاص بك ، مما سيسهل عملية نقل التصميم إلى ووردبريس.
- بعد الانتهاء من هذه الخطوات ، سيكون تصميمك في فيجما جاهزا لمزيد من التكامل مع ووردبريس. الآن يمكنك الانتقال إلى المرحلة التالية-إنشاء موقع وورد باستخدام التصميم الخاص بك.
- إنشاء مشروع ووردبريس جديد
قبل البدء في تحويل تصميم في فيجما إلى موقع وورد ، تحتاج إلى إنشاء مشروع جديد في لوحة القيادة وورد. هنا هو دليل خطوة بخطوة من شأنها أن تساعدك من خلال هذه العملية:
انتقل إلى لوحة المشرف وورد ، أدخل بيانات الاعتماد الخاصة بك وانقر على "تسجيل الدخول".
عندما تصل إلى صفحة المسؤول الرئيسية ، ابحث عن قسم "التثبيت" في القائمة اليسرى وحدد "المشاريع".
- في صفحة المشاريع ، انقر فوق الزر إضافة مشروع جديد.
- أدخل اسم المشروع الجديد في حقل" اسم المشروع". يمكنك استخدام أي اسم يناسبك.
- حدد المجلد حيث سيتم وضع مشروعك. عادة ما تحتوي لوحة معلومات ووردبريس بالفعل على مجلدات مثبتة مسبقا مثل "المواقع" و "المدونات" و "المتاجر" وما إلى ذلك. يمكنك تحديد واحد منهم أو إنشاء مجلد جديد بالنقر فوق الزر "إنشاء مجلد جديد".
- انقر فوق الزر" إنشاء مشروع".
- مبارك! لقد قمت للتو بإنشاء مشروع وورد جديد. أنت الآن جاهز لبدء تحويل تصميم فيجما الخاص بك إلى هذا المشروع. في القسم التالي ، سنلقي نظرة على كيفية استيراد تصميم إلى ووردبريس والبدء في تحويله.
- تركيب وتكوين موضوع وورد
بعد أن قمت بإنشاء التصميم الخاص بك في فيجما وتصدير جميع الصور اللازمة ، فقد حان الوقت لتثبيت وتخصيص موضوع لموقع وورد الخاص بك. إليك كيفية القيام بذلك:
- تسجيل الدخول إلى لوحة الادارة من موقع وورد الخاص بك باستخدام بيانات اعتماد المسؤول.
- انتقل إلى قسم" المظهر "وحدد"السمات".
- انقر فوق الزر" إضافة سمة جديدة".
- في الصفحة التي تفتح ، يمكنك رؤية قائمة بالسمات المتاحة للتثبيت. إذا كان لديك موضوع جاهز في التنسيق.الرمز البريدي ، انقر فوق الزر" تنزيل السمة " أعلى الصفحة وقم بتنزيل ملف السمة.
إذا كان لديك سمة في كتالوج ووردبريس ، فاستخدم أقسام البحث أو التصفح للعثور على السمة التي تحتاجها.
بعد العثور على سمة مناسبة ، مرر مؤشر الماوس فوقه وانقر فوق الزر "تنشيط".
مبارك! يتم الآن تثبيت موضوع وتفعيلها على موقع وورد الخاص بك. ومع ذلك ، قبل البدء في إنشاء الصفحات ونشر المحتوى ، قد تحتاج إلى تخصيص السمة لتناسب احتياجاتك:
انتقل إلى الإعدادات وحدد عام. هنا يمكنك تخصيص عنوان موقعك ووصفه وعنوان موقع الويب الخاص بك.
لمزيد من التخصيص المتقدم لمظهر السمة ، قد تحتاج إلى الانتقال إلى قسم "المظهر" وتحديد "إعدادات السمة". هنا يمكنك تخصيص الألوان والخطوط وتخطيط عنصر واجهة المستخدم وإعدادات المظهر الأخرى.
إذا كان المظهر الخاص بك يدعم الأحرف الكبيرة والتذييلات القابلة للتخصيص ، فيمكنك تنزيلها في الأقسام المناسبة من إعدادات السمة.
,,لا تنس تطبيق التغييرات وحفظ الإعدادات والانتقال إلى موقع الويب الخاص بك للتأكد من أن كل شيء يبدو بالطريقة التي تقصدها.
آمل أن تكون هذه المعلومات ساعدت في مسألة تثبيت وتكوين موضوع لموقع وورد الخاص بك. أنت الآن جاهز لبدء بناء تواجدك على الويب!
ترميز التصميم في هتمل و كس
بمجرد إنشاء تصميم في فيجما ، فإن الخطوة التالية هي تحويله إلى هتمل ورمز كس. سيسمح لك ذلك بإنشاء موقع ويب وظيفي وعملي على منصة ووردبريس.
1. إنشاء ملف جديد في محرر التعليمات البرمجية وحفظه مع .أتش تي أم أل التمديد. سيكون هذا الملف أساس موقع الويب الخاص بك.
2. أدخل علامات ترميز هتمل الأولية في ملفك. سيسمح هذا للمتصفح بفهم أن هذا الملف هو مستند هتمل.
3. ترميز كل عنصر من عناصر التصميم الخاص بك إلى رمز هتمل. للقيام بذلك ، سوف تحتاج إلى استخدام علامات هتمل المختلفة، مثل
، وغيرها. قم بتعيين قيم السمات المناسبة لكل عنصر بحيث يتم عرضه ووظائفه تماما كما في فيجما.
4. انتقل إلى تصميم صفحة الويب الخاصة بك باستخدام كس. إنشاء ملف جديد في محرر التعليمات البرمجية وحفظه وفقا لذلك. ثم ربطه بمستند هتمل الخاص بك باستخدام العلامة.
5. إضافة رمز المغلق لكل عنصر التصميم. استخدم المحددات لتحديد العناصر المطلوبة وتعيين خصائص النمط المناسبة ، مثل اللون والخط والحجم وما إلى ذلك. قد تحتاج أيضا إلى استخدام استعلامات الوسائط لإجراء تغييرات في التخطيط بدقة شاشة مختلفة.
6. بعد الانتهاء من ترميز جميع عناصر التصميم الخاص بك ، حفظ الملفات وتحميلها على استضافة أو خادم وورد الخاص بك. سوف تحتاج أيضا إلى إنشاء ملف نمط جديد داخل موضوع وورد الخاص بك وإضافة رمز كس من تصميم المقابلة لذلك. سيسمح هذا لموقعك بإجراء انتقال كامل من تصميم في فيجما إلى موقع عمل على منصة ووردبريس.
تكامل التصميم في ووردبريس
1. باستخدام موضوع وورد
- 2. إنشاء موضوع وورد الخاص بك
- 3. باستخدام الإضافات وورد
إذا كنت بحاجة إلى إضافة وظائف أو كتل محددة إلى موقعك ، يمكنك استخدام الإضافات وورد. هناك العديد من المكونات الإضافية التي تقدم ميزات متنوعة مثل إنشاء أشرطة التمرير ونماذج التعليقات ومعارض الصور والمزيد. بعد تثبيت البرنامج المساعد ، قد تحتاج إلى إجراء بعض التغييرات على قالب موقع الويب الخاص بك من أجل دمجه مع التصميم في فيجما.