كيفية إنشاء قسم بطل جميل لموقعك الشخصي مع Divi

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

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

النتيجة على سطح المكتب

تبدو النتيجة على سطح المكتب كما يلي:

النتيجة على الهاتف المحمول

وسيشاهد الزوار الذين يزورون الموقع على الجوال النتيجة التالية:

كيفية إنشاء قسم بطل جميل لموقعك الشخصي مع Divi

اشترك في قناتنا على اليوتيوب

إنشاء قسم

ابدأ بإنشاء صفحة جديدة على موقع WordPress الخاص بك ، وتمكين Divi Builder ، والانتقال إلى Visual Builder وإضافة قسم جديد إليه.

خلفية متدرجة

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

• اللون الأول: # c2c6f3
• اللون الثاني: # cea5b9
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 45٪
• موضع النهاية: 45٪

أضف الصف الأول

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

هيكل العمود

بعد ذلك ، اختر هيكل عمود مع عمود واحد.

تحجيم

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

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

وحدة النص

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

إعدادات النص

بمجرد إدخال النص الذي تريد ظهوره في علامة التبويب "المحتوى" ، انتقل إلى علامة التبويب "تصميم" وقم بإجراء الإعدادات التالية على فئة النص الفرعية:

• خط النص: Arizonia
• وزن خط النص: عادي
• حجم النص: 150 (كمبيوتر مكتبي) ، 80 (جهاز لوحي) ، 70 (هاتف)
• لون النص: rgba (255،255،255،0.39)
• اتجاه النص: الوسط

أضف الصف الثاني

بمجرد الانتهاء من الصف الأول ، امض قدمًا وأضف صفًا ثانيًا إلى نفس القسم.

هيكل العمود

مثل الصف السابق ، سيكون لهذا الصف عمود واحد فقط أيضًا.

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

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

تحجيم

بعد ذلك ، افتح فئة التحجيم الفرعية وقم بإجراء التغييرات التالية:

• استخدام العرض المخصص: نعم
• العرض المخصص: 557 بكسل

تباعد

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

مربع الظل

أخيرًا ، قم بتطبيق Box Shadow التالي:

• مربع الظل الوضع الأفقي: 0 بكسل
• مربع الظل الوضع الرأسي: 2 بكسل
• قوة مربع الظل الضبابية: 53 بكسل
• قوة انتشار الظل المربع: 10 بكسل
• لون الظل: rgba (0،0،0،0.3)
• موضع الظل: الظل الخارجي

وحدة النص

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

لون الخلفية

بادئ ذي بدء ، ستحتاج وحدة النص هذه إلى لون خلفية بلون "rgba (0،0،0،0.66)".

إعدادات النص

بعد ذلك ، انتقل إلى علامة التبويب تصميم وقم بإجراء التغييرات التالية على فئة النص الفرعية:

• خط النص: Andika
• وزن خط النص: غامق
• نمط خط النص: أحرف كبيرة
• حجم النص: 78 بكسل (سطح المكتب) ، 70 بكسل (جهاز لوحي) ، 50 بكسل (هاتف)
• لون النص: # c2c6f3
• ارتفاع خط النص: 1em
• اتجاه النص: الوسط

الحدود

بعد ذلك ، افتح الفئة الفرعية Border واستخدم الحد التالي:

• استخدام الحدود: نعم
• لون الحدود: # c2c6f3
• عرض الحدود: 8 بكسل
• نمط الحدود: صلب

تباعد

المضي قدمًا ، أضف الهامش والحشو التاليين:

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

مربع الظل

أخيرًا ، استخدم Box Shadow to the Text Module التالي:

• مربع الظل الوضع الأفقي: 0 بكسل
• مربع الظل الوضع الرأسي: 0 بكسل
• مربع قوة طمس الظل: 0 بكسل
• قوة انتشار الظل المربع: 50 بكسل
• لون الظل: rgba (206،165،185،0.41)
• موضع ظل المربع: الظل الخارجي

أضف الصف الثالث

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

هيكل العمود

حدد عمودين لهذا الصف.

تحجيم

بعد ذلك ، قم بتمكين خيار "استخدام العرض المخصص" وتطبيق عرض "663 بكسل".

تباعد

أخيرًا ، أضف الهامش العلوي والسفلي "50 بكسل".

أول وحدة نصية

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

إعدادات النص

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

استنساخ وحدة النص ووضعها في العمود الثاني

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

أضف الصف الرابع

هناك صف واحد متبقي لإضافته إلى القسم قبل اكتمال التصميم.

هيكل العمود

يحتوي هذا الصف الجديد على عمودين أيضًا.

تحجيم

افتح إعدادات الصف وقم بإجراء الإعدادات التالية على فئة التحجيم الفرعية:

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

تباعد

بعد ذلك ، أضف مساحة فارغة مقدارها 20 بكسل.

وحدة الصورة الأولى

انطلق وقم بإضافة أول وحدة صورة إلى العمود الأول من هذا الصف الأخير.

مربع الظل

وأضف إليها Box Shadow التالي:

• مربع الظل الوضع الأفقي: -6 بكسل
• مربع الظل الوضع الرأسي: 2 بكسل
• قوة مربع الظل الضبابية: 53 بكسل
• قوة انتشار الظل المربع: 10 بكسل
• لون الظل: rgba (0،0،0،0.3)
• موضع ظل المربع: الظل الخارجي

استنساخ وحدة الصورة ووضعها في العمود الثاني

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

نتيجة

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

على سطح المكتب

على الجوال

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!