كيفية إنشاء تصميمات "العودة إلى الأعلى" المخصصة اللاصقة باستخدام Divi

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

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

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

معاينة

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

GIF

مثال 1

المثال رقم 2

المثال رقم 3

1. إضافة Smooth Scroll إلى صفحة HTML

تحميل الصفحة المقصودة للطاقة الخضراء إلى صفحة جديدة

أول شيء عليك القيام به هو إنشاء صفحة جديدة وتحميل الصفحة المقصودة لـ Green Energy Layout Pack.

افتح إعدادات الصفحة

افتح إعدادات الصفحة بالنقر فوق الرمز المميز في شاشة الطباعة أدناه:

أضف Smooth Scroll إلى Custom CSS Box

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

html {
scroll-behavior: smooth;
}

2. أضف معرف CSS إلى قسم Hero

افتح قسم البطل

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

أضف معرف CSS

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

• معرف CSS: القسم -1

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

خطوات عامة

إضافة قسم عادي جديد إلى أسفل الصفحة

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

تباعد

افتح إعدادات القسم وقم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية.

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

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

هيكل العمود

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

إضافة Anchor Link

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

• عنوان URL لرابط الصف: yourwebsite.com/page/#section-1

محاذاة الصف

نضع أيضًا الصف في الجانب الأيمن من حاوية القسم.

• محاذاة الصف: صحيح

موقف ثابت

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

• المركز: ثابت
• الإزاحة العمودية: 30 بكسل
• الإزاحة الأفقية: 30 بكسل
• الفهرس Z: 99

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

إعادة إنشاء مثال التصميم رقم 1

إعدادات الصف

تغيير هيكل العمود

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

لون الخلفية

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

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

تحجيم

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

• استخدام عرض مزراب مخصص: 1
• العرض: 9vw (Desktop) ، 23vw (Tablet) ، 35vw (Phone)

تباعد

أضف بعض قيم المساحة المتروكة المخصصة أيضًا.

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

الحدود

تابع بإضافة "10 بكسل" لكل زاوية في إعدادات الحدود.

مربع الظل

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

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

عرض

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

display: flex;

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: Arial
• وزن خط النص: غامق
• محاذاة النص: صحيح
• لون النص: # 000000
• حجم النص: 1.1vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 4.4vw (هاتف)
• تباعد حروف النص: -1 بكسل
• ارتفاع خط النص: 1em

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

أضف الرمز

انتقل إلى العمود الثاني وأضف وحدة نصية هناك أيضًا. أضف الرمز "" إلى مربع المحتوى.

إعدادات النص

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

• خط النص: Open Sans
• محاذاة النص: الوسط
• لون النص: # 000000
• حجم النص: 3vw (سطح المكتب) ، 8vw (جهاز لوحي) ، 12vw (هاتف)
• ارتفاع خط النص: 0.6em

إعادة إنشاء مثال التصميم رقم 2

إعدادات الصف

تحجيم

إلى المثال الثاني! افتح إعدادات الصف وقم بتغيير عرض الصف.

• العرض: 7٪

تباعد

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

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

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

أضف الرمز

تابع بإضافة وحدة نصية إلى الصف وأدخل الرمز "".

إعدادات النص

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

• خط النص: Open Sans
• محاذاة النص: الوسط
• لون النص: # 000000
• حجم النص: 56 بكسل
• ارتفاع خط النص: 1em

تباعد

بعد ذلك ، سنضيف بعض الحشو العلوي والسفلي المخصص.

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

الحدود

انتقل إلى علامة تبويب التصميم وأضف "50vw" إلى كل زاوية من الزوايا. أضف حدًا أيضًا باستخدام الإعدادات التالية:

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

إعادة إنشاء مثال التصميم رقم 3

إعدادات الصف

تحجيم

إلى المثال التالي والأخير! افتح إعدادات الصف وقم بتعديل العرض.

• العرض: 4٪ (كمبيوتر مكتبي) ، 10٪ (جهاز لوحي) ، 15٪ (هاتف)

تباعد

قم بإزالة المساحة المتروكة العلوية والسفلية الافتراضية بعد ذلك.

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

مربع الظل

أضف ظل مربع مخصص إلى الصف باستخدام الإعدادات التالية:

• قوة انتشار الظل المربع: 4 بكسل
• لون الظل: rgba (0،0،0،0.3)

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

أضف الرمز

الوحدة الوحيدة التي نحتاجها لمثال التصميم هذا هي وحدة نصية. أضف "^" إلى مربع المحتوى.

إعدادات النص

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

• خط النص: Open Sans
• وزن خط النص: غامق للغاية
• محاذاة النص: الوسط
• لون النص: # 4359e9
• حجم النص: 56 بكسل
• ارتفاع خط النص: 1em

• لون ظل النص: # 35d764

تباعد

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

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

الحدود

أخيرًا وليس آخرًا ، أضف حدًا إلى وحدة النص ، وبذلك تكون قد انتهيت!

• عرض الحدود: 3 بكسل
• لون الحدود: # 4359e9

معاينة

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

GIF

مثال 1

المثال رقم 2

المثال رقم 3

افكار اخيرة

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

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