كيفية تحريك رأسك العالمي باستخدام Divi

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

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

معاينة

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

مثال 1

سطح المكتب

متحرك

المثال رقم 2

سطح المكتب

متحرك

قم بتنزيل The Animated 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. بناء تصميم كتلة الرأس العالمية

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

تباعد

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

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

مربع الظل

أضف ظل مربع بعد ذلك.

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (13،60،216،0.24)

فهرس Z.

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

• الفهرس Z: 99999

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

هيكل العمود

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

تحجيم

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

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

تباعد

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

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

الرؤية

تأكد من تعيين تجاوز الصف على "مرئي" أيضًا.

• التدفق الأفقي: مرئي
• التدفق العمودي: مرئي

إعدادات العمود (الثلاثة)

لون الخلفية

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

• لون خلفية العمود 1: #efefef
• لون خلفية العمود 2: # ffcb0f
• لون خلفية العمود 3: # 2848ff

تباعد

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

• الحشوة العلوية: 0.5vw (سطح المكتب) ، 1vw (الجهاز اللوحي والهاتف)
• الحشوة السفلية: 0.5vw (سطح المكتب) ، 1vw (الكمبيوتر اللوحي والهاتف)

العنصر الرئيسي

وللتأكد من توسيط محتوى العمود بالكامل عموديًا ، سنضيف ثلاثة أسطر من كود CSS إلى العنصر الرئيسي لكل عمود.

display: flex;
flex-direction: column;
justify-content: center;

العمود 1 Z الفهرس

أخيرًا وليس آخرًا ، افتح إعدادات العمود 1 وقم بزيادة الفهرس z في إعدادات الرؤية.

• الفهرس Z: 10

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

اختر قائمة

حان الوقت لإضافة الوحدات ، بدءًا من "وحدة القائمة" في العمود 1. حدد قائمة من اختيارك.

تحميل الشعار

قم بتحميل شعارك بعد ذلك.

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

تابع بإزالة لون خلفية الوحدة.

تخطيط

انتقل إلى علامة تبويب التصميم وتأكد من تطبيق الإعدادات التالية على التخطيط:

• النمط: محاذاة إلى اليسار
• اتجاه القائمة المنسدلة: لأسفل

إعدادات نص القائمة

نمط إعدادات النص بعد ذلك:

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

إعدادات القائمة المنسدلة

جنبًا إلى جنب مع إعدادات القائمة المنسدلة.

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

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

وتغيير لون رمز قائمة همبرغر أيضًا.

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

تحجيم

تابع عن طريق تغيير الحد الأقصى لعرض الشعار عبر أحجام الشاشات المختلفة.

• أقصى عرض للشعار: 6vw (سطح المكتب) ، 9vw (كمبيوتر لوحي) ، 13vw (هاتف)

تباعد

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

• الهامش الأيسر: 2vw
• الهامش الأيمن: 2vw

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

أدخل رمز CSS لاستجابة VW

الآن ، في وحدة القائمة ، استخدمنا وحدة عرض منفذ العرض لحجم النص وقيم التباعد. لقد فعلنا ذلك للتأكد من أنه يمكنك وضع ما يصل إلى 8 عناصر قائمة عبر أحجام مختلفة لشاشات سطح المكتب ، دون تقسيمها إلى سطرين. سنحتاج إلى التأكد من إنشاء المسافة بين عناصر القائمة باستخدام وحدة vw أيضًا. للقيام بذلك ، سنقوم بإضافة Code Module إلى العمود 1 وإدخال الأسطر التالية من كود CSS:

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

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

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

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

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

تابع عن طريق إعادة ضبط إعدادات كل شبكة.

انتقام

أكمل إعدادات الوحدة عن طريق تغيير محاذاة الوحدة.

• محاذاة الوحدة: المركز

أضف وحدة الزر إلى العمود 3

أضف نسخة

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

انتقام

انتقل إلى علامة تبويب التصميم وقم بتغيير محاذاة الزر.

• محاذاة الزر: الوسط

إعدادات الزر

أكمل إعدادات الوحدة عن طريق تصميم الزر.

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

• نصف قطر حدود الزر: 0 بكسل
• زر الخط: مونتسيرات
• وزن خط الزر: غامق للغاية
• نمط خط الزر: أحرف كبيرة

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

مجموعة الرسوم المتحركة للرأس العام رقم 1

العمود 1 للرسوم المتحركة

الآن بعد أن قمنا ببناء الرأس العالمي ، حان الوقت لإضافة الرسوم المتحركة! لإعادة إنشاء الحركة الأولى ، افتح إعدادات العمود 1 وأضف الرسم المتحرك التالي:

• نمط الرسوم المتحركة: تكبير
• اتجاه الرسوم المتحركة: لأعلى
• بدء تعتيم الرسوم المتحركة: 100٪

العمود 2 للرسوم المتحركة

أضف إعدادات الرسوم المتحركة التالية إلى العمود 2 التالي:

• نمط الرسوم المتحركة: تكبير
• اتجاه الرسوم المتحركة: لأسفل
• تأخير الرسوم المتحركة: 500 مللي ثانية
• بدء تعتيم الرسوم المتحركة: 100٪

العمود 3 للرسوم المتحركة

أكمل إعدادات العمود بتعيين الرسم المتحرك التالي للعمود 3:

• نمط الرسوم المتحركة: تكبير
• اتجاه الرسوم المتحركة: لأعلى
• تأخير الرسوم المتحركة: 1000 مللي ثانية
• بدء تعتيم الرسوم المتحركة: 100٪

الرسوم المتحركة للوحدة (جميع الوحدات الثلاث)

بمجرد الانتهاء من إعدادات العمود ، افتح كل واحدة من الوحدات على حدة واستخدم الرسوم المتحركة التالية لها:

• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 1500 مللي ثانية

مجموعة الرسوم المتحركة للرأس العام رقم 2

العمود 1 للرسوم المتحركة

هل تريد إعادة إنشاء مجموعة الرسوم المتحركة الثانية بدلاً من ذلك؟ افتح إعدادات العمود 1 وأضف الرسوم المتحركة التالية:

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: لأعلى
• بدء تعتيم الرسوم المتحركة: 100٪

العمود 2 للرسوم المتحركة

استخدم إعدادات الحركة التالية للعمود 2 التالي:

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: لأعلى
• تأخير الرسوم المتحركة: 500 مللي ثانية
• بدء تعتيم الرسوم المتحركة: 100٪

العمود 3 للرسوم المتحركة

وأكمل إعدادات العمود عن طريق تطبيق إعدادات الرسوم المتحركة التالية على العمود 3:

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: لأعلى
• تأخير الرسوم المتحركة: 1000 مللي ثانية
• بدء تعتيم الرسوم المتحركة: 100٪

الرسوم المتحركة للوحدة (جميع الوحدات الثلاث)

ثم افتح كل وحدة على حدة وأضف الرسوم المتحركة التالية:

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: لأسفل
• تأخير الرسوم المتحركة: 1500 مللي ثانية

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

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

معاينة

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

مثال 1

سطح المكتب

متحرك

المثال رقم 2

سطح المكتب

متحرك

افكار اخيرة

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

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