أسرع طرق لتحديث تصميم صفحتك باستخدام Divi 5

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

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

8 خطوات لتحديث تصميم صفحتك باستخدام Divi 5

بالنسبة لهذا البرنامج التعليمي ، نستخدم صفحة أعمال CV Business من مكتبة Divi Layout Pack.

اشترك في قناتنا على YouTube

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

1. تحسين لوحة القيادة الخاصة بك للتحرير الخالي من الهاء

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

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

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

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

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

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

2. اضبط متغيرات التصميم العالمية أولاً

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

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

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

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

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

3. استبدل القيم الثابتة بمتغيرات التصميم

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

لا تحتاج إلى مطاردةهم بشكل فردي. تسهل أداة Divi's Find and Replive إلى مبادلة القيم الثابتة للمتغيرات في بضع نقرات فقط. دعنا نقول أن عناوينك تستخدم جميع الخطوط المختارة يدويًا. افتح أي وحدة عنوان ، انقر فوق حقل الخط ، وحدد البحث والاستبدال.

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

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

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

4. استخدم سمات التمديد لتطبيق التحديثات بالثواني

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

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

انقر بزر الماوس الأيمن على الصورة المصممة واختر سمات تمديد.

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

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

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

5. حفظ التعديلات القابلة لإعادة الاستخدام كإعدادات إعدادات مجموعة الخيارات

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

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

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

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

6. استخدم النسخ/لصق لإجراء تغييرات سريعة لمرة واحدة

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

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

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

يمتد تمديد السمات مع التعديلات بالجملة ، ونسخ/لصق يتولى التفاصيل. إنه مثالي لصقل التصميم الذي يتم في الغالب ولكن لا يزال يحتاج إلى بعض اللمسات الشخصية.

7. التبديل بين نقاط التوقف المخصصة لإتقان الرؤية المستجيبة

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

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

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

8. قم بتحديث متغيرات التصميم الخاصة بك لتحديث التصميم بالكامل على الفور

في وقت سابق ، قمنا بإعداد متغيرات التصميم العالمية واستبدلت قيمًا ثابتة باستخدام Find and Replace. والآن يكون التصميم الخاص بك متصلًا بالكامل بنظام تصميم مركزي.

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

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

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

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

تخصيص سير عمل Divi 5 الخاص بك

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

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

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

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

تم تصميم Divi 5 للتكيف مع طريقتك في العمل

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

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

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