هل تريد إنشاء رأس عالمي جانبي باستخدام Divi؟
في هذا الدرس، سنوضح لك كيفية إنشاء رأسية عامة دوارة تظهر على الجانب الأيسر من صفحاتك ومنشوراتك. لون خلفية الرأسية شفاف تمامًا، مما يسمح بظهور محتوى الصفحة/المنشور.
لقد حرصنا على أن يظل العنوان الرئيسي ثابتًا على الجانب الأيسر أثناء التمرير، وقمنا أيضًا بتحويل القائمة إلى نسخة ملائمة للهواتف المحمولة.
في هذا البرنامج التعليمي ، سنوضح لك كيفية إعادة إنشاء التصميم من البداية!
دعونا نذهب.
مسح
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة التي نريد تحقيقها.
انتقل إلى منشئ سمات Divi وابدأ في إنشاء رأس عالمي
من لوحة تحكم WordPress ، انتقل إلى ديفي> باني الموضوع
انقر "إضافة رأسية عامة"
اختر "إنشاء رأس الصفحة العامة".
ابدأ بإنشاء رأس الشريط الجانبي العام
إضافة قسم جديد
لون الخلفية
بمجرد دخولك إلى محرر القوالب، يمكنك فتح القسم الموجود بالفعل وتغيير لون الخلفية على أحجام الشاشات المختلفة.
- لون الخلفية: rgba(0,0,0,0) (سطح المكتب)، #FFFFFF (الأجهزة اللوحية والهواتف)
التحجيم
انتقل إلى علامة التبويب تصميمقم بتوسيع الخيار التحجيم ثم قم بتغيير معلمات تحجيم القسم.
- العرض: 5vw (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)
- الحد الأدنى للارتفاع: 100 vw (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)
مباعدة
بعد ذلك، قم بتوسيع خيار التباعد وتعديل الإعدادات كما يلي:
- الحشو (العلوي والسفلي): 2vw
صندوق الظل
ثم اذهب الى مربع الظل ويمكنك إضافة ظل مخصص للصندوق على أحجام الشاشات المختلفة.
- مربع الظل الأفقي: 32 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
- مربع قوة طمس الظل: 49 بكسل
- قوة الانتشار: 0 بكسل (سطح المكتب) ، 19 بكسل (الجهاز اللوحي والهاتف)
- لون الظل: rgba (0,0,0,0.12،XNUMX،XNUMX،XNUMX)
إضافة CSS مخصص
سنضمن أيضًا أن يظل رأس الشريط الجانبي العالمي ثابتًا على الجانب الأيسر عن طريق إضافة بضعة أسطر من كود CSS إلى العنصر الرئيسي للقسم.
position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
عند التمرير فوق القسم
تأكد أيضًا من إضافة أسطر كود CSS هذه إلى العنصر الرئيسي عند تمرير مؤشر الماوس فوق القسم.
position: fixed;
top: 0;
الرؤية الافتراضية
بعد ذلك، قم بزيادة قيمة z-index في معلمات الموضع.
- الفهرس Z: 99999
تحوم الرؤية
تأكد من تطبيق نفس القيمة عند تمرير المؤشر فوقها.
- الفهرس Z: 99999
أضف سطرًا جديدًا
هيكل العمود
بمجرد الانتهاء من إعدادات القسم ، تابع بإضافة صف جديد باستخدام بنية العمود التالية:
التحجيم
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الخط وقم بتغيير إعدادات التحجيم.
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
مباعدة
قم أيضًا بإزالة جميع الهوامش الافتراضية.
- المساحة المتروكة (أعلى وأسفل): 0 بكسل
معلمات العمود
تمت إضافة CSS مخصص (الجهاز اللوحي والهاتف)
على الجهاز اللوحي والهاتف ، نختار شاشة مختلفة تمامًا. سنضع ثلاث وحدات مختلفة بجانب بعضها البعض. للقيام بذلك ، سنحتاج إلى إضافة بعض أكواد CSS.
افتح إعدادات العمود، ثم انتقل إلى علامة التبويب متقدم ثم أدخل أسطر كود CSS التالية في المساحة العنصر الرئيسي للجهاز اللوحي والهاتف:
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
أضف وحدة صورة إلى العمود
تنزيل الشعار
حان وقت إضافة الوحدات! أول وحدة نحتاجها هي وحدة الصور. حمّل ملف صورة شعار شبه شفاف من اختيارك.
التحجيم
ثم انتقل إلى علامة التبويب تصميم ويمكنك ضبط العرض ليناسب أحجام الشاشات المختلفة.
- العرض: 4 vw (Desktop) ، 12 vw (Tablet) ، 16 vw (Phone)
مقياس التحول
قم بزيادة حجم الوحدة النمطية عن طريق تعديل معلمات تغيير حجم التحويل.
- يمينًا: 170٪ (كمبيوتر مكتبي) ، 100٪ (جهاز لوحي وهاتف)
- منخفضة: 170٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)
"تحويل الترجمة"
وادفع الوحدة إلى اليمين عن طريق تعديل المعلمات التالية
- الجزء السفلي: 1vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
أضف وحدة قائمة إلى العمود
حدد القائمة لإضافتها
الوحدة التالية التي نحتاجها هي وحدة القائمة. حدد قائمة من اختيارك.
قم بإزالة لون الخلفية
بعد ذلك، قم بإزالة لون الخلفية من الوحدة.
توفير
ثم انتقل إلى علامة التبويب تصميم وتغيير إعدادات التخطيط.
- النمط: توسيط
- اتجاه القائمة المنسدلة: لأسفل
إعدادات نص القائمة
قم أيضًا بتغيير إعدادات نص القائمة.
- لون الارتباط النشط: #cecece
- خط القائمة: مونتسيرات
- وزن خط القائمة: غامق
- لون النص: # 000000
- حجم نص القائمة: 0,9 vw (سطح المكتب) ، 2 vw (جهاز لوحي) ، 2,5 vw (هاتف)
نص القائمة عند التمرير
قم بتغيير لون نص القائمة عند التمرير.
- لون نص القائمة: # عفافاف
قائمة منسدلة
نحن أيضًا نجري بعض التغييرات على إعدادات القائمة المنسدلة.
- لون خط القائمة المنسدلة: 000000 #
- لون نص القائمة المنسدلة: # 000000
الرموز
بعد ذلك، قم بتغيير لون أيقونة قائمة الهامبرغر.
- لون أيقونة قائمة همبرغر: # 000000
مباعدة
وأضف قيم هوامش مخصصة على أحجام الشاشات المختلفة.
- الهامش (أعلى وأسفل): 18 vw (سطح المكتب) ، 0 vw (كمبيوتر لوحي وهاتف)
- الهامش (يسار ويمين): -13vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
تحويل الدوران
الآن، لإنشاء تأثير الدوران، سنقوم باللعب بقيم دوران التحويل الخاصة بالوحدة.
- اليسار: 270 درجة (سطح المكتب) ، 0 درجة (الكمبيوتر اللوحي والهاتف)
أضف وحدة "متابعة وسائل التواصل الاجتماعي" إلى العمود
إضافة الشبكات الاجتماعية
لننتقل الآن إلى وحدة "متابعة وسائل التواصل الاجتماعي"، وهي الوحدة التالية والأخيرة التي نحتاجها لإكمال رأس الصفحة الرئيسي. أضف بعض شبكات التواصل الاجتماعي التي تختارها.
إعادة تعيين أنماط أيقونات الوسائط الاجتماعية
تابع عن طريق إعادة ضبط الإعدادات لكل شبكة اجتماعية على حدة. سيساعدنا هذا في التخلص من لون الخلفية.
انحياز
ثم انتقل إلى علامة التبويب تصميم من الوحدة النمطية وتعديل محاذاة الوحدة النمطية على أحجام الشاشات المختلفة.
- وحدة المحاذاة: يسار (سطح المكتب) ، يمين (كمبيوتر لوحي وهاتف)
إعدادات الرمز
وأخيرًا، قم أيضًا بتغيير إعدادات الأيقونات.
- لون الأيقونة: # 000000
- استخدام حجم رمز مخصص: نعم
- حجم خط الأيقونة: 2,1 vw
حفظ التغييرات المنشئ وعرض النتيجة
بمجرد الانتهاء من جميع الوحدات، يمكنك حفظ القالب والخروج من منشئ قالب Divi وعرض النتيجة على موقع الويب الخاص بك!
مسح
والآن بعد أن مررنا بجميع الخطوات، دعونا نلقي نظرة أخيرة على النتيجة.
مكتب
تحميل DIVI الآن !!!
خاتمة
في هذه المقالة، أوضحنا لكم كيفية إنشاء رأس صفحة رئيسي محوري. ما لم تختاروا خلاف ذلك، سيظهر رأس الصفحة الرئيسي الذي أنشأناه في جميع مقالاتكم وصفحاتكم.
إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
انظر أيضا مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...