إعادة تسمية موقع الويب في 5 دقائق مع سمات التمديد

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

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

ما هي سمات التمديد في Divi 5

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

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

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

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

كيف يساعد تمديد السمات على إعادة تسمية موقع الويب بشكل أسرع

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

باستخدام سمات تمديد في Divi 5

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

قل أنك تريد إعادة تسمية جميع أزرار الاتصال. ابدأ بتصميم وحدة زر واحدة داخل البناء المرئي.

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

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

• (1) تمتد من العنصر: الوحدة النمطية التي تمتد منها ، مثل الزر في حالتنا. يتم ملء هذا تلقائيًا بناءً على ما تنقر بزر الماوس الأيمن.
• (2) تمتد إلى الموقع: اختر إلى أي مدى يجب أن يذهب التصميم. لقد اخترنا صفحة كاملة لأننا نريد تغيير جميع الأزرار من الصفحة.
• (3) تمتد إلى نوع العنصر: اختر أنواع الوحدات التي يجب أن تتلقى الأنماط الجديدة. على سبيل المثال ، وحدات زر فقط أو جميع الوحدات النمطية المماثلة.
• (4) نوع السمة لتمديده: حدد ما تريد نسخه. اخترنا سمات التصميم وتركنا الآخرين.
• (5) مجموعة الخيارات لتمديد: تحديد مجموعة (مجموعات) الخيارات المراد تطبيقها: النص ، الزر ، الحدود ، التباعد ، إلخ.
• (6) الحقول المعدلة لتمديدها: يمكنك أيضًا الحد من اختيارك إلى خاصية نمط واحدة فقط أو اختيار جميع الحقول المعدلة لتوسيع جميع التغييرات التي أجريتها.

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

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

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

تعلم كل شيء عن تمديد السمات

استخدام المسبقات مجموعة الخيارات مع سمات تمديد

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

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

دعنا نعود إلى مثال الزر لفهم كيفية عمل هذا.

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

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

عندما تمتد ، لا ينسخ Divi المظهر فقط ؛ إنه يطبق مسبقًا محفوظًا خلف الكواليس. لذلك يستخدم أي زر آخر يلمسه الآن نفس الإعداد المسبق.

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

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

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

لهذا السبب يعد استخدام Presets Group Presets مع Extributes وسيلة أكثر ابتكارًا لإعادة تسمية العلامة التجارية. تحصل على الاتساق المرئي ونظام يسهل التحديث دون إعادة عملك.

تعلم كل شيء عن إعدادات مجموعة الخيارات

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

كيفية إعادة تسمية موقع ويب مع تمديد سمات

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

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

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

دعنا نسير بالضبط ما يجب تحديثه.

يعيد التصنيف بصريًا وحدات المفاتيح عبر التصميم

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

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

إعادة تسمية الوحدات النمطية

أولاً ، قم بتخصيص أي وحدة عنوان لتعكس علامتك التجارية الجديدة. سأبدأ بـ H4s.

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

وبالمثل ، ستقوم بإعادة تسمية H1 و H2 و H4s لتوحيد الطباعة وإعطاء موقعك صوتًا ثابتًا في بضع نقرات فقط دون إعادة تصريح كل وحدة عنوان يدويًا.

إعادة تسمية نص الجسم لتحسين القراءة

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

هذا يعطي فقراتك نمطًا ثابتًا عبر الصفحة في ثوانٍ ويزيل الحاجة إلى تعديل كل واحد على حدة.

إعادة تسمية الحدود

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

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

إعادة تسمية الصفحات الأخرى باستخدام الإعدادات المسبقة المحفوظة

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

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

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

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

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

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

نصيحة للمحترفين: استخدم سمات تمديد مع متغيرات التصميم

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

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

يتيح لك تمديد السمات إعادة تسمية العلامة التجارية دون إعادة البناء

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

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