هل ترغب في إدراج شريط تمرير مدمج لرأس Divi؟
تعد إضافة الشهادات إلى موقعك طريقة فعالة لبناء مصداقية لعملك (أو علامتك التجارية) وبناء الثقة بين آخر.
شريط تمرير الشهادة هو أداة مفيدة لعرض الشهادات في مكان واحد. مع أخذ ذلك في الاعتبار ، من المنطقي إضافة شريط تمرير شهادة مدمج إلى رأسك بحيث تكون هذه الشهادات من أول الأشياء التي يراها المستخدم عند زيارته موقع على شبكة الإنترنت.
في هذا البرنامج التعليمي ، سوف نوضح لك كيفية إنشاء شريط تمرير شهادة مدمج لعرض الشهادات القصيرة في رأس موقع انترنت.
للقيام بذلك، سنقوم بتعديل وحدة Divi Slider بطريقة ممتعة وفريدة من نوعها.
لنبدأ!
ولكن قبل أن تتمكن من اكتشاف دليلنا على Divi ، أفضل ثيم WordPress في العالم وأسهل استخدامًا
مسح
هنا هو شريط تمرير الشهادة المضغوط الذي سنقوم ببنائه باستخدام وحدة Divi Slider.
وها هو نفس شريط تمرير الشهادة مضافًا إلى رأس عام.
وإليك ما يبدو على الهاتف المحمول.
قم بإنشاء صفحة جديدة باستخدام Divi Builder
للبدء ، سوف تحتاج إلى القيام بما يلي:
من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.
أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder
ثم انقر فوق ابدأ البناء (البناء من الصفر)
بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.
كيفية إنشاء شريط تمرير شهادة مضغوط في Divi
أضف صفًا جديدًا ووحدة منزلق
للبدء ، أضف صفًا من عمود واحد إلى القسم.
ثم أضف وحدة Slider إلى الخط.
تحرير الشرائح
ضمن إعدادات شريط التمرير ، قم بإزالة الشريحة الثانية الافتراضية الموجودة ضمن علامة التبويب وصف المنتج، ثم انقر لتغيير الإعدادات للشريحة المتبقية.
محتوى الشريحة
تحت علامة التبويب وصف المنتج من إعدادات الشريحة ، قم بتحديث ما يلي:
- العنوان: "Donec solicitudin molestie malesuada. Vivamus suscipit عذاب إيجيت.
- الزر: قراءة الكل
- الجسم: - تاتيانا جاجلمان
بمجرد الانتهاء من ذلك ، احفظ إعدادات الشريحة.
اقرأ أيضا: Divi: كيفية استخدام إعدادات قناع الخلفية وخيارات تحويل النمط
تحديث إعدادات شريط التمرير
تكرار الشريحة وإخفاء الضوابط
بعد تحديث الشريحة الأولى بـ محتويات، قم بتكرار هذه الشريحة لإنشاء شريحة إضافية واحدة أو أكثر.
ثم تحت مجموعة الخيار عناصر، قم بإخفاء عناصر تحكم شريط التمرير عن طريق تحديث ما يلي:
- عرض التحكم:
قم بتحديث خلفية كل الشرائح
بعد ذلك ، سنضيف خلفية سيتم استخدامها لجميع الشرائح.
لإضافة الخلفية ، قم بتحديث ما يلي:
- تدرج الخلفية:
- توقف متدرج 0٪: # 000000
- توقف متدرج 100٪: # 000000
- الصورة الخلفية:
- الحجم: صالح
- المركز: يسار الوسط
- مزيج: لمعان
إعدادات المنزلق
تحت علامة التبويب تصميم، قم بتحديث ما يلي:
غطاء
- استخدام تراكب الخلفية: نعم
- لون تراكب الخلفية: rgba (0,0,0,0.7،XNUMX،XNUMX،XNUMX)
نص العنوان
- العنوان:
- مستوى العنوان: H4
- الخط: Josefin Sans
- وزن الخط: متوسط
- محاذاة النص: يسار
- حجم النص: 16 بكسل (سطح المكتب والجهاز اللوحي) ، 14 بكسل (الهاتف)
- ارتفاع الخط: 1,5em
نص النص
- الجسم :
- الخط: Josefin Sans
- محاذاة النص: يسار
- لون النص: #aaaaaa
- تباعد الأحرف: 0,05em
زر
- استخدام حجم مخصص للزر: نعم
- زر:
- حجم النص: 1em
- لون النص: افتراضي (سطح المكتب) ، # 000 (تحوم)
- لون الخلفية (سطح المكتب): rgba (255,255,255,0.19،XNUMX،XNUMX،XNUMX)
- لون الخلفية (تحوم): #ffffff
- عرض الحدود: 0 بكسل
- تباعد الأحرف: 0,05em
- الخط: Josefin Sans
- الهامش: 0 بكسل (أعلى وأسفل)
- المساحة المتروكة: 0 بكسل (أعلى وأسفل) ، 0,6em (يسار ويمين)
التعبئة التلقائية والرسوم المتحركة
بعد ذلك ، قم بتحديث تباعد شريط التمرير ليكون مضغوطًا واضبط سرعة الرسوم المتحركة التلقائية المطلوبة.
- الهامش: 0 بكسل (أعلى وأسفل)
- الحشو: 1em (أعلى وأسفل) ، 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.
يمكنك القيام بذلك عن طريق التمرير فوق وحدة شريط التمرير والنقر على " إضافة إلى مكتبة". ثم قم بتسمية التخطيط وانقر على الزر " حفظ في المكتبة".
تمت إضافة تخطيط وحدة شهادة مدمجة إلى قالب العنوان
تحرير رأس مخصص
بمجرد حفظ وحدة شريط تمرير الشهادة الجديدة في المكتبة ، نكون مستعدين لإضافتها إلى عنوان مخصص.
الوصول إلى ديفي> باني الموضوع، ثم انقر فوق الرمز الذي يسمح لك بالتعديل " مخصص رأس".
أدخل وحدة منزلق الشهادة المحفوظة من المكتبة
في محرر تخطيط الرأس ، انقر لإضافة وحدة شريط تمرير الشهادات المدمجة حيث تريد ظهورها.
في وزارة الدفاع "InsertModule"، حدد علامة التبويب "إضافة من المكتبة". ابحث عن شريط تمرير الشهادة المضغوط الذي حفظته مسبقًا في المكتبة وحدده.
بمجرد التحميل ، احفظ التغييرات.
أنظر أيضا: Divi: كيفية عرض وحدة Fullwidth Header في وضع ملء الشاشة
نتيجة نهائية
يوجد أدناه شريط تمرير الشهادة الذي تمت إضافته إلى العنوان العام.
هنا لدينا شريط تمرير الشهادة بدون صور خلفية المؤلف.
وإليك ما يبدو على الهاتف المحمول.
تحميل DIVI الآن !!!
وفي الختام
يمكن أن يكون شريط التمرير المدمج للشهادة إضافة جديدة إلى رأس أي شيء موقع انترنت تسعى إلى تعزيز مصداقية خدماتها في أبرز مكان على موقعها الإلكتروني.
يمكنك أيضًا استخدامه لإعادة التوجيه آخر إلى صفحة شهادة أو صفحة مبيعات لزيادة التحويلات. نأمل أن يكون هذا مفيدًا لك في مشاريع Divi التالية.
إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
