كيفية إنشاء رأس عالمي مستدير باستخدام Divi's Theme Builder

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

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

انتقل إلى Divi Theme Builder

ابدأ بالانتقال إلى Divi Theme Builder على موقع WordPress الخاص بك.

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

انقر فوق "إضافة رأس عام" وحدد "إنشاء رأس عام".

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

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

لون الخلفية

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

• لون الخلفية: rgba (0،0،0،0) (سطح المكتب) ، #FFFFFF (الجهاز اللوحي والهاتف)

تحجيم

قم بتعديل إعدادات تحجيم القسم بعد ذلك.

• العرض: 5vw (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)
• الحد الأدنى للارتفاع: 100vw (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)

تباعد

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

• الحشوة العلوية: 2vw
• الحشوة السفلية: 2vw

مربع الظل

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

• مربع الظل الأفقي: 32 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• قوة مربع الظل الضبابية: 49 بكسل
• قوة انتشار الظل المربع: 0 بكسل (سطح المكتب) ، 19 بكسل (الجهاز اللوحي والهاتف)
• لون الظل: rgba (0،0،0،0.12)

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

سوف نتأكد أيضًا من بقاء الرأس العام المستدير ثابتًا على الجانب الأيسر عن طريق إضافة بضعة أسطر من كود 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 بكسل
• الحشو السفلي: 0 بكسل

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

العنصر الأساسي (الجهاز اللوحي والهاتف)

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

display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;

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

تحميل الشعار

حان الوقت لبدء إضافة الوحدات! الوحدة الأولى التي نحتاجها هي وحدة صورة. قم بتحميل ملف صورة شعار شبه شفاف من اختيارك.

تحجيم

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

• العرض: 4vw (كمبيوتر مكتبي) ، 12vw (كمبيوتر لوحي) ، 16vw (هاتف)

مقياس التحويل

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

• اليمين: 170٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)
• القاع: 170٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)

تحويل الترجمة

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

• الجزء السفلي: 1vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

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

اختر قائمة

الوحدة التالية التي نحتاجها هي وحدة القائمة. حدد قائمة من اختيارك.

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

قم بإزالة لون خلفية الوحدة بعد ذلك.

تخطيط

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

• النمط: توسيط
• اتجاه القائمة المنسدلة: لأسفل

نص القائمة الافتراضي

قم بتعديل إعدادات نص القائمة أيضًا.

• لون الارتباط النشط: #cecece
• خط القائمة: مونتسيرات
• وزن خط القائمة: غامق
• لون نص القائمة: # 000000
• حجم نص القائمة: 0.9vw (سطح المكتب) ، 2vw (الجهاز اللوحي) ، 2.5vw (الهاتف)

نص قائمة التمرير

قم بتغيير لون نص القائمة عند التمرير.

• لون نص القائمة: # عفافاف

القائمة المنسدلة

نحن أيضًا نجري بعض التغييرات على إعدادات القائمة المنسدلة.

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

الأيقونات

قم بتغيير لون رمز قائمة الهامبرغر بعد ذلك.

• لون أيقونة قائمة همبرغر: # 000000

تباعد

وأضف بعض قيم الهامش المخصصة عبر أحجام الشاشات المختلفة.

• الهامش العلوي: 18vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
• الهامش السفلي: 18vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
• الهامش الأيسر: -13vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)
• الهامش الأيمن: -13vw (سطح المكتب) ، 0vw (الجهاز اللوحي والهاتف)

استدارة التحويل

الآن ، لإنشاء التأثير المستدير ، سنلعب بقيم تدوير تحويل الوحدة.

• اليسار: 270 درجة (سطح المكتب) ، 0 درجة (كمبيوتر لوحي وهاتف)

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

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

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

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

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

انتقام

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

• المحاذاة: يسار (سطح المكتب) ، يمين (كمبيوتر لوحي وهاتف)

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

أخيرًا وليس آخرًا ، قم بتغيير إعدادات الرمز أيضًا.

• لون الأيقونة: # 000000
• استخدام حجم رمز مخصص: نعم
• حجم خط الأيقونة: 2.1vw

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

بمجرد الانتهاء من جميع الوحدات ، يمكنك حفظ القالب والخروج من Divi Theme Builder وعرض النتيجة على موقع الويب الخاص بك!

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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