4 أزرار تمرير متحركة لقسم بطل موقع Divi الخاص بك (وكيفية إنشائها)

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

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

نظرة خاطفة

فيما يلي نظرة سريعة على التصميمات التي سنبنيها معًا.

قم بتنزيل مخطط أزرار التمرير المتحركة مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

للبدء ، ستحتاج إلى ما يلي:

1. موضوع Divi مثبت ونشط
2. تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)
3. الصور لاستخدامها لمحتوى وهمي

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

بناء قسم الرأس

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

للبدء ، أنشئ قسمًا عاديًا بصف عمود واحد.

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

لون الخلفية: # 222222

أي خلفية مظلمة ستعمل.

أضف نص الرأس

لإنشاء نص رأس وهمي ، أضف وحدة نصية جديدة إلى صف عمود واحد.

ثم قم بتحديث محتوى النص برأس h1 أعلى نص الفقرة الافتراضي مباشرةً.

<h1>scroll button animation</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

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

خط النص: كارلا
محاذاة نص النص: الوسط
حجم نص العنوان: 5vw
لون النص: فاتح

سيكون هذا هو تصميم القسم الأساسي الذي سنستخدمه لأزرار التمرير المتحركة المختلفة.

تصميم زر التمرير المتحرك رقم 1: نص عمودي مع حركة بطيئة للارتداد

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

هيريس كيفية القيام بذلك.

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

ثم أضف وحدة دعاية مغالى فيها إلى الصف.

ضمن إعدادات blurb ، احذف محتوى النص الافتراضي وأضف ما يلي:

العنوان: التمرير
استخدام الأيقونة: نعم
الرمز: السهم الأيمن (انظر لقطة الشاشة)

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

لون الأيقونة: #ffffff
وضع الصورة / الرمز: اليسار
استخدام حجم خط الأيقونة: نعم
حجم خط الأيقونة: 50 بكسل
نمط خط العنوان: TT
لون نص العنوان: #ffffff
حجم نص العنوان: 14 بكسل
تباعد حروف العنوان: 3 بكسل
ارتفاع خط العنوان: 50 بكسل (نفس حجم خط الأيقونة)

بعد ذلك ، نحتاج إلى إعطاء دعاية مضبوطة عرضًا محددًا وتدويره رأسيًا على النحو التالي:

العرض: 132 بكسل
محاذاة الوحدة: مركز
تحويل المحور Z تدوير: 90 درجة

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

direction: rtl;

إضافة حركة النبض البطيء

لإضافة الرسم المتحرك ، قم بتحديث ما يلي:

نمط الرسوم المتحركة: ترتد
اتجاه الرسوم المتحركة: لأسفل
مدة الرسوم المتحركة: 5000 مللي ثانية
تأخير الرسوم المتحركة: 400 مللي ثانية
حركة الصورة / الأيقونة: من اليسار إلى اليمين

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

الآن دعنا نتحقق من النتيجة النهائية للتصميم رقم 1.

تصميم زر التمرير المتحرك رقم 2: الرسوم المتحركة لنص الشاشة الاسمية العمودية

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

هيريس كيفية القيام بذلك.

قم أولاً بتكرار القسم بالكامل من التصميم رقم 1.

تحديث إعدادات الصف 2

بعد ذلك ، قم بتحديث صف القسم الذي يحتوي على وحدة blurb / زر التمرير كما يلي:

الفائض الأفقي: مخفي
الفائض العمودي: مخفي

تحديث إعدادات الوحدة النمطية Blurb

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

تحويل محور Y للترجمة: 115 بكسل

بعد ذلك ، أضف إعدادات الرسوم المتحركة التالية:

نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: لأسفل
مدة الرسوم المتحركة: 4000 مللي ثانية
كثافة الرسوم المتحركة: 195٪
بدء تعتيم الرسوم المتحركة: 100٪
منحنى سرعة الرسوم المتحركة: خطي
تكرار الرسوم المتحركة: حلقة

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

الآن دعنا نتحقق من النتيجة النهائية للتصميم رقم 3.

تصميم زر التمرير المتحرك رقم 3: علامة تبويب السهم مع الرسوم المتحركة المؤجلة للشريحة لأسفل

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

