إدارة علامتك التجارية مع متغيرات تصميم Divi

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

في هذا المنشور ، نريد أن نأخذ الدقائق القليلة التالية لنوضح لك كيفية إدارة علامتك التجارية باستخدام متغيرات التصميم في Divi 5. دعنا نصل إليها!

Divi 5 جاهز لاستخدامه على موقع الويب الجديد اليوم.

إدارة علامتك التجارية مع مدير متغير Divi الجديد

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

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

ابحث عن هذا الرمز لتعيين وتطبيق متغيرات التصميم

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

تعمل متغيرات التصميم مع كل عنصر داخل Divi Builder. يمكن أن تقلل متغيرات التصميم - وفي كثير من الحالات استبدال - الحاجة إلى استخدام مخصص موضوع WordPress. ابحث عن أيقونة متغير التصميم عند تحرير حقل يدعم متغيرات التصميم. باستخدام هذا الرمز ، يمكنك الوصول إلى المتغيرات التي تقوم بتعيينها في مدير المتغير.

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

"ترتيب العمليات" المفاهيمي للحصول على أقصى استفادة من ميزات التصميم الجديدة لـ Divi

إدارة العلامة التجارية مع كل نوع من متغير التصميم

يتم تقسيم متغيرات تصميم Divi إلى ست فئات. هم 1) الأرقام ، 2) سلاسل النص ، 3) الصور ، 4) عناوين URL ، 5) الألوان ، و 6) الخطوط. يمكن استخدام كل من هذه لضبط وتطبيق مختلف جوانب علامتك التجارية. من هناك ، استخدمها في جميع أنحاء موقع الويب الخاص بك للبناء مع وضع قابلية التوسع في الاعتبار. كما أنه يسرع الأشياء على طول.

1. الوصول إلى ألوان علامتك التجارية

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

يمكنك أيضا:

• إنشاء متغيرات شفافة (مثل اللون الأساسي 80 ٪ ، اللون الأساسي 60 ٪ ، إلخ)
• اجعل ظلالًا أخف وزنا وأظلم لألوانك الرئيسية
• قم بتغيير ألوانك في أي وقت وشاهدها تحديثها عبر موقعك في الوحدات التي تستخدم هذه الألوان

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

2. إعداد خطوط علامتك التجارية

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

أو ، إذا كنت تستخدم عروض أسعار الحظر بشكل متكرر ، فيمكنك تعيين عائلة خط معينة لهم وتطبيقها في إعدادات العناصر الخاصة بك أو في مجموعة خيار نص الجسم مسبقًا ضمن "block quote".

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

3. تحميل اختلافات شعارك

تعد الصور المتسقة جزءًا مهمًا من تقديم علامتك التجارية.

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

ستوفر لك متغيرات التصميم وقتًا مع أي صور في التصميم الخاص بك 1) تستخدم عدة مرات على صفحات متعددة و 2) التغيير في كثير من الأحيان.

4. حفظ معلومات العلامة التجارية المتكررة

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

تساعد متغيرات النص في الاتساق والسرعة عند استخدامها لأشياء مثل:

• شهادات أو اقتباسات متكررة
• أسماء الخدمة/المنتجات والأوصاف
• ساعات العمل ومعلومات الاتصال
• إخلاء المسئولية القانونية
• عبارات الدعوة إلى العمل
• اسم العمل (خاصة إذا كان مختلفًا عن اسم الموقع)

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

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

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

5. تحديث روابط حملة علامتك التجارية

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

يمكنك أيضًا استخدام عناوين URL لتخزين وتعيين:

• مراجعة صفحات (مثل ملف تعريف أعمال Google الخاص بك)
• CRM أو صفحات الهبوط عبر البريد الإلكتروني
• النماذج المخفية أو عروض المشترك
• Tel: و Mailto: الروابط
• إدارة روابط التابعة أو CRM في بقعة واحدة
• روابط إلى محفظتك أو behance أو github

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

6. إدارة متغيرات الأرقام المتكررة

نعم - الأرقام أيضًا. يمكنك تحديد الوحدات للتباعد والأحجام والرسوم المتحركة. يمكن حفظ الأرقام كأي نوع من وحدة CSS ، مثل:

البكسلات (PX) ، النسبة المئوية (٪) ، EMS (EM) ، الجذر EMS (REM) ، ارتفاع منفذ العرض (VH) ، عرض منفذ العرض (VW) ، الحد الأدنى للمنفذ (VMIN) ، MAXIMUM (VMAX) ، الوحدة الكسرية (FR) ، وحدة الأحرف (CH) ، X-LIGHT (EX) ، Centimeters (CM) ، MLIMET (MM) ، init (in) . (PC) ، الدرجات (DEG) ، RADIANS (RAD) ، GRADIANS (GRAD) ، المنعطفات (بدوره) ، ثواني (ق) ، ميلي ثانية (MS).

يمكنك أيضًا الوصول إلى وظائف تعيين Clamp () و min () و max () و calc ().

استخدم المشبك () للقيم المطبعية السوائل. إنه أمر رائع للنص المستجيب ويجب استخدامه مع متغيرات الخط لإنشاء نظام تصميم الطباعة الكامل.

استخدم متغيرات الأرقام لتعيينها أيضًا:

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

تبسيط علامتك التجارية مع متغيرات تصميم Divi

تريد إدارة علامتك التجارية مثل المحترف؟ استخدم متغيرات تصميم Divi لبناء أكثر ذكاءً وأسرع. خطط للعناصر الأساسية للعلامة التجارية لموقع الويب الخاص بك واستخدامها ذريًا طوال الوقت.

إنها مدمجة بالفعل في Divi 5 ، ويمكنك الاستفادة منها اليوم. كما أنها تعمل في كل مكان - الإعدادات المسبقة ، وقوالب منشئ السمة ، وعلى إعدادات الوحدة النمطية الفردية.