نقدم لكم الدليل الشامل حول live editor واجهة المستخدم وتخطيط الصفحة، وسوف نقدم ميزات وطريقة استخدام واجهة المستخدم live editor ، وكذلك طرق تخطيط الصفحة.

واجهة المستخدم

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

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

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

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

حيز العمل لواجهة المستخدم

تتضمن أداة إنشاء الصفحات هذه المجالات الرئيسية:

1.  Header Panel: اختر نمطًا عامًا (ألوانًا ، خطوطًا) أو استخدم حقل البحث للعثور على عنصر واجهة مستخدم.

2.  Widgets / Widget Settings: اختر القطعة وقم بتكوينها.

3.  زر المعاينة: يمكّنك معاينة الصفحة. بمجرد النقر فوقه يخفي  او يظهر اللوحة.

4.  لوحة التذييل: عرض الصفحة ، العودة إلى لوحة التحكم ، وحفظ الصفحة.

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

6.  إضافة قسم / قالب جديد: اختر بين إنشاء قسم جديد أو إدراج قالب موجود.

إضافة قسم جديد

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

2.  حدد الهيكل الخاص بك: اختر هيكلًا للقسم الخاص بك (يمكنك لاحقًا تعديل العرض الدقيق لكل عمود).

أضف نموذجًا

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

خيارات المقطع / العمود

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

تحرير القطعة

• لتحرير أداة ، انقر فوق رمز القلم الرصاص.
• في رأس اللوحة ، يمكنك اختيار تعديل محتوى الأداة ونمطها.
• كل عنصر واجهة له إعدادات مختلفة.
• يمكنك حفظ التغييرات الحالية الخاصة بك في أي مرحلة.
• عند الانتهاء من التصميم ، انقر فوق الزر "X" في اللوحة السفلية واعرض الصفحة.

وضع الاستجابة

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

تخطيط الصفحة

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

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

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

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

دعنا نتعمق اكثر ونستكشف إمكانات عناصر تصميم صفحة العناصر الإبداعية.

القسم

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

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

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

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

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

التعامل مع الرموز

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

علامة التبويب تخطيط

• المقطع المبوب: باستخدام الأقسام المبوبة ، يمكنك إنشاء علامات تبويب متعددة ، كل منها يحتوي على محتوى فريد. يتيح ذلك للمستخدمين التنقل بسهولة عبر أقسام المعلومات المختلفة دون إرباك الصفحة.  ويمكن أن تحتوي كل علامة تبويب على عناصر مختلفة ، مثل النص أو الصور أو عناصر واجهة المستخدم ، مما يوفر تخطيطًا متعدد الاستخدامات.
• عرض المحتوى: اضبط "عرض المحتوى" على "عرض محاصر" أو "عرض كامل". عند اختيار Boxed - استخدم شريط التمرير لضبط العرض
• فجوة الأعمدة: عيّن فجوة الأعمدة
• الارتفاع: اختر بين "ملائمة للشاشة": سوف يملأ القسم الخاص بك الشاشة ، و "الحد الأدنى للارتفاع": عيّن "الحد الأدنى للارتفاع" ، واستخدم شريط التمرير لضبط ارتفاع القسم الخاص بك
• المحاذاة العمودية: تسمح لك المحاذاة العمودية بضبط الموضع الرأسي للعناصر داخل الحاوية ، مما يضمن المحاذاة والتباعد المناسبين
• Overflow: Overflow يشير إلى سلوك المحتوى الذي يتجاوز أبعاد الحاوية الخاصة به ، مما يسمح لك بالتحكم في كيفية عرض المحتوى الزائد ، سواء كان مخفيًا أو معروضًا مع أشرطة التمرير أو تم ضبطه بطرق أخرى.
• قسم التمديد: إجبار القسم على التمدد إلى العرض الكامل للصفحة
• علامة HTML: يمكنك تعيين العنصر الدلالي الذي تريد أن يصبح عليه القسم
• الهيكل: يمكنك تعيين هياكل أعمدة مختلفة للقسم

علامة تبويب النمط

الخلفية ((Normal & Hover))

• نوع الخلفية: اختر بين بلا أو خلفية كلاسيكية أو خلفية فيديو

الحدود ((Normal & Hover))

• نوع الحدود: عيِّن نوع الحدود
• نصف قطر الحد: عيّن نصف قطر الحد
• Box Shadow: أضف Box Shadow

الطباعة

• تعيين ألوان الطباعة للقسم: العنوان ، والنص ، والرابط
• اضبط محاذاة النص للقسم
• Box Shadow: أضف Box Shadow

متقدم

• الهامش: التحكم في الفضاء الخارجي للقسم.
• الحشو: التحكم في تباعد المقطع الداخلي. يمكنك تعيين حشوة مختلفة لليسار واليمين والأعلى والأسفل.
• رسم الدخول: انقر على القائمة المنسدلة لاختيار رسم متحرك.
• فئات CSS: عيّن فئات CSS مخصصة للقسم الخاص بك

متجاوب

• الأعمدة العكسية: يسمح لك بتبديل ترتيب الأعمدة (عظيم للجوال)
• الرؤية: إظهار أو إخفاء القسم الخاص بك على سطح المكتب أو الجهاز اللوحي أو الهاتف المحمول

عمود

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

التعامل مع الرموز

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

علامة تبويب النمط

الخلفية والحدود

• نوع الخلفية: اختر بين بلا أو كلاسيكي
• نوع الحدود: عيِّن نوع الحدود
• نصف قطر الحد: عيّن نصف قطر الحد
• Box Shadow: أضف Box Shadow

الطباعة

• تعيين ألوان الطباعة للعمود: العنوان ، والنص ، والرابط ، والارتباط ،
• اضبط محاذاة النص للعمود
• Box Shadow: أضف Box Shadow

متقدم

• الهامش: اضبط هامش القسم
• المساحة المتروكة: اضبط المساحة المتروكة للقسم
• رسم الدخول: انقر على القائمة المنسدلة لاختيار رسم متحرك.
• فئات CSS: عيّن فئات CSS للقسم الخاص بك

متجاوب

• عرض الجوال: قم بتعيين عرض العمود المخصص لعرض الجوال.

Widgets

الأدوات المصغّرة هي عناصر مختلفة لواجهة المستخدم ، تمكّن المستخدم من أداء وظيفة أو مجرد عرض المعلومات. يمكنك إدراج عناصر واجهة المستخدم داخل الأعمدة ،  ويتم تعيين عرض عنصر واجهة المستخدم بواسطة عرض العمود.

التعامل مع الرموز

• تحرير: انقر لتحرير أو سحب وإفلات لاستبدال القطعة
• تكرار: قم بتكرار الأداة بنقرة واحدة فقط
• إزالة: حذف القطعة من العمود

علامة تبويب المحتوى وعلامة تبويب النمط

يعتمد على القطعة

علامة تبويب متقدمة

نمط العنصر

• الهامش: اضبط هامش القسم
• المساحة المتروكة: اضبط المساحة المتروكة للقسم
• رسم الدخول: انقر على القائمة المنسدلة لاختيار رسم متحرك.
• فئات CSS: قم بتعيين فئات CSS لعنصر واجهة المستخدم الخاص بك

الخلفية والحدود

• نوع الخلفية: اختر بين بلا أو كلاسيكي
• نوع الحدود: عيِّن نوع الحدود
• نصف قطر الحد: عيّن نصف قطر الحد
• Box Shadow: أضف Box Shadow

متجاوب

• عرض الجوال: قم بتعيين عرض العمود المخصص لعرض الجوال.