هل تريد إنشاء رأس عالمي جانبي باستخدام Divi؟

سنوضح لك في هذا البرنامج التعليمي كيفية إنشاء رأس عام مستدير يظهر على الجانب الأيسر من صفحاتك ومنشوراتك. لون خلفية الرأس شفاف تمامًا، مما يسمح محتويات من الصفحة/المنشور. 

لقد تأكدنا من أن العنوان العام يظل ثابتًا على الجانب الأيسر أثناء التمرير ، كما جعلنا القائمة نسخة متوافقة مع الجوّال. 

في هذا البرنامج التعليمي ، سنوضح لك كيفية إعادة إنشاء التصميم من البداية!

دعونا نذهب.

مسح

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

رأس عالمي جانبي مع Divi

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

من لوحة تحكم WordPress ، انتقل إلى ديفي> باني الموضوع

انقر "إضافة رأس عام"

اختر "إنشاء رأس عام".

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

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

لون الخلفية

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

  • لون الخلفية: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX) (سطح المكتب) ، #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 في معلمات الموضع.

  • الفهرس 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

تحميل DIVI الآن !!!

وفي الختام

في هذه المقالة ، أوضحنا لك كيفية إنشاء رأس عام مستدير. ما لم تختر خلاف ذلك ، سيظهر العنوان العام الذي أنشأناه في جميع منشوراتك وصفحاتك.

إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...