كيفية توفير مساحة في رأسك باستخدام تبديل الرموز مع Divi

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

1. بناء هيكل الرأس

إنشاء قالب رأس عمومي جديد

ابدأ بالانتقال إلى Divi Theme Builder وابدأ في إنشاء رأس عالمي أو مخصص جديد.

أضف القسم رقم 1

خلفية متدرجة

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

• اللون 1: #ffffff
• اللون 2: #eaeaea
• نوع التدرج: خطي
• اتجاه التدرج: 90 درجة
• موقف البداية: 50٪
• موقف النهاية: 50٪

تباعد

انتقل إلى علامة تبويب تصميم القسم وقم بإزالة جميع الحشوة الافتراضية العلوية والسفلية.

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

مربع الظل

أضف ظل الصندوق أيضًا.

• لون الظل: rgba (0،0،0،0.06)

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

هيكل العمود

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

تحجيم

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

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

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

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

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

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

سطح المكتب:

display: flex;
place-items: center;

الجهاز اللوحي والهاتف:

display: block;

إعدادات العمود 1

تباعد

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

• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

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

نحن بصدد تغيير حجم العمود على سطح المكتب وإعادته إلى "100٪" على الجهاز اللوحي والهاتف عن طريق تطبيق بعض CSS المخصص على العنصر الرئيسي للعمود.

سطح المكتب:

width: 88% !important

الجهاز اللوحي والهاتف:

width: 100% !important;

إعدادات العمود 2

لون الخلفية

بعد ذلك ، سنفتح إعدادات العمود 2 ونغير لون الخلفية إلى الأبيض.

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

تباعد

سنضيف بعض قيم الحشو المتجاوبة إلى إعدادات التباعد في هذا العمود أيضًا.

• الحشوة العلوية:
  • سطح المكتب: 50 بكسل
  • الجهاز اللوحي والهاتف: 20 بكسل
• حشوة سفلية
  • سطح المكتب: 50 بكسل
  • الجهاز اللوحي والهاتف: 20 بكسل
• الحشوة اليسرى: 1٪
• الحشوة اليمنى: 1٪

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

سنقوم بتعديل حجم العمود الثاني على سطح المكتب أيضًا. نحن نعيد هذا إلى "100٪" في أحجام الشاشات الأصغر.

سطح المكتب:

display: flex;
place-items: center;
width: 12% !important;

الجهاز اللوحي والهاتف:

width: 100% !important;

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

اختر قائمة

حان الوقت لإضافة الوحدات ، بدءًا من "وحدة القائمة" في العمود 1. حدد قائمة من اختيارك.

تحميل الشعار

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

إزالة لون الخلفية

ثم قم بإزالة لون الخلفية الافتراضي.

إعدادات نص القائمة

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

• خط القائمة: عرض Playfair
• خط نص القائمة: عرض Playfair
• لون نص القائمة: # 000000
• حجم نص القائمة: 19 بكسل
• ارتفاع خط القائمة: 1.4em
• محاذاة النص: صحيح

إعدادات القائمة المنسدلة

بعد ذلك ، قم بتغيير لون خط القائمة المنسدلة.

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

إعدادات الرموز

قم بتغيير ألوان الأيقونات في إعدادات الرموز أيضًا.

• لون رمز عربة التسوق: # 000000
• لون ايقونة البحث: # 000000
• لون أيقونة قائمة همبرغر: # 000000

تحجيم

وأكمل إعدادات الوحدة عن طريق تغيير إعدادات التحجيم كما يلي:

• عرض الشعار الأقصى: 200 بكسل
• العرض: 100٪
• محاذاة الوحدة: المركز

قم بإضافة الوحدة النمطية للدعاية والإعلان رقم 1 إلى العمود 2

اترك مربع المحتوى فارغًا

إلى العمود الثاني. لإنشاء رموز التبديل ، سنستخدم Blurb Modules بدون العنوان والمحتوى. سنبدأ بإنشاء رمز التبديل الأول ثم إعادة استخدام الوحدة النمطية لإضافة رمزي التبديل الآخرين. بمجرد إضافة Blurb Module ، تأكد من أن العنوان ومربع المحتوى فارغين.

حدد أيقونة

بعد ذلك ، حدد رمزًا من اختيارك.

إعدادات الرمز

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

• لون الأيقونة
  • الافتراضي: #dbdbdb
  • تحوم: # 000000
• وضع الرمز: الأعلى
• محاذاة الرمز: الوسط
• استخدام حجم خط الأيقونة: نعم
• حجم خط الرمز: 200٪

تحجيم

قم بتعديل إعدادات التحجيم أيضًا.

• عرض المحتوى: 100٪
• العرض: 32٪

العنصر الرئيسي & Blurb Image CSS

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

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

display: inline-block;

صورة دعاية:

margin-bottom: 0px !important

استنساخ وحدة Blurb مرتين

بمجرد الانتهاء من أول رمز تبديل Blurb Module ، يمكنك استنساخه مرتين.

تغيير الايقونة

