إنشاء CTA "البدء" التي تكشف عن خيارات متعددة عند التحويم

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

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

التصميم أنيق ويمكن أن تكون الوظيفة مفيدة بعدة طرق.

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة سريعة على عبارة الحث على اتخاذ إجراء "البدء" التي سنقوم ببنائها في هذا البرنامج التعليمي.

قم بتنزيل CTA Divi Layout "ابدأ" مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

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

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

1. موضوع Divi مثبت ونشط
2. تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)
3. الصور لاستخدامها لمحتوى وهمي

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

تنفيذ تصميم CTA "ابدأ هنا" في Divi

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

لنبدأ بالقسم.

إنشاء القسم

لبدء الأمور ، قم بإنشاء قسم عادي بصف من عمود واحد. ثم قبل أن نضيف أي وحدات ، دعنا نحدِّث إعدادات القسم.

افتح إعدادات القسم وقم بتحديث ما يلي:

لون الخلفية: # 2b87da
العرض: 90٪
العرض الأقصى: 1100 بكسل
محاذاة القسم: المركز
الهامش: 6vw أعلى ، 6vw أسفل (فقط لمنحه مساحة صغيرة للتنفس)
المساحة المتروكة (سطح المكتب): 300 بكسل للأعلى ، 0 بكسل للأسفل
المساحة المتروكة (الكمبيوتر اللوحي): 0 بكسل أعلى ، 15٪ أسفل

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

الزوايا الدائرية: 140 بكسل (سطح المكتب) ، 20 بكسل (تحوم) ، 10 بكسل (الجهاز اللوحي)

ثم أعطه مربع الظل (انظر الصورة).

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

إنشاء الصف الأول من المحتوى

افتح الإعدادات لصف عمود واحد قمت بإنشائه وقم بتحديث ما يلي:

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

داخل صف عمود واحد ، أضف وحدة نصية.

ثم أضف عنوان h2 التالي إلى محتوى الجسم.

<h2>Get Started Here...</h2>

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

خط العنوان 2: Nunito
وزن خط العنوان 2: غامق
لون نص العنوان 2: #ffffff
حجم نص العنوان 2: 78 بكسل (سطح المكتب والجهاز اللوحي) ، 46 بكسل (الهاتف)
العرض الأقصى: 500 بكسل
الارتفاع: 300 بكسل (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)
الهامش: -300 بكسل علوي (سطح المكتب) ، 0 بكسل علوي (كمبيوتر لوحي وهاتف)
الحشو: 7٪ أعلى

ارتفاع 300 بكسل والهامش العلوي -300 بكسل يجلبان وحدة النص لملء الحشوة العلوية 300 بكسل للقسم. في وقت لاحق ، كلما أزلنا حشوة القسم العلوي عند التمرير ، ستنتقل وحدة النص لأعلى فوق القسم.

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

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

ثم قم بتحديث إعدادات الصف كما يلي:

العرض: 100٪
العرض الأقصى: 100٪
المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

ثم أضف وحدة دعاية مغالى فيها في العمود 1.

ثم قم بتحديث إعدادات الدعاية الدعاية كالتالي:

احذف النص الأساسي الافتراضي واترك العنوان.

ثم أضف أيقونة صورة (90 × 90). أو يمكنك استخدام أيقونة Divi العادية إذا كنت تريد ذلك.

أضف خلفية وقم بتحديث تصميم نص العنوان.

لون الخلفية: #ffffff
خط العنوان: نونيتو
وزن خط العنوان: غامق للغاية
نمط خط العنوان: TT
محاذاة نص العنوان: الوسط
لون نص العنوان: # 2b87da
حجم نص العنوان: 14 بكسل

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

عرض المحتوى: 200 بكسل (سطح المكتب) ، 250 بكسل (جهاز لوحي)
العرض: 250 بكسل (سطح المكتب) ، 300 بكسل (جهاز لوحي)
محاذاة الوحدة: مركز
الارتفاع: 250 بكسل (سطح المكتب) ، 300 بكسل (جهاز لوحي)
الهامش: 25 ​​بكسل للأعلى و 0 بكسل للأسفل
المساحة المتروكة: 50 بكسل للجزء العلوي (سطح المكتب) ، 75 بكسل للجزء العلوي (الجهاز اللوحي والهاتف)

لإكمال تصميم الدائرة ، امنح الدعاية المغطاة زاوية مستديرة وظل مربع.

زوايا دائرية: 50٪
Box Shadow: انظر لقطة الشاشة

هذا يهتم بأول دعاية دعاية. لإنشاء التاليين. انسخ الدعاية المغلوطة والصقها في العمود 2 والعمود 3. ثم قم بتحديث رمز الصورة لكل منهما. يجب أن يبدو كما يلي:

اللمسات الأخيرة على القسم

لإكمال تصميم CTA "البدء" ، نحتاج إلى تحديث القسم أكثر قليلاً. قم بتحديث إعدادات القسم التالية:

الارتفاع: 300 بكسل (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)
الفائض الأفقي: مخفي
الفائض العمودي: مخفي

سيؤدي هذا إلى إبقاء القسم على نفس ارتفاع المحتوى في الصف الأول والصف 2. سيؤدي إخفاء الفائض إلى إبقاء المحتوى في الصف 2 مخفيًا حتى نعرضه عند التمرير.

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

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

الآن تحقق من النتيجة حتى الآن. سيتم تمرير المحتوى لأعلى للكشف عن المحتوى في الصف 2 الذي يعرض خيارات CTA الثلاثة.

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

مقياس التحويل (سطح المكتب): 70٪
مقياس التحويل (تحوم): 100٪
مقياس التحويل (الكمبيوتر اللوحي): 100٪

أضف الآن رسم صورة خلفية (500 × 500) لتحتل الحجم الصحيح للقسم.

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

إضافة روابط URL إلى الدعاية المغلوطة وتغيير حجمها عند التمرير

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

نظرًا لأن الدعاية المغلوطة مخفية في المنشئ المرئي ، قم بتبديل وضع عرض الإطار الشبكي وتحديث كل من إعدادات الدعاية الإعلامية باستخدام عنوان URL لرابط الوحدة النمطية.

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

مقياس التحويل (تحوم): 105٪

هذا كل شيء!

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

دعنا نتحقق من التصميم النهائي للحث على اتخاذ إجراء "البدء".

وهنا التصميم على الجهاز اللوحي والهاتف.

افكار اخيرة

تعد عبارة "Get Started" الحث على اتخاذ إجراء شائعة على الويب اليوم. نأمل أن يساعدك هذا البرنامج التعليمي في الانتقال إلى المستوى التالي. ولا تخف من التفكير في بعض الطرق الأخرى لاستخدام هذه الوظيفة. فكر في الأمر. يمكنك إضافة أي محتوى تريده إلى القسم!

لا تتردد في مشاركة أفكارك في التعليقات أدناه.

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

هتافات!