مكتبة الشروحات

نبذة: المخطط الحي يساعد مدير الموقع في تنسيق عرض موقعه بكل سهولة؛ كما يُمكِّنَه من عرض القوالب في بالطريقة التي يريدها، كل ذلك يتم بشكل تفاعلي مباشرة من واجهة الموقع؛ ولا يحتاج مدير الموقع لمعرفة بالأكواد البرمجية، فقط كل ما عليه إضافة القالب في المكان الذي يريده عن طريق السحب والإفلات، ثم تحديد عرضه من خلال أدوات تُسهل عليه التحكم في مقاس القالب.

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

-مع المخطط الحي أصبح تنسيق موقعك أمرًا سهلًا وممتعًا في نفس الوقت. 

المخطط الحي يحتوي على عدة مميزات؛ منها :

-إضافة قوالب البلجنات والتحكم في أبعادها ومكانها في الموقع.

-ضبط إعدادات القوالب؛ بحيث يمكنك أن تحدد إعدادات خاصة لكل مخطط في حال رغبتك بإنشاء عدة مخططات.

-إنشاء مخطط خاص بصفحة ما، أو بلجن ما.

-عمل مخطط خاص لكل جهاز (سطح مكتب – لوحي – جوال).

-حفظ نسخة افتراضية من المخطط واسترجاعها في أي وقت.

أولًا : تنشيط المخطط الحي :

لتنشيط المخطط الحي اضغط على أيقونة (إعدادات) الموجودة أعلى الموقع (الهيدر)،  ثم قم بإختيار تنشيط المخطط الحى , كما بالصورة التالية  :

وعند الضغط على (تنشيط المخطط الحي) سيتغير شكل الموقع إلى شكل المخطط الحي الذي يُمكنك من خلاله التحكم بالقوالب وإضافتها وتعديلها؛ ولإلغاء تنشيط المخطط الحي يمكنك من خلال نفس القائمة السابقة الضغط على (إلغاء تنشيط المخطط الحي)، كما بالصورة التالية :

ثانيًا : شريط أدوات المخطط الحي :

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

1- قالب : يُمكنك من خلالها إضافة قالب جديد من قوالب الموديولات و البلاجنات المتوفره لديك في الموقع؛ وسوف نتعرف على القوالب وكيفية التعامل معها من خلال الشرح.

2-العناصر: يُمكنك من إضافة قالب من قوالب بلاجن العناصر,  حيث يوفر بلجن (العناصر) الكثير من القوالب والأشكال الرائعة الجاهزة؛ مثل قوالب (الهيدر، الإنترو، أقسام وأنواع الخدمات، الفوتر، السوشيال، السلايدر...إلخ) و للإطلاع على بلجن العناصر إضغط هنا.

3-سلة المنولة: يتم نقل القالب إلى سلة المناولة  لتتمكن فيما بعد من سحبه منها ووضعه في مكان آخر.

4- المخططات الحالية : ستجد فيه جميع المخططات التي قمت بإنشائها؛ ويمكنك اختيار المخطط الذي تريد تفعيله أو تحريره وتعديله , كما بالصورة التالية:

5- نسخ: يُمكنك من نسخ المخطط الحالى إلى نوع جهاز أخر(كفى أو لوحى) , و عند الضغط على نسخ يظهر نموذج النسخ , كما بالصورة التالية:

من : قم بإختيار نوع الجهاز الذى تود النسخ منه.

إلى: قم بإختيار نوع الجهاز الذى تود النسخ إليه.

ثم إضغط على (إرسال)

6- زون : يُمكنك من خلالها إضافة زون جديد في الموقع؛ وسوف نتعرف على الزون والأدوات المتوفرة معه من خلال الشرح.

7- إخفاء عناوين القوالب : عند الضغط على هذه الأيقونة سيتم إخفاء عناوين جميع القوالب؛ ولإعادة إظهارها يمكنك الضغط على الأيقونة مرة أخرى.

8,9- إعادة – تراجع : يُمكنك من خلالهما الإعادة أو التراجع عن آخر عملية قمت بها.

10- تفعيل ملء الشاشة : يُمكنك من خلال هذه الأيقونة تشغيل المخطط الحي بملء الشاشة؛ ومن نفس الأيقونة يمكنك إلغاء تفعيل ملء الشاشة.

11-  نبذة عن المخطط الحي : عند الضغط عليها ستظهر لك نبذة بسيطة عن المخطط الحي.

