كيفية إضافة زرين جنبًا إلى جنب إلى رأس Divi العالمي

يعد وجود عبارات واضحة تحث المستخدم على اتخاذ إجراء على صفحاتك أمرًا ضروريًا لمعظم مواقع الويب. وما هي أفضل طريقة للفت الانتباه إلى بعض أهم عبارات الحث على اتخاذ إجراء لديك من وضعها في رأس الصفحة؟ في البرنامج التعليمي اليوم ، سنوضح لك كيفية إضافة زرين جنبًا إلى جنب إلى رأسك العالمي باستخدام Divi's Theme Builder. أحد الأزرار أساسي ، والآخر ثانوي. ستتمكن من تنزيل ملف JSON الخاص بالرأس العام مجانًا أيضًا!

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل قالب Global Header مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. انتقل إلى Divi Theme Builder وقم بإنشاء رأس عام

انتقل إلى Divi Theme Builder

ابدأ بالانتقال إلى Divi Theme Builder وانقر على "إضافة رأس عام".

بناء رأس عام

تابع بالنقر فوق "إنشاء رأس عام".

2. بناء تصميم الرأس العالمي

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

تباعد

بمجرد دخولك إلى محرر القوالب ، ستلاحظ قسمًا. افتح إعدادات القسم وقم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

فهرس Z.

تأكد من زيادة فهرس z للقسم في إعدادات الرؤية أيضًا. سيؤدي هذا إلى التأكد من ظهور محتوى الرأس العام أعلى كل محتوى الصفحة والمنشور.

• الفهرس Z: 99999

أضف صفًا جديدًا

هيكل العمود

بمجرد الانتهاء من إعدادات القسم ، أضف صفًا جديدًا إلى القسم باستخدام بنية العمود التالية:

تحجيم

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

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

تباعد

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

• الحشو الأيسر: 2vw (سطح المكتب) ، 10vw (الجهاز اللوحي والهاتف)
• الحشو الأيمن: 2vw (سطح المكتب) ، 10vw (الجهاز اللوحي والهاتف)

العنصر الرئيسي

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

display: flex;
align-items: center;

قم بإزالة خاصية شاشة سطح المكتب على الجهاز اللوحي والجوال.

display: block;

العمود 1

الحدود

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

• عرض الحد الأيمن: 1 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• لون الحد الأيمن: # d8d8d8

فهرس Z.

قم بزيادة الفهرس z الخاص بالعمود أيضًا.

• الفهرس Z: 11

العمود 2

العنصر الرئيسي

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

display: grid;
grid-template-columns: 50% 50%;

إضافة وحدة قائمة إلى العمود 1

اختر قائمة

حان الوقت لبدء إضافة الوحدات! أضف وحدة قائمة إلى العمود 1 وحدد قائمة من اختيارك.

تحميل الشعار

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

تخطيط

انتقل إلى علامة تبويب تصميم الوحدة وتأكد من تطبيق إعدادات التخطيط التالية:

• النمط: محاذاة إلى اليسار
• اتجاه القائمة المنسدلة: لأسفل

نص القائمة

عدّل إعدادات نص القائمة بعد ذلك.

• لون الارتباط النشط: # ef6f49
• خط القائمة: مونتسيرات
• وزن خط القائمة: شبه عريض
• نمط خط القائمة: أحرف كبيرة
• لون نص القائمة: # 333333 (افتراضي) ، # ef6f49 (تحوم)
• حجم نص القائمة: 0.7vw (سطح المكتب) ، 1.8vw (الجهاز اللوحي) ، 2.5vw (الهاتف)
• تباعد أحرف القائمة: 1 بكسل

نص القائمة المنسدلة

قم بإجراء بعض التغييرات على إعدادات نص القائمة المنسدلة أيضًا.

• لون خلفية القائمة المنسدلة: #ffffff
• لون خط القائمة المنسدلة: # ef6f49

الأيقونات

بعد ذلك ، قم بتغيير لون رمز قائمة الهامبرغر.

• لون أيقونة قائمة همبرغر: # 000000

تحجيم

أضف أقصى عرض للشعار إلى إعدادات التحجيم أيضًا.

• أقصى عرض للشعار: 9vw (سطح المكتب) ، 12vw (كمبيوتر لوحي) ، 15vw (هاتف)

قائمة شعار CSS

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

margin-right: 10vw;

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

أضف كود CSS المخصص إلى الوحدة النمطية

الوحدة التالية والأخيرة التي نحتاجها في العمود 1 هي Code Module. أضف الأسطر التالية من كود CSS لتخصيص المسافة بين عناصر القائمة:

<style>
.et-menu>li {
padding-left: 1.5vw !important;
padding-right: 1.5vw !important;
}
</style>

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

أضف نسخة

إلى الوحدة التالية! أضف وحدة الزر الأولى وأدخل نسخة من اختيارك.

إضافة رابط

أضف ارتباطًا إلى وحدة الأزرار بعد ذلك.

انتقام

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

• محاذاة الزر: يمين

إعدادات الزر

صمم الزر أيضًا.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 0.8vw (سطح المكتب) ، 1.7vw (جهاز لوحي) ، 2.5vw (هاتف)
• لون نص الزر: # 000000
• لون خلفية الزر: # edeef0 (افتراضي) ، # d6d7d8 (تحوم)
• عرض حد الزر: 0 بكسل

• نصف قطر حدود الزر: 0 بكسل
• تباعد حرف الزر: 2 بكسل
• زر الخط: مونتسيرات
• وزن خط الزر: شبه عريض
• نمط خط الزر: أحرف كبيرة

تباعد

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

• الحشوة العلوية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشوة السفلية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشو الأيسر: 2vw (سطح المكتب) ، 4vw (كمبيوتر لوحي) ، 6vw (هاتف)
• الحشو الأيمن: 2vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 6vw (هاتف)

وحدة زر استنساخ

بمجرد الانتهاء من أول وحدة زر ، قم باستنساخها.

تغيير الارتباط

افتح وحدة الزر المكررة وقم بتغيير عنوان URL.

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

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

• محاذاة الزر: يسار

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

قم بإجراء بعض التغييرات على إعدادات الزر أيضًا.

• لون نص الزر: #ffffff
• لون خلفية الزر: # ef6f49 (افتراضي) ، # e06945 (تحوم)

تحوم مقياس التحويل

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

• اليمين: 110٪
• القاع: 110٪

3. حفظ تغييرات منشئ السمات ونتائج المعاينة

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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