Ajouter un résumé cliquable à un billet de blog est un bon moyen damp;rsquoaméliorer lamp;rsquoexpé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, lamp;rsquoajout damp;rsquoun design personnalisé CSS pour le définir peut être un défi. Camp;rsquoest là que les blocs de disposition Divi sont utiles. Dans ce tutoriel, nous concevons un résumé cliquable damp;rsquoun billet de blog (Gutenberg) qui utilise des liens damp;rsquoancrage pour guider lamp;rsquoutilisateur vers le titre spécifié tout au long de lamp;rsquoarticle. 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, devez damp;rsquoabord les en utilisant les boutons ci dessous. Pour accéder au téléchargement, devez abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci dessous. En tant que nouvel utilisateur, recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! êtes déjà sur la liste, il suffit de saisir votre adresse e mail ci dessous et cliquez sur . Vous ne serez pas « ré abonné » ou recevrez un courriel supplémentaire.
Télécharger le fichier
Inscrivez à Divi Newsletter et nous enverrons par courriel une copie du dernier paquet de mise en page de la page damp;rsquoatterrissage Divi, ainsi quamp;rsquoun grand nombre damp;rsquoautres ressources, conseils et astuces Divi gratuits. Suivez nous et serez bientôt maître Divi. êtes déjà abonné, entrez votre adresse e mail ci dessous et cliquez sur pour accéder au paquet Layout. 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 damp;rsquoimage Divi réutilisables sur le site, devez damp;rsquoabord Décompresser le fichier de téléchargement. Vous y trouverez les trois fichiers json que devez importer sur le site.
Utilisez lamp;rsquoéditeur par défaut (Gutenberg) pour modifier les messages. Ouvrez le menu plus damp;rsquooutils et damp;rsquooptions 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 à lamp;rsquointé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
Camp;rsquoest tout! Commençons le tutoriel. Ce que nous devons commencer à faire pour commencer, nous devons faire ce qui suit: namp;rsquoavez 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 de créer au moins trois blocs de titre avec du contenu sous chaque bloc de titre. Comme nous ajouterons des liens damp;rsquoancrage au résumé, nous avons besoin de trois titres pour lier davantage lamp;rsquoarticle. 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 damp;rsquoun billet de blog. Tout damp;rsquoabord, 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 lamp;rsquoéditeur de mise en page, qui est le générateur Divi du bloc de mise en page. Ajouter des lignes dans lamp;rsquoé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 passez le curseur. Il samp;rsquoagira damp;rsquoune bonne micro interaction, soulignant que le lien samp;rsquoé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 lamp;rsquoicône: b856c7 icône circulaire: s couleur circulaire: FFFFFF afficher la bordure circulaire: s couleur de la bordure circulaire: b856c7 image positionnement de lamp;rsquoicône: gauche utiliser la taille de la police de lamp;rsquoicône: s taille de la police de lamp;rsquoicône: 16px taille du texte: 16px hauteur de la ligne damp;rsquoen 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 damp;rsquoancrage notre élément Blurb namp;rsquoest pas actuellement cliquable, donc nous devons ajouter lamp;rsquoURL de lien damp;rsquoancrage nécessaire pour chaque élément. Lamp;rsquoURL du lien ancré commence toujours par un hashtag () Suivi de lamp;rsquoID à inclure. Lien damp;rsquoancrage one pour simplifier, nous ajouterons le lien damp;rsquoancrage one au premier drapeau de la liste. Pour ce faire, ouvrez les paramètres du premier module Blurb de la liste (au lieu de lamp;rsquoen 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 damp;rsquoespacement.
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 damp;rsquoenregistrer et de quitter lamp;rsquoéditeur de mise en page. Vous devriez maintenant voir le nouveau résumé dans lamp;rsquoéditeur de bloc par défaut. Ajouter une ancre HTML au titre du billet nous avons ajouté lamp;rsquoURL du lien damp;rsquoancrage à chaque introduction qui constitue lamp;rsquoélément sommaire. Nous devons maintenant ajouter lamp;rsquoID CSS approprié (ou lamp;rsquoancrage 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
Créer un résumé cliquable d&rsquoun billet de blog en utilisant le bloc de mise en page Divi
