تقديم متغيرات التصميم لـ Divi 5

أنا متحمس لتقديم متغيرات التصميم لـ Divi 5 ، وهي ميزة جديدة من شأنها تحسين سير عمل تصميم Divi بشكل كبير وتمنح مستخدمي Divi ساقًا خطيرًا فوق البناة الآخرين.

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

إن التآزر بين المتغيرات ونظام التصميم الجديد القائم على الإعداد المسبق لـ Divi رائع. اسمحوا لي أن أريكم كيف يعمل.

تحقق من الفيديو التالي لمشاهدة الميزة الجديدة في العمل.

Divi يذهب "عالمي" مع الإدارة المتغيرة

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

إنشاء متغيرات جديدة

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

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

استخدام المتغيرات في العناصر والإعدادات المسبقة

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

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

تصميم متغير أمثلة

متغيرات التصميم مفيدة وستصبح بسرعة مكونًا أساسيًا في سير عمل Divi Design. ولكن إذا لم يتم النقر على المفهوم ، اسمحوا لي أن أقدم لك بعض الأمثلة.

مثال واحد: إدارة الخطوط العالمية

كيف يمكنك استخدام متغيرات التصميم لتحسين سير العمل الخاص بك؟ أولاً ، دعونا نفكر في متغيرات الخط.

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

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

هذا هو المكان الذي تأتي فيه متغيرات الخط.

لقد قمت ببناء موقع الويب في الفيديو أعلاه باستخدام ثلاثة متغيرات الخطوط: خط عنوان وخط جسم وخط مميز.

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

إن تغيير خط عنوان موقع الويب الخاص بي سهل مثل تحديث متغير خط العنوان.

مثال الثاني: إدارة الأحجام العالمية

يمكنك أن تفعل الشيء نفسه مع أحجام النص.

بالنسبة للموقع الموجود في الفيديو أدناه ، حددت سلسلة من ثمانية أحجام نصية لمستويات العنوان المختلفة وأنماط نص الجسم. عندما أقوم بتحديث مسبقتي الافتراضية المسبقة وأعين متغير حجم النص المتوسط ​​، ترث جميع عناوين Blurb القيمة من هذا المتغير.

نظرًا لأنني أقوم ببناء أحجام نص موقعي بالكامل على المتغيرات ، يمكنني إدارة أحجام نص موقعي بالكامل من المدير المتغير.

مثال ثالث: عولمة موقع الويب الخاص بك بأكمله

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

ليس ذلك فحسب ، لكنني أيضًا حولت المحتوى المشترك إلى متغيرات. اسم شركتي ورقم الهاتف والعنوان هي متغيرات المحتوى.

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

جرب Divi 5 اليوم

تتوفر متغيرات التصميم لـ Divi 5 اليوم ، وهي واحدة من العديد من الميزات القادمة إلى Divi هذا العام.

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

كما هو موضح في جدول الإصدار الأصلي متعدد المراحل لـ Divi 5 ، فإن Divi 5 Public Alpha يشبه "Divi 5 Lite". إنه يفتقد بعض الميزات وقد لا يكون مناسبًا لمواقع الويب الحالية ، ولكنه جاهز لاستخدامه على مواقع ويب جديدة إذا كنت تفضل التجربة على Divi 4.

نريدك أن تجربها ، وإذا كنت تحبها ، فاستخدمها ؛ عندما يحبها الجميع ، سنجعله رسميًا.

نظرة خاطفة: صفوف متداخلة

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

في حال فاتتك ذلك ، تحقق من فيلم Sneak Sneak Feak الأسبوع الماضي ، حيث عرضت الصفوف المتداخلة. صفوف داخل الصفوف! إنها فكرة بسيطة ولكن الخطوة الأولى الأساسية في إنشاء نظام تخطيط أكثر مرونة لـ Divi 5.

شاهد هذا الفيديو للحصول على جميع التفاصيل.

المزيد من تحديثات Divi 5 في الطريق

2025 هو سنة ديفي 5 . العمل الشاق وراءنا. لقد قمنا ببناء الأساس الفائق الصارم ، والآن حان الوقت ل Divi للعودة.

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

لا تنس أن تتبعنا على YouTube واشترك في النشرة الإخبارية Divi حتى لا تفوتك أبدًا تحديثًا. سأراك قريبًا لإعلان ميزة Divi 5 آخر ، والذي أعدك به سيكون قاب قوسين أو أدنى.