كيفية إضافة أيقونات اجتماعية إلى تذييل Divi

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

هيا بنا نبدأ.

معاينة Divi Footer مع الرموز الاجتماعية

إليك نظرة على الشكل الذي سيظهر به تذييل على سطح المكتب والجوال.

معاينة سطح المكتب

إليك كيف سيبدو التصميم على سطح المكتب مع الرموز الاجتماعية الجديدة في تذييل Divi.

معاينة المحمول

إليك كيف سيبدو التصميم على الهاتف المحمول مع الرموز الاجتماعية الجديدة في تذييل Divi.

قم بتنزيل قالب تذييل مجاني

أولاً ، سنحتاج إلى قالب تذييل. توفر السمات الأنيقة الكثير من قوالب الرأس والتذييل المجانية التي تتوافق مع القوالب المتوفرة في Divi. هذه القوالب مصممة مسبقًا ويمكن تنزيلها مجانًا. يمكنك العثور على قوالب تذييل مجانية في مدونة Elegant Themes. ابحث عن "التذييل المجاني".

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

قم بتنزيل قالب التذييل المجاني وفك ضغطه. ستحتاج فقط إلى تحميل ملف JSON.

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

استخدم Divi Theme Builder

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

تحميل قالب التذييل

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

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

أضف الرموز الاجتماعية إلى التذييل

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

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

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

بعد ذلك ، افتح الوحدة النصية الجديدة وغيّر النص من الحملات إلى "متابعنا".

بعد ذلك ، انسخ وحدة Divider تحت عنوان الحملات واسحبها تحت عنوان "تابعنا" الجديد.

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

لإضافة الوحدة ، انقر فوق رمز علامة الجمع في الموقع الذي تريد إضافته. قم بالتمرير لأسفل أو ابحث عن Social Media Follow وانقر فوق الوحدة لإدراجها.

إضافة المزيد من الرموز الاجتماعية

بمجرد إضافة الوحدة من Divi Builder ، ستفتح وتعرض لك الرموز الافتراضية. سيكون لديك خياران للمضي قدمًا.

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

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

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

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

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

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

صمم الرموز الاجتماعية الخاصة بك لتتناسب مع التخطيط الخاص بك

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

أولاً ، افتح إعدادات العنوان. انتقل إلى علامة التبويب " تصميم " وأضف 20 بكسل من المساحة المتروكة العلوية. الآن لدينا مسافة بين الحملات و Follow Us. أغلق الوحدة.

• الحشوة العلوية = 20 بكسل

بعد ذلك ، افتح وحدة متابعة الوسائط الاجتماعية. حدد علامة التبويب تصميم وحدد Center Align ضمن Alignment.

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

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

قم بالتمرير لأسفل إلى خيارات الخلفية وأدخل الرقم # 347362. هذا يعطي الأيقونة خلفية خضراء تطابق CTA في التذييل وتبدو رائعة على خلفية تان.

• الخلفية = # 347362

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

• حجم خط الرمز = 24 بكسل

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

• الزوايا الدائرية = 24 بكسل

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

حدد إلى أي مدى تريد تمديد الأنماط إلى (هذه الصفحة ، هذا العمود ، إلخ) وانقر فوق توسيع .

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

نتائج أيقونات ديفي تذييل الاجتماعية

فيما يلي النتائج لكل من سطح المكتب والجوال.

نتائج سطح المكتب

إليك كيف يبدو التخطيط على سطح المكتب مع الرموز الاجتماعية الجديدة في تذييل Divi.

نتائج الجوال

إليك كيف يبدو التخطيط على الهاتف المحمول مع الرموز الاجتماعية الجديدة في تذييل Divi.

خواطر ختامية

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

نريد أن نسمع منك. هل أضفت أيقونات اجتماعية إلى تذييل Divi باستخدام Theme Builder؟ اسمحوا لنا أن نعرف في التعليقات أدناه.