Divi: كيفية موازنة الأزرار الأساسية والثانوية لوحدة Fullwidth Header

هل ترغب في تخصيص وحدة Divi's Fullwidth Header من خلال موازنة الأزرار الأساسية والثانوية؟

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

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

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

مبادئ تصميم الزر الأساسي والثانوي

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

للقيام بذلك ، يجب أن تبرز الأزرار الأساسية بصريًا ويجب ألا تبرز الأزرار الثانوية كثيرًا. هذا يعني أن الأزرار الرئيسية يجب أن تكون أكثر تميزًا وأن يكون لها وزن بصري أكبر لجذب المزيد من الانتباه.

الآن بعد أن فهمنا كيفية عمل الأزرار الأساسية والثانوية ، دعنا ننتقل إلى البرنامج التعليمي!

مسح

إليك نظرة على الرؤوس الثلاثة كاملة العرض التي سنصممها اليوم.

لنبدأ بإنشاء صفحة جديدة باستخدام Divi Builder

من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.

أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder

ثم انقر فوق ابدأ البناء (البناء من الصفر)

بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.

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

تصميم المثال الأول

الآن بعد أن تم إعداد صفحتنا ، فلنبدأ برأس العرض الكامل لصفحة مقصودة لتجربة المستخدم.

تكوين صفحتنا

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

تحميل حزمة التخطيط

لتحميل حزمة تخطيط UX على صفحتك:

1. في علامة التبويب "التنسيقات التي تم إنشاؤها مسبقًا"، استخدم وظيفة البحث للعثور على حزمة تخطيط UX.
2. بمجرد العثور عليه ، انقر فوقه. سيؤدي ذلك إلى إظهار تفاصيل التخطيط والصفحات المتاحة.
3. انقر الهبوطوانقر "استخدم هذا التخطيط".

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

احذف القسم الأول

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

إضافة قسم العرض الكامل

قبل أن نتمكن من إضافة رأس fullwidth ، نحتاج إلى إضافة قسم fullwidth.

انقر فوق السهم "+" لعرض أقسام Divi ثم الضغط على "عرض كامل". سيؤدي هذا تلقائيًا إلى إظهار مكتبة Divi Fullwidth Module.

أضف رأس عرض كامل

في مكتبة وحدة Divi Fullwidth ، انقر فوق " رأس عرض كامل".

إضافة محتوى

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

أضف محتوى نصيًا

تحت علامة التبويب "النص"، أضف المحتوى التالي:

1. العنوان: تحسين معرفتك بتصميم UX
2. العنوان الفرعي: دورة تصميم تجربة المستخدم
3. الزر رقم 1: نظرة عامة على الدورة التدريبية
4. الزر رقم 2: معرفة المزيد
5. نص: الافتراضي

إضافة صور

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

1. في علامة التبويب صور منشأة بالذكاء الاصطناعي، أضف صورة الشعار (النجوم) وصورة العنوان (صورة الشخص الذي يحمل الهاتف).

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

في علامة التبويب خلفيّة، قم بتكوين هذه المعلمة:

1. لون الخلفية: # 131517

تخصيص رأس عرض كامل

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

رمز التمرير لأسفل

دعنا نضيف أيقونة التمرير لأسفل ، السهم لأسفل.

1. إظهار زر التمرير لأسفل: نعم.
2. حدد رمز السهم لأسفل.
3. لون رمز التمرير لأسفل: # 000

صورة

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

في علامة التبويب صورة، قم بتكوين الإعدادات التالية:

1. زوايا مستديرة للصورة : انقر على زر ربط السلسلة لإلغاء ربط الزوايا ، ثم اكتب 1000 بكسل في مربعي الإدخال السفلي الأيمن والأيسر. سيؤدي هذا إلى تقريب الزوايا اليمنى السفلية واليسرى من صورنا.

نص العنوان

هنا ، دعنا نخصص نص العنوان لهذه الوحدة. في علامة التبويب نص العنوان، قم بتكوين هذه الإعدادات:

• العنوان:
  • الخط: PT Sans
  • وزن الخط: عريض
  • حجم النص: 5 ريم
  • ارتفاع الخط: 1,2 م

نص النص

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

1. خط الجسم: Mukta
2. حجم النص الأساسي: 18 بكسل

نص الترجمة

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

• العنوان الفرعي:
  • الخط: موكتا
  • وزن الخط: عريض
  • النمط: أحرف كبيرة
  • لون النص: # 13d678
  • تباعد الأحرف: 3 بكسل

زر واحد

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

• استخدام نمط مخصص للزر الأول: نعم
• الزر الأول:
  • لون النص: #ffffff
  • لون الخلفية: # 13d678
  • عرض الحدود: 0 بكسل
  • نصف قطر الحدود: 100 بكسل
  • الخط: موكتا
  • وزن الخط: عريض
