تحتاج إلى إنشاء عنوان عام لملف موقع على شبكة الإنترنت مع ديفي؟
سيظهر رأس عام في كل مكان على ملف موقع انترنت، إلا إذا قمت بتعيين عنوان مختلف لصفحة أو منشور.
لنبدأ!
مسح
إليك معاينة للرأس العام الذي سنقوم بتصميمه.
تكوين القائمة الرئيسية الخاصة بك
ابدأ بإنشاء قائمتك في إعدادات مظهر موقع WordPress الخاص بك.
قم بالوصول إلى خيار Theme Builder ضمن Divi
في خيارات موضوع ديفي، انقر فوق مُنشئ السمات. بمجرد الوصول إلى هناك ، ستلاحظ ملف قالب الموقع افتراضي.
إضافة وإنشاء عنوان عام
Le قالب الموقع الافتراضي هو المكان الذي يمكنك فيه البدء في إنشاء رأس عام مخصص ، ونص عام ، وتذييل عام. انقر فوق "إضافة رأس عام" وتابع بالنقر فوق "إنشاء رأس عام" لبدء العملية.
إعدادات القسم
التحجيم
افتح إعدادات القسم التي ستجدها في الصفحة ، في علامة التبويب "النمط" ، قم بتغيير الأبعاد على أحجام الشاشات المختلفة.
- أقصى عرض: 100٪
- أقصى عرض: 1280 بكسل (للكمبيوتر الشخصي والجهاز اللوحي) ، 100٪ (للجوال)
مباعدة
قم بإزالة جميع الهوامش الداخلية العلوية والسفلية
- رأس الهامش الداخلي: 0 بكسل
- الهامش الداخلي السفلي: 0 بكسل
الحدود
أضف الآن نصف قطر حد إلى الزاويتين السفليتين اليسرى واليمنى من القسم.
- أسفل اليسار: 50 بكسل
- أسفل اليمين: 50 بكسل
صندوق الظل
دعنا أيضًا نضيف ظل مربع دقيق.
- مربع قوة طمس الظل: 60 بكسل
- لون خط الترجمة: rgba (0,0,0,0.13،XNUMX،XNUMX،XNUMX)
رؤية
- الفائض الأفقي: مرئي
- الفائض العمودي: مرئي
خصص سطرًا جديدًا للرأس
الآن بعد أن أكملنا إعدادات القسم العامة ، يمكننا البدء في إضافة صفوف. في المجموع ، سنحتاج إلى سطرين ؛ واحد مخصص للرأس وآخر يسمح بعرض عناصر القائمة. سنبدأ بالرأس بإضافة صف جديد باستخدام بنية العمود التالية:
إعدادات الخط
إعدادات الخلفية
بدون إضافة وحدات إلى الخط ، افتح إعدادات الخط وقم بتغيير لون الخلفية.
- الخلفية: # 38383F
التحجيم
ثم قم بتعديل معلمات تحجيم الخط.
- استخدام عرض مزراب مخصص: نعم
- تباعد العمود: 1
- أقصى عرض: 100٪
- أقصى عرض: 100٪
الاطلاع على البيانات الشخصية
الآن دعنا نتأكد من ظهور الأعمدة بجانب بعضها البعض على الشاشات الأصغر عن طريق إضافة هذا السطر من كود CSS إلى عنصر الصف الرئيسي.
01
display: flex;
أضف وحدة الصورة في العمود 1
تنزيل الشعار
بمجرد الانتهاء من إعدادات الصف ، حان الوقت لبدء إضافة الوحدات النمطية. أضف وحدة صورة إلى العمود 1 وقم بتحميل شعارك.
انحياز
انتقل إلى علامة تبويب النمط وقم بمحاذاة الصورة إلى اليسار.
التحجيم
قم أيضًا بتعديل عرض الوحدة النمطية.
مباعدة
أضف أيضًا قيم الهامش المخصصة.
أضف وحدة تتبع الوسائط الاجتماعية في العمود 2
إضافة الشبكات الاجتماعية
دعنا ننتقل إلى العمود الثاني. هناك سنحتاج إلى وحدة تتبع وسائل التواصل الاجتماعي. أضف الشبكات الاجتماعية التي تختارها. يمكنك إضافة أي عدد تريده من الوسائط الاجتماعية.
لون خلفية الشبكة الاجتماعية
بعد ذلك ، افتح كل شبكة اجتماعية على حدة وقم بتغيير لون الخلفية إلى لون شفاف تمامًا.
- لون الخلفية: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
انحياز
ارجع إلى إعدادات الوحدة العادية ثم قم بتغيير المحاذاة الكاملة للوحدة.
أيقونة
قم بتغيير إعدادات الرمز أيضًا.
- لون الأيقونة: #FFFFFF
- استخدام حجم رمز مخصص: نعم
- حجم خط الرمز: 16 بكسل (كمبيوتر شخصي وجهاز لوحي) ، 12 بكسل (هاتف)
مباعدة
أضف الهامش العلوي.
أضف وحدة الزر في العمود 3
انتقل إلى العمود الثالث وأضف وحدة زر تحتوي على نص من اختيارك.
انحياز
قم بتغيير محاذاة الزر في علامة تبويب النمط.
إعدادات الزر
قم بتخصيص إعدادات الزر على النحو التالي:
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 12 بكسل (سطح المكتب) ، 10 بكسل (الجهاز اللوحي) ، 8 بكسل (الهاتف)
- لون نص الزر: #ffffff
- زر الخلفية: # ffae25
- عرض حد الزر: 0 بكسل
- زر Border Radius: 0 بكسل
- تباعد حروف الزر: 5 بكسل (سطح المكتب) ، 3 بكسل (الجهاز اللوحي والهاتف)
- زر الخط: فتح بلا
- زر Soft Light: نص غامق
- نمط زر النسخ: TT
مباعدة
تخصيص قيم الهامش.
خصص سطرًا جديدًا لشريط القائمة
بمجرد ملء السطر المخصص للرأس العام ، يمكنك إضافة سطر آخر أدناه.
إعدادات الخط
التحجيم
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الخط وغيّر إعدادات التحجيم في علامة تبويب النمط.
مباعدة
ثم قم بإزالة جميع الهوامش السفلية والعلوية.
أضف وحدة قائمة إلى العمود
اختر قائمة
بعد ذلك ، أضف وحدة قائمة إلى العمود وحدد القائمة التي أنشأتها في الجزء الأول من هذا البرنامج التعليمي.
توفير
قم بالتبديل إلى علامة تبويب النمط وقم بتغيير إعدادات التخطيط كما يلي:
علاقات
قم أيضًا بتغيير لون الارتباط النشط في علامة تبويب النمط.
- لون الارتباط النشط: # ffae25
قائمة منسدلة
افعل الشيء نفسه مع لون خط القائمة المنسدلة في إعدادات القائمة المنسدلة.
- لون صف القائمة المنسدلة: # ffae25
أيقونة
- لون أيقونة قائمة همبرغر: # ffae25
نص القائمة
مع إعدادات نص القائمة.
- خط القائمة: Prata
- لون نص القائمة: # 000000
اجعل العنوان وشريط القائمة في المقدمة
افتح إعدادات القسم
بمجرد الانتهاء من السطر الثاني ، كل ما عليك فعله هو التأكد من بقاء القسم في أعلى صفحاتنا ومنشوراتنا. للقيام بذلك ، سنفتح إعدادات القسم مرة أخرى.
أضف CSS مخصصًا إلى العنصر الرئيسي
بعد ذلك ، سننتقل إلى علامة التبويب المتقدمة وسنضيف بضعة أسطر من كود CSS إلى العنصر الرئيسي للقسم.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
حفظ خيارات منشئ الرأس والموضوع العام
بمجرد الانتهاء من تصميم الرأس العام بالكامل ، تأكد من حفظ التصميم قبل الخروج من تخطيط القالب. بمجرد خروجك من تخطيط القالب ، احفظ تغييرات أداة إنشاء السمات بالكامل ، وتكون قد انتهيت!
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة.
وفي الختام
في هذه المقالة، أوضحنا لك كيفية إنشاء رأس عام مخصص باستخدام أداة إنشاء السمات الجديدة في Divi. يوضح هذا البرنامج التعليمي مدى سهولة إنشاء رؤوس جميلة وتطبيقها على موقعك بالكامل موقع انترنت أو أنواع منشورات مخصصة محددة.
نأمل أن يساعدك في تخصيص موقع الويب الخاص بك باستخدام Theme Builder.
إذا كان لديك أي أسئلة أو اقتراحات ، فالرجاء ترك تعليق لنا في قسم التعليقات CI-dessous.
...
