هل تريد أن تجعل أيقونات الوسائط الاجتماعية الخاصة بك ثابتة مع Divi؟

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

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

لذا ، إذا كنت تبحث عن تحكم كامل في تصميم زر الوسائط الاجتماعية ، فهذا البرنامج التعليمي يناسبك!

مسح

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

الشبكات الاجتماعية اللاصقة مع Divi

قم بإنشاء صفحة جديدة باستخدام "Divi Builder"

من لوحة تحكم WordPress ، انتقل إلى "صفحات> إضافة جديد"

أعطه عنوانًا منطقيًا لك ثم انقر فوق "استخدم DiviBuilder"

في هذا البرنامج التعليمي ، سنستخدم تخطيطًا محددًا مسبقًا. للقيام بذلك ، انقر فوق "تصفح التنسيقات"

ابحث عن التخطيط وحدده "مصمم أزياء"

اختر التخطيط "هبوط" ثم انقر فوق "استخدم هذا التخطيط"

تصميم وحدة "متابعة الوسائط الاجتماعية" في Divi

انشاء القسم

أضف قسمًا عاديًا جديدًا إلى التخطيط.

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

افتح إعدادات القسم وقم بتحديث لون الخلفية لمطابقة التخطيط كما يلي:

  • لون الخلفية: # fff9f2

تحت علامة التبويب تصميم، قم بتوسيع خيار التباعد وتعديل المعلمات التالية:

  • المساحة المتروكة (أعلى وأسفل): 10 بكسل

إنشاء الخط

داخل القسم ، أضف صفًا إلى عمود.

افتح إعدادات الخط ، واسحب خيار التباعد وقم بتغيير الإعدادات على النحو التالي:

  • استخدام عرض مزراب مخصص: نعم
  • عرض الحضيض: 1
  • العرض: 100٪
  • العرض الأقصى: 100٪

استمر بالتمرير لأسفل الخيار التباعد

  • المساحة المتروكة (أعلى وأسفل): 0 بكسل

إنشاء وحدة "متابعة وسائل التواصل الاجتماعي" اللاصقة

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

تحديث إعدادات الوحدة

افتح إعدادات وحدة "متابعة الوسائط الاجتماعية". 

أول شيء يتعين علينا القيام به هو إضافة موضع ثابت إلى الوحدة. 

تحت علامة التبويب متقدم، اسحب الخيار تأثيرات التمرير وتحديث ما يلي:

  • موقف مثبت: التمسك بالأعلى

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

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

  • وحدة المحاذاة: المركز
  • لون الرمز: # 000000 (سطح المكتب) ، #ffffff (تحوم) ، #ffffff (مثبت)
  • العرض: 100٪
  • العرض الأقصى: 100٪
  • المساحة المتروكة: 20 بكسل (أعلى) ، 12 بكسل (أسفل) ، 10 بكسل (يسار ويمين)

إعدادات الوسائط الاجتماعية

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

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

يجب أن يكون لديك بالفعل شبكتان اجتماعيتان ضمن علامة التبويب محتويات بشكل افتراضي. احذف واحدًا وانقر لتحرير الباقي.

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

  • الخلفية: شفافة (سطح المكتب) ، # fe2c55 (تحوم) ، # 000000 (مثبت)

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

يمكنك الآن التبديل بين علامات التبويب لرؤية لون الخلفية لجميع الحالات الثلاث (سطح المكتب ، وتحوم ، ولصق).

بعد ذلك ، دعنا نمنح الرمز شكلًا بيضاويًا لطيفًا وحدودًا تلائم التخطيط بشكل أفضل. تحت علامة التبويب تصميم، قم بتحديث ما يلي:

  • زوايا دائرية: 50٪
  • عرض الحدود: 1 بكسل
  • لون الحد: # 000000 (سطح المكتب) ، شفاف (تحوم)

حاليًا ، يحتوي الرمز على شكل دائرة. للحصول على شكل بيضاوي أكثر ، سنقوم بتغيير إعدادات التباعد على النحو التالي:

  • الهامش (يسار ويمين): 15 بكسل (سطح المكتب) ، 0 بكسل (مثبت) ، 0 بكسل (الهاتف)
  • الحشو (يسار ويمين): 16 بكسل (سطح المكتب) ، 14 بكسل (كمبيوتر لوحي) ، 0 بكسل (هاتف)

شبكة اجتماعية مكررة

الآن وقد انتهينا من تصميم أول شبكة اجتماعية ، يمكننا تكرار الرمز لإنشاء شبكات أخرى. 

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

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

للقيام بذلك ، افتح إعدادات الشبكة الاجتماعية الثانية وقم بتحديث ما يلي:

  • الشبكة الاجتماعية: Facebook
  • الخلفية: شفافة (سطح المكتب) ، # 3b5998 (تحوم)

استمر في نفس العملية لتحديث بقية الشبكات الاجتماعية.

نتيجة نهائية

الآن دعنا نرى النتيجة التي تم الحصول عليها على أحجام الشاشات المختلفة.

الشبكات الاجتماعية اللاصقة مع Divi

تحميل DIVI Now !!!

الشبكات الاجتماعية اللاصقة مع Divi
الشبكات الاجتماعية اللاصقة مع Divi

تحميل DIVI Now !!!

وفي الختام

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

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

إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.

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

لكن في غضون ذلكشارك هذا المقال على الشبكات الاجتماعية المختلفة.

...