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

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

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

تحقق من ذلك!

نظرة خاطفة

إليك نظرة خاطفة على تأثيرات التمرير التي سننشئها.

الجزء 1: تحريك ظلال الصندوق لإبراز أزرار متابعة الوسائط الاجتماعية الخاصة بك

من الحدود إلى النقاط

النقاط للحدود

كذاب الظلال 1

كذاب الظلال 2

ابدأ في إنشاء الجزء الأول من تأثيرات التمرير

الجزء 2: تغيير اللون والحجم والشكل عند التحويم

تغيير الحجم واللون

تغيير الحجم واللون والشكل

ابدأ في إنشاء الجزء الثاني من تأثيرات التمرير

الجزء 3: تأثيرات المرشح

ابدأ في بناء الجزء الثالث من تأثير التمرير

الجزء 4: أيقونات كبيرة مع شاشة مزج وتأثيرات تصفية

ابدأ في بناء الجزء الرابع من تأثير التمرير

ابدء

اشترك في قناتنا على اليوتيوب

للحصول على الأشياء المتدحرجة لهذا البرنامج التعليمي ، كل ما تحتاجه حقًا هو Divi Theme مثبتًا ونشطًا. ثم قم بإنشاء صفحة جديدة وقم بتسمية صفحتك بعنوان. ثم انقر لاستخدام Divi Builder وحدد خيار استخدام تخطيط Premade. من النموذج المنبثق Load from Library ، حدد App Developer Layout Pack. ثم انقر لاستخدام الأزرار لبدء تصميم أزرار متابعة الوسائط الاجتماعية الخاصة بنا ، سنستخدم تخطيط الصفحة الرئيسية لمطور التطبيق.

انشر صفحتك وانقر على الزر "إنشاء في الواجهة الأمامية".

الآن احذف جميع أقسام الصفحة باستثناء القسم الذي يحتوي على أزرار متابعة وسائل التواصل الاجتماعي في أسفل الصفحة.

سيكون هذا بمثابة نموذج بدأ لإنشاء تأثيرات التمرير الخاصة بنا.

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

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

أنت الآن جاهز لبدء إنشاء تأثيرات التمرير.

هيا بنا نبدأ.

# 1 Moving Box Shadows لإبراز أزرار متابعة الوسائط الاجتماعية الخاصة بك

من الحدود إلى النقاط

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

