كيفية تصميم Pop Out Social Media Follow Button Bar إلى قالب صفحتك في Divi

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

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

دعنا نقفز ونبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على أزرار متابعة الوسائط الاجتماعية التي تم إنشاؤها في هذا البرنامج التعليمي.

قم بتنزيل قالب صفحة شريط أزرار متابعة الوسائط الاجتماعية المنبثقة مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط وإضافة أحد ملفات json إلى Divi Theme Builder باستخدام خيار Theme Builder Portability.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى تثبيت وتفعيل Divi Theme. تأكد من أن لديك أحدث إصدار من Divi.

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

بعد ذلك ، أنت على استعداد للذهاب.

إنشاء شريط أزرار متابعة الوسائط الاجتماعية منبثق لقالب الصفحة في Divi

إنشاء قالب جديد

من لوحة معلومات WordPress ، انتقل إلى Divi> Theme Builder. ثم انقر فوق مربع "إضافة نموذج جديد" لإنشاء نموذج جديد.

قم بتعيين القالب للصفحة (الصفحات) التي تريد أن يتم عرض شريط العرض الترويجي فيها.

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

ثم حدد الخيار "البناء من الصفر".

إنشاء شريط أزرار متابعة الوسائط الاجتماعية

إنشاء صف جديد

بالنسبة للمبتدئين ، دعنا نضيف صفًا من عمود واحد إلى القالب.

إضافة وحدة أزرار متابعة الوسائط الاجتماعية

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

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

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

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

إضافة وحدة زر

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

محتوى الزر

بعد ذلك ، قم بتحديث محتوى الزر على النحو التالي:

• نص الزر: اتبع
• URL ارتباط الزر: #

أنماط الزر وتحديد المواقع

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

• حجم نص الزر: 16 بكسل
• لون نص الزر:
• عرض حد الزر: 0 بكسل
• تباعد حرف الزر: 1 بكسل
• زر الخط: مونتسيرات
• وزن خط الزر: غامق
• رمز الزر: السهم الأيمن (انظر لقطة الشاشة)
• الهامش: 100٪ متبقي
• الحشو: 100 بكسل للأسفل

ثم أضف CSS المخصص التالي إلى العنصر الرئيسي:

position: absolute;

إعدادات الصف

بمجرد أن يتم تصميم الزر ويكون جاهزًا للعمل ، قم بتحديث إعدادات الصف على النحو التالي:

• لون الخلفية: #ffffff
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 64 بكسل
• المساحة المتروكة: 24 بكسل للأعلى ، 16 بكسل للأسفل ، 16 بكسل لليسار

ظل مربع الصف

• Box Shadow: انظر لقطة الشاشة
• مربع قوة طمس الظل: 0 بكسل
• مربع قوة طمس الظل: 30 بكسل
• لون الظل (سطح المكتب): شفاف
• لون الظل (تحوم): rgba (0،0،0،0.2)

وضع الصف

ثم أضف CSS المخصص التالي إلى الصف Main Element:

position: fixed;
top: calc(33.33vh - 55px);
left: 0;

سيؤدي هذا إلى وضع الصف في موضع ثابت بمقدار ثلث الطريق لأسفل من أعلى المتصفح.

انبثق عند تأثير التمرير باستخدام هوامش مخصصة

أضف الآن قيم الهامش التالية لإضافة المنبثقة عند التمرير.

• الهامش (سطح المكتب): -64 بكسل متبقي
• الهامش (التمرير): 0 بكسل لليسار

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

إضافة وحدة محتوى النشر إلى النموذج

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

إضافة صف جديد مع وحدة محتوى المشاركة

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

ثم أضف وحدة محتوى النشر إلى الصف.

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

قم بتحديث ما يلي:

• العرض: 100٪
• العرض الأقصى: 100٪
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

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

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

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

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

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

افكار اخيرة

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

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

هتافات!