كيفية إنشاء رأس عام مخصص بملء الشاشة باستخدام منشئ سمات Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل قالب الرأس العام بملء الشاشة مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

انتقل إلى Divi Theme Builder

ابدأ بالذهاب إلى Divi Theme Builder.

ابدأ في إنشاء رأس عام

ثم انقر فوق "Add Global Header" وتابع للنقر فوق "Build Global Header".

2. خصص القسم رقم 1 للتنقل بملء الشاشة

إعدادات القسم

لون الخلفية

حان الوقت لبدء الإنشاء! افتح إعدادات القسم الذي يمكنك ملاحظته داخل محرر القوالب وقم بتغيير لون الخلفية إلى لون شفاف تمامًا.

• لون الخلفية: rgba (255،255،255،0)

تباعد

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

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

فئة CSS

تابع عن طريق إضافة فئة CSS إلى القسم. في وقت لاحق من هذا المنشور ، سنحتاج إلى فئة CSS هذه لتشغيل ملء الشاشة في القائمة.

• فئة CSS: قسم تحويل

الرؤية الافتراضية

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

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي
• الفهرس Z: 999999

تحوم الرؤية

بمجرد إضافة الفهرس z ، قم بتمكين خيار التمرير وتأكد من تطبيق نفس الفهرس z هناك أيضًا.

• الفهرس Z: 999999

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

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

تباعد

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

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

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Abril Fatface
• لون النص: # 000000
• حجم النص: 3vw (سطح المكتب) ، 5vw (جهاز لوحي) ، 7vw (هاتف)
• ارتفاع خط النص: 1em

تباعد

قم بتعديل قيم التباعد عبر أحجام الشاشات المختلفة بعد ذلك.

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

معرف CSS

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

• معرف CSS: قائمة مفتوحة

أضف الصف رقم 2

هيكل العمود

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

تحجيم

افتح إعدادات الصف وقم بتغيير إعدادات التحجيم كما يلي:

• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

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

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

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

إضافة محتوى

ثم أضف وحدة نصية جديدة إلى العمود. تمثل وحدة النص هذه أول عنصر في القائمة.

إضافة رابط

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

• عنوان URL لارتباط الوحدة النمطية: #

إعدادات النص

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

• خط النص: بوبينز
• وزن خط النص: شبه عريض
• لون النص: # 000000
• حجم النص: 3vw (سطح المكتب) ، 7vw (جهاز لوحي) ، 8vw (هاتف)
• تباعد الحروف النصية: -0.1vw
• ارتفاع خط النص: 1em

تباعد

قم بتعديل إعدادات تباعد الوحدة بعد ذلك.

• الهامش العلوي: 1vw
• الحشوة السفلية: 2vw
• الحشوة اليسرى: 3vw

الحدود

أضف حدًا سفليًا أيضًا.

• عرض الحد السفلي: 1 بكسل
• لون الحد السفلي: # 333333

فئة CSS

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

استنساخ وحدة النص ثلاث مرات

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

تغيير المحتوى والارتباط لكل نسخة مكررة

سيتعين عليك تغيير المحتوى والارتباط الخاصين بكل نسخة مكررة.

إضافة وحدة متابعة وسائل التواصل الاجتماعي

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

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

إعادة تعيين أنماط الشبكة الاجتماعية الفردية

تابع عن طريق إعادة تعيين أنماط كل شبكة اجتماعية على حدة.

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

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

• لون الأيقونة: # 000000
• استخدام حجم رمز مخصص: نعم
• حجم خط الرمز: 1vw (سطح المكتب) ، 2vw (الجهاز اللوحي) ، 3vw (الهاتف)

تباعد

أضف بعض المساحة المتروكة اليسرى أيضًا.

• الحشوة اليسرى: 3vw

فئة CSS

أكمل إعدادات الوحدة بإضافة فئة CSS.

أضف الصف رقم 3

هيكل العمود

يحتوي الصف الأخير الذي نحتاجه في هذا القسم على بنية العمود التالية:

تباعد

حدد المساحة التي يشغلها هذا الصف عن طريق إزالة جميع الحشو الافتراضي العلوي والسفلي.

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

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

أدخل JQuery & CSS Code

بعد ذلك ، أضف Code Module وأدخل بعض كود CSS و JQuery لعمل قائمة ملء الشاشة. تأكد من وضع كود JQuery يدويًا بين علامات البرنامج النصي ورمز CSS بين علامات النمط كما يمكنك ملاحظته في شاشة الطباعة أدناه.

jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});

.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

3. خصص القسم رقم 2 لأعلى شعار الزاوية اليمنى

إعدادات القسم

لون الخلفية

إلى القسم التالي! سيحتوي هذا القسم على الشعار في الزاوية اليمنى العليا. افتح إعدادات القسم وقم بتغيير لون الخلفية إلى لون شفاف تمامًا.

• لون الخلفية: rgba (0،0،0،0)

تباعد

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

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

الرؤية الافتراضية

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

• الفهرس Z: 99999

تحوم الرؤية

قم بتمكين خيار التمرير في الفهرس z وتأكد من تطبيق نفس القيمة على التمرير أيضًا.

• الفهرس Z: 99999

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

هيكل العمود

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

تحجيم

افتح إعدادات الصف وقم بتغيير إعدادات التحجيم كما يلي:

• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة المساحة المتروكة العلوية والسفلية الافتراضية للصف أيضًا.

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

أضف وحدة الصورة النمطية إلى العمود

تحميل صورة شعار PNG

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

تحجيم

انتقل إلى إعدادات تغيير حجم الوحدة وفرض العرض الكامل.

• فرض عرض كامل: نعم

تباعد

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

• الحشوة العلوية: 2.5vw (سطح المكتب) ، 3.5vw (Tablet) ، 5vw (الهاتف)
• الحشوة السفلية: 2.5vw (سطح المكتب) ، 3.5vw (الكمبيوتر اللوحي) ، 5vw (الهاتف)
• الحشو الأيسر: 3vw (سطح المكتب) ، 4vw (كمبيوتر لوحي) ، 7vw (هاتف)
• الحشو الأيمن: 3vw (سطح المكتب) ، 4vw (جهاز لوحي) ، 7vw (هاتف)

4. إعدادات قسم إضافية

القسم 1

تحجيم

بمجرد الانتهاء من كلا القسمين وجميع الوحدات فيه ، فقد حان الوقت لتغيير حجمهما. افتح القسم الأول وقم بتطبيق قيم العرض والارتفاع التالية:

• العرض: 8vw (Desktop) ، 11vw (Tablet) ، 18vw (Phone)
• الارتفاع: 7vw (سطح المكتب) ، 11vw (كمبيوتر لوحي) ، 18vw (هاتف)

العنصر الأساسي الافتراضي

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

position: fixed;
top: 0;

تحوم العنصر الرئيسي

تأكد من تطبيق خطوط كود CSS نفسها عند التمرير.

position: fixed;
top: 0;

القسم 2

تحجيم

تابع عن طريق فتح إعدادات القسم الثاني وتغيير العرض عبر أحجام الشاشة المختلفة.

• العرض: 13vw (كمبيوتر مكتبي) ، 21vw (كمبيوتر لوحي) ، 30vw (هاتف)

العنصر الأساسي الافتراضي

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

position: fixed;
right: 0;
top: 0;

تحوم العنصر الرئيسي

تأكد من تطبيق خطوط كود CSS نفسها عند التمرير.

position: fixed;
right: 0;
top: 0;

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

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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