كيفية إنشاء السير الذاتية الجميلة للهاتف المحمول مع Divi (تنزيل مجاني!)

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

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

دعنا نذهب اليها!

معاينة

قبل أن نتعمق في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على المثالين اللذين سنقوم بإعادة إنشائهما من البداية.

مثال 1

مثال 2

ابدأ بإعادة إنشاء المثال رقم 1

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

لون الخلفية

لنبدأ بالمثال الأول! أنشئ صفحة جديدة أو افتح صفحة موجودة وأضف قسمًا عاديًا إليها. افتح إعدادات القسم وأضف لون خلفية بيضاء.

• لون الخلفية: #ffffff

تباعد

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

• الحشوة العلوية: 50 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 0 بكسل (الهاتف)
• الحشوة السفلية: 50 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 0 بكسل (الهاتف)
• الحشو الأيسر: 36vw (سطح المكتب) ، 23vw (كمبيوتر لوحي) ، 0vw (هاتف)
• الحشو الأيمن: 36vw (سطح المكتب) ، 23vw (كمبيوتر لوحي) ، 0vw (هاتف)

أضف الصف رقم 1

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

لون الخلفية

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وأضف لونًا للخلفية.

• لون الخلفية: # 333333

تحجيم

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

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

مربع الظل

نقوم أيضًا بإضافة ظل مربع لإنشاء بعض العمق على أحجام الشاشة الأكبر.

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.3)

إضافة وحدة صورة

تحميل الصور

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

انتقام

بمجرد تحميل الصورة ، انتقل إلى علامة تبويب التصميم وقم بتغيير محاذاة الصورة.

• محاذاة الصورة: المركز

تحجيم

نقوم بتقليص حجم الصورة عن طريق تعديل العرض في إعدادات التحجيم التالية.

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

الحدود

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

• عرض الحدود: 8 بكسل
• لون الحدود: #ffffff

مربع الظل

أخيرًا وليس آخرًا ، أضف ظلًا مربعًا لإنشاء تصميم ذي أبعاد.

• مربع الظل الرأسي: 40 بكسل
• مربع قوة طمس الظل: 100 بكسل
• لون الظل: # 000000

أضف وحدة نصية # 1

أضف محتوى H3

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

إعدادات نص H3

تابع بالانتقال إلى علامة تبويب التصميم وتغيير إعدادات نص H3.

• خط العنوان 3: فتح Sans
• وزن خط العنوان 3: شبه عريض
• العنوان 3 محاذاة النص: الوسط
• لون نص العنوان 3: #ffffff
• العنوان 3 ارتفاع الخط: 0.1em

تباعد

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

• الهامش العلوي: 30 بكسل

أضف وحدة نصية # 2

إضافة محتوى

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

إعدادات النص

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص.

• خط النص: Open Sans
• وزن خط النص: عادي
• لون النص: # 919191
• اتجاه النص: الوسط

أضف وحدة نصية # 3

إضافة محتوى

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

إعدادات النص

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

• خط النص: Open Sans
• لون النص: # b7b7b7
• ارتفاع خط النص: 1.6em
• اتجاه النص: الوسط

تحجيم

قم بتعديل عرض الوحدة أيضًا.

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

تباعد

وأضف بعض الهامش العلوي والسفلي لإنشاء مساحة إضافية.

• الهامش العلوي: 30 بكسل
• الهامش السفلي: 30 بكسل

إضافة وحدة زر

أضف نسخة

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

انتقام

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

• محاذاة الزر: الوسط

إعدادات الزر

تابع عن طريق تغيير مظهر الزر في إعدادات الزر.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 13 بكسل
• لون نص الزر: #ffffff
• اللون 1: # ad32ff
• اللون 2: # 32baff
• اتجاه التدرج: 96 درجة
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 30 بكسل
• خط الزر: فتح Sans
• وزن الخط: عريض للغاية
• نمط الخط: أحرف كبيرة

تباعد

أضف بعض الهامش المخصص والحشو بعد ذلك.

