كيفية وضع تلميحات التحويم في أي مكان على صفحتك باستخدام Divi

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

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

دعنا نذهب اليها!

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل The Hover Tooltips Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

قم بإنشاء صفحة جديدة باستخدام تخطيط الصفحة الرئيسية لـ Dog Walker

أضف صفحة جديدة

أول شيء عليك القيام به هو إنشاء صفحة جديدة بالانتقال إلى الصفحات> إضافة جديد . تابع عن طريق إعطاء عنوان لصفحتك ، ونشر الصفحة والتبديل إلى Visual Builder.

تحميل الصفحة المقصودة Dog Walker

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

إنشاء تصميم تلميحات تحوم

أضف صفًا جديدًا إلى أسفل القسم

هيكل العمود (حدد عدد التلميحات التي تحتاجها)

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

أقصى عرض للصف

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

• العرض الأقصى: 1280 بكسل

تباعد

لتقليل المساحة التي تشغلها حاوية الصف ، سنقوم بإزالة الحشوة الافتراضية العلوية والسفلية في إعدادات التباعد.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

فيضانات

نحن نتأكد أيضًا من أن التجاوزات في الصف مرئية في علامة التبويب خيارات متقدمة.

• التدفق الأفقي: مرئي
• الفائض العمودي: مرئي

أضف الوحدة النمطية لنص تلميح الأدوات إلى العمود 1

أضف محتوى إلى Content Box

علامة استفهام سبان

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

Tooltip Div

تابع بإضافة div إلى مربع المحتوى مع فئة "محتوى تلميح الأدوات". أضف محتوى تلميح الأداة الذي تختاره في هذا القسم.

إعدادات النص

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: Open Sans
• لون النص: #ffffff

إعدادات نص H3

قم بتعديل إعدادات نص H3 أيضًا.

• خط العنوان 3: Amatic SC
• لون نص العنوان 3: #ffffff
• حجم نص العنوان 3: 30 بكسل

تحجيم

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

• العرض: 300 بكسل
• الارتفاع: 42 بكسل

تباعد

أضف بعض الحشو العلوي أيضًا.

• الحشوة العلوية: 10 بكسل

الرؤية الافتراضية

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

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

تحوم الرؤية

ومع ذلك ، عند التمرير ، نريد أن يظهر كل شيء. سنفعل ذلك بجعل الفائض مرئيًا عند التمرير.

• التدفق الأفقي: مرئي
• التدفق العمودي: مرئي

أضف وحدة التعليمات البرمجية أسفل وحدة النص

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

أضف كود CSS إلى Style Divs في وحدة النص

أضف الأسطر التالية من كود CSS لتصميم الأجزاء المختلفة من وحدة النص:

<style>
.question-mark {
background-color: #000;
padding: 10px 16px 10px 16px;
border-radius: 500px;
}

.tooltip-content {
background-color: #ee6a5b;
padding: 20px;
border-radius: 5px;
}</style>

استنساخ وحدة نص تلميح الأدوات مرتين ووضعها في الأعمدة المتبقية

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

تغيير محتوى تلميح الأدوات

تأكد من تغيير محتوى تلميح الأدوات لكل نسخة مكررة.

تغيير موضع تلميح الأدوات (باستخدام ترجمة التحويل)

تلميح # 1

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

• اليمين: -450 بكسل (سطح المكتب) ، -2000 بكسل (الجهاز اللوحي) ، -1900 بكسل (الهاتف)

تلميح # 2

انتقل إلى وحدة نص تلميح الأدوات في العمود الثاني وقم بتغيير قيم التحويل المترجمة كما يلي:

• اليمين: -400 بكسل (سطح المكتب) ، -1300 بكسل (جهاز لوحي) ، -1250 بكسل (هاتف)

تلميح # 3

افعل نفس الشيء لوحدة نص تلميح الأدوات في العمود 3 وقد انتهيت!

• اليمين: -500 بكسل (سطح المكتب) ، -600 بكسل (الجهاز اللوحي والهاتف)

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

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