كيفية إضافة الرموز الاجتماعية إلى قائمة Divi الأساسية
نشرت: 2017-06-27في البرنامج التعليمي Divi اليوم ، سوف نوضح لك كيفية إضافة الرموز الاجتماعية إلى القائمة الأساسية لموقع Divi الخاص بك. باتباع هذا البرنامج التعليمي خطوة بخطوة ، ستتمكن من إضافة رموز اجتماعية إلى أي موقع ويب تقوم بإنشائه - سواء كان ذلك لنفسك أو لعميل.
لدينا بالفعل القدرة على إضافة أيقونات اجتماعية مباشرة إلى رأس وتذييل موقع الويب باستخدام أداة تخصيص سمة Divi. ولكن إذا لم يكن هذا هو ما تبحث عنه ، فقد يساعدك هذا البرنامج التعليمي لأنه في كثير من الحالات ؛ يفضل الأشخاص وجود الرموز الاجتماعية في قائمتهم الأساسية بدلاً من رأس أو تذييل موقع الويب الخاص بهم.
سنوضح لك بالضبط كيف يمكنك إضافتها ، وكيف يمكنك تخصيصها وكيفية فتحها في علامة تبويب جديدة. هذه هي كل الأشياء التي تحتاج حقًا إلى معرفتها حتى تتمكن الرموز الاجتماعية في قائمتك الأساسية من إضافة قيمة مضافة إلى موقع الويب الخاص بك بالكامل.
لماذا تضيف الرموز الاجتماعية إلى القائمة الأساسية؟
تعد مواقع الويب وقنوات التواصل الاجتماعي مكملة في كثير من الحالات. لا يظهر كل المحتوى الذي تتم مشاركته على موقع الويب على قنوات التواصل الاجتماعي والعكس صحيح. هذا هو السبب في أن الترويج لموقع الويب الخاص بك على قنوات التواصل الاجتماعي وقنوات التواصل الاجتماعي الخاصة بك على موقع الويب الخاص بك ليس بالأمر غير المألوف وبصراحة ؛ شجع للغاية.
تريد أن يتفاعل الأشخاص مع شركتك أو علامتك التجارية بالطريقة الأكثر دراية بها. موقع الويب الخاص بك عادة ما يكون " منطقة غير معروفة " بالنسبة لهم. لذلك قد يكون حاجز الاتصال بك مباشرة من خلال موقع الويب الخاص بك أكبر من حاجز قنوات التواصل الاجتماعي. تم دمج معظم الأشخاص الذين يزورون صفحتك على Facebook أو صفحة Twitter بالفعل في المنصات ويمكن للشعور بالراحة أن يؤثر على سلوكهم بشكل إيجابي.
لهذا السبب ، بشكل عام ، يوصى بشدة بوضع أيقونات التواصل الاجتماعي على موقع الويب الخاص بك. ولكن لماذا تشاركها بشكل صريح في قائمتك الأساسية؟ لقد قمنا بإدراج اثنين من الأسباب الرئيسية.
من السهل العثور / تتبع القائمة الزائر أثناء زيارته
عندما تضيف رموزًا اجتماعية إلى موقع الويب الخاص بك ، فأنت تريد أن تكون مرئية قدر الإمكان. يجب ألا يضطر الأشخاص إلى بذل جهد للعثور على الرموز الاجتماعية على موقع الويب الخاص بك. هذا هو المكان الذي يمكن أن يؤدي فيه وضع الرموز الاجتماعية في القائمة الأساسية إلى إحداث فرق. القائمة الأساسية تتبع الشخص طوال فترة إقامته على موقع الويب الخاص بك. ليست هناك حاجة للبحث عن الرموز ، فالأيقونات تأتي إليك. الشيء الوحيد الذي يتعين على الشخص فعله هو النقر وسيصلون إلى هناك.
القائمة الأساسية تتبع الشخص طوال فترة إقامته على موقع الويب الخاص بك. ليست هناك حاجة للبحث عن الرموز ، فالأيقونات تأتي إليك. الشيء الوحيد الذي يتعين على الزائر فعله هو النقر عليها وسيصلون إلى هناك.
اثار العمل
كما ذكرنا من قبل ؛ قنوات التواصل الاجتماعي والمواقع الإلكترونية مكملة لبعضها البعض. إنهم يعملون معًا وعادة ما يكون لديهم نفس الأهداف مثل إعلام العملاء المحتملين وجذبهم إلى الخدمات أو المنتجات التي يتم تقديمها. كلما واجهتهم أكثر ، زادت احتمالية إثارة فضولهم
لدعم الاتصال بين موقع الويب وقنوات التواصل الاجتماعي ، من الجيد مواجهة الزوار بالأيقونات الاجتماعية قدر الإمكان. كلما واجهتهم أكثر ، زادت احتمالية إثارة فضولهم وزادت احتمالية النقر عليهم في النهاية.
كيفية إضافة الرموز الاجتماعية إلى قائمة Divi الأساسية
اشترك في قناتنا على اليوتيوب
تثبيت Font Awesome
بادئ ذي بدء ، نحتاج إلى تثبيت Font Awesome في موقع WordPress الخاص بنا. سنفعل ذلك عن طريق إضافة بعض أكواد CSS إلى خيارات السمات الخاصة بـ Divi.
افتح موقع WordPress الخاص بك ، وانتقل إلى Divi> Theme Options> Integration والصق الكود التالي في قسم <head>:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
يجب الآن إضافة Font Awesome إلى الخطوط التي يتم استخدامها على موقع الويب الخاص بك. يمكنك الآن إضافة هذه الرموز إلى قائمتك الأساسية باتباع الجزء التالي من منشورنا خطوة بخطوة.
ابدأ في إنشاء قائمة أساسية
على الأرجح ، لقد قمت بالفعل بإنشاء القائمة الأساسية المخصصة الخاصة بك حيث قمت بإدراج جميع الصفحات التي تريد ظهورها في القائمة الأساسية لموقع الويب الخاص بك. إذا لم تكن قد قمت بذلك بعد ، فانتقل إلى صفحة "القوائم" داخل المظهر وأنشئ قائمة جديدة.
بعد ذلك ، قم بتسمية القائمة ، أضف الصفحات التي ترغب في ظهورها في القائمة الأساسية الخاصة بك وحدد خيار "القائمة الأساسية" أدناه.
أضف الرموز الاجتماعية
للمضي قدمًا ، نريد إضافة الرموز الاجتماعية. عند إنشاء القائمة الأساسية ، يمكنك اختيار المكان الذي تريد أن تظهر فيه الرموز الاجتماعية الخاصة بك. في معظم الحالات ، ستظهر بعد الصفحات مباشرةً ، ولكن يمكنك وضعها أولاً أيضًا. هناك أيقونات وسائط اجتماعية متاحة لجميع مواقع الويب المهمة والأكثر شهرة ؛ من Facebook إلى Twitter و Instagram و LinkedIn والمزيد.
ابدأ بفتح الرابط التالي على موقع Font Awesome. سنحتاج إلى موقع الويب هذا للجزء التالي من هذا المنشور حيث سنضيف الرموز يدويًا.
أضف الأيقونات يدويًا
تنطبق نفس طريقة العمل على كل رمز اجتماعي تضيفه إلى قائمتك الأساسية. كمثال ، سنوضح لك كيفية إضافة أيقونة Instagram. لجميع الرموز الأخرى التي ترغب في إضافتها أيضًا ؛ تعلم أنها نفس طريقة العمل (تختلف فقط الرمز وشفرة HTML وعنوان URL وفقًا لذلك).
افتح خيار "الروابط المخصصة" وسترى حقلين ظاهرين: عنوان URL وتسمية التنقل. من الواضح أن حقل عنوان URL هو المكان الذي تكتب فيه عنوان URL الذي يقود الزائر إلى إحدى قنوات التواصل الاجتماعي. في هذا المثال ، نريد أن تقود الأيقونة إلى Instagram ، لذا اكتب عنوان URL الخاص بك على Instagram.
بعد ذلك ، انتقل إلى موقع Font Awesome على الويب في متصفحك وابحث عن أيقونة Instagram من خلال شريط البحث. وبالمثل ، يمكنك البحث عن Facebook و LinkedIn وأي رمز آخر.
بمجرد النقر فوق أيقونة Instagram ، سترى أن موقع الويب يوفر رمز HTML التالي:
<i class="fa fa-instagram" aria-hidden="true"></i>
هذا هو الرمز الدقيق الذي نحتاج إلى استخدامه في حقل تسمية التنقل ، لذا امض قدمًا وأكمل الرابط المخصص عن طريق نسخ الرمز ولصقه في الحقل.
كرر نفس العملية لكل رمز من الرموز الاجتماعية التي تريد ظهورها في قائمتك الأساسية وألق نظرة على شكلها في الواجهة الأمامية لموقع الويب الخاص بك.
تغيير مظهر الرموز الاجتماعية
التغييرات الجماعية في القائمة الأساسية (بما في ذلك الرموز الاجتماعية)
يتيح لك "مُخصِّص السمات" إجراء جميع تغييرات المظهر التي ترغب في إجرائها على قائمتك الأساسية في مكان واحد.
تنطبق التغييرات التي يمكنك إجراؤها على القائمة الأساسية باستخدام خيارات Divi على الرموز الاجتماعية أيضًا. عندما تقوم بإعطاء لون معين لقائمتك الأساسية ، على سبيل المثال ، سيكون للرموز الاجتماعية نفس اللون. هذا لأننا نستخدم خطًا بدلاً من صورة لإنجاح هذا العمل.
يمكنك إجراء كل هذه التغييرات التي تريد إجراؤها على المظهر في مُخصص القوالب من خلال الانتقال إلى Header & Navigation> Primary Menu Bar. يتم تطبيق التغييرات التي تجريها في الوقت الفعلي وتمنحك منظورًا جيدًا حول الشكل الذي تريد أن تبدو عليه قائمتك الأساسية.
افتح الرموز الاجتماعية في علامة تبويب جديدة
هذا الجزء من المنشور هو شيء إضافي يمكنك القيام به باستخدام الرموز الاجتماعية. ربما لا ترغب في إرسال الزوار بعيدًا عن موقع الويب ، على الرغم من أنهم ينتقلون إلى قنوات التواصل الاجتماعي الخاصة بك. تريد الحفاظ على كلا التفاعلين على قيد الحياة لأطول فترة ممكنة من خلال فتح روابط الوسائط الاجتماعية في علامة تبويب جديدة في كل مرة ينقر فيها شخص ما عليها.
يمكننا بسهولة جعل خيار "فتح في علامة تبويب جديدة" يعمل على جميع أيقونات الوسائط الاجتماعية من خلال العودة إلى القائمة التي أنشأناها من قبل. نحتاج إلى إجراء جميع التعديلات يدويًا على كل رمز من الرموز. في هذا المثال ، سنجري التغييرات على أيقونة Instagram.
انطلق واحذف عنوان URL الذي قدمته في حقل URL والصق الرمز التالي في عنوان URL للتنقل بدلاً من ذلك:
<a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
افعل نفس الشيء لكل رمز إذا كنت تريد فتحها في علامة تبويب جديدة. في كل مرة ينقر فيها الزائر عليها ، سيتم فتحها في علامة تبويب جديدة تتيح لك الاحتفاظ بزوارك لأطول فترة ممكنة.
افكار اخيرة
سيساعدك هذا البرنامج التعليمي بالتأكيد على دمج الرموز الاجتماعية في موقع Divi الخاص بك بالطريقة التي تريدها. يمكنك تخصيصها وجعلها تتناسب مع بقية القائمة الأساسية. إذا كان لديك أي أسئلة أو اقتراحات. تأكد من ترك تعليق في قسم التعليقات أدناه. سنبقى على اتصال ونحاول الإجابة على جميع الأسئلة أو الاقتراحات التي لديك.
تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!
صورة مميزة عبر Oceans / shutterstock.com