بالنسبة لهذا التصميم ، سنبدأ بتصميم قسم الرأس الأساسي. حتى تتمكن من تكرار قسم التصميم رقم 3 المكرر ثم حذف الوحدة النمطية في الصف 2.

ثم أضف وحدة نصية إلى صف عمود واحد مباشرة أسفل الصف الأول.

ثم حدِّث محتوى النص بكلمة "تمرير".

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

لون الخلفية: #ffffff
لون نص النص: # 222222
محاذاة النص: مركز
العرض: 50 بكسل
محاذاة الوحدة: مركز
الهامش: 0 بكسل للأسفل
الحشو: 20 بكسل للأعلى ، 20 بكسل للأسفل
زوايا دائرية 5 بكسل أسفل اليسار ، 5 بكسل أسفل اليمين

أضف رمز Blurb

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

ثم احذف العنوان الافتراضي والنص الأساسي. ثم قم بإضافة التحديث التالي:

استخدام الأيقونة: نعم
الرمز: مثلث السهم السفلي (انظر لقطة الشاشة)

ثم قم بتحديث الإعدادات كما يلي:

لون الأيقونة: #ffffff
الهامش: -36 بكسل للأعلى ، 0 بكسل للأسفل

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

ثم أضف css التالي إلى الصورة الدعاية لإخراج بعض الهامش غير الضروري أسفل الرمز.

Blurb Image CSS:

margin-bottom: 0px;

إعدادات الصف 2 والرسوم المتحركة

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

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

نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: لأسفل
مدة الرسوم المتحركة: 1200 مللي ثانية

لون الخلفية للصف 1 ومربع الظل

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

افتح إعدادات الصف 1 كما يلي:

لون الخلفية: # 222222

الفهرس Z: 10

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الرأسي: 80 بكسل
مربع قوة طمس الظل: 22 بكسل
قوة انتشار الظل المربع: -70 بكسل
لون الظل: # 222222 (تأكد من تطابق لون الخلفية)

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

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

تصميم زر التمرير المتحرك رقم 4: تحريك الماوس للرسوم المتحركة

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

هيريس كيفية القيام بذلك.

للبدء ، يمكنك استخدام قسم الرأس الأساسي. ثم أضف صفًا جديدًا أسفل الصف 1.

أضف الوحدة النمطية Blurb

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

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

استخدام الأيقونة: نعم
الرمز: دائرة (انظر لقطة الشاشة)

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

لون الأيقونة: #ffffff
استخدام حجم خط الأيقونة: نعم
حجم خط الأيقونة: 15 بكسل
نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: لأسفل
مدة الرسوم المتحركة: 1200 مللي ثانية
تكرار الرسوم المتحركة: حلقة
صورة / أيقونة متحركة: لا توجد رسوم متحركة

ثم أضف CSS المخصص التالي إلى Blurb Image:

margin-bottom: 0px;

أضف وحدة النص

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

ثم قم بتحديث إعدادات النص التالية:

لون نص النص: #ffffff
محاذاة النص: مركز
العرض: 90 بكسل
الهامش: 10 بكسل للأعلى ، -30 بكسل لليسار

تحديث إعدادات الصف 2

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

العرض: 30 بكسل
الارتفاع: 60 بكسل
الزوايا الدائرية: 16 بكسل
عرض الحدود: 1 بكسل
لون الحدود: #ffffff
نمط الحدود: صلب
الفائض الأفقي: مرئي
الفائض العمودي: مرئي

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

الآن دعنا نتحقق من النتيجة النهائية:

إضافة وظيفة Anchor Link

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

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

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

ثم ابحث عن زر العنصر / التمرير الذي تريد تحويله إلى رابط المرساة وأضف عنوان url يبدأ بعلامة تصنيف (أو رمز رطل) ويتبعه على الفور معرف CSS للعنصر الذي تقفز إليه.

على سبيل المثال ، إذا كان معرف CSS للقسم هو "section-2" ، فيمكنك إضافة "# section-2" كعنوان URL للرابط.

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

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

الحصول على الإبداع!

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

افكار اخيرة

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

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

هتافات!