كيفية إنشاء شريط جهات اتصال Divi Mobile باستخدام روابط النقر للاتصال والبريد الإلكتروني والرسائل النصية القصيرة والتوجيه

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

في هذا البرنامج التعليمي ، سوف نوضح لك كيفية إنشاء شريط اتصال Divi للهاتف المحمول مع روابط Click-to-Call والبريد الإلكتروني والرسائل النصية القصيرة والاتجاهات. للقيام بذلك ، سنستخدم أداة Divi builder لتصميم الشريط والأزرار الموجودة في التذييل العالمي. ثم سنضيف عناوين URL مخصصة لكل رابط جهة اتصال لإحضار الوظائف التي نحتاج إليها.

هيا بنا نبدأ!

نظرة خاطفة

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

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

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

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

تنزيل مجاني

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

تحميل

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

كيفية إضافة تنزيل قالب شريط الاتصال الثابت إلى موقع Divi الخاص بك

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

لاستيراد قالب شريط التذييل الثابت إلى موقع الويب الخاص بك ، قم بفك ضغط ملف zip للتنزيل للوصول إلى ملف JSON.

ثم انتقل إلى لوحة معلومات WordPress وانتقل إلى Divi> Theme Builder.

ثم انقر فوق رمز قابلية النقل في الجزء العلوي الأيمن من الصفحة.

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

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

أخيرًا ، احفظ تغييرات Theme Builder واعرض صفحة مباشرة لرؤية شريط التذييل الثابت.

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

الجزء 1: إنشاء تذييل عام

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

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

اختر الخيار "البناء من الصفر".

الجزء 2: إنشاء شريط المحتوى الثابت

داخل Global Footer Layout Editor ، ابدأ عملية التصميم بإضافة صف من عمود واحد إلى القسم الافتراضي.

إعدادات القسم

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

• الارتفاع: 80 بكسل

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

• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

إعدادات الصف

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

خلفية

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

مقاس

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪
• الطول: يرث

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

تباعد

• المساحة المتروكة: 0 بكسل للأعلى ، 0 بكسل للأسفل ، 15٪ لليسار ، 15٪ لليمين

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

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

display:flex;
flex-wrap:nowrap;
align-items:center;

تحديد المواقع الثابتة

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

• المركز: ثابت
• الموقع: أسفل اليسار
• الفهرس Z: 99999

الجزء 3: إنشاء روابط الاتصال ، والبريد الإلكتروني ، والرسائل النصية القصيرة ، والتوجيه

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

تصميم زر Click-to-Call

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

المحتوى

ضمن علامة تبويب المحتوى ، أضف عنوانًا وأيقونة إلى الدعاية الدعائية على النحو التالي:

• العنوان: اتصال
• استخدام الأيقونة: نعم
• الرمز: الهاتف

خلفية

اعطيه لون خلفية بيضاء:

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

إعدادات التصميم

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

أيقونة

• لون الأيقونة: # 751136
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 2em

الخط عنوان

• نمط الخط Tite: TT
• محاذاة نص العنوان: الوسط
• لون نص العنوان: # 751136
• حجم نص العنوان: 1em

حجم النص الأساسي

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

قم بتحديث النص الأساسي كما يلي:

• حجم النص الأساسي: 12 بكسل

مقاس

امنح الدعاية المغطاة ارتفاعًا وعرضًا محددين على النحو التالي:

• العرض: 4.5em
• محاذاة الوحدة: مركز
• الإرتفاع: 4.5em

الحشو والزوايا

• الحشو: 0.5em أعلى

مربع الظل

• Box Shadow: انظر لقطة الشاشة
• مربع الظل الوضع الأفقي: 0 بكسل
• مربع الظل الوضع الرأسي: 2 بكسل
• لون الظل: rgba (255،255،255،0.55)

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

من أجل جعل محتوى الوحدة النمطية blurb تتمحور عموديًا ، أضف CSS المخصص التالي إلى العنصر الرئيسي:

display:flex;
align-items:center;

وقم بإخراج التباعد الموجود أسفل أيقونة الدعاية الدعاية بإضافة الصورة الدعائية التالية:

margin-bottom: 0.3em;

إضافة رابط الاتصال URL

لإضافة عنوان URL لرابط الاتصال الذي سيبدأ مكالمة على هاتف محمول ، أضف الرقم بعد البادئة "tel:".

• عنوان URL لرابط الوحدة النمطية: هاتف 5555-555-555

تصميم زر البريد الإلكتروني

لإنشاء زر البريد الإلكتروني ، قم بتكرار العمود بأكمله.

إضافة رمز البريد الإلكتروني والرابط URL

ثم قم بتحديث الدعاية المكررة في العمود 2 بعنوان وأيقونة جديدين.

لإضافة عنوان URL لرابط الاتصال الذي سيبدأ رسالة بريد إلكتروني على تطبيق جوال ، أضف عنوان البريد الإلكتروني بعد البادئة "mailto:".

• عنوان URL لارتباط الوحدة النمطية: mailto: [البريد الإلكتروني محمي]

تصميم زر SMS (رسالة نصية)

لإنشاء زر SMS ، قم بتكرار العمود 2.

إضافة رمز SMS والرابط URL

ثم قم بتحديث الدعاية المكررة في العمود 2 بعنوان وأيقونة جديدين.

لإضافة عنوان URL لرابط الاتصال الذي سيبدأ رسالة بريد إلكتروني على تطبيق جوال ، أضف عنوان البريد الإلكتروني بعد البادئة "sms:".

• رابط الوحدة النمطية: sms: +15555555555

تصميم زر الاتجاهات

لإنشاء زر SMS ، قم بتكرار العمود 3.

إضافة رمز الاتجاهات والرابط URL

ثم قم بتحديث الدعاية المكررة في العمود 3 بعنوان وأيقونة جديدين.

من أجل إضافة عنوان URL لرابط الاتصال الذي سيبدأ الاتجاهات عبر خرائط Google ، استخدم هياكل URL الخاصة بالاتجاه.

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

• عنوان URL لارتباط الوحدة النمطية:

  https://www.google.com/maps/dir/?api=1&destination=1600+amphitheatre+pkwy+mountain+view+CA

لإضافة عنوانك الخاص إلى عنوان URL ، استبدل النص بعد "الوجهة =" في عنوان URL ، مع التأكد من فصل الكلمات برموز الجمع ("+").

يجب أن يمنحك النقر فوق الزر شيئًا مشابهًا لهذا ...

إخفاء القسم على سطح المكتب

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

• تعطيل على: سطح المكتب

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

المزيد من روابط الاتصال

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

الهاتف: - إجراء مكالمة هاتفية
mailto: - افتح تطبيق بريد إلكتروني
callto: افتح سكايب
sms: - إرسال رسالة نصية
الفاكس: - ارسال فاكس

وإذا كنت ترغب في ذلك ، يمكنك أيضًا إضافة رابط Waze مستهدف لعنوان URL الخاص بالاتجاهات.

افكار اخيرة

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

لمزيد من المعلومات ، تحقق من منشورنا على روابط الهاتف.

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

هتافات!