هل ترغب في إنشاء سيرة ذاتية باستخدام DIVI لأعضاء فريقك مع تأثير التحويم؟
ليس سرا أن الصفحات حول الجامعة مثالية لإنشاء تفاعلات على موقعك موقع انترنت. إنه أيضًا هذا النوع من الصفحات الذي سيؤكد على الجزء البشري من الشركة وراء موقع انترنت.
أحد الأشياء التي يمكنك القيام بها للتحسين من الصفحة نبذة عنا هو توفير قسم لأعضاء الفريق يسلط الضوء على موظفيك.
اقرأ أيضا: Divi: كيفية إنشاء رأس عالمي شفاف ولزج
في هذا البرنامج التعليمي ، سنوضح لك كيفية القيام بذلك خطوة بخطوة. بمجرد أن تفهم النهج ، يمكنك تخصيصه ليناسب احتياجاتك الخاصة.
دعونا نذهب!
مسح
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة على أحجام الشاشات المختلفة.
حاسوب مكتب
الجوال
إضافة قسم جديد
مباعدة
أنشئ صفحة جديدة أو افتح صفحة موجودة وأضف قسمًا جديدًا باستخدام قيم المساحة المتروكة التالية:
- الهامش الداخلي (العلوي والسفلي): 100 بكسل
أضف السطر رقم 1
هيكل العمود
بمجرد الانتهاء من إضافة الحشوات المخصصة إلى القسم الخاص بك ، يمكنك إغلاق إعدادات القسم وإضافة سطر جديد باستخدام عمود واحد.
أضف وحدة نصية
أضف وحدة نصية إلى العمود بعنوان H2 بحجم من اختيارك.
إعدادات النص H2
بعد ذلك ، انتقل إلى إعدادات نص H2 وقم بإجراء بعض التغييرات.
- خط الرأس: Cinzel
- نمط نسخ الرأس: Tt (انظر الالتقاط)
- محاذاة النص: توسيط
- حجم نص الرأس: 70 بكسل
أضف وحدة فاصل
رؤية
تابع عن طريق إضافة وحدة فاصل جديدة أسفل وحدة النص مباشرة.
- إظهار الحاجز: نعم
لون المقسم
انتقل إلى علامة تبويب النمط ، وافتح إعدادات اللون وقم بتغيير لون الفاصل وفقًا لذلك:
- لون الملصق: # 333333
التحجيم
ثم سنقوم بتقليل حجم الحاجز ونركزه.
- أقصى عرض: 26٪
- محاذاة النص: الوسط
أضف السطر 2
هيكل العمود
أسفل السطر السابق الذي أضفته مباشرة ، تابع وقم بإضافة صف جديد باستخدام ثلاثة أعمدة متساوية في الحجم.
التحجيم
بدون إضافة أي وحدات نمطية ، افتح إعدادات الخط وقم بإجراء بعض التغييرات على إعدادات التحجيم.
- استخدام عرض مزراب مخصص: نعم
- تباعد العمود: 1
- أقصى عرض: 2 بكسل
- تنسيق ارتفاعات العمود: نعم
مباعدة
بعد ذلك ، انتقل إلى إعدادات التباعد وأضف قيم الهامش المخصصة.
- الهامش (أعلى وأسفل): 50 بكسل
- الهامش الداخلي: (أعلى وأسفل: 10 بكسل) ، (يسار ويمين: 5 بكسل)
أدخل معلمات كل عمود وقم أيضًا بتعديل قيم الهوامش الداخلية على النحو التالي:
- الهامش الداخلي (يسار ويمين): 5 بكسل
صندوق الظل
كما نعطي خطنا بعض العمق من خلال إضافة ظل مربع إليه بالإعدادات التالية:
- مربع قوة طمس الظل: 80 بكسل
- قوة انتشار الظل المربع: -14 بكسل
- لون خط الترجمة: rgba (0,0,0,0.3،XNUMX،XNUMX،XNUMX)
أضف وحدة صورة إلى العمود 1
قم بتحميل صورة في وحدة الصورة
حان الوقت لبدء إضافة الوحدات!
لتحقيق تأثير التحويم الحيوي ، سنحتاج إلى وحدتين إجمالاً ؛ وحدة صورة ووحدة ملخص.
انظر أيضا: Divi: كيفية إنشاء شبكة صور سريعة الاستجابة مع روابط وتأثيرات تحوم
ستحتوي وحدة الصورة على صورة عضو الفريق الذي تريد تمييزه. من ناحية أخرى ، سيتم استخدام وحدة الملخص لإضافة الرمز في الزاوية اليسرى السفلية والسيرة الذاتية عند التمرير.
أضف وحدة صورة إلى العمود الأول باستخدام صورة مربعة الحجم.
مرشحات البحث
التصميم الذي نقوم بإنشائه هو تدرج رمادي بالكامل. لإضافة هذا التدرج الرمادي إلى صورتنا ، انتقل إلى إعدادات المرشحات وقم بإزالة كل التشبع.
- التشبع: 0٪
أضف وحدة الملخص إلى العمود 1
تابع بإضافة وحدة ملخص جديدة أسفل وحدة الصورة مباشرةً في العمود 1. أضف اسم عضو الفريق في حقل العنوان وأدخل بعض المعلومات الإضافية حول عضو الفريق في المربع. محتويات.
اختر أيقونة
الشيء التالي الذي سنفعله هو اختيار أيقونة الاختيار التي ستظهر آخر أن هناك أكثر من مجرد صورة.
لون الخلفية الافتراضي
بعد ذلك ، سنختار لون خلفية شفاف تمامًا.
- الخلفية: rgba (255,255,255,0،XNUMX،XNUMX)
لون الخلفية عند التمرير
وسنقوم بتغيير هذا اللون عند المرور فوق.
- لون الخلفية: rgba (255,255,255,0.88،XNUMX،XNUMX،XNUMX)
إعدادات الرمز الافتراضية
نريد أيقونة مرئية من شأنها أن تساعد آخر لفهم أنه يمكنهم التحليق فوقها. قم بتغيير إعدادات الرمز للحصول على رمز مثل هذا.
- لون الأيقونة: #ffffff
- لون خلفية الصورة / الأيقونة: # 000000
- وضع الصورة / الرمز: اليسار
- عرض الصورة / الرمز: 50 بكسل
- مستطيل مدور للصورة / الأيقونة: 100 بكسل
إعدادات رمز التمرير
ومع ذلك ، لا نريد ظهور الرمز عند التمرير. لهذا السبب سنستخدم لونًا شفافًا تمامًا بدلاً من ذلك.
- لون الأيقونة: rgba (255,255,255,0)
- لون خلفية الصورة / الأيقونة: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)
الإعدادات الافتراضية لنص العنوان
بعد ذلك ، انتقل إلى إعدادات نص العنوان وقم بإجراء بعض التغييرات.
- عنوان الخط: Cinzel
- نص خفيف خفيف: نص غامق
- نمط نسخ العنوان: Tt
- لون نص العنوان: # 000000
- حجم نص العنوان: 0 بكسل
تحوم إعدادات العنوان
تغيير حجم النص عند التمرير.
- حجم نص العنوان: 30 بكسل
افتراضيات نص العرض التقديمي
قم أيضًا بتغيير إعدادات دعاية مغالى فيها.
- نص الخط: Open Sans
- لون النص الأساسي: # 000000
- حجم النص الأساسي: 0 بكسل
إعدادات تحوم النص الأساسي
ومرة أخرى ، قم بتغيير حجم النص الأساسي عند التمرير.
- حجم النص الأساسي: 14 بكسل
التباعد الافتراضي
أخيرًا ، سنحتاج إلى إنشاء تداخل بين وحدة الملخص ووحدة الصورة باستخدام هامش علوي سلبي.
- الهامش العلوي: -3,7 فولكس فاجن (سطح المكتب) ، -9 فولكس فاجن (كمبيوتر لوحي وهاتف)
- الهامش السفلي: 1,5 vw (tablet) ، 2 vw (phone)
التباعد عند التمرير
قم بتغيير قيم الهامش عند التمرير.
- الهامش (الأعلى): -11,38 vw
- الهامش الداخلي: (أعلى وأسفل: 20 بكسل) ، (يمين: 50 بكسل)
استنساخ العمود 1 مرتين
لقد انتهينا من إنشاء أول تأثير حيوي لنا. لتوفير الوقت ، يمكننا فقط استنساخ العمود 1 مرتين من معلمات الصف. احذف العمودين الآخرين أولاً ، ثم انقر نقرًا مزدوجًا لاستنساخ العمود 1
تغيير صورة ومحتوى وحدة الملخص في الأعمدة المستنسخة
لا تنس تغيير الصورة في وحدة الصورة والوصف في وحدة الملخص للإنهاء!
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على كيفية ظهورها على أحجام الشاشات المختلفة.
حاسوب مكتب
الجوال
تحميل DIVI Now !!!
وفي الختام
في هذه المقالة ، أوضحنا لك كيفية إنشاء تأثير تحوم على صور أعضاء الفريق باستخدام خيارات Divi المدمجة فقط. ذكرنا مدى أهمية إنشاء صفحات "حول" جيدة ، لأنها واحدة من أكثر صفحات الويب زيارة.
لن يؤدي استخدام تأثيرات التمرير لصور أعضاء الفريق إلى نقل صفحتك "حول" إلى المستوى التالي فحسب، بل سيؤدي أيضًا إلى إنشاء تفاعل مع أعضاء الفريق آخر. إذا كان لديك أي مخاوف أو اقتراحات، دعونا تجدنا في قسم التعليقات لمناقشته.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...