5 أشياء رائعة يمكنك القيام بها في Divi باستخدام روابط المرساة

يمكن أن تحسن ارتباطات الإرساء التنقل وتساعد في تنظيم المحتوى الخاص بك ، خاصة على موقع ويب يحتوي على محتوى طويل. تتمثل إحدى الفوائد الرئيسية الأخرى لاستخدام روابط الإرساء بخلاف التنقل في حقيقة أنها رائعة بالنسبة إلى مُحسّنات محرّكات البحث. في حين أن مفهوم استخدام روابط الارتساء بسيط للغاية ، فقد يكون من الصعب معرفة من أين تبدأ. إنها في الواقع واحدة من أولى الأشياء التي بحثت عنها عندما بدأت في تطوير مواقع WordPress.

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

لنذهب!

ستتعلم كيفية:

1. قم بالتمرير إلى Toggle وفتحه باستخدام Anchor Link في Divi
2. قم بإنشاء قائمة تنقل من صفحة واحدة
3. القفز إلى قسم الصفحة من صفحة أخرى
4. استخدم Divi Dot Navigation
5. أضف ارتباطات إلى عناوينك

5 أشياء رائعة يمكنك القيام بها في Divi باستخدام روابط المرساة

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

قم بالتمرير إلى Toggle وفتحه باستخدام Anchor Link في Divi

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

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

أولاً ، قم بإنشاء صفحة جديدة ونشر المنشئ المرئي. ثم حدد الخيار "Choose a Premade Layout". في النافذة المنبثقة التحميل من المكتبة ، ابحث عن تخطيط صفحة الأسئلة الشائعة للمحاسب عن طريق كتابة "faq" في شريط البحث. ثم انقر فوق التخطيط وفي المعاينة التي تظهر ، انقر فوق الزر استخدام هذا التخطيط لنشره في صفحتك.

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

للقيام بذلك ، افتح أولاً إعدادات الزر وأضف عنوان URL للرابط التالي لزرك:

URL ارتباط الزر: # toggle3

أعطيت رابط المرساة هذا المعرف "toggle3" للمساعدة في تذكر أنني أريد الارتباط للتبديل الثالث على الصفحة. سيرتبط اسم المعرف هذا بمعرف CSS للتبديل الذي سنضيفه لاحقًا حتى يعرف الزر ما الذي يجب تبديله للتمرير.

بعد ذلك ، أضف فئة CSS فريدة إلى وحدة الزر:

فئة CSS: تبديل مفتوح

ثم احفظ الإعدادات الخاصة بك.

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

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

ضمن علامة التبويب المتقدمة ، أضف معرف CSS التالي:

معرف CSS: toggle3

من المهم أن يرتبط هذا بالضبط بعنوان URL لرابط الزر المستخدم سابقًا. الاختلاف الوحيد هنا هو أنه يجب عليك استبعاد "#".

تتضمن الخطوة الأخيرة إضافة بعض التعليمات البرمجية المخصصة إلى نص صفحتنا. للقيام بذلك ، انتقل إلى Divi Theme Options ، وافتح علامة التبويب Integration ثم الصق ما يلي في قسم النص كما هو موضح في GIF أدناه.

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

لا تنسَ لف الكود بعلامة البرنامج النصي المناسبة.

يمكنك الآن اختبار صفحتك لمعرفة ما إذا كانت تعمل أم لا.

لفهم القليل حول ما تفعله هذه الشفرة. دعونا نلقي نظرة فاحصة. ها هو المقتطف مرة أخرى:

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

في الكود ، المحدد "a.open-toggle" يشير إلى الزر مع الفئة المخصصة لدينا. يشير المحدد "# toggle3.et_pb_toggle_2 .et_pb_toggle_title" إلى عنوان التبديل بالمعرف "toggle3" والفئة "et_pb_toggle_2".

الفئة "et_pb_toggle_2" هي في الواقع الفئة المرتبطة بالتبديل الثالث. وذلك لأن Divi يعطي أول تبديل للفئة "et-pb_toggle_0" ، والتبديل الثاني "et-pb_toggle_1" ، وهكذا.

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

من المهم أن تعرف ذلك حتى تتمكن من تحديث التعليمات البرمجية الخاصة بك وفقًا لذلك. على سبيل المثال ، إذا أردت أن يفتح زر التبديل الثاني على الصفحة ، فسأستبدل “# toggle3.et_pb_toggle_2 .et_pb_toggle_title” بـ “# toggle3.et_pb_toggle_1 .et_pb_toggle_title”.

مقتطف الشفرة هذا هو تباين للمفهوم التالي. حاولت أن أبقيه بسيطًا قدر الإمكان.

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

قم بإنشاء قائمة تنقل من صفحة واحدة

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

فيما يلي نظرة عامة سريعة على كيفية القيام بذلك.

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

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

معرف CSS: الخدمات

بعد ذلك ، ابحث عن قسم "العمل المميز" وامنح هذا القسم معرف CSS على النحو التالي:

معرف CSS: العمل

وأضف معرف CSS التالي إلى قسم "نبذة عنا" أيضًا:

معرف CSS: حول

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

من لوحة المعلومات ، انتقل إلى المظهر> القوائم وأنشئ قائمة أساسية جديدة. ثم أنشئ ثلاثة روابط مخصصة بعنوان URL ونص الرابط التاليين:

رابط مخصص 1
URL: # الخدمات
نص الرابط: الخدمات

الرابط المخصص 2
URL: #work
نص الرابط: العمل

رابط مخصص 3
URL: # حول
نص الرابط: حول

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

الآن عندما تزور صفحتك يمكنك تجربتها. قد تلاحظ أن هناك تمريرًا سلسًا. هذا لأن سمة Divi تضيف تلقائيًا التمرير السلس - تمت إضافة هذه الميزة في Divi الإصدار 2.4.

للحصول على مزيد من الإلهام حول إنشاء مواقع ويب قاتلة بأسلوب صفحة واحدة ، تحقق من هذه المنشورات:

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

القفز إلى قسم الصفحة من صفحة أخرى

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

كل ما عليك فعله هو استخدام عنوان URL لرابط الربط عند إنشاء ارتباط على صفحة مختلفة. إذا أردت وضع رابط إلى قسم الخدمات بمعرف "الخدمات" ، فسيبدو مثل ، www.yourdomain.com/page/#services .

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

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

استخدم Divi Dot Navigation

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

لمزيد من المعلومات ، هناك منشور رائع حول كيفية إضافة تصنيفات إلى التنقل النقطي.

أضف ارتباطات إلى عناوينك

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

لإضافة معرف CSS إلى رؤوسك باستخدام Divi Builder ، افتح الوحدة التي تحتوي على نص العنوان الخاص بك. تأكد من فتح علامة تبويب النص. ابحث عن علامة الرأس (h1 ، h2 ، h3 ، إلخ ...) ثم أدخل معرفًا داخل أقواس علامة رأس البداية. فيما يلي مثال على عنوان h3 بالمعرف "webdesign":

<h3 id="webdesign">Website Design</h3>

يمكنني الآن الارتباط بهذا العنوان من أي مكان طالما أستخدم عنوان URL الصحيح لرابط الارتساء. الذي يجب أن يبدو في هذا المثال مثل هذا:

www.yourdomain.com/page/#webdesign

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

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

أشياء رائعة جدا.

تغليف

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

هل لديك أي نصائح أو أسئلة حول روابط الإرساء؟ أخبرنا بتجاربك في قسم التعليقات أدناه.