Divi: كيفية تخصيص رابط "قراءة المزيد" في مدونة

هل ترغب في تخصيص رابط "قراءة المزيد" الخاص بوحدة المدونة الخاصة بـ Divi ؟ ثم اتبع البرنامج التعليمي الخاص بنا.

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

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

• تخصيص رابط "قراءة المزيد" باستخدام الخيارات المضمنة في Divi
• محاذاة رابط "قراءة المزيد" (يسار ، وسط ، يمين)
• حوّل رابط "قراءة المزيد" إلى زر ملء الشاشة
• قم بإنشاء زر قراءة المزيد مخصص مع تأثيرات التحويم
• استبدل النص "قراءة المزيد" بشيء آخر (مثل "اقرأ المقال").

مسح

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

قم بتحميل وحدة مدونة على إحدى الصفحات باستخدام Divi's Theme Builder

لبدء تخصيص روابط "قراءة المزيد" ، ستحتاج إلى الوصول إلى وحدة المدونة. 

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

لبدء العملية ، سنستخدم صفحة المدونة من التخطيط المحدد مسبقًا الذكاء الاصطناعي.

أضف صفحة جديدة من لوحة تحكم WordPress

بعد ذلك ، أدخل عنوانًا لصفحتك ، ثم انقر فوق " استعمال Divi منشئ".

ثم انقر فوق " اختر التخطيط« 

ابحث عن واختر " مصطنع ذكاء المدونة« 

أخيرًا ، اختر تصميم المدونة وانقر على " اختر التخطيط« 

تخصيص ومحاذاة نص الارتباط قراءة المزيد

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

ضمن علامة التبويب "النمط" ، يمكنك تخصيص نص "قراءة المزيد" باستخدام أحد الخيارات المضمنة. في هذا المثال ، دعنا نحدِّث ما يلي:

• الخط اقرأ المزيد: بارلو
• قراءة المزيد ضوء خافت: شبه غامق
• قراءة المزيد نمط النسخ: أحرف كبيرة (TT) ، تسطير (U)
• لون النص اقرأ المزيد: # db0eb7
• قراءة المزيد لون النص المسطر: # 3c5bff
• تباعد الأحرف اقرأ المزيد: 1 بكسل

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

حاليًا ، يتم وضع رابط "قراءة المزيد" على اليسار افتراضيًا ، إلا إذا قمت بتغيير المحاذاة. لمحاذاة الرابط إلى وسط المنشور أو يمينه ، أضف مقتطف CSS مثل هذا:

ضمن علامة التبويب خيارات متقدمة لإعدادات المدونة ، أضف CSS التالي إلى زر قراءة المزيد CSS:

display: block;
text-align: right;

سيغير "display:block" الرابط إلى عنصر الكتلة الذي يمتد على العرض الكامل لحاويته (في هذه الحالة، نص العنصر محتويات للنشر). بمجرد تعريفه كعنصر كتلة، يمكننا محاذاة النص إلى اليمين باستخدام "text-align:right".

اقرأ أيضا: كيفية إنشاء رأس عام مثبت في Divi

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

لتوسيط الارتباط ، ما عليك سوى استبدال "right" بكلمة "center" بقيمة خاصية "text-align" على النحو التالي:

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

تخصيص رابط "قراءة المزيد" ليبدو كزر

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

• قراءة المزيد نسخ النمط: أحرف كبيرة (TT)
• لون النص اقرأ المزيد: #ffffff

في المثال السابق ، استخدمنا "display: block" و "text-align: center" لجعل الرابط يمتد بالعرض الكامل للحاوية وتوسيط النص. 

انظر أيضا: كيفية إنشاء قائمة منزلقة ودفع في Divi

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

display: block;
text-align: center;
background-color:#01012C;
padding: 0.3em 1em;
margin-top: 10px;

نتيجة

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

إنشاء نمط زر متقدم باستخدام CSS

إذا كنت تريد نقل نمط الزر إلى مستوى آخر ، فيمكننا إضافة خلفية وتأثير تمرير الماوس.

للقيام بذلك ، استبدل CSS لزر "قراءة المزيد" بما يلي:

display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-image: linear-gradient(90deg,#01012C 50%,rgba(0,0,0,0) 50%);
background-color: #3c5bff;
transition: all 300ms;

لتغيير الخلفية عند التمرير ، يمكنك لصق CSS التالي على "زر مزيد من المعلومات" عند تحريك مؤشر الماوس:

display: inline-block;
margin-top: 10px;
padding: 0.3em 1em;
background-color: #01012C;

نتيجة

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

قم بتغيير نص "قراءة المزيد" إلى شيء آخر

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

قبل إضافة كود jQuery الخاص بنا ، أضف فئة CSS مخصصة إلى وحدة المدونة على النحو التالي:

• فئة CSS: et-custom-read-more-text

ملاحظة: تأكد من صحة اسم الفئة حتى يعمل jQuery.

لإضافة jQuery الذي يعدل نص "قراءة المزيد" ، أضف وحدة رمز ضمن وحدة المدونة.

ثم الصق كود jQuery التالي ، مع التأكد من لف الكود بعلامات البرنامج النصي الضرورية:

(function ($) {
  $(document).on("ready ajaxComplete", function () {
    $(".et-custom-read-more-text .et_pb_post a.more-link").html("Lire l'article");
  });
})(jQuery);

يخبر هذا الرمز المتصفح أساسًا بتغيير نص رابط "قراءة المزيد" إلى "قراءة المقالة" بمجرد تحميل الصفحة.

نتيجة

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

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

إليك نظرة أخرى على تخصيصات الارتباط (أو الزر) قراءة المزيد التي قمنا بها.

تحميل DIVI Now !!!

وفي الختام

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

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

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

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

...