Le lien « en savoir plus » du blog peut être un facteur clé pour améliorer l’expérience utilisateur. Il est donc important de savoir comment le personnaliser correctement. Dans Divi, vous pouvez personnaliser le lien Read more dans le module blog, ainsi que de nombreux autres éléments qui composent le contenu du blog. Dans ce tutoriel, nous vous montrerons comment personnaliser le lien Read more dans le module Divi blog afin que vous puissiez mieux contrôler votre conception. Dans cet article, nous vous montrerons comment: – dessiner le lien \
Voici une brève introduction à la conception que nous allons créer dans ce tutoriel. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » et ne recevrez pas d’e – mail supplémentaire.
Télécharger le fichier
Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi, qui sont incroyablement gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet de mise en page. Vous vous êtes inscrit avec succès. Veuillez vérifier votre adresse e – mail pour confirmer
Actuellement, par défaut, le lien Read more est placé en ligne à gauche, à moins que vous ne changiez l’alignement du corps du texte. Pour aligner le lien sur le Centre ou la droite de l’article, ajoutez un clip CSS comme suit:
Dans l’onglet avancé des paramètres du blog, ajoutez le CSS suivant au CSS du bouton lire plus: afficher: bloc;
Alignement du texte: alignement à droite; Display: block change le lien vers un élément de bloc qui couvre toute la largeur de son conteneur (dans ce cas, le corps du contenu du billet). Après avoir créé l’élément bloc, nous pouvons utiliser text align: Right pour aligner le texte à droite. C’est le résultat. Pour centrer le lien, il suffit de remplacer \
Partie 2: définir le style du lien à lire plus pour ressembler à un bouton créer un style de bouton simple pleine largeur en utilisant CSS dans cet exemple, nous allons créer un style de bouton simple pleine largeur pour le lien lire plus. Avant d’ajouter un CSS personnalisé, ouvrez vos paramètres de blog et mettez à jour vos détails de conception de texte comme suit: en savoir plus styles de police: en majuscules détails de lecture couleur de texte: # FFF Dans l’exemple précédent, nous avons utilisé display: block et text alignment: Center pour que les liens étendent toute la largeur du conteneur et centrent le texte. Pour qu’il ressemble à un bouton, il suffit d’ajouter une couleur de fond et de l’isoler des autres clips CSS.
Pour créer un style de bouton pleine largeur pour le lien Read more, allez à l’onglet avancé et mettez à jour css pour le bouton Read more comme suit: afficher: bloc;
Alignement du texte: centré;
Couleur de fond: # 01012c;
Remplissage: 0,3em 1EM;
Bord supérieur: 10px; Re
Bouton \