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

هل تريد تخصيص رابط "اقرأ المزيد" في وحدة مدونة ديفي؟ اتبع دليلنا التعليمي.

Les liens "Lire plus" d'un blog peuvent être un élément crucial pour améliorer تجربة المستخدم. لذلك من المهم أن نعرف كيفية تخصيصها بشكل صحيح.

Dans ce tutoriel, nous allons vous montrer comment personnaliser le lien "Lire Plus" dans le module Blog. Dans cet article, nous allons vous montrer comment :

• قم بتخصيص رابط "قراءة المزيد" باستخدام خيارات Divi المضمنة
• محاذاة رابط "قراءة المزيد" (يسار ، وسط ، يمين)
• حوّل رابط "قراءة المزيد" إلى زر ملء الشاشة
• Créer un Bouton "Lire Plus" personnalisé avec des effets de survol
• Remplacez le texte "Lire Plus" par autre chose (comme "Lire l'article").

مسح

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

Charger un module Blog sur une page à l'aide de Thème Builder de Divi

Pour commencer à personnaliser les liens "Lire Plus", vous aurez besoin d'accéder à un module Blog. 

يمكنك تحميل تخطيط محدد مسبقًا avec n'importe quel module Blog de votre choix ou simplement ajouter un nouveau module Blog à une page. 

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

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

Ensuite, donnez un titre à votre page puis cliquez sur "استخدم Divi Builder".

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

Recherchez et choisissez "صفحة مدونة الذكاء الاصطناعي"

Enfin, choisir la disposition Blog et cliquer sur "اختر التخطيط"

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

Chaque module Blog offre la possibilité d'afficher ou de masquer le lien "Lire Plus" pour chaque article de la mise en page. Pour afficher le lien "Lire Plus", ouvrez les paramètres du blog et basculez l'option "إظهار زر "قراءة المزيد"" sur "OUI" dans la liste des éléments de blog que vous souhaitez afficher.

Sous l'onglet Style, vous pouvez personnaliser le texte "Lire Plus" à l'aide de l'une des options intégrées. Pour cet exemple, mettons à jour les éléments suivants :

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

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

Actuellement, le lien "Lire plus" est placé à gauche par défaut, sauf si vous modifiez l'alignement. Pour aligner le lien au centre ou à droite de la publication, ajoutez un extrait de CSS comme suit :

Sous l'onglet avancé des paramètres du blog, ajoutez le CSS suivant au CSS du Bouton "Lire plus" :

display: block;
text-align: right;

Le "display:block" changera le lien en un élément de bloc qui s'étend sur toute la largeur de son conteneur (dans ce cas, le corps du contenu de la publication). Une fois défini comme un élément de bloc, nous pouvons aligner le texte à droite en utilisant "text-align:right" .

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

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

Afin de centrer le lien, remplacez simplement "right" par "center" pour la valeur de la propriété "text-align" comme suit :

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

Personnaliser le lien "Lire plus" pour qu'il ressemble à un bouton

Pour cet exemple, nous allons créer un style de bouton pleine largeur simple pour le lien "Lire plus". Avant d'ajouter le CSS personnalisé, ouvrez les paramètres du blog et mettez à jour le texte du lien "Lire plus" comme suit :

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

Dans l'exemple précédent, nous avons utilisé "display:block" et "text-align:center" pour que le lien s'étende sur toute la largeur du conteneur et centre le texte. 

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

Pour le faire ressembler à un bouton, tout ce que nous avons à faire est d'ajouter une couleur d'arrière-plan et un espacement avec quelques extraits de CSS supplémentaires. Pour cela, accédez à l'onglet Avancé et mettez à jour le CSS du Bouton "Lire plus" comme suit :

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

نتيجة

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

Création d'un style de bouton avancé avec du CSS

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

Pour ce faire, remplacez le CSS du "Bouton Lire plus" par ce qui suit :

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;

Pour changer l'arrière-plan au survol, vous pouvez coller le CSS suivant sur "Bouton Pour en savoir plus" lors du survol du curseur de la souris :

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

نتيجة

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

Modifier le texte "Lire Plus" par quelque chose d'autre

Afin de changer le texte "Lire plus" par quelque chose d'autre, comme "Lire l'article", nous aurons besoin d'un peu de jQuery. Mais ne vous inquiétez pas, ce ne sont que quelques lignes.

Avant d'ajouter notre code jQuery, ajoutez une classe CSS personnalisée au module Blog comme suit :

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

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

Pour ajouter le jQuery qui modifie le texte "Lire plus", ajoutez un module Code sous le module Blog.

Collez ensuite le code jQuery suivant en vous assurant d'envelopper le code avec les balises script nécessaires :

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

Ce code indique essentiellement au navigateur de remplacer le texte du lien "Lire plus" par "Lire l'article" une fois la page chargée.

نتيجة

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

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

Voici un autre aperçu des personnalisations du lien (ou du bouton) "Lire plus" que nous avons réalisées.

تحميل DIVI Now !!!

الخاتمة

Voila ! C'est tout pour cet article. Le module Blog de Divi vous permet de personnaliser le lien « Lire plus » de manière créative. Et si vous souhaitez expérimenter quelques extraits de CSS, vous pouvez créer vous-même des modifications encore plus avancées. 

Nous espérons que ce tutoriel vous aidera à faire passer ces liens "Lire plus" au niveau supérieur. Si vous avez un quelconque souci ou des suggestions, retrouvons nous dans قسم التعليقات لمناقشته.

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

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

...