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

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

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

في مقال اليوم ، سنوضح لك كيفية إعادة إنشاء أقسام الأبطال باستخدام ديفي رأس عرض كامل. سنبدأ تصميمنا باستخدام 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 ، انقر فوق " رأس عرض كامل".

إضافة محتوى

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

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

ضمن علامة التبويب "نص"، قم بإضافة محتويات suivant:

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 Fullwidth Header لا حصر لها. الاستفادة من الزر الأساسي والزر الثانوي يمكن أن يساعد في توجيهك آخر إلى الصفحة التي تريد منهم أن يشاهدوها أو أن يتخذوا الإجراء (مثل إرسال طلب) الذي تريد منهم أن يتخذوه.

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

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

أنماط الزر

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

زر واحد

في علامة التبويب 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 الآن !!!

وفي الختام

تعمل وحدة Divi's Fullwidth Header على تسهيل إنشاء أقسام Hero مذهلة على جهازك موقع انترنت. 

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

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

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

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

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

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

...