كيفية إضافة شعار متجاوب إلى وحدة القائمة ذات العرض الكامل في Divi

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

دعنا نتعمق!

اشترك في قناتنا على اليوتيوب

نظرة خاطفة

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

لماذا تحتاج إلى شعار مستجيب

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

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

ما تحتاجه للبدء

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

الآن ، أنت جاهز للبدء!

كيفية إضافة شعار متجاوب إلى وحدة القائمة ذات العرض الكامل في Divi

قم باستيراد تخطيط الرأس والتذييل

انتقل إلى Theme Builder من قائمة Divi في الشريط الجانبي. قم باستيراد تخطيط High School Header and Footer عن طريق تحديد أيقونة قابلية النقل. حدد علامة التبويب استيراد واختر ملف التخطيط. ثم حدد استيراد قوالب Divi Theme Builder.

سنقوم بتحرير العنوان وإضافة شعارنا المتجاوب في منشئ السمة. انقر فوق رمز القلم الرصاص لتعديل العنوان.

إنشاء وحدة قائمة عرض كامل

أضف مقطع عرض كامل

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

في إعدادات قسم العرض الكامل ، انتقل إلى خيارات متقدمة ، ثم تأثيرات التمرير.

• موقف مثبت: التمسك بالأعلى

بعد ذلك ، أضف لون الخلفية.

• لون الخلفية: # f5f0eb

أضف لونًا مختلفًا للخلفية اللاصقة.

• لون الخلفية اللاصق: #ffffff

أضف وحدة قائمة ذات عرض كامل

الآن دعنا نضيف وحدة القائمة ذات العرض الكامل.

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

لتكرار مظهر القائمة الأصلية بسهولة ، يمكننا استخدام وظيفة أنماط النسخ لنسخ بعض الإعدادات المخصصة. افتح إعدادات القائمة الأصلية ، ثم انقر بزر الماوس الأيمن على Menu Text Styles وحدد Copy Menu Text Styles.

بمجرد النسخ ، انقر على النقاط الثلاث لوحدة القائمة ذات العرض الكامل ، ثم حدد لصق أنماط نص القائمة.

الآن سنكرر نفس الخطوات مع إعدادات القائمة المنسدلة. افتح إعدادات القائمة الأصلية ، ثم انقر بزر الماوس الأيمن على أنماط القائمة المنسدلة وحدد نسخ أنماط القائمة المنسدلة. انقر على النقاط الثلاث لوحدة القائمة ذات العرض الكامل ، ثم حدد لصق أنماط القائمة المنسدلة.

كرر مرة أخرى لأنماط الرموز. افتح إعدادات القائمة الأصلية ، ثم انقر بزر الماوس الأيمن فوق Icon Styles وحدد Copy Icon Styles. انقر على النقاط الثلاث لوحدة القائمة ذات العرض الكامل ، ثم حدد لصق أنماط الأيقونات.

اضبط محاذاة النص إلى اليمين.

• محاذاة النص: صحيح

عيّن الحد الأقصى لارتفاع الشعار ضمن "التصميم" ، ثم "تغيير الحجم".

• أقصى ارتفاع للشعار: 50 بكسل

أضف CSS التالي إلى قسم Menu Link ضمن Custom CSS.

padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;

أخيرًا ، قم بتعيين الحشوة العلوية والسفلية.

• المساحة المتروكة: 10 بكسل
• الحشو السفلي: 10 بكسل

الآن احذف قسم القائمة الأصلي.

أضف شعارًا متجاوبًا

الآن سنضيف الشعار المتجاوب. لحسن الحظ ، تجعل Divi هذا الأمر سهلاً مع خيارات الاستجابة المضمنة.

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

حدد رمز الهاتف لاستخدام الخيارات سريعة الاستجابة ، ثم استبدل شعار الهاتف المحمول بشعارك المتجاوب.

قم بإنشاء صفحة جديدة باستخدام تخطيط مسبق الصنع

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

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

سنستخدم تخطيطًا معدًا مسبقًا من مكتبة Divi لهذا المثال ، لذا حدد استعراض التخطيطات.

ابحث عن تخطيط الصفحة الرئيسية للمدرسة الثانوية وحدده.

حدد استخدام هذا التخطيط لإضافة التخطيط إلى صفحتك.

النتيجة النهائية

الآن دعونا نلقي نظرة على تصميمنا النهائي.

افكار اخيرة

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