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

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

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

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

ماذا تحتاج

في هذا البرنامج التعليمي ، ستحتاج إلى ما يلي:

• موضوع ديفي
• الصفحة المقصودة لـ Fitness Gym من حزمة تخطيط Fitness Gym (متوفرة من Divi Builder)
• صورة لاستخدامها في صورة الخلفية بدقة 320 × 507 بكسل. لا تتردد في سحب هذا على سطح المكتب الخاص بك واستخدامه في هذا البرنامج التعليمي.
  

تحضير مخطط Premade

للبدء ، قم بإنشاء صفحة جديدة ، وإضافة عنوان ، ثم نشر Visual Builder. ثم حدد "اختيار تخطيط مسبق الصنع". من التحميل من نافذة المكتبة المنبثقة ، حدد تخطيط الصفحة المقصودة لـ Fitness Gym وانقر فوق "Use This Layout".

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

استخدم المحرر المضمن لتغيير نص العنوان في العمود الأيمن إلى "Smart Fitness".

إضافة صورة الخلفية وتخصيص إعدادات الصف

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

افتح إعدادات الصف وأضف صورة الخلفية إلى العمود 1. ثم قم بتحديث ما يلي:

حجم صورة الخلفية للعمود 1: الحجم الفعلي
العمود 1 موضع صورة الخلفية: وسط اليسار
تكرار صورة الخلفية للعمود 1: لا يوجد تكرار

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

العرض المخصص: 700 بكسل
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

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

height: 507px;

الآن ارتفاع العمود يساوي ارتفاع صورتك ولن يعتمد على المحتوى (أو الوحدات) التي نضيفها إلى الصف.

إضافة تسميات تلميح الأدوات على صورة الخلفية باستخدام دعاية

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

العنوان: "التركيز"
المحتوى: "مفتاح النجاح!"
استخدام الأيقونة: نعم
الرمز: انظر لقطة الشاشة

من المهم الاحتفاظ بالعنوان والمحتوى لبضع كلمات فقط لأننا نريد أن نكون قادرين على ملاءمة الدعاية الكاملة داخل صورة الخلفية.

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

لون الأيقونة: # edf000
رمز الدائرة: نعم
لون الدائرة: rgba (0،0،0،0)
إظهار حدود الدائرة: نعم
لون حدود الدائرة (افتراضي): rgba (0،0،0،0)
لون حدود الدائرة (تحوم): # edf000
وضع الصورة / الرمز: اليسار
استخدام حجم خط الأيقونة: نعم
حجم خط الأيقونة: 40 بكسل

استمر في ضبط إعدادات التصميم على النحو التالي:

وزن خط العنوان: غامق
لون نص العنوان (افتراضي): rgba (0،0،0،0)
لون نص العنوان (افتراضي): # edf000
لون النص الأساسي (افتراضي): rgba (0،0،0،0)
لون النص الأساسي (افتراضي): #ffffff

(لاحظ أن ألوان النص الافتراضية شفافة تمامًا لإخفائها حتى تحوم فوق الدعاية المغلوطة.)

الهامش المخصص: 15 بكسل للأعلى ، 0 بكسل للأسفل ، 90 بكسل لليسار
الحشو المخصص: 5 بكسل للأعلى ، 5 بكسل أسفل ، 5 بكسل على اليمين

(الهامش المخصص هو كيفية وضع أيقونة الدعاية الدعاية في موقع معين فوق الصورة.)

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: -154 بكسل
مربع الظل الوضع الرأسي: 0 بكسل
لون الظل (افتراضي): rgba (0،0،0،0)
لون الظل (تحوم): # 1e2441

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

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

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

الهامش المخصص: 0 بكسل للأعلى و 0 بكسل للأسفل و 15 بكسل لليسار

لإنشاء دعاية دعاية ثالثة ، يمكنك تكرار الدعاية الثانية.

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

العنصر الرئيسي CSS:

direction: rtl;

Blurb Image CSS:

padding-left: 15px;

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

الهامش المخصص: 35 بكسل للأعلى ، 0 بكسل للأسفل ، 0 بكسل لليسار

نحتاج أيضًا إلى ضبط ظل الصندوق بحيث يأتي من اليسار بدلاً من اليمين كما يلي:

مربع الظل الأفقي: 150 بكسل

تحقق الآن من تلميح الأدوات المعكوس على الموقع المباشر.

بالنسبة إلى الدعاية الأخيرة ، انسخ أول دعاية إعلانية أعلى العمود والصقها أسفل النص الدعائي الثالث.

ثم قم بتحديث الهامش على النحو التالي:

الهامش المخصص: 0 بكسل للأعلى ، 100 بكسل لليسار

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

وتحقق من تأثيرات تحوم تلميح الأدوات هذه!

هل هو مستجيب؟

تم تصميم هذا التصميم مع وضع الجوّال في الاعتبار منذ البداية. يبلغ عرض الصورة 320 بكسل وهو عرض معظم الهواتف الذكية الصغيرة. ونظرًا لأننا قمنا بتغيير حجم ووضع كل شيء باستخدام وحدات طول البكسل ، فإن التصميم (بما في ذلك تلميحات الأدوات) لا يتحرك عندما نضبط حجم المتصفح.

ومع ذلك ، هناك شيء آخر قد تحتاج إلى القيام به للتأكد من عرض الصورة وتعظيمها على شاشات الهاتف الصغيرة. بشكل افتراضي ، سيكون للصف الخاص بك عرض 80٪ على الهاتف المحمول ، لذلك من أجل جعل هذا 100٪ ، يمكنك إضافته كـ CSS مخصص إلى العنصر الرئيسي في صفك كما يلي:

width: 100%;

سيظل عرضك المخصص البالغ 700 بكسل بمثابة أقصى عرض على سطح المكتب ، ولكنه سيكون الآن 100٪ على الهاتف المحمول.

افكار اخيرة

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

أتطلع إلى تلقي رد منك في التعليقات أدناه.

هتافات!