تأكد من تغيير الرمز في كل نسخة مكررة.

2. إضافة تبديل العناصر

أضف القسم رقم 2

تحجيم

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

• الارتفاع: 0 بكسل

تباعد

انتقل إلى علامة تبويب تصميم القسم وقم بإزالة جميع الحشوة الافتراضية العلوية والسفلية.

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

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

هيكل العمود

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

تحجيم

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

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

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

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

موقع

وأعد وضع الصف بأكمله. سيساعدنا قلب هذا الصف المطلق على منع الصف من شغل أي مساحة في التصميم.

• الموقف: مطلق
• الموقع: الركن الأيمن العلوي

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

أضف رقم الهاتف إلى Content Box

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

لون الخلفية

أضف لون خلفية أسود بعد ذلك.

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

إعدادات النص

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

• خط النص: عرض Playfair
• لون النص: #ffffff
• حجم النص: 27 بكسل
• محاذاة النص: الوسط

تحجيم

تأكد من أن العرض 100٪ أيضًا.

• العرض: 100٪

تباعد

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

• حشوة علوية: 10٪
• حشوة سفلية: 10٪
• الحشوة اليسرى: 2٪
• الحشوة اليمنى: 2٪

وحدة استنساخ النص

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

تغيير المحتوى إلى عنوان البريد الإلكتروني

قم بتغيير المحتوى في مربع المحتوى.

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

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

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

قم بتغيير لون خلفية كل شبكة اجتماعية إلى الأبيض

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

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

لون الخلفية

ثم عد إلى إعدادات الوحدة العامة واستخدم لون خلفية أسود.

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

انتقام

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

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

إعدادات الرمز

قم بتغيير لون الرمز في إعدادات الرموز أيضًا.

• لون الأيقونة: # 000000

تحجيم

بعد ذلك ، قم بتطبيق عرض "100٪" على إعدادات التحجيم.

• العرض: 100٪

تباعد

قم بتطبيق بعض الحشو العلوي والسفلي المخصص أيضًا.

• حشوة علوية: 10٪
• حشوة سفلية: 10٪

الحدود

وأكمل إعدادات الوحدة بإضافة بعض الزوايا الدائرية إلى إعدادات الحدود.

• جميع الزوايا: 100 بكسل

3. إضافة وظيفة

أضف معرّفات CSS متتالية إلى القسم الأول من وحدات Blurb Modules

الآن بعد أن أصبحت جميع العناصر في مكانها الصحيح ، يمكننا البدء في إضافة تأثير التبديل. أول شيء عليك القيام به هو فتح كل وحدة Blurb Module على حدة وإضافة معرف CSS متتالي.

• دلالة 1: header-cta-1
• Blurb 2: header-cta-2
• Blurb 3: header-cta-3

أضف معرفات CSS متتالية إلى عناصر التبديل

افعل نفس الشيء لوحدات عنصر التبديل. يجب أن يتطابق الرقم الموجود في نهاية معرف CSS مع معرف CSS الذي استخدمته للرموز في الخطوة السابقة.

• وحدة النص 1: header-item-1
• وحدة النص 2: header-item-2
• وحدة متابعة الوسائط الاجتماعية: header-item-3

أضف الموضع المطلق إلى كل عناصر التبديل

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

• الموقف: مطلق
• الموقع: أعلى اليمين

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

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

أدخل كود CSS

أضف الأسطر التالية من كود CSS بين علامات الأنماط كما تلاحظ في شاشة الطباعة أدناه :

[id*="header-cta"]{
cursor: pointer;
}
[id*="header-item"] {
visibility: hidden;
opacity: 0;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-item {
visibility: visible;
opacity: 1;
}
.highlight-icon{
color: #000 !important;
}

أدخل كود JQuery

نحن نضيف بعض أكواد JQuery المخصصة أيضًا. أضف الكود بين علامات البرنامج النصي كما يمكنك ملاحظته في شاشة الطباعة أدناه .

jQuery(function($){
$(document).ready(function(){
 
$('[id*="header-cta"]').click(function() {
 
var $selector = $(this).attr('id').replace('cta', 'item');
var $item = $('#' + $selector);
 
$item.toggleClass('show-item');
$('[id*="header-item"]').not($item).removeClass('show-item');

var $icon = $(this).find('.et-pb-icon');
var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon');
  
$icon.toggleClass('highlight-icon');
$allIcons.not($icon).removeClass('highlight-icon');
  
});
 
});
});

4. جعل رأس + تبديل العناصر لزجة

اجعل القسم رقم 1 مثبتًا

أخيرًا وليس آخرًا ، يمكنك أيضًا قلب الرأس وتبديل العناصر بشكل ثابت. لإنشاء النتيجة المرجوة ، ستحتاج إلى التأكد من أن كلا القسمين مثبتان وتم تمكين خيار "Offset From Surrounding Sticky Elements". اجعل القسم الأول لزجًا.

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

اجعل القسم # 2 مثبتًا

وافعل الشيء نفسه بالنسبة للقسم 2. هذا كل شيء!

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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