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

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

هيا بنا نبدأ!

نظرة خاطفة

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

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

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

ها هي الوظيفة على الهاتف المحمول أيضًا.

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

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

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

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

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

إنشاء الصف اللزج

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

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

• موقف مثبت: التمسك بالأعلى والأسفل

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

تصفيف الصف اللزج

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

• لون الخلفية (سطح المكتب): #ffffff
• لون الخلفية (مثبت): # 051923

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

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

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

ضمن خيار تبديل خيار الحدود ، قم بتحديث ما يلي:

• لون الحدود: # 6eeb83
• عرض الحد السفلي (سطح المكتب): 8 بكسل
• عرض الحد السفلي (مثبت): 0 بكسل
• عرض الحد الأيسر (سطح المكتب): 0 بكسل
• عرض الحد الأيسر (مثبت): 8 بكسل

إنشاء نص العنوان اللاصق

لإنشاء نص عنوان الصفحة ، أضف وحدة نصية جديدة إلى الصف.

ثم الصق HTML التالي في محتوى النص.

<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>

وتحديث لون الخلفية عند التمرير أيضًا ...

• لون الخلفية (تحوم): rgba (255،255،255،0.2)

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

تنسيق نص العنوان اللاصق

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• خط العنوان 2: مونتسيرات
• العنوان 2 محاذاة النص: اليسار
• لون نص العنوان 2 (سطح المكتب): افتراضي (أو أسود)
• لون نص العنوان 2 (مثبت): #ffffff
• حجم نص العنوان 2: 80 بكسل (سطح المكتب) ، 22 بكسل (مثبت) ، 28 بكسل (هاتف)
• العنوان: ارتفاع سطرين: 1.3em (سطح المكتب) ، 1em (مثبت)

ثم قم بتحديث المساحة المتروكة على النحو التالي:

• المساحة المتروكة (سطح المكتب): 15 بكسل للأعلى و 15 بكسل للأسفل
• الحشو (مثبت): 10 بكسل للأعلى ، 0 بكسل للأسفل ، 20 بكسل لليسار
• المساحة المتروكة (الجهاز اللوحي والهاتف): 15 بكسل للأعلى ، 15 بكسل للأسفل ، 15 بكسل لليسار ، 15 بكسل لليمين

إنشاء محتوى صفحة وهمية

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

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

نسخ القسم حسب الحاجة لمزيد من عناوين الصفحات ومحتوياتها الثابتة

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

قسم مكرر

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

قم بتحديث محتوى النص ولون حدود الصف

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

كرر حسب الحاجة

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

إضافة ارتباطات إرساء إلى عناوين الصفحات اللاصقة

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

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

أضف معرف CSS للقسم 1

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

• معرف CSS: واحد

ثم افتح إعدادات الصف الثابت وأضف عنوان URL لرابط الصف التالي:

• عنوان URL لارتباط الصف: # واحد

الآن عندما ينقر المستخدم على الصف / العنوان ، ستنتقل الصفحة إلى هذا القسم الأول.

أضف معرف CSS للقسم 2

بعد ذلك ، نحتاج إلى إضافة رابط الارتساء للعنوان الثاني.

افتح إعدادات القسم الثاني وأضف معرف CSS التالي:

• معرف CSS: اثنان

إضافة عنوان URL لارتباط الصف الثابت 1 للقسم

ثم افتح إعدادات الصف اللاصق داخل القسم الثاني وأضف عنوان URL لرابط الصف:

• عنوان URL لارتباط الصف: #two

أضف معرف CSS للقسم 3

بعد ذلك ، نحتاج إلى إضافة رابط الارتساء للعنوان الثالث.

افتح إعدادات القسم الثالث وأضف معرف CSS التالي:

• معرف CSS: ثلاثة

إضافة عنوان URL لارتباط الصف الثابت 1 للقسم

ثم افتح إعدادات الصف اللاصق داخل القسم الثالث وأضف عنوان URL لرابط الصف:

• عنوان URL لارتباط الصف: # ثلاثة

أضف معرف CSS للقسم 4

أخيرًا ، نحتاج إلى إضافة رابط الارتساء للعنوان الرابع.

افتح إعدادات القسم الرابع وأضف معرف CSS التالي:

• معرف CSS: أربعة

إضافة عنوان URL لارتباط الصف الثابت 1 للقسم

ثم افتح إعدادات الصف اللاصق داخل القسم الرابع وأضف عنوان URL لرابط الصف:

• عنوان URL لارتباط الصف: #four

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

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

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

ها هي الوظيفة على الهاتف المحمول أيضًا.

افكار اخيرة

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

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

هتافات!