Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Avant de pouvoir ajouter un module de navigation d’article Divi à votre page, vous devez d’abord sauter dans Divi Builder. Une fois le thème Divi installé sur votre site, vous remarquerez un bouton Utilisez Divi Builder via l’éditeur de publication lors de la création d’une nouvelle page. Cliquez sur ce bouton pour activer Divi Builder et accéder à tous les modules de Divi Builder. Cliquez ensuite sur le bouton Utiliser le constructeur visuel pour démarrer le générateur en mode visuel. Vous pouvez également cliquer sur le bouton Utiliser le constructeur visuel Lorsque vous naviguez sur votre site Web au premier plan lorsque vous êtes connecté à votre tableau de bord WordPress.

Générateur de Divi

Après être entré dans Visual Builder, vous pouvez cliquer sur le signe plus gris pour ajouter un nouveau module à votre page. Les nouveaux modules ne peuvent être ajoutés que dans les lignes. Lorsque vous démarrez une nouvelle page, n’oubliez pas d’ajouter d’abord une ligne à votre page.

Navigation dans articles.png

Trouvez le module de navigation dans la liste des modules et cliquez dessus pour l’ajouter à votre page. La liste des modules peut être parcourue. Cela signifie que vous pouvez également taper le mot «post-navigation», puis appuyer sur Entrée pour rechercher et ajouter automatiquement le module de navigation. Une fois le module ajouté, vous serez accueilli par la liste des options du module. Ces options sont divisées en trois groupes principaux: contenu , Conception et Avancée .

Exemple de cas d’utilisation: ajout de liens de navigation personnalisés à la fin d’un article de blog

Les liens de navigation vers les articles suivants et précédents au bas de votre article sont un excellent moyen de maintenir l’intérêt de vos visiteurs avec votre contenu. Dans cet exemple, je vais vous montrer comment utiliser les noms de nom de publication actuels pour vos liens de navigation au lieu des noms de lien communs «précédent» et «suivant». Je vais également vous montrer comment ajouter un cadre autour des liens pour les rendre plus percutants.

Exemple de menu de navigation Titre Publication.jpg

Commençons.

Utilisez le générateur visuel pour ajouter une section standard avec une mise en page pleine largeur (1 colonne) au bas de l’article. Ajoutez ensuite un module de navigation après la ligne.

Changer les titres des liens divi.png

Mettez à jour les paramètres de navigation de la version comme suit:

Onglet Contenu

Texte du lien précédent:% title (cette variable insère le titre de l’article)
Texte pour le lien suivant:% title (cette variable insère le titre de l’article)

Concevoir l’onglet

Liens de police: PT Sans
Taille de police gauche: 20px
Couleur du texte gauche: # 5e95c1
Utilisez la limite: OUI
Couleur du bord: # 5e95c1
Largeur de la bordure: 1px
Remplissage personnalisé: 20 pixels en haut, 20 pixels à droite, 20 pixels en bas, 20 pixels à gauche

Modifier les liens de navigation.png

C’est tout ! Vous avez maintenant les titres des articles sur les liens de navigation

Exemple de lien d'article sur divi.png

Paramètres de contenu pour le module de navigation

Dans l’onglet Contenu, vous trouverez tous les éléments de contenu du module tels que le texte, les images et les symboles. Tout ce qui règne Quoi L’affichage dans votre module se trouve toujours sur cet onglet.

Titre du module de la zone de contenu de l'article.png

Texte vers le lien précédent

Définissez un texte personnalisé pour le lien précédent. Vous pouvez utiliser la variable% title pour inclure le titre de l’article. Laissez vide pour la norme.

Texte du lien suivant

Définissez un texte personnalisé pour le lien ci-dessous. Vous pouvez utiliser la variable% title pour inclure le titre de l’enregistrement. Laissez vide pour la norme.

Dans la même catégorie

Ici, vous pouvez spécifier si l’article précédent et l’article suivant doivent avoir les mêmes termes de taxonomie que l’article actuel.

Nom de la taxonomie personnalisée

Laissez cette option vide lorsque vous utilisez ce module pour un projet ou un article. Sinon, entrez le nom de la taxonomie pour « Dans la même catégorie » pour fonctionner correctement.

Masquer le lien précédent

Ici, vous pouvez masquer ou afficher le lien précédent.

Masquer le lien ci-dessous

Ici, vous pouvez afficher ou masquer le lien suivant.

Étiquette d’administrateur

Cela change le nom du module dans le constructeur pour une identification facile. Si vous utilisez la vue WireFrame dans Visual Builder, ces étiquettes seront affichées dans le bloc de module de l’interface Divi Builder.

Options de conception après la navigation

Dans l’onglet Conception, vous trouverez tous les paramètres pour le style du module, par exemple B. Polices, couleurs, taille et espacement. Sur cet onglet, vous souhaitez modifier l’apparence de votre module. Chaque module Divi a une longue liste d’options de conception qui vous permettent de changer quoi que ce soit.

Module de conception de section Article title.png

Police de gauche

Vous pouvez modifier la police du texte de votre lien en sélectionnant la police souhaitée dans le menu déroulant. Divi est livré avec des dizaines de polices étonnantes prises en charge par Google Fonts. Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page. Vous pouvez également personnaliser le style de votre texte avec des options gras, italique, majuscules et souligné.

Taille de la police du lien

