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

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

سيسمح لك ذلك بتوفير مساحة على الصفحة التي تعمل عليها وإنشاء تفاعل تحوم بينك وبين آخر.

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

دعونا نذهب!

مسح

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

مكتب

الجوال

لنبدأ إعادة

إضافة قسم جديد

مباعدة

أنشئ صفحة جديدة أو افتح صفحة موجودة وأضف قسمًا جديدًا باستخدام قيم التعبئة المخصصة التالية:

• أفضل مساحة: 100px
• الحشو السفلي: 100px

أضف صف 1

هيكل العمود

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

أضف وحدة نصية

أضف محتوى H2

إضافة عنوان "وحدة النص" إلى العمود مع حجم H2 في الاختيار.

إعدادات النص H2

ثم انتقل إلى إعدادات نص H2 وقم بإجراء بعض التغييرات على مظهر النسخة.

• Heading 2 Font: Cinzel
• العنوان 2 نمط الخط: حروف صغيرة
• عنوان محاذاة نص 2: مركز
• العنوان 2 حجم النص: 70px

إضافة وحدة القسمة

رؤية

استمر في إضافة وحدة فصل جديدة أسفل عنوان وحدة النص مباشرةً.

• إظهار الحاجز: نعم

لون الفاصل

انتقل إلى علامة التبويب "تصميم" ، وافتح إعدادات اللون وقم بتغيير لون الحاجز وفقًا لذلك:

• لون الفاصل: # 333333

التحجيم

ثم سنقوم بتقليل حجم الحاجز ونركزه.

• العرض: 26٪
• محاذاة الوحدة: المركز

أضف سطر 2

هيكل العمود

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

التحجيم

بدون إضافة المزيد من الوحدات النمطية ، افتح معلمات الخط وقم بإجراء بعض التغييرات على معلمات التحجيم.

• استخدم عرضًا مخصصًا: نعم
• الوحدة: PX
• العرض المخصص: 2000px
• استخدم عرض مزراب مخصص: نعم
• عرض مزراب: 1
• معادلة ارتفاع العمود: نعم

مباعدة

ثم انتقل إلى إعدادات التباعد وقم بإضافة قيم مخصصة للهامش والحشو.

• الهامش العلوي: 50px
• الهامش السفلي: 50px
• أعلى الحشو: 10px
• الحشو السفلي: 10px
• الحشو الأيسر: 5px
• حق التنجيد: 5px
• العمود 1 و 2 و 3 الحشو على اليسار: 5px
• العمود 1 ، 2 و 3 الحشو على اليمين: 5px

صندوق الظل

نوفر أيضًا لخطنا عمقًا بسيطًا عن طريق إضافة ظل مربع مع المعلمات التالية:

• مربع الظل قوة طمس: شنومكسبكس
• قوة انتشار ظل الصندوق: -14 بكسل
• لون الظل: rgba (0,0,0,0,3،XNUMX،XNUMX،XNUMX،XNUMX)

أضف وحدة صورة إلى العمود 1

قم بتحميل صورة في وحدة صورة

حان الوقت لبدء إضافة الوحدات! لتحقيق تأثير التحويم البيولوجي ، سنحتاج إلى وحدتين في المجموع. وحدة صورة ووحدة دعاية مغالى فيها. ستحتوي وحدة الصورة على صورة عضو الفريق الذي تريد تقديمه.

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

مرشحات

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

• التشبع: 0٪

أضف الوحدة النمطية Blurb إلى عمود 1

إضافة محتوى

استمر بإضافة وحدة Blurb جديدة أسفل وحدة الصورة في العمود 1. أضف اسم عضو الفريق إلى حقل العنوان وأدخل معلومات إضافية حول عضو الفريق في المربع. محتويات.

اختيار رمز

الشيء التالي الذي سنفعله هو اختيار أيقونة الاختيار التي ستظهر آخر أن هناك أكثر من مجرد صورة.

لون الخلفية الافتراضي

بعد ذلك ، سنختار لون خلفية شفاف كامل.

• لون الخلفية: rgba (255,255,255,0)

لون الخلفية على الجسر

وسوف نقوم بتغيير هذا اللون تحوم.

• لون الخلفية: rgba (255,255,255,0.88)

إعدادات الرمز الافتراضية

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

• لون الأيقونة: #ffffff
• رمز الدائرة: نعم
• لون الدائرة: # 000000
• موقع الرمز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 50 بكسل

إعداد رمز التمرير

ومع ذلك ، لا نريد ظهور الرمز عند التمرير. لهذا السبب نستخدم لونًا شفافًا تمامًا بدلاً من ذلك.

• لون الأيقونة: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)
• لون الدائرة: rgba (255,255,255,0)

إعدادات العنوان الافتراضية

ثم انتقل إلى إعدادات نص العنوان وإجراء بعض التغييرات.

• عنوان الشرطة: Cinzel
• عنوان الخط: Bold
• عنوان نمط الخط: حروف صغيرة
• عنوان نص اللون: # 000000
• حجم عنوان النص: 0px

قم بالمرور فوق إعدادات النص الخاصة بالعنوان

تغيير حجم النص عن طريق التمرير.

• حجم عنوان النص: 30px

إعدادات النص الأساسي الافتراضية

أيضا تغيير إعدادات النص الأساسي.

• شرطة الجسد: مفتوحة بلا
• نص ملون للجسم: # 000000
• نص حجم النص: 0px
• ارتفاع الجسم: 1.8em

المعلمة من الجسم على التحليق

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

• نص حجم النص: 14px

التباعد الافتراضي

أخيرًا وليس آخرًا ، سنحتاج إلى إنشاء تداخل بين وحدة Blurb ووحدة الصور باستخدام الهامش العلوي السلبي.

• الهامش العلوي: -3.7vw (سطح المكتب) ، -9vw (الجهاز اللوحي والهاتف)
• الهامش السفلي: 1.5vw (قرص) ، 2vw (هاتف)

تباعد ثابت

تغيير الهامش المخصص وملء القيم في التمرير.

• الهامش العلوي: -11,38vw
• أعلى الحشو: 20px
• الحشو السفلي: 20px
• حق التنجيد: 50px

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

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

قم بتحرير صورة ومحتوى الوحدة النمطية Blurb

لا تنس تغيير الصورة في وحدة الصورة ونسخها في وحدة Blurb لإكمال قسم أعضاء الفريق!

مسح

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على كيفية ظهورها على أحجام الشاشات المختلفة.

مكتب

الجوال

الأفكار النهائية

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

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