كيفية تصميم قسم المتحدث الضيف باستخدام CTA الفعال في Divi

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

ولكن قبل أن ننتقل ، إليك نظرة خاطفة على التصميم النهائي.

نظرة خاطفة

وإليك تأثير التحويم الإضافي الذي سأعرضه لك أيضًا.

هيا بنا نبدأ!

اشترك في قناتنا على اليوتيوب

بناء الهيكل الأساسي والمحتوى

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

، أضف قسمًا جديدًا بصف عمود واحد.

أضف وحدة نصية إلى الصف بالمحتوى التالي:

<h2>Guest Speaker</h2>

بعد ذلك ، أضف وحدة مقسم مباشرة أسفل وحدة النص.

سنقوم الآن بإضافة صف جديد بهيكل من أربعة أعمدة لاستيعاب المتحدثين الضيوف.

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

قم بتحديث محتوى وحدة الشخص كما يلي:

الاسم: [فارغ]
عنوان URL لملف تعريف Facebook: [أضف "#" الآن]
عنوان URL للملف الشخصي على Twitter: [أضف "#" في الوقت الحالي]
عنوان URL لملف تعريف LinkedIn: [أضف "#" الآن]

للوصف ، أضف ما يلي:

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

ملاحظة: تُنشئ علامة hr خطًا فاصلًا يحتوي على بعض التصميم المضمن بعرض 90 بكسل وعائمًا إلى اليسار. العلامة القوية الملتفة حول الاسم الأخير تجعلها جريئة لعنصر تصميم فريد.

الآن بعد أن أصبح المحتوى في مكانه ، احفظ إعدادات وحدة الشخص.

انسخ وحدة الشخص التي أنشأتها للتو والصقها في كل عمود من الأعمدة المتبقية بحيث يكون لديك نفس وحدة الشخص في كل عمود من الأعمدة الأربعة. للنسخ واللصق ، يمكنك استخدام خيارات قائمة النقر بزر الماوس الأيمن أو المفاتيح المختصرة cmd + c cmd + v (mac) أو ctrl + ctrl + v (في نظام التشغيل Win).

افتح إعداد وحدة الشخص في العمود 4 وقم بتحديث المحتوى بحيث يحتوي فقط على ما يلي:

الاسم: "يمكن أن يكون هذا أنت!"
الوصف: "استخدم الزر أدناه لتقديم طلب للتحدث في الحدث."

احفظ إعداداتك.

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

ارجع إلى وحدات الأشخاص الثلاثة الأولى في الأعمدة 1-3 وأضف الصور لكل صورة من صور المتحدث الضيف. تأكد من أنها بالحجم نفسه وبأبعاد ارتفاع وعرض متساوية وأنهما كبيرتان بما يكفي لمراعاة عرض الأعمدة في جميع أحجام المتصفح (من الناحية المثالية 600 بكسل × 600 بكسل).

هذا ما يجب أن يبدو عليه تخطيط Guest Speak في هذه المرحلة.

تصميم تخطيط مكبر الصوت الضيف

تصميم القسم

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

صورة الخلفية: [أنا أستخدم واحدة من تخطيط وكالتنا]

لون الخلفية المتدرج الأيسر: # 293039
تدرج الخلفية اللون الأيمن: rgba (41،48،57،0.89)
نمط الفاصل العلوي: انظر الصورة
لون الفاصل العلوي: # 293039
ارتفاع الحاجز العلوي: 30vw

تغيير عرض الصف

نظرًا لأننا نريد أن يكون لكلا الصفين نفس العرض ، استخدم التحديد المتعدد لتحديد كلا الصفين وانقر فوق أحد رموز الإعدادات لفتح إعدادات العنصر.

ثم قم بتحديث ما يلي:

العرض المخصص: 80٪

الآن سيكون لكلا الصفين نفس العرض المخصص.

تصميم العنوان

افتح إعدادات الوحدة النصية التي تحتوي على عنوان القسم "Guest Speakers" وقم بتحديث ما يلي:

خط العنوان 2: مونتسيرات
وزن خط العنوان 2: غامق
نمط خط العنوان 2: TT
العنوان 2 محاذاة النص: صحيح
لون نص العنوان 2: # 74bf46
حجم نص العنوان 2: 70 بكسل (سطح المكتب) ، 50 بكسل (الهاتف الذكي)

احفظ التغييرات.

افتح الآن إعدادات Divider وقم بتحديث ما يلي:

اللون: #ffffff
الارتفاع: 0 بكسل
العرض: 90 بكسل
محاذاة الوحدة: صحيح

تصميم وحدات الشخص

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

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

لون الأيقونة: # 74bf46
خط العنوان: مونتسيرات
وزن خط العنوان: خفيف
لون نص العنوان: #ffffff
حجم نص العنوان: 20 بكسل
خط الجسم: مونتسيرات
لون النص الأساسي: #ffffff
تباعد نص الرسالة: 2 بكسل
ارتفاع خط الجسم: 1.8em

تصميم وحدة شخص CTA

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

عرض حدود الصورة: 18 بكسل
لون حدود الصورة: # d2d2d2
عتامة الصورة: 50٪

وزن خط العنوان: غامق
ارتفاع خط العنوان: 1.5em

الآن كل ما تبقى هو تصميم زرنا. افتح إعدادات وحدة الزر وقم بتحديث ما يلي:

لون نص الزر: # 293039
لون خلفية الزر: # 74bf46
نصف قطر حدود الزر: 50 بكسل
زر الخط: مونتسيرات
وزن الخط: عريض

الآن دعونا نلقي نظرة على النتيجة النهائية.

نصيحة إضافية: تأثير تحويم الصورة للتكبير

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

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

استخدم التحديد المتعدد لتحديد وحدات الشخص النمطية في الأعمدة 1 و 2 و 3. افتح إعدادات العنصر. ضمن علامة التبويب خيارات متقدمة ، أدخل CSS التالي ضمن العنصر الرئيسي :

overflow: hidden;

سيحافظ هذا الرمز على عدم توسيع الصورة خارج حاوية الوحدة النمطية.

بعد ذلك ، أضف CSS التالية ضمن صورة العضو :

transition: all 0.3s; 

يضيف هذا انتقالًا سلسًا عندما يتغير حجم الصورة.

لإضافة css عند التمرير ، انقر فوق رمز التمرير وحدد علامة تبويب التمرير وأدخل CSS التالي:

transform: scale(1.1) translateY(-4.5%);

يؤدي هذا إلى تغيير حجم الصورة (أو توسيعها) إلى حجم أكبر قليلاً ونقلها لأعلى قليلاً.

الآن سيكون للصور تأثير تكبير دقيق عند التمرير.

افكار اخيرة

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

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

هتافات!