استخدام خيارات تحويل Divi لإنشاء محتوى قسم موسع عند التمرير

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

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

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

معاينة

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

سطح المكتب

متحرك

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

أضف القسم رقم 1

تباعد

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

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

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

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

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

تباعد

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

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

إضافة وحدة المقسم

الرؤية

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

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

اللون

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير لون المقسم إلى الأسود.

• اللون: # 000000

تحجيم

قم بتعديل قيم التحجيم أيضًا.

• وزن الحاجز: 1 بكسل
• الارتفاع: 0 بكسل

تباعد

وزد طول الحاجز بإضافة بعض الهوامش السالبة اليسرى واليمنى.

• الهامش الأيسر: -135vw (سطح المكتب) ، -300vw (كمبيوتر لوحي) ، -340vw (هاتف)
• الهامش الأيمن: -135vw (سطح المكتب) ، -300vw (كمبيوتر لوحي) ، -340vw (هاتف)

أضف القسم رقم 2

لون الخلفية

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

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

تباعد

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

• الحشوة العلوية: 5vw
• الحشوة السفلية: 5vw

الحد الافتراضي

أضف حدًا إلى القسم أيضًا.

• عرض الحدود: 1 بكسل
• لون الحدود: # 000000

تحوم الحدود

وقم بإزالة عرض الحد عند التمرير.

• عرض الحدود: 0 بكسل

ظل المربع الافتراضي

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

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

تحوم مربع الظل

قم بتغيير لون الظل عند التمرير باستخدام رمز اللون التالي:

• لون الظل: rgba (0،0،0،0.13)

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

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

أضف وحدة نصية

أضف محتوى H2

حان الوقت لبدء إضافة الوحدات! الوحدة الأولى التي نحتاجها هي وحدة نصية بها بعض محتوى H2.

إعدادات نص H2

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

• خط العنوان 2: Abril Fatface
• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: # 000000
• حجم نص العنوان 2: 7vw

تباعد

أضف بعض قيم الهامش المخصصة أيضًا.

• الهامش السفلي: 5vw
• الهامش الأيسر: 5vw
• الهامش الأيمن: 5vw

إضافة وحدة المقسم

الرؤية

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

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

اللون

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير لون الفاصل إلى الأسود.

• اللون: # 000000

أضف الصف رقم 2

هيكل العمود

إلى الصف الثاني! استخدم هيكل العمود التالي:

تحجيم

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

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

تباعد

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

• الحشوة اليسرى: 10vw
• الحشوة اليمنى: 10vw

عرض

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

display: flex;

أضف الوحدة النمطية للدعاية إلى العمود 1

إضافة محتوى

تابع عن طريق إضافة Blurb Module إلى العمود الأول من الصف. أدخل بعض المحتوى من اختيارك.

حدد أيقونة

حدد رمزًا بعد ذلك.

إعدادات الرمز

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

• لون الأيقونة: # 000000

إعدادات نص العنوان

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

• خط العنوان: Abril Fatface
• محاذاة نص العنوان: الوسط
• لون نص العنوان: # 000000
• حجم نص العنوان: 1.5vw (سطح المكتب) ، 2.5vw (Tablet) ، 3.5vw (الهاتف)
• ارتفاع خط العنوان: 2em

إعدادات النص الأساسي

افعل نفس الشيء لإعدادات النص الأساسي.

• خط النص الأساسي: Open Sans
• محاذاة النص الأساسي: الوسط
• لون النص الأساسي: # 666666
• حجم نص الجسم: 0.8vw (سطح المكتب) ، 1.5vw (جهاز لوحي) ، 2vw (هاتف)
• ارتفاع خط الجسم: 2em

تباعد

أخيرًا وليس آخرًا ، أضف بعض الهامش الأيمن والأيسر المخصص إلى الوحدة النمطية Blurb.

• الهامش الأيسر: 2vw
• الهامش الأيمن: 2vw

استنساخ وحدة Blurb مرتين ووضعها في الأعمدة المتبقية

بمجرد الانتهاء من تخصيص وحدة Blurb Module ، يمكنك المضي قدمًا واستنساخها مرتين. ضع التكرارات في العمودين المتبقيين من الصف.

أضف الصف رقم 3

هيكل العمود

إلى الصف التالي والأخير. اختر هيكل العمود التالي له:

تحجيم

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

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

إضافة وحدة زر

إضافة محتوى

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

انتقام

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

• محاذاة الزر: الوسط

إعدادات الزر

قم بتغيير إعدادات الزر بعد ذلك.

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

تباعد

وقم بإنشاء شكل للزر باستخدام بعض قيم الهوامش والحشو المخصصة.

• الهامش العلوي: 5vw
• الحشوة العلوية: 2vw
• الحشوة السفلية: 2vw
• الحشوة اليسرى: 10vw
• الحشوة اليمنى: 10vw

أضف إعدادات التحويل إلى القسم رقم 2

أضف مقياس التحويل الافتراضي إلى القسم رقم 2

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

• السفلي: 60٪ (سطح المكتب) ، 90٪ (الجهاز اللوحي والهاتف)
• يمينًا: 60٪ (كمبيوتر مكتبي) ، 90٪ (كمبيوتر لوحي وهاتف)

قم بالمرور على مقياس التحويل إلى القسم رقم 2

قم بتعديل هذه القيم عند التمرير. لاحظ كيف نستخدم نفس القيمة التي استخدمناها مع أحجام الشاشات الأصغر. سيؤدي القيام بذلك إلى التأكد من أن تأثير التمرير لن يحدث إلا على أحجام الشاشات الأكبر.

• القاع: 90٪
• اليمين: 90٪

قسم استنساخ مرتين

بعد ذلك ، قم باستنساخ القسم الثاني مرتين (أو ما يصل إلى عدة مرات كما تريد).

أضف Transform Rotate إلى Divider Module في القسم رقم 1

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

• اليسار: 90 درجة

قم بتنزيل مخطط القسم الموسع مجانًا

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

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

تنزيل مجاني

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

تحميل

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

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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