Ici, vous pouvez ajuster la taille du texte de votre lien. Vous pouvez faire glisser le curseur de plage pour augmenter ou réduire la taille du texte, ou entrer la valeur de la taille de texte souhaitée directement dans le champ de saisie à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure. Cela signifie qu’en fonction de la valeur de la taille, vous pouvez saisir « px » ou « em » pour modifier le type d’unité.

Couleur du texte sur les liens

Par défaut, toutes les couleurs de texte dans Divi sont affichées en blanc ou en gris foncé. Pour modifier la couleur du texte de votre lien, utilisez cette option pour sélectionner la couleur souhaitée dans la sélection de couleurs.

Espacement des lettres du lien

L’espace entre les lettres affecte l’espace entre chaque lettre. Utilisez le curseur de plage pour augmenter l’espace entre les lettres individuelles dans votre texte de lien, ou entrez l’espace souhaité dans le champ de saisie à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure. Cela signifie qu’en fonction de la valeur de la taille, vous pouvez saisir « px » ou « em » pour modifier le type d’unité.

La hauteur de la ligne de connexion

La hauteur de ligne affecte l’espace entre les lignes individuelles dans votre texte de lien. Pour augmenter l’espacement entre les lignes individuelles, ajustez l’espacement avec le curseur de plage ou entrez la taille d’espacement souhaitée dans le champ. Entrée à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure. Cela signifie qu’en fonction de la valeur de la taille, vous pouvez saisir « px » ou « em » pour modifier le type d’unité.

Utilisez la limite

L’activation de cette option crée un bord autour de votre module. Ce bord peut être ajusté à l’aide des paramètres conditionnels suivants.

Couleur sur le bord

Ce paramètre affecte la couleur de votre cadre. Choisissez une couleur personnalisée dans le sélecteur de couleurs à appliquer à votre bordure.

La largeur du bord

Par défaut, les bords ont une largeur de 1 pixel. Vous pouvez augmenter cette valeur en faisant glisser le curseur de plage ou en entrant une valeur personnalisée dans le champ de saisie à droite du curseur. Unités de mesure personnalisées prises en charge, ce qui signifie que vous pouvez changer l’unité par défaut de « px » à quelque chose d’autre comme em, vh, vw, etc.

Style de bord

Borders prend en charge huit styles différents: solide, pointillé, pointillé, double, rainuré, arrière, superposition et début. Sélectionnez le style souhaité dans le menu déroulant pour l’appliquer à votre cadre.

Bord ajusté

La marge est l’espace ajouté à l’extérieur de votre module entre le module et l’élément suivant au-dessus, en dessous ou à gauche et à droite de celui-ci. Vous pouvez ajouter des valeurs de marge personnalisées à l’un des quatre côtés du module. Supprimez la valeur ajoutée du champ de saisie pour supprimer la marge personnalisée. Par défaut, ces valeurs sont mesurées en pixels. Cependant, vous pouvez saisir des unités de mesure personnalisées dans les champs de saisie.

Rembourrage personnalisé

Le remplissage est l’espace ajouté dans votre module entre le bord du module et ses éléments internes. Vous pouvez ajouter des valeurs de remplissage personnalisées à l’un des quatre côtés du module. Supprimez la valeur ajoutée du champ de saisie pour supprimer la marge personnalisée. Par défaut, ces valeurs sont mesurées en pixels. Cependant, vous pouvez saisir des unités de mesure personnalisées dans les champs de saisie.

Paramètres avancés du module de navigation

L’onglet Avancé fournit des options que les concepteurs Web expérimentés peuvent trouver utiles, telles que: B. Attributs CSS et HTML personnalisés. Ici, vous pouvez appliquer du CSS personnalisé à l’un des nombreux éléments du module. Vous pouvez également attribuer des classes CSS et des ID personnalisés au module, que vous pouvez utiliser pour personnaliser le module dans le fichier style.css de votre enfant.

Module de titre de pré-option de articles.png

ID CSS

Entrez un ID CSS facultatif à utiliser pour ce module. Un identifiant peut être utilisé pour créer un style CSS personnalisé ou pour créer un lien vers des sections spécifiques de votre page.

CSS génial

Entrez les classes CSS facultatives à utiliser pour ce module. Une classe CSS peut être utilisée pour créer un style CSS personnalisé. Vous pouvez ajouter plusieurs classes séparées par un espace. Ces classes peuvent être utilisées dans votre thème enfant Divi ou dans la feuille de style CSS personnalisée que vous ajoutez à votre page ou site en utilisant les paramètres du thème Divi ou les paramètres de la page Divi Builder.

CSS personnalisé

Le CSS personnalisé peut également être appliqué au module et à tout élément interne du module. Dans la section CSS personnalisé, vous trouverez un champ de texte dans lequel vous pouvez ajouter des feuilles de style CSS personnalisées directement à n’importe quel élément. Les entrées CSS dans ces paramètres sont déjà emballées dans des balises de style. Ensuite, entrez simplement les règles CSS séparées par des points-virgules.

Visibilité

Cette option vous permet de contrôler les appareils sur lesquels votre module sera affiché. Vous pouvez désactiver votre module individuellement sur les tablettes, smartphones ou ordinateurs de bureau. Ceci est utile lorsque vous souhaitez utiliser différents mods sur différents appareils ou lorsque vous souhaitez simplifier la conception mobile en supprimant certains éléments de la page.

Tutoriels Andre Divi



Source link

Recent Posts