ثم انسخ لون الخلفية المستخدم للرمز إلى الحافظة الخاصة بك (# 3b5998). سيتم استخدام هذا اللون لظل الصندوق.

افتح الآن علامة تبويب التصميم وقم بتحديث ما يلي:

Box Shadow: انظر لقطة الشاشة
Box Shadow Vertical Position: 0 بكسل (افتراضي) ، -46 بكسل (تحوم)
مربع قوة طمس الظل: 0 بكسل
قوة انتشار الظل المربع: 5 بكسل (افتراضي) ، -16 بكسل (تحوم)

بالنسبة للون الظل ، الصق لون الخلفية (# 3b5998) وقم بتقليل التعتيم بنسبة 50٪. سيعطيك هذا نسخة أخف من لون خلفية الزر.

لون الظل: rgba (59،89،152،0.5)

الآن انقر بزر الماوس الأيمن فوق فئة نمط Box Shadow وحدد Copy Box Shadow Styles.

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

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

فيما يلي ألوان ظل الصندوق لكل شبكة من الشبكات الاجتماعية المتبقية:

لون ظل مربع تويتر: rgba (0،172،237،0.5)
لون ظل مربع Instagram: rgba (234،44،89،0.5)
لون الظل Dribble Box: rgba (234،76،141،0.5)
لون ظل صندوق يوتيوب: rgba (168،36،0،0.5)

بمجرد تحديث ألوان ظل الصندوق ، تحقق من النتيجة النهائية.

النقاط للحدود

يمكنك بسهولة عكس تأثير التمرير عن طريق تبديل القيم الافتراضية وقيم التمرير للوضع الرأسي للظل المربع وقوة الانتشار.

قم بتكرار القسم (إذا كنت تريد الاحتفاظ بتصميم "الحدود إلى النقاط") ثم افتح الوسائط الاجتماعية ، اتبع إعدادات الوحدة. ثم افتح الإعدادات الخاصة بشبكة Facebook الاجتماعية وقم بتحديث ما يلي:

Box Shadow Vertical Position: -46 بكسل (افتراضي) ، 0 بكسل (تحوم)
قوة انتشار الظل المربع: -16 بكسل (افتراضي) ، 5 بكسل (تحوم)

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

بمجرد الانتهاء ، سيبدو تصميمك النهائي هكذا.

تأثير كذاب الظلال

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

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

Box Shadow Horizontal Position: 140 بكسل (افتراضي) ، 0 بكسل (تحوم)
Box Shadow Vertical Position: -70 بكسل (افتراضي) ، 0 بكسل (تحوم)

بالنسبة لشبكة Twitter الاجتماعية ، قم بتحديث ما يلي:

Box Shadow Horizontal Position: 70 بكسل (افتراضي) ، 0 بكسل (تحوم)
Box Shadow Vertical Position: -70 بكسل (افتراضي) ، 0 بكسل (تحوم)

بالنسبة لشبكة Instagram الاجتماعية ، قم بتحديث ما يلي:

Box Shadow Horizontal Position: 70 بكسل (افتراضي) ، 0 بكسل (تحوم)
Box Shadow Vertical Position: -70 بكسل (افتراضي) ، 0 بكسل (تحوم)

بالنسبة لشبكة Dribble الاجتماعية ، قم بتحديث ما يلي:

Box Shadow Horizontal Position: -70 بكسل (افتراضي) ، 0 بكسل (تحوم)
Box Shadow Vertical Position: -70 بكسل (افتراضي) ، 0 بكسل (تحوم)

بالنسبة لشبكة Youtube الاجتماعية ، قم بتحديث ما يلي:

Box Shadow Horizontal Position: -140 بكسل (افتراضي) ، 0 بكسل (تحوم)
Box Shadow Vertical Position: -70 بكسل (افتراضي) ، 0 بكسل (تحوم)

تحقق من النتيجة النهائية.

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

# 2 تغيير اللون والحجم والشكل عند التحويم

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

تغيير اللون

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

للقيام بذلك ، افتح وحدة متابعة الوسائط الاجتماعية ثم افتح إعدادات شبكة Facebook. قم بتحديث ما يلي:

لون الخلفية: # 333333 (افتراضي) ، # 3b5998 (تحوم)

ثم تابع هذه العملية لتحديث ألوان الخلفية الأربعة المتبقية للشبكة الاجتماعية على النحو التالي:

لون خلفية Twitter: # 333333 (افتراضي) ، # 00aced (تحوم)
لون خلفية Instagram: # 333333 (افتراضي) ، # ea2c59 (تحوم)
لون خلفية المراوغة: # 333333 (افتراضي) ، # ea4c8d (تحوم)
لون خلفية Youtube: # 333333 (افتراضي) ، a82400 (تحوم)

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

تغيير الحجم

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

للقيام بذلك ، افتح إعدادات شبكة Facebook وأضف أنماط ظل المربع التالية:

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الرأسي: 0 بكسل
مربع قوة طمس الظل: 0 بكسل
قوة انتشار الظل المربع: 0 بكسل (افتراضي) ، 10 بكسل (تحوم)
لون الظل: # 3b5998 (يجب أن يكون هذا هو نفس لون خلفية المرور فوق الزر)

لتسريع عملية إضافة تصميم ظل الصندوق نفسه إلى باقي أزرار الشبكة الاجتماعية ، انقر بزر الماوس الأيمن فوق فئة ظل المربع لشبكة Facebook وانقر فوق "Save Box Shadow Styles".

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

الآن كل ما عليك فعله هو تحديث لون ظل الصندوق باللون الصحيح للشبكة الاجتماعية الذي يطابق لون خلفية التمرير.

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

لون ظل مربع Twitter: # 00aced
لون ظل مربع Instagram: # ea2c59
لون ظل صندوق المراوغة: # ea4c8d
لون ظل يوتيوب بوكس: # a82400

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

تغيير الشكل

لتغيير شكل الزر عند التمرير ، كل ما عليك فعله هو ضبط خيار "Rounded Corners". تحتوي وحدة متابعة الوسائط الاجتماعية هذه حاليًا على الزوايا الدائرية التي تم ضبطها على 40 بكسل مما يجعل الأزرار دائرية. إذا أردنا تغييره إلى مربع ، فكل ما عليك فعله هو ضبط الزوايا المستديرة على 0 بكسل عند التحويم.

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

الزوايا الدائرية (تحوم): 4 بكسل على الزوايا الأربع

ثم انسخ أنماط الحدود والصقها في كل شبكة متبقية.

ها هو التصميم النهائي.

# 3 تأثيرات التصفية

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

تأثيرات Saturation و Invert Filter على التمرير

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

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

التشبع: 0٪ (افتراضي) ، 100٪ (تحوم)
عكس: 100٪ (افتراضي) ، 0٪ (تحوم)

تحقق من النتيجة.

# 4 أيقونات ملونة كبيرة مع مزيج الشاشة وتأثيرات التصفية

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

ثم افتح إعدادات متابعة الوسائط الاجتماعية واحذف شبكة twitter الاجتماعية الافتراضية مع ترك عنصر شبكة التواصل الاجتماعي facebook فقط.

ثم قم بتحديث إعدادات متابعة وسائل التواصل الاجتماعي على النحو التالي:

لون الخلفية: #ffffff
محاذاة العنصر: المركز
وضع المزج: الشاشة

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

لون الخلفية: # 000000
الهامش المخصص: 10 بكسل يسار ، 10 بكسل يمين
الحشو المخصص: 10 بكسل للأعلى ، 10 بكسل للأسفل ، 10 بكسل لليسار ، 10 بكسل لليمين
التشبع: 0٪ (افتراضي) ، 100٪ (تحوم)
عكس: 100٪ (افتراضي) ، 0٪ (تحوم)

احفظ التغييرات.

ثم قم بتكرار عنصر شبكة التواصل الاجتماعي facebook 4 مرات بحيث يكون لديك إجمالي 5 أزرار للشبكات الاجتماعية.

افتح الآن كل عنصر من عناصر الشبكة الاجتماعية المكررة وقم بتحديث الشبكة الاجتماعية ولون الخلفية إلى # 000000.

احفظ التغييرات.

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

للقيام بذلك ، افتح إعدادات الصف وقم بتحديث ما يلي:

لون خلفية العمود 1: # 0c71c3

لاحظ كيف تغيرت ألوان الأيقونة إلى لون الخلفية هذا.

الآن تحقق من النتيجة حتى الآن.

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

افتح وحدة متابعة الوسائط الاجتماعية وأضف معرف CSS التالي ضمن علامة التبويب خيارات متقدمة.

معرف CSS: رموز كبيرة

بعد ذلك ، افتح إعدادات صفحتك وأضف ملف css المخصص التالي.

@media (min-width: 980px){
#large-icons.et_pb_social_media_follow li a.icon::before {
  font-size: 50px;
 line-height: 100px;
  width: 100px;
  height: 100px;
}
}

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

تحقق من النتيجة النهائية.

افكار اخيرة

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

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

هتافات!