بناء إطار التصميم الخاص بك مع Divi 5

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

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

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

Divi 5 جاهز للاستخدام على مواقع الويب الجديدة ، لكننا لا نوصي بترحيل المواقع الموجودة بعد.

كيف يتيح لك Divi 5 بناء إطار تصميم بدون رمز

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

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

تتيح لك متغيرات التصميم تحديد قيم التصميم العالمية

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

داخل البناء المرئي ، ابحث عن المدير المتغير لتحديد وتخزين أنواع متغيرات مختلفة (الأرقام والنصوص والصور والروابط والألوان والخطوط) بطريقة منظمة.

تشبه متغيرات التصميم إصدارًا بدون رمز من خصائص CSS المخصصة ، ولكن لديها مرونة أكبر بكثير. على سبيل المثال ، تعلن عمومًا متغيرات CSS مثل : Root {-primary-color: #1A73E8 ؛ } ، ولكن مع متغيرات تصميم Divi ، يمكنك فقط حفظ اللون كلون أساسي .

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

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

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

تعلم كل شيء عن متغيرات التصميم

احفظ مجموعات النمط الشائعة مع إعدادات مجموعة الخيارات

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

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

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

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

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

احفظ عناصر مصممة بالكامل مع إعدادات العناصر

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

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

كيف تنعكس هذه الأدوات في الواجهة الأمامية HTML

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

يتم ترجمة كل قرار التصميم الذي تتخذه إلى إخراج الواجهة الأمامية المناسبة. يعالج Divi جزء الترميز أثناء التركيز على التصميم.

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

أول bootstrap:

بناء نظام تصميم يدويًا مع رمز في bootstrap

على سبيل المثال ، لقد استخدمت إعداد WordPress مع تثبيت سمة UndersTrap.

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

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

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

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

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

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

الآن ، دعنا نبني نفس الصفحة باستخدام Divi 5 بدون ترميز.

إعادة إنشاء نفس الصفحة بصريًا مع Divi 5

نبدأ بتحديد متغيرات التصميم العالمية التي تصبح جزءًا من نظام التصميم على مستوى الموقع. أولاً ، تذهب إلى Manager> Colors . ثم ، اكتب رمز السداسي للون الأساسي (#e91e63) وحفظ.

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

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

إذا قمت بإضافة زر آخر وحدد الزر المسبق ، انظر ماذا يحدث؟ يتم تصميمه تلقائيًا.

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

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

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

يوضح مصدر الصفحة الخاص بالصفحة المذكورة أعلاه DIVI أن اللون الأساسي يتم حفظه في قسم الجذر ، تمامًا مثل متغيرات CSS:

وعلى الواجهة الأمامية ، يتم حفظ المسبقة لمجموعة الخيارات تلقائيًا وإخراج CSS النظيفة التي تستهدف الفئات المناسبة (.et_pb_button ، .et_pb_contact_submit).

كلا الصفحتين تبدو كما هي ، ولكن كيف تم بناؤها وصيانتها مختلفة تمامًا.

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

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

كيفية بناء إطار التصميم الخاص بك مع Divi 5

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

1. حدد متغيرات التصميم العالمية الخاصة بك

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

في Divi 5 ، لديك مدير متغير لإنشاء وتنظيمها.

إليكم كيف تلعب الأنواع المتغيرة المميزة دورًا:

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

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

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

2. احفظ المحتوى المتكرر عالميًا

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

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

يمكنك حفظ المحتوى من خلال المتغيرات الثلاثة المتبقية:

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

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

3. قم بإنشاء وحفظ الأنماط الأساسية مع إعدادات مجموعة الخيارات

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

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

1. حفظ الإعدادات المسبقة للأساليب الشائعة

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

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

2. الجمع بين متغيرات التصميم مع الإعدادات المسبقة

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

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

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

4. إنشاء مسبقات عنصر

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

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

قم بتعيين إعدادات العناصر الافتراضية

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

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

تصميم صفحات جديدة بناءً على إطار التصميم الخاص بك

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

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

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

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

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

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

هذا هو Power Divi 5 يجلب لك. يتيح لك إنشاء إطار التصميم الخاص بك وحفظه وتخصيصه دون لمس سطر واحد من التعليمات البرمجية.

بناء إطار التصميم بدون رمز بصري

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

يمنحك Divi 5 الأدوات اللازمة لتحقيق ذلك

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

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

Divi 5 جاهز للاستخدام على مواقع الويب الجديدة ، لكننا لا نوصي بترحيل المواقع الموجودة بعد.