كيفية إضافة عنوان موقع ديناميكي وشعار إلى رأس Divi العالمي

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

في هذا البرنامج التعليمي ، سنوضح لك كيفية إضافة عنوان موقع ديناميكي وشعار إلى عنوان Divi العالمي. سيقوم هذا الحل باستخراج عنوان الموقع والشعار ديناميكيًا من الواجهة الخلفية لـ WordPress. بالإضافة إلى ذلك ، سيكون لديك جميع خيارات التصميم القوية لـ Divi لتخصيص العنوان والشعار كما تريد!

النتيجة المحتملة

فيما يلي معاينة للتصميم الذي سنبنيه في هذا البرنامج التعليمي.

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

تنزيل مجاني

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

لاستيراد القالب ، انتقل إلى Divi> Theme generator.

انقر فوق رمز قابلية النقل في الجزء العلوي الأيمن من الصفحة.

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

ثم اضغط على زر الاستيراد.

بمجرد الانتهاء ، سيكون قالب الرأس العام متاحًا في Divi Theme Builder.

في ما يلي سننتقل إلى التصميم.

عنوان الموقع وشعار ووردبريس

يحتوي كل موقع WordPress على عنوان موقع وشعار. عنوان الموقع هو في الأساس اسم الموقع وشعار الموقع عبارة عن عبارة قصيرة تشرح عادةً ما هو.

ليس من غير المألوف إضافة عنوان الموقع عند تثبيت WordPress ونسيانه.

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

يمكنك تحديد موقع وتحديث عنوان الموقع وشعار الموقع في WordPress في أي وقت بالانتقال إلى لوحة معلومات WordPress والانتقال إلى الإعدادات> عام.

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

الآن بعد أن عرفنا مكان عنوان الموقع وشعاره في الواجهة الخلفية لـ WordPress ، دعنا نستكشف كيف يمكننا إضافتهم إلى رأس Divi!

كيفية إضافة عنوان موقع ديناميكي وشعار إلى رأس عام في Divi

استيراد قالب الرأس العام المصمم مسبقًا

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

حالما تمتلك تحميل حزمة خلق موضوع ، قم بفك ضغط الملف وابحث عن ملف JSON الخاص بـ قالب الموقع افتراضي.

ثم انتقل إلى Divi> Theme Builder.

انقر فوق أيقونة قابلية النقل في أعلى اليمين. في نافذة إمكانية النقل المنبثقة ، اختر ملف JSON من قالب الموقع افتراضيًا ثم انقر فوق الزر "استيراد".

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

إضافة عنوان موقع ديناميكي وشعار إلى العنوان

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

نقل الشعار

للبدء ، اسحب وحدة الصورة التي تعرض الشعار (ديناميكيًا) من العمود الأوسط للصف العلوي إلى العمود الأيسر للصف العلوي.

أضف وحدة تحث المستخدم على اتخاذ إجراء لعرض عنوان الموقع والشعار

ثم أضف وحدة دعوة جديدة إلى العمود الأوسط للصف العلوي (حيث كان الشعار).

سنستخدم وحدة Call to Action لعرض عنوان الموقع والشعار.

ولكن قبل البدء في إضافة المحتوى ، حدد أولاً "لا" لاستخدام لون الخلفية.

أضف عنوان موقع ديناميكي

ضمن إعدادات المحتوى ، مرر مؤشر الماوس فوق مربع إدخال العنوان وانقر على أيقونة "استخدام المحتوى الديناميكي". ثم حدد "عنوان الموقع" من القائمة.

إضافة شعار موقع ديناميكي

بعد ذلك ، مرر مؤشر الماوس فوق منطقة الجسم وحدد رمز "استخدام المحتوى الديناميكي". ثم حدد "سطر شعار الموقع" من القائمة.

إضافة ارتباط ديناميكي الصفحة الرئيسية

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

تصميم نص العنوان وشعار الموقع

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

انتقل إلى علامة تبويب التصميم ، وقم بتحديث ما يلي:

• خط العنوان: Heebo
• وزن خط العنوان: Bold
• نمط خط العنوان: TT
• حجم نص العنوان: 32 بكسل (سطح المكتب) ، 24 بكسل (الكمبيوتر اللوحي والهاتف)
• تباعد رسالة العنوان: 0.3em
• خط الجسم: Roboto
• نمط خط الجسم: مائل
• لون النص الأساسي:
• حجم النص الأساسي: 13 بكسل
• تباعد رسالة النص: 0.1em
• ارتفاع خط الجسم: 1em

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

المساحة المتروكة للأسفل: 0 بكسل

تعديلات التصميم الإضافية

بالنسبة لهذا الجزء الأخير من البرنامج التعليمي ، سنقوم بإجراء بعض تعديلات التصميم الإضافية على الرأس للتأكد من بقاء العناصر في وضع رأسي في كل عمود ولإعطاء الزر تصميمًا فريدًا. سنقوم أيضًا بإضافة سطر قبل وبعد إلى سطر الشعار (للركلات فقط).

التمركز العمودي للأعمدة / المحتوى

الآن الصف العلوي هو "Equalize Column Heights" النشط الذي يستخدم الخاصية المرنة. يمكننا الاستفادة من ذلك عن طريق إضافة مقتطف css صغير للتأكد من بقاء جميع الأعمدة في الوسط بشكل رأسي داخل الصف. للقيام بذلك ، افتح إعدادات الصف العلوي وأضف CSS التالية إلى العنصر الرئيسي:

محاذاة البنود: مركز.

تحديث العمود بالزر

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

تحديث خلفية الزر

ثم افتح إعداد وحدة الزر وقم بتحديث الخلفية بتدرج خلفية جديد على النحو التالي:

• خلفية متدرجة اللون الأيسر: #ffffff
• لون تدرج الخلفية اليمنى: # 1dbf73
• اتجاه التدرج: 135deg
• موضع البدء: 10٪
• الموضع النهائي: 0٪

الإضافة قبل وبعد الحروف على الشعار

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

نتيجة نهائية

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

الأفكار النهائية

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

المصدر موضوع أنيق