كيفية إضافة الرموز الاجتماعية إلى قائمة Divi الأساسية

يكاد يكون من المستحيل تشغيل موقع ويب ناجح دون وجود حضور مخصص على وسائل التواصل الاجتماعي. سواء اخترت ذلك ليكون Instagram أو Twitter أو TikTok أو Facebook أو أي مزيج من هؤلاء وأي شيء آخر ، يريد الناس التفاعل معك ومع علامتك التجارية مباشرة. يعد التأكد من وجود رموز اجتماعية في قائمة Divi الأساسية طريقة رائعة لتوجيه حركة المرور من موقع الويب الخاص بك إلى الشبكة التي تختارها. إنه سريع وسهل ، وسنرشدك في كل خطوة.

هيا بنا نبدأ!

معاينة

سطح المكتب

متحرك

استخدم Divi Theme Builder لتحميل Global Header Freebie

بالنسبة لهذه المقالة ، سنستخدم حزمة تخطيط Tennis Club والهدايا الترويجية للرأس / التذييل. يمكنك تنزيل حزمة التخطيط من داخل Divi builder الخاص بك ، وحزمة الرأس / التذييل من مدونتنا. عند تنزيله ، ستكون الملفات بمثابة أرشيف بتنسيق zip . تأكد من استخراجها بحيث يكون لديك ملف .json لتحميله إلى Divi.

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

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

يجب أن تكون داخل المنشئ الآن. إذا اتبعت التوجيهات أعلاه ، فمن المفترض أن يظهر العنوان الجديد الذي قمت بتحميله في مكانه بالفعل.

قد تلاحظ وجود رموز اجتماعية بالفعل هنا. هذه الرموز الاجتماعية ليست في قائمة Divi Primary وهو ما نعمل من أجله اليوم. لذلك دعونا ندخل في الحشائش منه ، أليس كذلك؟

أضف الرموز الاجتماعية إلى شريط القوائم الأساسي

أول شيء أولاً ، دعنا نغير هيكل الصف / العمود. نريد العثور على الصف في القسم رقم 2 (الجزء السفلي به روابط الصفحة الرئيسية / جهة الاتصال ).

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

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

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

width:80%;

أو

width:80%!important;

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

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

بعد ذلك ، كرر هذه الخطوة للعمود الثاني. هذه المرة فقط ، قم بتعيين القيمة الافتراضية عند 20٪ وستظل قيمة الهاتف المحمول عند 100٪ .

بعد القيام بذلك ، احفظ التغييرات واستعد لإضافة رموز الوسائط الاجتماعية الخاصة بك وتصميمها.

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

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

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

نحن نختار المبرر الصحيح لسطح المكتب ثم ننتقل إلى خيارات الاستجابة ونركزها.

التالي لأعلى هو التمرير لأسفل إلى قائمة الأيقونة . اختر لون الرمز الذي تريده. هذا هو f for Facebook ، طائر Twitter ، كاميرا Instagram. هذه ليست الخلفية الزرقاء ، على سبيل المثال.

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

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

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

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

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

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

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

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

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

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

وهذا ما يجب أن تشبهه نتائجك النهائية.

سطح المكتب

متحرك

تغليف

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

ما رأيك في أيقونات الوسائط الاجتماعية في القائمة الأساسية؟ أين تميل لوضعهم؟