قم بتنزيل CTA Column Swipe Hero Section Design مجانًا لـ Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل أقسام الأبطال مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

لنبدأ في إعادة التكوين!

إضافة قسم جديد

خلفية متدرجة

أضف قسمًا جديدًا إلى الصفحة التي تعمل عليها ، وافتح إعدادات القسم وأدخل خلفية متدرجة.

• اللون 1: #ffffff
• اللون 2: # f5ede5
• اتجاه التدرج: 90 درجة
• مركز البداية: 17٪
• مركز النهاية: 17٪

تباعد

انتقل إلى علامة تبويب التصميم وأضف بعض الحشو العلوي والسفلي المخصص عبر أحجام الشاشات المختلفة.

• الحشوة العلوية: 5vw (سطح المكتب) ، 10vw (جهاز لوحي) ، 13vw (هاتف)
• الحشو السفلي: 5vw (سطح المكتب) ، 10vw (جهاز لوحي) ، 13vw (هاتف)

أضف الصف رقم 1

هيكل العمود

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

لون الخلفية

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتغيير لون الخلفية.

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

تحجيم

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات تغيير حجم الصف أيضًا.

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 60vw (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)
• العرض الأقصى: 100٪
• محاذاة الصف: صحيح

تباعد

نقوم أيضًا بإضافة بعض قيم الحشو المخصصة إلى إعدادات التباعد.

• الحشوة العلوية: 6vw
• الحشو السفلي: 6vw
• الحشو الأيسر: 5.5vw
• الحشوة اليمنى: 24vw

الحدود

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

• عرض الحد الأيسر: 6 بكسل
• لون الحد الأيسر: #FFFFFF

مربع الظل

أضف ظل مربع دقيقًا لإنشاء عمق في قسم الأبطال.

• مربع قوة طمس الظل: 100 بكسل
• لون الظل: rgba (0،0،0،0.22)

فئة CSS

واستخدم فئة CSS في علامة التبويب المتقدمة. لاحقًا في هذا المنشور ، سنستخدم فئة CSS هذه لإخفاء شريط التمرير.

• فئة CSS: شريط التمرير السريع

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

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

display: grid;
grid-template-columns: repeat(6, 100%);
grid-column-gap: 2vw;

فيضانات

انتقل إلى إعدادات الرؤية وقم بتغيير الفائض في الصف.

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

إعدادات العمود

بمجرد الانتهاء من إعدادات الصف ، يمكنك فتح إعدادات العمود الأول.

خلفية متدرجة

أضف خلفية متدرجة.

• اللون 1: rgba (245،237،229،0.91)
• اللون 2: rgba (219،34،65،0.84)
• موقف البداية: 35٪
• مركز النهاية: 81٪
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

جنبا إلى جنب مع صورة الخلفية.

• حجم صورة الخلفية: الغلاف
• موقف صورة الخلفية: المركز
• تكرار صورة الخلفية: لا يوجد تكرار

تباعد

انتقل إلى علامة تبويب التصميم وأضف بعض قيم الحشو المخصصة عبر أحجام الشاشات المختلفة.

• الحشوة العلوية: 4vw (سطح المكتب) ، 10vw (جهاز لوحي) ، 12vw (هاتف)
• الحشوة السفلية: 4vw (سطح المكتب) ، 10vw (الكمبيوتر اللوحي) ، 12vw (الهاتف)
• الحشو الأيسر: 2vw (سطح المكتب) ، 5vw (كمبيوتر لوحي) ، 7vw (هاتف)
• الحشو الأيمن: 2vw (سطح المكتب) ، 5vw (كمبيوتر لوحي) ، 7vw (هاتف)

الحدود

تابع بإضافة نصف قطر حد "20 بكسل" لكل زاوية من الزوايا في إعدادات الحدود.

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

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

width: 100% !important;

أضف وحدة النص رقم 1 إلى العمود 1

أضف محتوى H3

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

إعدادات نص H3

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

• خط العنوان 3: بوبينز
• وزن خط العنوان 3: خفيف
• لون نص العنوان 3: # e92640
• حجم نص العنوان 3: 1.5vw (سطح المكتب) ، 3.5vw (الجهاز اللوحي) ، 4.5vw (الهاتف)

أضف وحدة النص رقم 2 إلى العمود 1

إضافة محتوى

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

إعدادات النص

انتقل إلى إعدادات النص بعد ذلك وقم بإجراء بعض التغييرات.

• خط النص: بوبينز
• وزن خط النص: خفيف
• لون النص: # e92640
• حجم النص: 0.8vw (سطح المكتب) ، 1.9vw (جهاز لوحي) ، 2.8vw (هاتف)

تباعد

نضيف أيضًا بعض الهامش السفلي لإنشاء مساحة في بطاقة السحب الخاصة بالعمود.

• الهامش السفلي: 18vw (سطح المكتب) ، 30vw (كمبيوتر لوحي) ، 42vw (هاتف)

أضف وحدة الزر إلى العمود 1

أضف نسخة

