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

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

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

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

تنزيل مجاني

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

تحميل

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

كيفية استخدام التنزيل لاستيراد قالب التخطيط هذا على موقعك

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

انتقل لتحرير منشور باستخدام المحرر الافتراضي (Gutenberg). افتح قائمة "المزيد من الأدوات والخيارات" في الجزء العلوي الأيمن من الصفحة وحدد "إدارة جميع الكتل القابلة لإعادة الاستخدام".

ثم انقر فوق الزر "استيراد من JSON". اختر أحد ملفات JSON من مجلد التنزيل وانقر على زر الاستيراد.

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

هذا كل شيء!

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

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

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

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

بعد ذلك ، نحن على استعداد للبدء.

إنشاء جدول محتويات قابل للنقر عليه لمنشور مدونة باستخدام قالب Divi Layout

إضافة كتلة تخطيط ديفي

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

ثم انقر فوق الزر إنشاء تخطيط جديد. سيؤدي هذا إلى نشر محرر التخطيط وهو منشئ Divi لكتلة التخطيط.

اضف سطر

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

أضف أعلى الحاجز

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

إعدادات الحاجز

بعد ذلك ، قم بتحديث إعدادات الحاجز على النحو التالي:

• لون الخط: #eeeeee
• موضع الخط: توسيط رأسيًا
• وزن الحاجز: 3 بكسل
• العرض: 25٪
• الحشو: 30 بكسل للأعلى ، 30 بكسل للأسفل

أضف الحاجز السفلي

لإنشاء الحاجز الثاني ، قم بتكرار الفاصل السابق.

إنشاء عنوان جدول المحتويات باستخدام الوحدة النمطية Blurb

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

أضف وحدة دعاية مغالى فيها جديدة بين الفاصلين.

محتوى دعاية

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

• العنوان: "جدول المحتويات"
• استخدام الأيقونة: نعم
• الرمز: انظر لقطة الشاشة

إعدادات تصميم الدعاية

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

• لون الأيقونة: #eeeeee
• وضع الصورة / الرمز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 100 بكسل
• مستوى عنوان العنوان: H2
• عرض المحتوى: 100٪
• الارتفاع: 38 بكسل

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

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

إضافة العنصر رقم 1 دعاية دعاية

أضف وحدة دعاية مغالى فيها جديدة تحت دعاية العنوان.

محتوى دعاية

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

ثم قم بتحديث المحتوى برمز السهم الأيمن على سطح المكتب.

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

تصميم دعاية

الآن يمكننا تصميم وحدة الدعاية الدسمة بالشكل الذي نريده. في هذا المثال ، دعنا نحدِّث إعدادات الدعاية الدعاية على النحو التالي:

• لون الأيقونة: # b856c7
• رمز الدائرة: نعم
• لون الدائرة: #ffffff
• إظهار حدود الدائرة: نعم
• لون حدود الدائرة: # b856c7
• وضع الصورة / الرمز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 16 بكسل
• حجم نص النص: 16 بكسل
• ارتفاع خط العنوان: 2em
• عرض المحتوى: 100٪
• الهامش: 118 بكسل متبقية
• الحشو: أعلى 10 بكسل
• المساحة المتروكة (تحوم): يسار 10 بكسل

دعاية مكررة لمزيد من العناصر

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

إضافة عناوين URL لرابط المرساة

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

Anchor Link #one

للتبسيط ، سنضيف رابط الارتساء "#one" إلى أول دعاية مغالى فيها في القائمة. للقيام بذلك ، افتح إعدادات الوحدة النمطية الأولى في القائمة (وليس دعاية العنوان) وقم بتحديث ما يلي:

• عنوان URL لرابط الوحدة النمطية: #one

رابط المرساة #two

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

• عنوان URL لارتباط الوحدة النمطية: #two

رابط المرساة # ثلاثة

أخيرًا ، أضف الرابط التالي إلى عنصر الدعاية الثلاثية:

• عنوان URL لرابط الوحدة النمطية: #three

تشديد التباعد

إعدادات الصف

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

• عرض الحضيض: 1
• العرض: 100٪
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

إعدادات القسم

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

• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

احفظ التخطيط

لقد انتهينا من تصميم جدول المحتويات الخاص بنا. تأكد من حفظ والخروج من محرر التخطيط.

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

إضافة روابط HTML إلى عناوين النشر

لقد أضفنا عناوين URL لارتباط الارتساء إلى كل من الدعاية المغلوطة التي تشكل عناصر جدول المحتويات لدينا. نحتاج الآن إلى إضافة معرف CSS المقابل (أو HTML Anchor) إلى كتل العناوين في أسفل المنشور.

مرساة HTML واحد

انقر فوق الكتلة التي تحتوي على العنوان الأول الذي تريد الارتباط / الانتقال إليه. ثم افتح الإعدادات لهذا الكتلة. ضمن تبديل الخيارات المتقدمة ، أضف "واحد" إلى مربع إدخال مرساة HTML:

مرساة HTML: واحد

تذكر أن أول عنصر دعاية إعلانية يحتوي على عنوان URL "#one" والذي سيرتبط بهذا العنصر. لكن لا تقم بإضافة الهاشتاج إلى رابط HTML هذا. ليست هناك حاجة.)

مرساة HTML الثانية

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

• مرساة HTML: اثنان

HTML مرساة ثلاثة

وأخيرًا ، حدد كتلة العنوان الثالثة وأضف مرساة HTML كما يلي:

• مرساة HTML: ثلاثة

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

دعونا نرى النتيجة النهائية في المنشور المباشر.

وإليك كيفية عمل روابط الارتساء. لاحظ تأثير التمرير على الرموز وكيف يتم تمرير الرابط بسلاسة إلى الرابط المقابل أسفل الصفحة.

إضافة جدول المحتويات ككتلة تخطيط قابلة لإعادة الاستخدام

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

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

أدخل اسمًا للكتلة القابلة لإعادة الاستخدام ("جدول المحتويات") وانقر فوق حفظ.

الآن سيكون لديك الحظر متاحًا ضمن قائمة الكتل القابلة لإعادة الاستخدام عند إضافة كتلة جديدة إلى المنشور.

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

للقيام بذلك ، افتح قائمة المزيد من الإعدادات الخاصة بكتلة التخطيط القابلة لإعادة الاستخدام وحدد "التحويل إلى الكتلة العادية".

افكار اخيرة

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

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

هتافات!