كيفية إنشاء شريط تمرير شهادة مضغوط لرأس في Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

هنا هو شريط تمرير الشهادة المضغوط الذي سنقوم ببنائه باستخدام Divi Slider Module.

وها هو نفس شريط تمرير الشهادة مضافًا إلى رأس عام.

وإليكم ما يبدو على الهاتف المحمول.

قم بتنزيل التخطيط والقالب مجانًا

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

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

تنزيل مجاني

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

تحميل

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

قم باستيراد التخطيط إلى مكتبة Divi

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد واختر ملف التنزيل من جهاز الكمبيوتر الخاص بك. سيكون ملف JSON المسمى "divi-short-testimonial-slider-module-layout.json".

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

قم باستيراد قالب الرأس إلى Divi Theme Builder

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

ثم استخدم رمز قابلية النقل في أعلى يمين الصفحة لاستيراد ملف JSON. سيكون الملف المسمى "divi-short-testimonial-slider-header-template.json".

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

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

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

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

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

كيفية إنشاء شريط تمرير شهادة مضغوط في Divi

أضف صفًا جديدًا ووحدة منزلق

للبدء ، أضف صفًا مكونًا من عمود واحد إلى القسم.

ثم أضف وحدة منزلق إلى الصف.

تحرير الشرائح

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

محتوى الشريحة

ضمن علامة تبويب المحتوى في إعدادات الشريحة ، قم بتحديث ما يلي:

• العنوان: "Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget ".
• نص الزر: قراءة الكل
• الجسم: - تاتيانا جاجلمان

بمجرد الانتهاء من ذلك ، احفظ إعدادات الشريحة.

تحديث إعدادات شريط التمرير

ضوابط شريحة وإخفاء مكررة

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

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

• إظهار الضوابط:

تحديث الخلفية لجميع الشرائح

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

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

• اللون الأيسر متدرج للخلفية: # 000000
• لون الخلفية المتدرج الأيمن: # 000000
• حجم صورة الخلفية: صالح
• موضع صورة الخلفية: مركز اليسار
• مزيج صورة الخلفية: اللمعان

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

إعدادات تصميم شريط التمرير

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

تراكب

• استخدام تراكب الخلفية: نعم
• لون تراكب الخلفية: rgba (0،0،0،0.7)

نص العنوان

• مستوى عنوان العنوان: H4
• خط العنوان: Josefin Sans
• وزن خط العنوان: متوسط
• محاذاة نص العنوان: يسار
• حجم نص العنوان: 16 بكسل (سطح المكتب والجهاز اللوحي) ، 14 بكسل (هاتف)
• ارتفاع خط العنوان: 1.5em

نص أساسي

• خط الجسم: جوزفين سانس
• محاذاة النص الأساسي: يسار
• لون النص الأساسي: #aaaaaa
• تباعد حروف الجسم: 0.05em

زر

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1em
• لون نص الزر: افتراضي (سطح المكتب) ، # 000 (تحوم)
• لون خلفية الزر (سطح المكتب): rgba (255،255،255،0.19)
• لون خلفية الزر (تحوم): #ffffff
• عرض حد الزر: 0 بكسل
• تباعد حرف الزر: 0.05em
• خط الزر: Josefin Sans
• هامش الزر: 0 بكسل للأعلى و 0 بكسل للأسفل
• حشوة الزر: 0 بكسل علوي ، 0 بكسل أسفل ، 0.6em يسار ، 0.6em يمين

الحشو والرسوم المتحركة التلقائية

ثم قم بتحديث تباعد شريط التمرير بحيث يكون مضغوطًا واضبط سرعة الحركة التلقائية التي تريدها لشريط التمرير.

• الهامش: 0 بكسل للأعلى و 0 بكسل للأسفل
• الحشو: 1em أعلى ، 1em أسفل ، 5٪ يسار ، 5٪ يمين
• الرسوم المتحركة التلقائية: تشغيل
• سرعة الحركة التلقائية: 3500

لغة تنسيق ويب حسب الطلب

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

عنوان الشريحة

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

سيؤدي هذا إلى التأكد من أن عنوان الشريحة لن ينشئ فاصل أسطر على الشاشات الأصغر.

زر الشريحة

position:absolute;
bottom: 1em;
right: 6%;

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

أسهم الشرائح

font-size: 30px;
margin-top: -15px;

هذا ببساطة يجعل أسهم التنقل المنزلق أصغر لتناسب حجم شريط التمرير المضغوط.

تلميح: أضف نفس لون الخلفية إلى العمود للحصول على انتقالات أكثر سلاسة للشرائح

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

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

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

إضافة صور خلفية المؤلف إلى شريحة

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

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

نتيجة

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

إضافة شريط تمرير الشهادة المضغوط إلى قالب الرأس

حفظ الوحدة في مكتبة Divi

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

إضافة مخطط نموذج الشهادة المضغوط إلى قالب الرأس

قم بتحرير رأس مخصص

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

انتقل إلى Divi> Theme Builder ، ثم انقر لتحرير الرأس المخصص للقالب.

قم بإدراج تخطيط وحدة منزلق الشهادة المحفوظ من المكتبة

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

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

بمجرد تحميله ، احفظ التغييرات.

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

وها هو نفس شريط تمرير الشهادة مضافًا إلى رأس عام.

وهنا نفس شريط تمرير الشهادة بدون صور خلفية المؤلف.

وإليكم ما يبدو على الهاتف المحمول.

افكار اخيرة

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

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

هتافات!