12- نوع الجهاز : من هنا تختار نوع الجهاز الذي تريد تجهيز مخطط خاص به، سواء (حاسوب، لوحي، كفي)؛ ويمكنك الاختيار من القائمة كما بالصورة التالية :

عادي : أجهزة سطح المكتب.

لوحي : أجهزة التابلت.

كفي : أجهزة الجوال.

والغاية من ذلك ظهور الموقع بشكل منظم ومتناسق على جميع الأجهزة.

13- حفظ التعديلات : لحفظ التعديلات التى قمت بها على المخطط الحى .

14-خيارات أخرى :عند الضغط الايقونة الموضحة سوف يفتح لك نافذة  كما بالصورة التالية :

*حفظ التعديلات : كما فى زرار 13 ,  يُمكنك تحديد (حفظ التعديل أيضًا على الوضع الافتراضي لهذا المخطط) لحفظ التعديلات على النسخة الافتراضية للمخطط، والفائدة من ذلك هي استعادة هذه النسخة في أي وقت ,كما بالصورة التالية:

ثم اضغط (حفظ التعديلات) ليتم حفظ التعديلات التي أجريتها على المخطط.

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

-يمكنك اختيار (حفظ التعديل أيضًا على الوضع الافتراضي لهذا المخطط) إذا أردت حفظ التعديلات على النسخة الافتراضية للمخطط، وذلك لاستعادة هذه النسخة في أي وقت.

- يمكنك اختيار (حفظ كمخطط خاص بجميع صفحات البلجن الحالي) وسيتم تطبيق المخطط على جميع الصفحات الداخلية للبلجن؛ على سبيل المثال، إذا كانت هذه الصفحة إحدى صفحات موديول الملفات فسيتم تطبيق نفس المخطط على جميع صفحات موديول الملفات؛ وهذا يسهل عليك عمل مخطط واحد للموديول من خلال عمل مخطط لصفحة واحدة فقط.

- يمكنك اختيار (حفظ كمخطط خاص لهذا الأكشن )؛ والأكشن هو الحرف الذي يظهر بعد اسم الموديول أو البلجن وقبل الآي دي في شريط عنوان المتصفح، كما بالصورة التالية :

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

- يمكنك اختيار (حفظ كمخطط خاص لهذه الصفحة فقط) وسيتم حفظ المخطط للصفحة الحالية فقط، ولن يتأثر أي شيء آخر بهذا التعديل.

ثم اضغط على (حفظ التعديلات) ليتم تنفيذ وحفظ التعديلات التي قمت بها على المخطط.

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

وفي حالة تحديد (حذف المخطط الخاص بالصفحة الحالية وحفظه في المخطط العام): سيتم حذف المخطط المخصص للصفحة، وسيتم تطبيق المخطط الخاص بها على باقي الصفحات الداخلية التي ليس لها طريقة خاصة من الطرق الثلاث في الحفظ.

*إعادة التسمية: لإعادة تسمة المخطط , كما بالصورة التالية:

*حفظ المخطط باسم : من خلاله يمكنك حفظ نسخة من المخطط الحالي باسم آخر، كما في الصورة التالية :

ما الفائدة من حفظ المخطط باسم آخر ؟

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

*تطبيق المخطط كافتراضي : يمكنك من خلاله جعل المخطط الحالي هو المخطط الافتراضي.

*استرجاع الوضع الافتراضي : من خلاله ستتمكن من استرجاع نسخة المخطط التي حفظتها سابقًا كما أشرنا؛ وبالتالي أي تعديلات أخرى على المخطط أضفتها بعد حفظ نسخة على الوضع الافتراضي لن تجدها.

إلغاء التعديلات : لإعادة تحميل الصفحة مع تجاهل جميع التعديلات التي قمت بها هذه المرة.

ثالثًا : الزونات :

الزون عبارة عن حاوية للقوالب، كما في الصورة التالية :

إضافة زون :

يُمكنك إضافة زون من خلال زر (إضافة زون) الموجود في شريط أدوات المخطط، كما بالصورة التالية :

ادوات الزون :

تتوفر مجموعة من الأدوات تمكنك من التحكم في الزون؛ وتظهر كما بالصورة التالية :

أولا:تحريك : يُمكنك من خلالها تحريك الزون ونقله لمكان آخر.

ثانيا:تكبير - تصغير : لتكبير و تصغيير حج الزون و ذلك عن طريق عدد الأعمدة الموجودة , كما بالصورة التالية:

ثالثا: الإعدادات : للتحكم فى إعدادات الزون , كما بالصورة التالية:

- إضافة class: حيث يمكنك إضافة class ليتم تطبيقه على هذه الزون.