• الهامش السفلي: 50 بكسل
• الحشوة العلوية: 15 بكسل
• الحشو السفلي: 15 بكسل
• الحشو الأيسر: 50 بكسل
• الحشوة اليمنى: 50 بكسل

مربع الظل

وأكمل تصميم الزر بإضافة ظل مربع.

• مربع الظل الرأسي: 20 بكسل
• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.69)

أضف الصف رقم 2

هيكل العمود

إلى الصف التالي! استخدم هيكل العمود التالي:

خلفية متدرجة

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وأضف خلفية متدرجة:

• اللون 1: # 1e1e1e
• اللون 2: # 3f3f3f
• نوع التدرج: شعاعي
• اتجاه شعاعي: أعلى اليسار
• موقف البداية: 26٪
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

احفظ الصورة التالية على جهاز الكمبيوتر الخاص بك واستخدمها كصورة خلفية للصف:

جنبًا إلى جنب مع إعدادات الخلفية التالية:

• حجم صورة الخلفية: الحجم الفعلي
• موقف صورة الخلفية: المركز
• تكرار صورة الخلفية: لا يوجد تكرار
• مزيج صورة الخلفية: ضوء شديد

تحجيم

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

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

أضف بعض المساحة المتروكة المخصصة بعد ذلك.

• الحشوة العلوية: 84 بكسل
• الحشو السفلي: 84 بكسل
• الحشو الأيسر: 4vw (سطح المكتب) ، 7vw (كمبيوتر لوحي) ، 14vw (هاتف)
• الحشو الأيمن: 4vw (سطح المكتب) ، 7vw (كمبيوتر لوحي) ، 14vw (هاتف)

مربع الظل

جنبا إلى جنب مع مربع الظل.

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.3)

عرض

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

display: flex;

أضف وحدة متابعة الوسائط الاجتماعية إلى العمود 1

انتقام

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

• محاذاة العنصر: الوسط

أضف شبكة اجتماعية جديدة

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

وصلة

أضف ارتباطًا إلى ملف تعريف Dribbble الخاص بك.

خلفية متدرجة

بعد ذلك ، قم بتغيير خلفية التدرج باستخدام الإعدادات التالية:

• اللون 1: # ea0061
• اللون 2: # ea4c8d
• اتجاه التدرج: 136 درجة

تباعد

وقم بزيادة حجم الوحدة بإضافة بعض الحشو المخصص.

• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل
• الحشو الأيسر: 20 بكسل
• الحشوة اليمنى: 20 بكسل

الحدود

نقوم أيضًا بتحويل الوحدة النمطية إلى دائرة بإضافة "20vw" إلى كل زاوية من الزوايا في إعدادات الحدود.

مربع الظل

أخيرًا وليس آخرًا ، أضف ظل مربع.

• مربع الظل الرأسي: 20 بكسل
• مربع قوة طمس الظل: 80 بكسل
• لون الظل: # 000000

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

إضافة محتوى

أضف وحدة نصية إلى العمود الأول التالي.

إعدادات النص

قم بتغيير إعدادات النص.

• خط النص: Open Sans
• وزن خط النص: غامق للغاية
• لون النص: #ffffff
• اتجاه النص: الوسط

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

إضافة محتوى

أضف واحدًا آخر أسفل السابق.

إعدادات النص

قم بتغيير إعدادات النص لهذه الوحدة أيضًا.

• خط النص: Open Sans
• لون النص: # 898989
• حجم النص: 11 بكسل
• اتجاه النص: الوسط

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

بمجرد الانتهاء من تخصيص جميع الوحدات في العمود 1 ، يمكنك المضي قدمًا واستنساخها مرتين. ضع التكرارات في العمودين المتبقيين من الصف.

تغيير الشبكات الاجتماعية

بالطبع ، ستحتاج إلى تغيير الشبكات الاجتماعية.

تغيير روابط الشبكة الاجتماعية

جنبا إلى جنب مع الروابط.

تغيير الخلفيات المتدرجة للشبكة الاجتماعية

