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

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

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

حالة الاستخدام لإدراج خدمات الشركة على الصفحة الرئيسية

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

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

قم بتحديث إعدادات Blurb بما يلي:

خيارات المحتوى

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

خيارات التصميم

لون الأيقونة: # 42bb99 (اجعل اللون الذي يكمل تصميم الموقع)
استخدم أيقونة حجم الخط: نعم
حجم خط الرمز: 68 بكسل (يضبط حجم الرمز)
اتجاه النص: الوسط -
حجم خط الرأس: 24 ​​بكسل
حجم الخط: 18 بكسل
ارتفاع خط الجسم: 1.5em

الآن الانتهاء من النص التمهيدي الأول الخاص بك.

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

ملخص خيارات المحتوى

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

لقب

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

محتويات

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

URL

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

فتح عنوان URL

هنا يمكنك اختيار ما إذا كان الارتباط الخاص بك سيتم فتحه في نافذة جديدة أم لا.

استخدم الرمز

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

أيقونة

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

صورة

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

لون الخلفية

حدد لون خلفية مخصصًا للوحدة النمطية الخاصة بك أو اتركه فارغًا لاستخدام اللون الافتراضي.

صورة الخلفية

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

علامة المسؤول

سيؤدي هذا إلى تغيير تسمية الوحدة في المولد لسهولة التعرف عليها. عند استخدام عرض WireFrame في Visual Builder ، ستظهر هذه الملصقات في كتلة الوحدة لواجهة Divi Builder.

خيارات تصميم وحدة الملخص

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

لون الرمز

إذا اخترت "نعم" لإعداد "استخدام الرمز" ، فسيظهر هذا الخيار. يتيح لك هذا الخيار تخصيص لون الرمز الخاص بك. بشكل افتراضي ، يتم تعيين الرموز على لون تمييز المظهر الخاص بك.

رمز الدائرة

إذا اخترت "نعم" لإعداد "استخدام الرمز" ، فسيظهر هذا الخيار. يتيح لك هذا الخيار وضع الرمز الخاص بك في دائرة ملونة. إذا حددت "نعم" لهذا الإعداد ، فسيتم تقديم خيارات إضافية لك لتخصيص لون وحدود دائرتك.

لون الدائرة

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

إظهار حدود الدائرة

إذا اخترت "نعم" لإعداد "رمز الدائرة" ، فسيظهر هذا الخيار. يتيح لك هذا الخيار تفعيل حد لدائرتك. إذا تم تحديد هذا الخيار ، فسيظهر خيار إضافي لتحديد لون الحد الخاص بك.

لون حدود الدائرة

إذا اخترت "نعم" لإعداد "Show Circle Border" ، فسيظهر هذا الخيار. هنا يمكنك ضبط لون حدود الدائرة.

وضع الصورة / الرمز

هنا يمكنك اختيار موقع صورتك / أيقونتك. يمكن أن يظهر فوق النص أو على يسار النص. من خلال وضع الصورة / الرمز على يسار النص ، ستكون الصورة أصغر مما لو تم وضعها في الأعلى.

استخدم حجم خط الرمز

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

لون النص

إذا تم وضع دعاية مغالى فيها على خلفية داكنة ، فيجب ضبط لون النص على "Dark". على العكس من ذلك ، إذا تم وضع دعاية مغالى فيها على خلفية فاتحة ، فيجب ضبط لون النص على "فاتح".

اتجاه النص

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

خط الرأس

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

حجم خط الرأس

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

لون نص الرأس

بشكل افتراضي ، تظهر كل ألوان النص في Divi باللون الأبيض أو الرمادي الداكن. إذا كنت تريد تغيير لون الرأس ، فاختر اللون الذي تريده من منتقي الألوان باستخدام هذا الخيار.

تباعد حرف الرأس

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

ارتفاع صف الرأس

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

خط الجسم

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

حجم خط الجسم

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

لون نص الهيكل

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

تباعد حروف الجسم

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

ارتفاع خط الجسم

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

استخدم الحدود

سيؤدي تمكين هذا الخيار إلى وضع حد حول الوحدة النمطية الخاصة بك. يمكن تخصيص هذا الحد باستخدام المعلمات الشرطية التالية.

لون الحدود

يؤثر هذا الخيار على لون حدودك. حدد لونًا مخصصًا من منتقي الألوان لتطبيقه على حدودك.

عرض الحدود

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

نمط الحدود

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

أقصى عرض للصورة

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

الهامش المخصص

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

الحشو مخصص

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

خيارات متقدمة وحدة ملخص

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

معرف CSS

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

فئة CSS

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

عرف المغلق

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

صورة / أيقونة متحركة

يتحكم هذا في اتجاه حركة التحميل البطيء.

نص بديل من الصورة

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

رؤية

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

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