-لون الخلفية: لتغيير لون خلفية الزون و إختيار اللون الذى تريده من خلال ماكت الألوان الموجود.

-صورة : لإضافة صورة لخلفية الزون من خلال رفع الصورة من كلمة (Browse).

-استحواذ الجوانب : 

1- الاستحواذ من اليمين : استحواذ للزون من جهة اليمين.

2- الاستحواذ من اليسار : استحواذ للزون من جهة اليسار.

3- كلاهما :   الاستحواذ ككل (بداية جديدة), سيظهر الزون في سطر جديد.

4-إلغاء : هو الوضع الافتراضي و إعادة الزون لوضعه الطبيعي.

-محاذاة تجاه (اليمين – اليسار) : المحاذاة هي وضع الزون في الجهة التي ترغب بها؛ ولكي تشاهد تأثير ذلك احرص على ألا يكون الزون ممتدًا بعرض الصفحة .

1- محاذاة إلى اليمين: وضع الزون في الجهة اليمنى.

2-توسيط: وضع الزون فى الوسط.

3- محاذاة إلى اليسار : وضع الزون في الجهة اليسرى.

4-إلغاء: و هوالوضع الافتراضي و إعادة الزون لوضعه الطبيعي.

-دفع(Bootstrap Bush) , سحب(Bootstrap Pull) :  لمزيد من التحكم فى مكان و وضعيه الزون.

رابعا:حذف : شكل أيقونة الحذف سيتغير حسب محتوى الزون؛ كما يلي :

أيقونة سلة : وهذا يعني أن الزون يحوي قوالب؛ وعند الضغط عليها سيتم حذف القوالب من داخل الزون.

أيقونة X : وهذا يعني أن الزون فارغ؛ وعند النقر عليها سيتم حذف الزون.

رابعًا : القوالب :

وهي قوالب البلجنات الخاصة بك، والتي قمت بتنصيبها في موقعك.

إضافة قالب : يُمكنك إضافة قالب من خلال الضغط على زر ( قالب) الموجود في شريط أدوات المخطط , كما بالصورة التالية:

وعند الضغط عليه ستظهر لك نافذة تحتوي على القوالب المتوفرة لديك؛ كما بالصورة التالية :

1- بحث بواسطة اسم قالب : خاص بالبحث عن قالب , و عند كتابة إسم القالب يظهر لك , كما بالصورة التالية:

2- قائمة القوالب : وفيها تظهر أسماء جميع الموديولات والبلجنات، وعند اختيارك لموديول ما أو بلجن ستظهر لك القوالب الخاصة به , كما بالصورة التالية:

ولعرض القالب، قم بسحبه، ثم قم بإفلاته في المكان الذي تريده في الموقع.

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

أدوات القالب :

تتوفر مجموعة من الأدوات تمكنك من التحكم في القالب , كما بالصورة التالية:

أولا: الإعدادات: يمكنك من التحكم فى إعدادات القالب , كما بالصورة التالية:

-التصميم :هى الإعدادات الخاصة بظهور القالب كما أوضحناها فى الاعدادات الخاصة بالزون , بالإضافة الى :

تباعد خارجي -تباعد داخلى : تمكنك من تحريك القالب إلى الجهة التي تريدها بالمسافات التي تريدها، حيث تعتمد نظام البكسل.

-إعدادات القالب : يظهر هذا الخيار مع بعض القوالب، وستظهر لك بعض الإعدادات الخاصة بالقالب، ويمكنك التعديل عليها، ثم الضغط على (إرسال) ليتم الحفظ وإعادة تحميل الصفحة.

ملاحظات :

1- إذا ذهبت إلى إعدادات البلجن في لوحة تحكم الإدارة فلن تجد القيم الجديدة التي أضفتها؛ لأن هذه القيم يتم حفظها في المخطط المحدد فقط.

2- إذا فتحت (إعدادات القالب) في المخطط مرة أخرى ستجد بجانب زر (إرسال) زرًا جديدًا وهو (استعادة الإعدادات الافتراضية)، وعند الضغط عليه سيتم مسح القيم التي عدلتها من قبل عن طريق المخطط لهذا القالب، وستعود القيم الافتراضية المحددة من لوحة تحكم الإدارة في إعدادات البلجن , كما بالصورة التالية:

ثانيا:تكبير-تصغير : لتكبير و تصغير حجم القالب فى الزون التى يوجد بها.

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

رابعا:نقل لغير المفعلة : سيتم إعادة القالب إلى نافذة إضافة قالب مره أخرى.