وخلفيات الشبكة المتدرجة.

• اللون 1: # 0043ff
• اللون 2: # 00aced

• اللون 1: # ea2c59
• اللون 2: # fed270

ابدأ بإعادة إنشاء المثال رقم 2

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

لون الخلفية

إلى المثال التالي! أضف قسمًا جديدًا بلون الخلفية الأبيض.

• لون الخلفية: #ffffff

تباعد

أضف بعض المساحة المتروكة المخصصة بعد ذلك.

• الحشوة العلوية: 50 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 0 بكسل (الهاتف)
• الحشوة السفلية: 50 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 0 بكسل (الهاتف)
• الحشو الأيسر: 36vw (سطح المكتب) ، 23vw (كمبيوتر لوحي) ، 4vw (هاتف)
• الحشو الأيمن: 36vw (سطح المكتب) ، 23vw (كمبيوتر لوحي) ، 4vw (هاتف)

أضف الصف رقم 1

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

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

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

إضافة وحدة صورة

تحميل الصور

حان الوقت لبدء إضافة الوحدات! الوحدة الأولى التي نحتاجها هي وحدة صورة بنسبة 1: 1.

انتقام

قم بتغيير محاذاة الصورة.

• محاذاة الصورة: المركز

تحجيم

تعديل العرض أيضا.

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

الحدود

وأضف "20 بكسل" لكل زاوية في إعدادات الحدود.

مربع الظل

أكمل تصميم الصورة بإضافة ظل مربع دقيق.

• مربع قوة طمس الظل: 51 بكسل
• لون الظل: rgba (0،0،0،0.37)

أضف وحدة نصية # 1

أضف محتوى H3

الوحدة التالية التي نحتاجها هي وحدة نصية. أضف بعض محتوى H3 المفضل.

إعدادات نص H3

قم بتغيير إعدادات نص H3 في علامة تبويب التصميم.

• خط العنوان 3: فتح Sans
• وزن خط العنوان 3: غامق للغاية
• نمط خط العنوان 3: أحرف كبيرة
• العنوان 3 محاذاة النص: الوسط
• لون نص العنوان 3: # 000000
• العنوان 3 تباعد الأحرف: -1 بكسل
• ارتفاع سطر العنوان 3: 0.9em

تباعد

أضف بعض الهامش العلوي بعد ذلك.

• الهامش العلوي: 30 بكسل

أضف وحدة نصية # 2

إضافة محتوى

أضف وحدة نصية أخرى.

إعدادات النص

قم بتعديل إعدادات النص.

• خط النص: Open Sans
• لون النص: # 919191
• اتجاه النص: الوسط

أضف الصف رقم 2

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

لون الخلفية

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتغيير لون خلفية الصف.

• لون الخلفية: #ffffff

لون خلفية العمود 2

أضف لون الخلفية إلى العمود الثاني أيضًا.

• لون خلفية العمود 2: #efefef

انتقام

تأكد من أنك تستخدم محاذاة الصف الأيسر.

• محاذاة الصف: اليسار

تحجيم

انتقل إلى إعدادات التحجيم بعد ذلك وقم بإجراء بعض التغييرات.

• استخدام العرض المخصص: نعم
• وحدة: ٪
• العرض المخصص: 67٪
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشوة العلوية للعمود 1: 20 بكسل
• الحشوة السفلية للعمود 1: 20 بكسل
• الحشوة العلوية للعمود 2: 20 بكسل
• الحشوة السفلية للعمود 2: 20 بكسل

الحدود

أضف "14 بكسل" إلى الزوايا العلوية اليسرى واليمنى والسفلية اليسرى.

مربع الظل

وأكمل تصميم الصف بإضافة ظل مربع دقيق.

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.17)

أضف وحدة متابعة الوسائط الاجتماعية إلى العمود 1

انتقام

في العمود الأول ، سنحتاج إلى وحدة متابعة الوسائط الاجتماعية. قم بتغيير محاذاة العنصر.

• محاذاة العنصر: الوسط