• إظهار رمز الزر الأول: نعم
• الرمز: السهم الأيمن
• فقط إظهار الأيقونة عند التحويم للزر الأول: لا

الزر الثاني

الآن ، دعنا نخصص الثاني: الزر الثانوي. في علامة التبويب الزر الثاني، قم بتكوين هذه الإعدادات:

• استخدام نمط مخصص للزر: نعم
  • الزر الثاني
  • لون النص: #ffffff
  • لون الخلفية: # 303030
  • عرض الحدود: 0 بكسل
  • نصف قطر الحدود: 100 بكسل
  • الخط: موكتا
  • وزن الخط: عريض
• إظهار رمز الزر الثاني: نعم
• رمز الزر الثاني: السهم الأيمن
• فقط إظهار الرمز على زر التحويم الثاني: نعم

إضافة روابط الزر

لا تنس إضافة روابط إلى الأزرار الخاصة بك! في علامة التبويب الرابط، قم بتكوين الإعدادات التالية:

1. الزر رقم 1 رابط URL: الصق عنوان URL للزر 1 هنا.
2. الزر رقم 1 رابط URL: الصق عنوان URL للزر 2 هنا.

احفظ عملك

الآن بعد أن أصبح لدينا رأس عرض كامل مصمم بالكامل ، تأكد من حفظ التصميم الخاص بك!

• انقر فوق السهم الأخضر في أسفل يمين نافذة الوحدة النمطية.
• التوفير
• قم بإنهاء برنامج VisualBuilder.

اقرأ أيضا: Divi: كيفية إنشاء قسم Fluid Hero

استمتع بالتجربة

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

دعنا نلقي نظرة على مثالين آخرين للرؤوس كاملة العرض التي لها زر أساسي بارز.

رأس بعرض كامل من حزمة "مركز التقاعد"

أنماط الزر

دعنا نلقي نظرة على أنماط الأزرار الأساسية والثانوية الفريدة.

زر واحد

في علامة التبويب Button One ، قم بتكوين الإعدادات التالية:

• استخدام الأنماط المخصصة للزر الأول: نعم
• الزر الأول:
  • حجم النص: 14 بكسل
  • لون النص: #ffffff
  • لون الخلفية: # 0a0a0a
  • عرض الحدود: 0 بكسل
  • نصف قطر الحدود: 10 بكسل
  • تباعد الأحرف: 3 بكسل
  • وزن الخط: عريض
  • نمط الخط: TT
• إظهار الرمز فقط عند التمرير لـ Buttpn One: نعم
• مساحة الزر الأول: 15 بكسل (أعلى وأسفل) ، 25 بكسل (يسار ويمين)

الزر الثاني

في علامة التبويب الزر الثاني، قم بتكوين الإعدادات التالية:

• استخدام نمط مخصص للزر: نعم
  • الزر الثاني:
  • حجم النص: 14 بكسل
  • لون النص: #ffffff
  • لون الخلفية: # 0a0a0a
  • عرض الحدود: 0 بكسل
  • نصف قطر الحدود: 10 بكسل
  • وزن الخط: عريض
  • نمط الخط: TT
• حشوة الزر الثاني: 10 بكسل (أسفل) ، 10 بكسل (يسار ويمين)

وها أنت ذا! زران فريدان ، أحدهما بارز والآخر يشغل المقعد الثاني.

رأس بعرض كامل لحزمة "التخطيط المالي"

أنماط الزر

دعنا نلقي نظرة على أنماط الأزرار الأساسية والثانوية الفريدة.

زر واحد

في علامة التبويب زر واحد، قم بتكوين الإعدادات التالية:

• استخدام نمط مخصص للزر الأول: نعم
• الزر الأول:
  • حجم النص: 18 بكسل
  • لون النص: #ffffff
  • لون الخلفية: # 1b4ffe
  • الحشو: 15 بكسل () أعلى وأسفل) ؛ 25 بكسل (يسار ويمين)

الزر الثاني

في علامة التبويب الزر الثاني، قم بتكوين الإعدادات التالية:

• استخدام نمط مخصص للزر الثاني: نعم
• الزر الثاني:
  • لون النص: # 1b4ffe
  • لون الخلفية: واضح
  • لون الأيقونة: # 1b4ffe

تحميل DIVI الآن !!!

الخاتمة

تجعل وحدة Fullwidth Header في Divi من السهل إنشاء أقسام Hero مذهلة على موقع الويب الخاص بك. 

سيؤدي الاستخدام الاستراتيجي للأزرار الأساسية والثانوية إلى تحسين تجربة المستخدم ومساعدة زوار الموقع على اتخاذ الإجراءات التي يريدون اتخاذها. 

خيارات التخصيص لا حصر لها مع رأس العرض الكامل ، لذلك استمتع بالتجربة!

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

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...