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

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

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

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

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

قم بتنزيل عنوان الموقع الديناميكي و Tagline Divi Global Header Template مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

ثم انقر فوق زر الاستيراد.

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

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

عنوان الموقع و Tagline في WordPress

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

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

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

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

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

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

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

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

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

بمجرد تنزيل حزمة منشئ السمات ، قم بفك ضغط الملف وابحث عن ملف JSON لقالب موقع الويب الافتراضي.

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

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

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

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

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

حرك الشعار

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

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

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

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

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

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

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

أضف سطر شعار موقع ديناميكي

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

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

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

عنوان الموقع وتصميم نص سطر الوصف

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

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

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

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

padding-bottom: 0px

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

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

توسيط الأعمدة / المحتوى رأسياً

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

align-items: center;

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

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

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

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

• لون الخلفية المتدرجة اليسرى: #ffffff
• خلفية متدرجة اللون الصحيح: # 1dbf73
• اتجاه التدرج: 135 درجة
• موقف البداية: 10٪
• موقف النهاية: 0٪

إضافة أحرف قبل وبعد إلى سطر الوصف

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

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

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

إليك كيفية تكديسها على الجهاز اللوحي والهاتف.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!