وحدة الشفرة عبارة عن لوحة فارغة تتيح لك إضافة رمز إلى صفحتك ، مثل الرموز المختصرة للمكونات الإضافية أو رمز HTML الثابت. إذا كنت ترغب في استخدام مكون إضافي تابع لجهة خارجية ، على سبيل المثال مكون إضافي منزلق تابع لجهة خارجية ، فيمكنك ببساطة وضع الرمز المختصر للمكون الإضافي في وحدة رمز قياسية أو كاملة العرض لعرض العنصر بدون قيود.
كيفية إضافة وحدة رمز إلى صفحتك
قبل أن تتمكن من إضافة وحدة رمز إلى صفحتك ، يجب عليك أولاً الوصول إلى Divi Builder. مرة واحدة في موضوع ديفي مثبتة على الخاص بك موقع انترنت، ستلاحظ زرًا استخدم Divi Builder فوق الناشر في كل مرة تقوم فيها بإنشاء صفحة جديدة.
بالنقر فوق هذا الزر ، تقوم بتنشيط Divi Builder ، والذي يمنحك الوصول إلى جميع وحدات Divi Builder. ثم اضغط على الزر استخدم Visual Builder لبدء المولد في الوضع المرئي.
يمكنك أيضًا النقر فوق الزر استخدم Visual Builder عند تصفح ملفات موقع انترنت المنبع إذا قمت بتسجيل الدخول إلى لوحة تحكم WordPress الخاصة بك.
بمجرد الدخول إلى Visual Builder ، يمكنك النقر فوق زر علامة الجمع الرمادي لإضافة وحدة نمطية جديدة إلى صفحتك. لا يمكن إضافة الوحدات النمطية الجديدة إلا داخل الصفوف. إذا كنت تبدأ صفحة جديدة ، فتذكر إضافة صف إلى صفحتك أولاً.
حدد موقع وحدة الشفرة في قائمة الوحدات وانقر عليها لإضافتها إلى صفحتك. قائمة الوحدات قابلة للبحث ، مما يعني أنه يمكنك أيضًا كتابة كلمة "code" ثم الضغط على Enter للبحث تلقائيًا عن وحدة التعليمات البرمجية وإضافتها! بمجرد إضافة الوحدة ، سيتم استقبالك بقائمة خيارات الوحدة. تنقسم هذه الخيارات إلى ثلاث مجموعات رئيسية: محتويات , تصور et متقدم .
استخدم الحالة عن طريق إضافة ورقة أنماط مملة لتحريك المحتوى في صفحة فردية
في هذا المثال ، سأضيف رابطًا نصيًا لاستيراد Animate.css لإضافة تأثيرات الحركة إلى عناصر الصفحة. نظرًا لأن ملف Animate.css يحتوي على الكثير من التعليمات البرمجية ، فمن المنطقي تحميله فقط على الصفحة التي أحتاجها.
فقط أضف قسمًا منتظمًا وخطًا كامل العرض (عمود 1) وأضف الوحدة النمطية للرمز.
في مربع النص محتويات، قم بإضافة مقتطف الشفرة.
كل ما عليك فعله هو إضافة عدد قليل من فئات CSS لتحريك أي عنصر من صفحتك في CSS على صفحتك. في هذا المثال ، سأرتد الزر عند تحميل الصفحة.
في إعدادات وحدة الزر ، في علامة التبويب خيارات متقدمة ، أدخل الفئتين "الرسوم المتحركة" و "الارتداد" في مربع نص فئة CSS.
الآن يرتد الزر عند تحميل الصفحة.
نصيحة: في بعض الأحيان ، تؤدي إضافة التعليمات البرمجية بفواصل الأسطر إلى توقف الشفرة عن العمل. من الأفضل إنشاء الكود الخاص بك في محرر نصوص ولصقه في وحدة التعليمات البرمجية.
خيارات محتوى الشفرة
في علامة التبويب محتويات، ستجد جميع عناصر محتوى الوحدة، مثل النصوص والصور والأيقونات. كل ما يتحكم مما يظهر في الوحدة النمطية الخاصة بك سيكون دائما في علامة التبويب هذه.
محتويات
هنا يمكنك وضع أي كود HTML أو CSS أو JavaScript تريد عرضه على الصفحة في الموقع الحالي. يُسمح فقط للمحررين والمسؤولين بنشر HTML غير المصفاة ، مما يعني أنه يمكن إزالة التعليمات البرمجية من الدورة التدريبية إذا تم استخدامها من قبل المؤلف أو المساهم. يمكنك أيضًا وضع الرموز القصيرة في الوحدة. سيتم عرض رموز الدورة التدريبية (الرموز القصيرة) داخل العمود الأصلي بدون أي أغلفة إضافية لوحدة Divi.
تسمية الإدارة
سيؤدي هذا إلى تغيير تسمية الوحدة في المولد لسهولة التعرف عليها. عند استخدام عرض WireFrame في Visual Builder ، ستظهر هذه الملصقات في كتلة الوحدة لواجهة Divi Builder.
خيارات تصميم الرمز
في علامة التبويب "تصميم" ، ستجد جميع خيارات تصميم الوحدة النمطية ، مثل الخطوط والألوان والحجم والتباعد. تتيح لك علامة التبويب هذه تعديل مظهر الوحدة الخاصة بك. تحتوي كل وحدة Divi على قائمة طويلة من إعدادات التصميم التي يمكنك استخدامها لتعديل أي شيء تقريبًا.
أقصى عرض
أي قيمة يتم إدخالها هنا تحدد عرض أي محتوى يتم تقديمه في وحدة التعليمات البرمجية إلى القيمة المحددة. على سبيل المثال ، سيؤدي إدخال 50٪ في حقل الإدخال إلى تقليل محتويات وحدة التعليمات البرمجية إلى 50٪ من العمود الذي يحتوي عليها.
كود خيارات متقدمة كود
في علامة التبويب خيارات متقدمة ، ستجد خيارات قد يجدها مصممو الويب الأكثر خبرة مفيدة ، مثل سمات CSS و HTML المخصصة. هنا يمكنك تطبيق CSS مخصص على أي من عناصر الوحدة المتعددة. يمكنك أيضًا تطبيق معرفات وفئات CSS المخصصة على الوحدة النمطية ، والتي يمكن استخدامها لتخصيص الوحدة في ملف style.css الخاص بالقالب الخاص بك.
معرف CSS
أدخل معرف CSS سهل الاستخدام لهذه الوحدة. يمكن استخدام المعرف لإنشاء نمط CSS مخصص أو الارتباط بأقسام معينة من صفحتك.
فئة CSS
أدخل فئات CSS الاختيارية لاستخدامها في هذه الوحدة. يمكن استخدام فئة CSS لإنشاء نمط CSS مخصص. يمكنك إضافة فئات متعددة مفصولة بمسافة. يمكن استخدام هذه الفئات في ملف موضوع ديفي طفل أو في CSS المخصص الذي تضيفه إلى صفحتك أو ملفك موقع انترنت باستخدام خيارات سمة Divi أو إعدادات صفحة Divi Builder.
عرف المغلق
يمكن أيضًا تطبيق CSS المخصص على الوحدة النمطية وأي من العناصر الداخلية للوحدة. في قسم CSS المخصص ، ستجد حقل نص حيث يمكنك إضافة CSS مباشرة إلى كل عنصر. تم بالفعل تضمين إدخالات CSS في هذه الإعدادات مع علامات الأنماط. لذلك عليك فقط إدخال قواعد CSS مفصولة بفواصل منقوطة.
رؤية
يتيح لك هذا الخيار التحكم في الأجهزة التي تظهر عليها الوحدة الخاصة بك. يمكنك اختيار إلغاء تنشيط الوحدة الخاصة بك على الأجهزة اللوحية أو الهواتف الذكية أو أجهزة الكمبيوتر المكتبية بشكل فردي. هذا مفيد إذا كنت تريد استخدام تعديلات مختلفة على أجهزة مختلفة أو إذا كنت تريد تبسيط تصميم الهاتف المحمول عن طريق إزالة بعض العناصر من الصفحة.
هذا كل شيء في هذا البرنامج التعليمي.
