يسعدنا أن نعلن عن آخر تحديث لبرنامج Beaver Builder، الإصدار 2.8، الذي يقدم ميزة جديدة ومثيرة - Global Styles.

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

في هذه المقالة، سنلقي نظرة فاحصة على ما تقدمه Global Styles. بعد ذلك، سنوضح لك كيفية استخدام Global Colors للارتقاء بتجربة تصميم الويب لديك.

ما هي الأنماط العالمية؟

تعد Global Styles ميزة جديدة قوية في Beaver Builder 2.8 والتي تسمح لك بتعيين تفضيلات التصميم للعناصر والألوان عبر تخطيطات Beaver Builder الخاصة بك.

يمكنك الحصول على المرونة اللازمة لتخصيص تصميم موقع الويب الخاص بك ليتناسب مع تفضيلات التصميم الخاصة بك. سواء كنت تفضل مظهرًا نظيفًا وبسيطًا أو أسلوبًا جريئًا وحيويًا، تتيح لك Global Styles تصميم شكل ومظهر موقع الويب الخاص بك بسهولة.

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

تمنحك هذه الميزة الحصرية، المتوفرة فقط في الإصدار المميز من أداة إنشاء الصفحات الخاصة بـ Beaver Builder، المرونة لتخصيص العناصر والألوان بسهولة داخل Beaver Builder:

• العناصر العامة - قم بتعيين الأنماط لعناصر html المتنوعة التي يتحكم فيها Beaver Builder مثل النص والعناوين والارتباطات والأزرار.
• الألوان العالمية – قم بإنشاء لوحة ألوان متماسكة يمكن الوصول إليها عبر Beaver Builder، مما يبسط اختيار الألوان في Global Styles ومنتقيات الألوان الأخرى.

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

كيف يمكنني تعيين الأنماط العالمية في Beaver Builder؟

إحدى الفوائد الرئيسية لـ Global Styles هي كيفية تبسيط عملية التصميم. بدلاً من ضبط الأنماط يدويًا لكل عنصر في كل صفحة، تسمح لك الأنماط العامة بتعيين تفضيلاتك مرة واحدة وتطبيقها عالميًا.

لتعيين الأنماط العامة داخل Beaver Builder، انقر فوق Launch Beaver Builder لفتح محرر Beaver Builder.

بعد ذلك، انتقل إلى قائمة "الأدوات"، التي يمكنك العثور عليها بالنقر فوق السهم الموجود في الشريط العلوي في الزاوية اليسرى العليا من شاشة التحرير. قم بالتمرير لأسفل وحدد "الأنماط العامة" من القائمة:

سيؤدي هذا إلى فتح المربع المنبثق لإعدادات الأنماط العامة:

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

الخطوة 1. قم بتعيين العناصر العالمية

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

• النص - تتيح لك خيارات تصميم النص الشامل إمكانية تخصيص النص المحاط بعلامتي <p> و<span>. اختر لون النص باستخدام أداة منتقي الألوان واضبط إعدادات الطباعة، بما في ذلك الخط والنمط والتباعد وظل النص:

• العناوين - تتيح لك خيارات تصميم العناوين العامة تخصيص جميع علامات العناوين بشكل فردي (<h1>، و<h2>، و<h3>، و<h4>، و<h5>، و<h6>). توفر هذه الإعدادات نفس خيارات التخصيص مثل إعدادات النص:

• الروابط – تمكّنك خيارات تصميم الارتباط العام من تخصيص مظهر روابط HTML، والتي تتضمن أيضًا منتقي ألوان إضافي للون تمرير الرابط. تذكر أنه إذا لم تقم بتكوين أي نمط عام للارتباطات، فسيتم استخدام النمط العام للنص بدلاً من ذلك:

• الأزرار – باستخدام خيارات تصميم الأزرار العامة، يمكنك تخصيص مظهر علامات الأزرار (<button>) وأي رابط HTML باستخدام فئة الزر fl . اضبط خيارات الألوان والطباعة والحدود لتحقيق نمط الزر المطلوب:

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

الخطوة 2. تعيين الألوان العالمية

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

لإضافة لون عام، انتقل إلى Global Styles ضمن قائمة Tools وحدد علامة التبويب Colors:

بعد ذلك، قم بتعيين اسم للون الخاص بك، مثل "اللون الأساسي"، واختر الظل المطلوب باستخدام منتقي الألوان:

لتضمين ألوان إضافية، ما عليك سوى النقر فوق الزر " إضافة ألوان عامة " أو تكرار عنصر لون موجود:

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

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

إذا لم تعد بحاجة إلى لون معين، فإن حذف عنصر Global Color سيكون أمرًا سهلاً. ما عليك سوى النقر على أيقونة الحذف الموجودة في الزاوية العلوية اليمنى من عنصر اللون الذي ترغب في إزالته.

كيفية تطبيق الألوان العالمية في Beaver Builder

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

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

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

بعد ذلك، اختر اللون العام المطلوب من قائمة الاتصال الميداني :

مع Global Colors، لديك الأدوات اللازمة للحفاظ على تصميم موقع ويب متسق وجذاب دون عناء.

قم بتعيين الوضع المستجيب للأنماط العالمية Beaver Builder

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

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

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

إذا اخترت عدم إضافة إعدادات لكل حجم جهاز، فسيتم تطبيق إعدادات سطح المكتب على الجميع.

الشروع في العمل مع الأنماط العالمية

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

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

خاتمة

مع تقديم الأنماط العالمية في Beaver Builder 2.8، أصبح تصميم مواقع الويب الجميلة والاحترافية أسهل من أي وقت مضى. سواء كنت مصمم ويب متمرسًا أو مبتدئًا، فإن Global Styles هو ما تحتاجه لتسريع سير عملك.

قم بالترقية إلى Beaver Builder 2.8 اليوم واختبر قوة الأنماط العالمية بنفسك!