أضف شبكة اجتماعية جديدة

ثم أضف شبكة اجتماعية جديدة. نحن نستخدم Dribbble.

وصلة

أضف الرابط إلى محفظة Dribbble الخاصة بك.

خلفية متدرجة

وتغيير الخلفية المتدرجة للشبكة الاجتماعية.

• اللون 1: # ea0061
• اللون 2: # ea4c8d
• اتجاه التدرج: 136 درجة

تباعد

أضف بعض قيم الحشو المخصصة بعد ذلك.

• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل
• الحشو الأيسر: 20 بكسل
• الحشوة اليمنى: 20 بكسل

الحدود

وأضف "10 بكسل" إلى كل ركن من أركان الشبكة الاجتماعية.

مربع الظل

أكمل تصميم الوحدة بإضافة ظل مربع دقيق.

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.3)

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

إضافة محتوى

أضف وحدة نصية إلى العمود الثاني.

إعدادات النص

قم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: Open Sans
• وزن خط النص: غامق للغاية
• لون النص: # 000000
• اتجاه النص: الوسط

تباعد

قم بإنشاء مساحة عن طريق إضافة بعض الهامش العلوي بعد ذلك.

• الهامش العلوي: 10 بكسل

أضف وحدة النص رقم 2 إلى العمود 2

إضافة محتوى

الوحدة الثانية التي نحتاجها في العمود 2 هي وحدة نصية أخرى.

إعدادات النص

قم بتغيير إعدادات النص.

• خط النص: Open Sans
• لون النص: # 898989
• حجم النص: 11 بكسل
• اتجاه النص: الوسط

صف استنساخ # 2

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

وحدات المبادلة

قم بتبديل الوحدات بعد ذلك.

أضف لون الخلفية للعمود 1

ثم أضف لون خلفية العمود 1 إلى الصف المكرر.

• لون خلفية العمود 1: #dbdbdb

قم بإزالة لون خلفية العمود 2

قم بإزالة لون خلفية العمود 2 بعد ذلك.

تغيير محاذاة الصف

قم بتغيير محاذاة الصف أيضًا.

• محاذاة الصف: صحيح

تغيير حجم الصفوف

جنبا إلى جنب مع العرض المخصص في إعدادات التحجيم.

• العرض المخصص: 66.99٪

تغيير حد الصف

نحن نتأكد أيضًا من تعيين "14 بكسل" في الزوايا اليمنى العلوية والسفلية اليمنى فقط.

تغيير شبكة المتابعة الاجتماعية

تواصل عن طريق تغيير الشبكة الاجتماعية.

تغيير خلفية متدرجة لشبكة المتابعة الاجتماعية

جنبا إلى جنب مع خلفية متدرجة.

• اللون 1: # 0043ff
• اللون 2: # 00aced

استنساخ كلا صفوف المتابعة الاجتماعية

بمجرد الانتهاء من كل من صفوف المتابعة الاجتماعية ، يمكنك استنساخ كل منهما.

تغيير حدود تكرار # 1

قم بتغيير الزوايا الدائرية للنسخة الأولى.

تغيير شبكة المتابعة الاجتماعية من تكرار # 1

جنبا إلى جنب مع الشبكة الاجتماعية.

تغيير خلفية التدرج لنسخ # 1

وخلفية التدرج.

• اللون 1: # ea2c59
• اللون 2: # fed270

تغيير حدود تكرار # 2

استمر بتغيير الزوايا الدائرية للنسخة الثانية أيضًا.

تغيير شبكة المتابعة الاجتماعية من Duplicate # 2

جنبا إلى جنب مع الشبكة الاجتماعية.

تغيير خلفية التدرج لنسخ # 2

ومرة أخرى ، الخلفية المتدرجة المخصصة للشبكة الاجتماعية.

• اللون 1: # 00306b
• اللون 2: # 007bb6

قم بتنزيل The Mobile Social Follow Bios مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

معاينة

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

مثال 1

مثال 2

افكار اخيرة

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