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

كيفية تكوين وحدة Divi Person

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

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

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

مثال لحالة الاستخدام: إضافة قسم "فريقنا" إلى صفحة من نحن

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

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

باستخدام Visual Builder ، أدخل قسمًا قياسيًا جديدًا بصف من ثلاثة أعمدة (1/3 1/3 1/3). ثم أضف وحدة شخص إلى العمود الأول.

قم بتحديث إعدادات وحدة الشخص على النحو التالي:

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

الاسم: [أدخل اسم الشخص]
المنصب: [أدخل امتداد الشخص]
أدخل عناوين URL لملفات تعريف الوسائط الاجتماعية
الوصف: [أدخل سيرة ذاتية مختصرة]
صورة: [التقاط صورة 600 × 600]

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

رمز اللون: # fcbf00
مرر رمز اللون: # e0a831
خط الرأس: Roboto ، جريء ، تأثير في-
حجم خط الرأس: 30 بكسل
لون نص الرأس: # 505050
تباعد رأس الرسالة: 1 بكسل
ارتفاع صف الرأس: 1.5em
حجم خط الجسم: 18 بكسل
حجم خط الجسم: 1.4em
الحشوة المخصصة: 15px للأعلى ، 15px لليمين ، 15px لأسفل ، 15px لليسار

خيارات متقدمة (CSS مخصصة)

العنصر الرئيسي:
-webkit-box-shadow: 0 1px 5px rgba (0 و 0 و 0 و 0.2)
-moz-box-shadow: 0 1px 5px rgba (0، 0، 0، 0,2)؛
مربع الظل: 0 1px 5px رغبا (0، 0، 0، 0,2)؛

حفظ الإعدادات

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

هذا كل شيئ !

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

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

الاسم الشخصي

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

الموقع الحالي

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

عنوان URL الخاص بـ Facebook

أدخل عنوان URL على صفحتك على Facebook أو اتركه فارغًا لتعطيل أيقونة Facebook.

عنوان URL لملف Twitter

أدخل عنوان URL على صفحة Twitter الخاصة بك أو اتركه فارغًا لإيقاف تشغيل رمز Twitter.

عنوان URL لملف + Google

أدخل عنوان URL في صفحتك في Google+ أو اتركه فارغًا لإيقاف تشغيل رمز Google+.

ينكدين الملف الشخصي URL

أدخل عنوان URL على صفحتك على LinkedIn أو اتركه فارغًا لإيقاف تشغيل أيقونة LinkedIn.

الوصف

أدخل محتويات النص الرئيسي لوحدتك هنا.

عنوان URL للصورة

هنا يمكنك تنزيل صورة لاستخدامها في السيرة الذاتية.

لون الخلفية

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

صورة الخلفية

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

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

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

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

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

لون الرمز

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

لون الرمز عند التمرير

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

لون النص

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

خط الرأس

يمكنك تغيير خط نص العنوان الخاص بك عن طريق تحديد الخط المطلوب من القائمة المنسدلة. يأتي 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 بكسل. يمكنك زيادة هذه القيمة عن طريق سحب شريط تمرير النطاق أو إدخال قيمة مخصصة في حقل الإدخال إلى يمين شريط التمرير. وحدات القياس المخصصة مدعومة ، مما يعني أنه يمكنك تغيير الوحدة الافتراضية من "px" إلى شيء آخر مثل em و vh و vw وما إلى ذلك.

نمط الحدود

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

هامش مخصص

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

الحشو مخصص

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

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

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

معرف CSS

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

فئة CSS

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

عرف المغلق

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

الرسوم المتحركة

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

رؤية

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

[vc_row center_row = "نعم"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = ”# 18b69d” custom_hover_background = ”# 118d7a” custom_color = ”# ffffff” custom_hover_color = ”# ffffff” icon_right = ”fa fa-download”] DOWNLOAD DIVI THEME [/ vcex_button] [/ width_column] [= vc_column] / 1 ″] [vcex_button url = ”https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=2&url=23065&tid40632=tutorials” target = ”blank” layout = ”توسيع” align = ”center” font_family = ”Raleway” font_weight = ”1 ″ style =” flat ”custom_background =” # c700e ”custom_hover_background =” # 4226d8f ”custom_color =” # ffffff ”custom_hover_color =” # ffffff ”icon_right =” fa fa-download ”] تنزيل TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

دروس ديفي أخرى

• المواقع 5 للاستخدام مطعم ديفي موضوع
• كيفية إضافة نص على منتج Divi WooCommerce
• كيفية تغيير لون القائمة بين صفحات Divi
• كيفية تخصيص شبكات بلوق مع ديفي
• كيفية استخدام دور ديفي محرر على وورد
• كيفية إنشاء كامل الشاشة المنزلق ديفي
• كيفية تغيير لون القوائم بين صفحات Divi
• الميزات التي ربما لا تعرفها عن Divi
• كيفية استخدام Divi Builder على وورد
• كيفية استخدام وحدة Divi Video scrolling
• كيفية استخدام وحدة Divi Builder Flip
• كيفية إضافة وحدة شهادة على Divi Builder
• كيفية استخدام وحدة Divi النصية
• كيفية إنشاء شريط التمرير على ديفي
• كيفية تحرير دور مستخدم Divi
• كيفية استخدام وحدة Divi Social Media
• كيفية استخدام وحدة متجر على موضوع ووردبرس]
• كيفية استخدام وحدة Divi الشريط الجانبي
• كيفية استخدام Divi Price Table Module
• كيفية استخدام وحدة العنوان لمنشورات Divi
• كيفية إضافة وحدة فيديو ديفي
• كيفية استخدام وحدة الملاحة المادة
• كيفية استخدام وحدة البحث Divi
• كيفية استخدام وحدة محفظة Divi
• كيفية استخدام وحدة الشخص على Divi Builder
• كيفية استخدام وحدة المحفظة مع فلتر Divi
• كيفية استخدام وحدة المنزلق بعرض كامل
• كيفية استخدام Divi Builder Image Module
• كيفية استخدام وحدة التنقل كاملة العرض في Divi Builder
• كيفية استخدام وحدة معرض الصور
• كيفية استخدام وحدة بطاقة Divi Builder Full-Width
• كيفية استخدام وحدة Divi Full Width Portfolio
• كيفية استخدام وحدة الرأس Divi ذات العرض الكامل
• كيفية استخدام Divi Counter Module
• كيفية استخدام شريط التمرير المقالات على Divi Builder
• كيفية استخدام وحدة Divi Email Optin