Ajouter un résumé cliquable à un billet de blog est un bon moyen d’améliorer l’expérience utilisateur. Dans de nombreux cas, les résumés de blogs utilisent des liens ancrés pour aider les utilisateurs à naviguer dans le contenu. De plus, il est facile de créer un résumé (avec un lien ancré) en utilisant le HTML de base. Cependant, l’ajout d’un design personnalisé \ CSS pour le définir peut être un défi. C’est là que les blocs de disposition Divi sont utiles. Dans ce tutoriel, nous concevons un résumé cliquable d’un billet de blog (Gutenberg) qui utilise des liens d’ancrage pour guider l’utilisateur vers le titre spécifié tout au long de l’article. Pour ce faire, nous utiliserons les blocs de mise en page Divi pour créer des résumés et utiliser tous les puissants outils de conception Divi Builder.
Allons – y! Un voyeur. Téléchargement gratuit de blocs de mise en page sommaires réutilisables pour obtenir des blocs de mise en page sommaires pour 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é » ou vous recevrez un courriel 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 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 Layout. Vous vous êtes inscrit avec succès. Veuillez vérifier votre adresse e – mail pour confirmer votre abonnement et accéder à
Paquet de mise en page hebdomadaire gratuit Divi! Comment utiliser le téléchargement pour importer ce bloc de mise en page sur le site pour importer ces blocs de mise en page d’image Divi réutilisables sur le site, vous devez d’abord Décompresser le fichier de téléchargement. Vous y trouverez les trois fichiers json que vous devez importer sur le site.
Utilisez l’éditeur par défaut (Gutenberg) pour modifier les messages. Ouvrez le menu plus d’outils et d’options dans le coin supérieur droit de la page et sélectionnez gérer tous les blocs réutilisables.
Puis cliquez sur le bouton importer à partir de json. Sélectionnez un fichier json dans le dossier de téléchargement et cliquez sur le bouton importer. Une fois terminé, ajoutez un nouveau bloc à l’intérieur du Gutenberg. Nous serons en mesure de trouver les blocs de mise en page réutilisables importés sous options réutilisables. Il suffit de cliquer sur le bouton \
C’est tout! Commençons le tutoriel. Ce que nous devons commencer à faire pour commencer, nous devons faire ce qui suit: Si vous n’avez pas terminé, installez et activez le thème Divi. Créez un nouvel article dans WordPress et ajoutez du contenu fictif (titre, titre, paragraphe, image de premier plan, etc.) en utilisant l’éditeur par défaut (Gutenberg). Assurez – vous de créer au moins trois blocs de titre avec du contenu sous chaque bloc de titre. Comme nous ajouterons des liens d’ancrage au résumé, nous avons besoin de trois titres pour lier davantage l’article. Après ça, on pourra commencer.
Utilisez le bloc de mise en page Divi add Divi Layout Block pour créer un résumé cliquable d’un billet de blog. Tout d’abord, ajoutez un nouveau bloc de mise en page Divi en haut du contenu du billet de blog. Puis cliquez sur le bouton créer une nouvelle mise en page. Ceci déploie l’éditeur de mise en page, qui est le générateur Divi du bloc de mise en page. Ajouter des lignes dans l’éditeur de mise en page, lancez le projet en ajoutant des lignes aux colonnes. Ajouter une division
Ona utilise la flèche vers le bas pendant que vous passez le curseur. Il s’agira d’une bonne micro – interaction, soulignant que le lien s’écoulera le long du billet vers un endroit.
Conception Blurb nous pouvons maintenant concevoir des modules Blurb au besoin. Dans ce cas, Nous avons mis à jour les paramètres de Blurb comme suit: couleur de l’icône: # b856c7 icône circulaire: s couleur circulaire: # FFFFFF afficher la bordure circulaire: s couleur de la bordure circulaire: # b856c7 image \ positionnement de l’icône: gauche utiliser la taille de la police de l’icône: s taille de la police de l’icône: 16px taille du texte: 16px hauteur de la ligne d’en – tête: 2em largeur du contenu: 100% Marges: 118px remplissage à gauche: 10px remplissage en haut (vol stationnaire): 10px remplissage à gauche Maintenant que notre premier élément Blurb est terminé, nous pouvons le répéter autant de fois que nécessaire, en fonction du nombre de liens cliquables à inclure dans le billet. Maintenant, copions – le deux fois et créons un total de trois éléments pour le résumé.
Ajouter une URL de lien d’ancrage notre élément Blurb n’est pas actuellement cliquable, donc nous devons ajouter l’URL de lien d’ancrage nécessaire pour chaque élément. L’URL du lien ancré commence toujours par un hashtag (#) Suivi de l’ID à inclure. Lien d’ancrage # one pour simplifier, nous ajouterons le lien d’ancrage # one au premier drapeau de la liste. Pour ce faire, ouvrez les paramètres du premier module Blurb de la liste (au lieu de l’en – tête Blurb) et mettez à jour ce qui suit: URL du lien de formulaire: # i Ancrez le lien # 2 et ouvrez les paramètres du deuxième élément bleu et ajoutez le lien suivant: URL du lien du module: # 2 Ancrer le lien # 3 Enfin, ajouter le lien suivant au troisième élément bleu: URL du lien du module: # 3 Pour le moment, augmentez le réglage de la ligne d’espacement.
Ligne Pour résoudre ce problème, ouvrez les paramètres de ligne et mettez à jour la largeur et le remplissage de la gouttière comme suit: largeur de la gouttière: 1 largeur: 100% remplissage: 0px haut, 0px bas Nous remplissons également cette section. Ouvrez la section paramètres et mettez à jour ce qui suit: padding: 0px top, 0px bottom Enregistrer la mise en page nous avons terminé la conception sommaire. Assurez – vous d’enregistrer et de quitter l’éditeur de mise en page. Vous devriez maintenant voir le nouveau résumé dans l’éditeur de bloc par défaut. Ajouter une ancre HTML au titre du billet nous avons ajouté l’URL du lien d’ancrage à chaque introduction qui constitue l’élément sommaire. Nous devons maintenant ajouter l’ID CSS approprié (ou l’ancrage HTML) au bloc titre sous le billet. Html cliquez sur le bloc contenant le premier titre à lier \ sauter. Puis ouvrez les paramètres du bloc. Sous le commutateur options avancées, ajoutez \