إلى الوحدة التالية ، وهي وحدة الأزرار. أدخل نسخة من اختيارك.

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 0.8vw (سطح المكتب) ، 1.8vw (جهاز لوحي) ، 2.5vw (هاتف)
• لون نص الزر: # f5ede5
• عرض حد الزر: 1 بكسل
• لون حدود الزر: # f5ede5
• نصف قطر حدود الزر: 5 بكسل
• خط الزر: بوبينز

تباعد

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

• الحشوة العلوية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشوة السفلية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشو الأيسر: 3vw (سطح المكتب) ، 5vw (كمبيوتر لوحي) ، 7vw (هاتف)
• الحشو الأيمن: 3vw (سطح المكتب) ، 5vw (كمبيوتر لوحي) ، 7vw (هاتف)

أضف وحدة Divider Module إلى العمود 1

الرؤية

الوحدة التالية التي نحتاجها هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

انتقل إلى علامة تبويب التصميم وقم بتغيير لون الخط.

• لون الخط: # f5ede5

أضف وحدة النص رقم 3 إلى العمود 1

إضافة محتوى

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

إعدادات النص

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

• خط النص: بوبينز
• وزن خط النص: خفيف
• لون النص: # f5ede5
• حجم النص: 0.8vw (سطح المكتب) ، 1.9vw (جهاز لوحي) ، 2.8vw (هاتف)
• ارتفاع خط النص: 2.3em

تباعد

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

• الهامش العلوي: 2vw

استنساخ العمود حتى 5 مرات وإعادة استخدامه ل CTAs الأخرى

بمجرد الانتهاء من العمود الأول وجميع الوحدات فيه ، يمكنك استنساخ العمود بأكمله حتى 5 مرات ، اعتمادًا على عدد بطاقات CTA التي تريد عرضها. تأكد من تغيير كل النسخ لكل عمود مكرر مع روابط الزر.

أضف الصف رقم 2

هيكل العمود

إلى الصف الثاني! سنستخدم هذا الصف لإنشاء تداخل مع الصف السابق. اختر هيكل العمود التالي:

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف واضبط إعدادات التحجيم وفقًا لذلك:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

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

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

أضف وحدة النص رقم 1 إلى العمود 1

أضف محتوى H1

حان الوقت لبدء إضافة الوحدات! ابدأ بأول وحدة نصية وأدخل بعض محتوى H1 من اختيارك.

إعدادات نص H1

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

• خط العنوان: بوبينز
• لون نص العنوان: # e92741
• حجم نص العنوان: 3vw (Desktop) ، 5vw (Tablet) ، 7vw (Phone)

تباعد

أضف بعض قيم الهامش بعد ذلك.

• الهامش العلوي: -35vw (سطح المكتب) ، 7vw (جهاز لوحي) ، 10vw (هاتف)
• الهامش الأيسر: 5vw
• الهامش الأيمن: 12vw

أضف وحدة النص رقم 2 إلى العمود 1

إضافة محتوى

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

إعدادات النص

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

• خط النص: بوبينز
• وزن خط النص: خفيف
• لون النص: # e92741
• حجم النص: 0.8vw (سطح المكتب) ، 1.9vw (جهاز لوحي) ، 2.8vw (هاتف)
• ارتفاع خط النص: 2.8em

تباعد

نحن نضيف بعض قيم الهامش المخصصة إلى وحدة النص أيضًا.

• الهامش العلوي: 2vw (سطح المكتب) ، 7vw (جهاز لوحي) ، 10vw (هاتف)
• الهامش السفلي: 2vw (سطح المكتب) ، 7vw (كمبيوتر لوحي) ، 10vw (هاتف)
• الهامش الأيسر: 5vw
• الهامش الأيمن: 13vw (سطح المكتب) ، 5vw (الجهاز اللوحي والهاتف)

أضف وحدة الزر إلى العمود 1

أضف نسخة

الوحدة التالية التي نحتاجها هي وحدة الأزرار. أدخل نسخة من اختيارك.

إعدادات الزر

بعد ذلك ، انتقل إلى علامة تبويب التصميم وحدد نمط الزر.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 0.9vw
• لون نص الزر: # e92741
• لون خلفية الزر: # f5ede5
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 5 بكسل
• خط الزر: بوبينز

تباعد

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

• الهامش العلوي: 2vw
• الهامش الأيسر: 5vw
• الحشوة العلوية: 1.5vw (سطح المكتب) ، 2.5vw (Tablet) ، 3vw (Phone)
• الحشوة السفلية: 1.5vw (سطح المكتب) ، 2.5vw (Tablet) ، 3vw (الهاتف)
• الحشو الأيسر: 6vw (سطح المكتب) ، 9vw (كمبيوتر لوحي) ، 15vw (هاتف)
• الحشو الأيمن: 6vw (سطح المكتب) ، 9vw (كمبيوتر لوحي) ، 15vw (هاتف)

مربع الظل

قم بإنهاء تصميم وحدة الزر عن طريق إضافة ظل مربع دقيق.

• مربع الظل الرأسي: 20 بكسل
• مربع قوة طمس الظل: 50 بكسل
• قوة انتشار الظل المربع: -5 بكسل
• لون الظل: rgba (0،0،0،0.19)

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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