Les Bases Chapitre 3

LES BASES

CHAPITRE 3 : UTILISATION DES OPTIONS THÉMATIQUES DIVI

MODULE 1

Utilisation des options thématiques Divi

Divi est livré avec des options thématiques qui sont utilisées pour mettre en place les différentes parties de votre site.

Divi intègre complètement ses propres options de thème personnalisé.

C'est ici que vous pouvez contrôler tous les réglages, comme votre logo, le favicon, les paramètres de navi- gation, les liens vers les réseaux sociaux, le nombre des articles aﬃchés sur les pages de catégories, et bien plus encore. Vous pourrez également y personnaliser le code CSS et également saisir la clé API de Google. Ces options sont accessibles dans le tableau de bord WordPress sous Divi > Option du thème.

Vous pourrez inclure ou exclure des pages ou des catégories de la barre de navigation, dé- finir vos modèles d’articles ou de pages. C’est aussi ici, que vous pourrez saisir le code Google adsense pour la publicité. Vous pourrez paramétrer différents éléments pour que votre site soit optimisé pour le référencement.

Utilisation des options thématiques Divi

C'est là que vous pouvez télécharger votre propre fichier de logo pour apparaître dans l'en-tête de chaque page de votre site.

Logo

Favicon

Barre de navigation fixe

Activer la galerie galerie Divi

L'installation d'une image ici ajoutera une image favicon pour représenter votre site dans la barre d'adresse du navigateur et les menus de signet.

La barre de navigation fixe fait référence à la barre de navigation. Elle se fixe en haut de votre écran lorsque vous faites défiler la page vers le bas.

L'uploader média WordPress contient une fonction Créer une galerie qui vous permet d'ajouter des galeries d'images simples à vos pages ou messages.

La barre de menu se réduira aussi légèrement sur le défilement pour fournir un espace d'écran plus lisible. Par défaut, la barre de navigation est activée.

Activez cette option si vous voulez remplacer le style par défaut de la galerie WordPress par le style Divi.

Utilisation des options thématiques Divi

C'est ici que vous pouvez modifier la palette de couleurs par défaut pour tous les sélecteurs de couleurs dans Divi Builder et Visual Builder.

Palette de sélection des couleurs par défaut

Saisir la première image de l’article

Blog Style Mode

Gabarit boutique et modèle de la page pour WooCommerce

Par défaut, les images miniatures sont créées à l'aide de champs personnalisés.

Par défaut, le thème tronque automatiquement vos messages sur index/homepages pour créer des prévisualisations de messages.

Si vous utilisez l'intégration de WooCommerce, vous pouvez définir la mise en page que votre boutique doit utiliser sur les pages des produits et des catégories de produits.

Si vous préférez aﬃcher vos articles dans leur intégralité sur des pages d'index comme un blog traditionnel, vous pouvez activer cette fonction.

Vous pouvez définir ici toutes les cou- leurs nécessaires pour personnaliser votre thème afin que ces mêmes couleurs soient disponibles tout au long du processus de construction.

Cependant, si vous préférez utiliser les images qui sont déjà dans votre message pour votre vignette (et contourner en utilisant des champs personnalisés), vous pouvez activer cette option.

Une fois activées, les images miniatures seront générées automatiquement en utilisant la première image de votre message. L'image doit être hébergée sur votre propre serveur.

Utilisation des options thématiques Divi

Le module Cartes utilise l'API Google Maps et nécessite une clé API Google valide pour fonctionner.

Google API Key

Script de Google Maps

Icônes des médias sociaux

Nombre de produits aﬃchés sur les pages d'archives de WooCommerce

Désactivez cette option pour supprimer le script API Google Maps de vos pages Divi Buil- der.

Divi place vos liens de médias sociaux à l'intérieur de votre pied de page.

Vous pouvez indiquer ici combien de produits WooCommerce sont aﬃchés sur la page.

Vous pouvez contrôler ici les icônes de médias sociaux que vous souhaitez aﬃcher et l'endroit où vous souhaitez qu'elles soient reliées.

Avant d'utiliser le module map, assurez-vous d'avoir ajouté votre clé API.

Ceci peut améliorer la compatibilité avec les plugins tiers qui enregistrent également ce script.

Remarque: Les modules qui s'appuient sur l'API Google Maps pour fonctionner correcte- ment, tels que les modules Maps et Fullwidth Maps, resteront disponibles mais ne fonctionneront pas tant que cette option sera désactivée (sauf si vous ajoutez manuellement le script API Google Maps).

Cette option fonctionne indépendamment des options Paramètres > Options de lecture dans wp-admin.

Utilisation des options thématiques Divi

Définissez le nombre de messages que vous souhaitez aﬃcher lorsqu'un utilisateur visite une page de catégorie, une page d'archive, une page de résultats de recherche ou une page de balise.

Nombre de messages par page

Format de date

Utiliser des extraits une fois définis

Shortcodes réactifs

Cette option vous permet de modifier l'aﬃchage de vos dates.

Ceci permettra l'utilisation d'extraits dans des messages ou des pages.

Cette option permet aux raccourcis de répondre à différentes tailles d'écran

Pour plus d'informations, veuillez consulter le codex WordPress ici: http://codex.wordpress.org/Formatting_Date_and_Time

Utilisation des options thématiques Divi

Ceci permettra d'activer Google Fonts pour les langues non anglaises.

Sous-ensembles Google Fonts

Bouton de retour Haut de page

Défilement fluide

Personnaliser CSS

Cela vous donne la possibilité d'aﬃcher un bouton Retour en haut (en bas à droite de votre page) pendant le défilement.

Ceci permettra le défilement en douceur avec la molette de la souris.

C'est ici que vous pouvez entrer n'importe quel css personnalisé pour personnaliser votre site.

Le défilement en douceur est également particulièrement utile lorsque vous utilisez des liens d'ancrage pour lier des zones spécifiques de la page.

Pour les modifications CSS étendues, nous vous recommandons d'utiliser toujours un thème enfant.

Navigation > Pages

Exclure des pages de la barre de navigation

Aﬃcher les menus déroulants

Aﬃcher le lien d'accueil

Toutes vos pages existantes apparaîtront dans cette fenêtre. Chaque nouvelle page apparaîtra dans votre navigation par défaut. Vous pouvez décocher n'importe quelle page ici si vous ne souhaitez pas aﬃcher une ou plusieurs pages spécifiques.

Si vous souhaitez supprimer les menus déroulants de la barre de navigation de la page, désactivez cette fonction.

Par défaut, le thème crée un lien Accueil qui, une fois cliqué, renvoie à la page d'accueil de votre blog.

Si, toutefois, vous utilisez une page d'accueil statique et que vous avez déjà créé une page appelée Accueil pour l'utiliser, cela se traduira par un lien en double.

Dans ce cas, vous devez désactiver cette fonction pour supprimer le lien.

Classer les liens des pages

Classer les liens des pages par ordre croissant /décroissant

Nombre de niveaux déroulants aﬃchés

Choisissez ici comment les liens de page doivent être triés.

En outre, précisez dans quel ordre vos liens de pages triés doivent apparaître.

Cette option vous permet de contrôler le nombre de niveaux du menu déroulant de votre page. L'augmentation du nombre permet d'aﬃcher des éléments de menu supplémentaires.

Navigation > catégories

Exclure des catégories de la barre de navigation

Aﬃcher les menus déroulants

cacher les catégories vides

Toutes vos catégories existantes apparaîtront dans cette fenêtre. Chaque nouvelle catégorie apparaîtra dans votre navigation par défaut. Vous pouvez décocher n'importe quelle page de catégorie ici si vous ne souhaitez pas aﬃcher une ou plusieurs catégories spécifiques.

Si vous souhaitez supprimer les menus déroulants de la barre de navigation des catégories, désactivez cette fonction.

Si une catégorie a été créée mais n'est pas utilisée par les messages, vous pouvez choisir de l'aﬃcher ou non dans votre navigation. Par défaut, les catégories vides sont masquées.

Nombre de niveaux du menu déroulant visibles

Classer les liens vers les catégories par groupes de Nom/Id

Classer les liens des catégories par ordre croissant/décroissant

Cette option vous permet de contrôler le nombre de niveaux du menu déroulant de votre page. L'augmentation du nombre permet d'aﬃcher des éléments de menu supplémentaires.

Choisissez ici comment trier les liens de catégorie.

Spécifiez en outre dans quel ordre les liens de catégorie triés doivent apparaître.

Navigation > general

Désactiver le niveau supérieur du menu déroulant

Dans certains cas, les utilisateurs voudront créer des catégories parentales ou des liens en tant que caractères de remplacement pour tenir une liste de liens ou de catégories enfant.

Dans ce cas, il n'est pas souhaitable que les liens parents ne mènent nulle part, mais servent simplement une fonction organisationnelle.

L'activation de ces options supprimera les liens de toutes les pages/catégories parentales afin qu'ils ne mènent nulle part lorsqu'ils sont cliqués.

Méthode alternative de défilement par ancrage

Parfois, lorsque vous utilisez l'ID CSS d'une section pour la lier directement à partir d'une autre page, la position finale du défilement de la page peut être inexacte.

Activez cette option pour utiliser une méthode alternative de défilement vers les ancres qui peut être plus précise que la méthode par défaut dans certains cas.

Paramètres de disposition

DISPOSITION À POSTE UNIQUE

Choisir les éléments à aﬃcher dans la section Info de vos articles

Ici, vous pouvez choisir les éléments qui apparaissent dans la section info post sur des pages post simples.

Il s'agit de la zone, généralement sous le titre du message, qui aﬃche des informations de base sur votre message.

Les éléments aﬃchés en surbrillance ci-dessous apparaissent.

Aﬃcher les commentaires dans les articles

Vous pouvez désactiver cette option si vous souhaitez supprimer les commentaires et le formulaire de commentaires des pages d'un seul message.

Mettre des vignettes dans les articles

Par défaut, les vignettes sont placées au début de votre message sur une seule page.

Si vous souhaitez supprimer cette imagette initiale pour éviter la répétition, désactivez simplement cette option.

MODÈLE DE PAGE

Placez des vignettes dans les pages

Par défaut, les vignettes ne sont pas placées sur les pages (elles ne sont utilisées que sur les messages).

Cependant, si vous voulez utiliser des vignettes sur les messages, vous pouvez le faire! Activez simplement cette option.

Aﬃcher les commentaires

sur les pages

Par défaut, les commentaires ne sont pas placés sur les pages, cependant, si vous souhaitez permettre aux gens de commenter sur vos pages, activez simplement cette option.

Paramètres généraux

Section d'information sur les articles

Aﬃcher les vignettes sur les pages d’index

Activez cette option pour aﬃcher les vignettes sur les pages d'index.

Ici, vous pouvez choisir les articles qui apparaissent dans la section postinfo des pages.

Il s'agit de la zone, généralement sous le titre du message, qui aﬃche des informations de base sur votre message.

Les éléments aﬃchés en surbrillance ci-dessous apparaissent.

gérer la publicité

L'activation de cette option aﬃchera une bannière publicitaire 468×60 au bas de vos pa- ges de messages en dessous du contenu d'un seul message.

Activer une bannière 468×60

Sélectionner une bannière de publicité de dimension 468×60

Entrer l’url de destination pour une bannière de 468×60

Entrer le code Google Adsense pour la publicité de dimension 468×60

Ici vous pouvez fournir l'url de l'image de la bannière 468×60.

Ici, vous pouvez fournir 468×60 bannière destination url.

Placez votre code adsense ici.

Si activé, vous devez remplir l'image de la bannière et l'url de destination ci-dessous.

sEO > Page d’accueil

Activer la personnalisation du titre

Par défaut, le thème utilise une combinaison du nom et de la description de votre blog, tels que définis lors de la création de votre blog, pour créer les titres de votre page d'accueil.

Toutefois, si vous souhaitez créer un titre personnalisé, activez simplement cette option et remplissez le champ de titre personnalisé ci-dessous.

Activer les descriptions

de méta tags

Par défaut, le thème utilise la description de votre blog, telle que définie lors de la création de votre blog, pour remplir le champ meta description.

Si vous souhaitez utiliser une des- cription différente, activez cette option et remplissez le champ de description personnalisé ci-dessous.

Activer les méta mots-clés

Par défaut, le thème n'ajoute pas de mots-clés à votre en-tête. La plupart des moteurs de recherche n'utilisent plus de mots-clés pour classer votre site, mais certaines personnes les définissent de toute façon juste au cas où.

Si vous voulez ajouter des méta mots-clés à votre en-tête, activez cette option et remplissez le champ des mots-clés personnalisés ci- dessous.

Activer les URL canoniques

La canonicalisation aide à prévenir l'indexation du contenu en double par les moteurs de recherche et, par conséquent, peut aider à éviter les pénalités de contenu en double et la dégradation du pagerank.

Certaines pages peuvent avoir des URL différentes qui mènent toutes au même endroit.

Par exemple, domaine. com, domaine. com/index. html et www.domain.com sont tous des URLs différents menant à votre page d'accueil.

Du point de vue d'un moteur de recherche, ces doublons d'URL, qui se produisent souvent en rai- son de permaliens personnalisés, peuvent être traités individuellement plutôt que comme une seule destination. Définir une URL canonique indique au moteur de recherche quelle URL vous souhaitez utiliser oﬃciellement.

Le thème base ses URL canoniques à partir de vos permaliens et du nom de domaine défini dans l'onglet Paramètres de wp-admin.

Titre de la page d'accueil personnalisé (si activé)

Si vous avez activé les titres personnalisés, vous pouvez ajouter votre titre personnalisé ici. Quel que soit le type que vous tapez ici, il sera placé entre le titre < titre >< /titre > balises dans header. php.

Si vous avez activé les méta descriptions, vous pouvez ajouter votre description personna- lisée ici.

Méta description de la page d'accueil (si activé)

Méta mots-clés de la page d'accueil (si activé)

Si la personnalisation du titre est désactivée, choisir la génération automatique

Définissez un caractère pour séparer le nom du site internet et le titre de l’article

Si vous avez activé les méta mots-clés, vous pouvez ajouter vos mots-clés personnalisés ici. Les mots-clés doivent être séparés par des virgules. Par exemple: wordpress, thèmes, modèles, élégants.

Si vous n'utilisez pas de titres de message personnalisés, vous pouvez toujours avoir un contrôle sur la façon dont vos titres sont générés.

Vous pouvez modifier le caractère qui sépare le titre de votre blog et le nom du message lorsque vous utilisez des titres de messages générés automatiquement.

Les valeurs communes

sont :

| ou -

Ici, vous pouvez choisir l'ordre dans lequel vous souhaitez que le titre de votre billet et le nom du blog soient aﬃchés, ou vous pouvez supprimer complètement le nom du blog du titre.

SEO > Page d’article

Activer la personnalisation des titres

ACtiver la personnalisation de la description

Activer la personnalisation des mots-clés

Par défaut, le thème crée des titres en fonction du titre de votre article et du nom de votre blog.

Si vous souhaitez rendre votre méta-titre différent du titre de votre article, vous pouvez définir un titre personnalisé pour chaque article à l'aide de champs personnalisés.

Cette option doit être activée pour que les titres personnalisés fonctionnent, et vous devez choisir un nom de champ personnalisé pour votre titre ci-dessous.

Si vous souhaitez ajouter une méta description à votre message, vous pouvez le faire en utilisant des champs personnalisés.

Cette option doit être activée pour que les descriptions soient aﬃchées sur les pages de messages.

Vous pouvez ajouter votre méta-description en utilisant des champs personnalisés basés sur le nom du champ personnalisé que vous définissez ci-dessous.

Si vous souhaitez ajouter des méta mots-clés à votre message, vous pouvez le faire en utilisant des champs personnalisés.

Cette option doit être activée pour que les mots-clés soient aﬃchés sur les pages post.

Vous pouvez ajouter vos méta mots-clés en utilisant des champs personnalisés basés sur le nom du champ personnalisé que vous définissez ci-dessous.

Activer les URL canoniques

champ personnalisable pour le titre

Champ personnalisable pour la description

Par exemple, domaine. com, domaine. com/index. html et www.domain.com sont tous des URLs différents menant à votre page d'accueil. Du point de vue d'un moteur de recherche, ces doublons d'URL, qui se produisent souvent en raison de permaliens personnalisés, peuvent être traités individuellement plutôt que comme une seule destination.

Définir une URL canonique indique au moteur de recherche quelle URL vous souhaitez utiliser oﬃciellement. Le thème base ses URL canoniques à partir de vos permaliens et du nom de domaine défini dans l'onglet Paramètres de wp-admin.

Lorsque vous définissez votre titre à l'aide de champs personnalisés, vous devez utiliser cette valeur pour le champ personnalisé Nom. La valeur de votre champ personnalisé doit être le titre personnalisé que vous souhaitez utiliser.

Lorsque vous définissez votre méta-description à l'aide de champs personnalisés, vous devez utiliser cette valeur pour le champ personnalisé Nom.

La valeur de votre champ personnalisé doit correspondre à la description personnalisée que vous souhaitez utiliser.

Champ personnalisable pour les mots-clés

Si la personnalisation du titre est désactivée, choisir la génération automatique

Définissez un caractère pour séparer le nom du site internet et le titre de l’article

Lorsque vous définissez vos mots-clés à l'aide de champs personnalisés, vous devez utiliser cette valeur pour le champ personnalisé Nom.

La valeur de votre champ personnalisé doit être les méta mots-clés que vous souhaitez utiliser, séparés par des virgules.

Si vous n'utilisez pas de titres de message personnalisés, vous pouvez toujours avoir un contrôle sur la façon dont vos titres sont générés.

Ici, vous pouvez choisir l'ordre dans lequel vous souhaitez que le titre de votre billet et le nom du blog soient aﬃchés, ou vous pouvez supprimer complètement le nom du blog du titre.

Ici, vous pouvez modifier le caractère qui sépare le titre de votre blog et le nom du message lorsque vous utilisez des titres de messages générés automatiquement.

Les valeurs communes sont | ou -

SEO > Index

Activer les URL canoniques

Autorise les méta descriptions

Choisir la méthode de génération du titre

Définir un caractère pour séparer le nom du site internet et le titre de l’article

Cochez cette case si vous voulez aﬃcher des méta descriptions sur les pages de catégorie/archive.

Ici, vous pouvez choisir comment vos titres sur les pages d'index sont générés.

Ici, vous pouvez modifier le caractère qui sépare le titre de votre blog du nom de la page d'index lorsque vous utilisez des titres auto-générés.

Les valeurs communes sont | ou -

Certaines pages peuvent avoir des URL différentes qui mènent toutes au même endroit.

Par exemple, domaine. com, domaine. com/index. html et www.domain.com sont tous des URLs différents menant à votre page d'accueil.

La description est basée sur la description de la catégorie que vous choisissez lorsque vous créez/modifiez votre catégorie dans wp-admin.

Vous pouvez modifier l'ordre dans lequel le nom de votre blog et le titre de l'index sont aﬃchés, ou vous pouvez supprimer complètement le nom du blog du titre.

intégration

L'onglet d'intégration est idéal pour ajouter du code tiers à certaines zones du thème. Le code peut être ajouté à la tête et au corps de vos sites Web, ainsi qu'avant et après chaque message.

Par exemple, si vous avez besoin d'ajouter un code de suivi à votre site Web (comme Google Analytics), mais que vous n'êtes pas sûr du fichier PHP à éditer pour ajouter le code au corps de votre site, vous pouvez simplement entrer ce code dans le champ "corps" de l'onglet Intégration.

Désactiver cette option supprimera le code d'en-tête ci-dessous de votre blog. Ceci vous permet de supprimer le code tout en l'enregistrant pour une utilisation ultérieure.

ctiver le code d'en-tête

Activer le code <Body>

Activer code du haut de page

Activer le code du bas de la page

Désactiver cette option supprimera le code ci-dessous de votre blog. Ceci vous permet de supprimer le code tout en l'enregistrant pour une utilisation ultérieure.

Désactiver cette option supprimera le seul code top ci-dessous de votre blog. Ceci vous permet de supprimer le code tout en l'enregistrant pour une utilisation ultérieure.

Désactiver cette option supprimera le code du bas de votre blog. Ceci vous permet de supprimer le code tout en l'enregistrant pour une utilisation ultérieure.

Tout code que vous placez ici apparaîtra dans la section tête de chaque page de votre blog. C'est utile lorsque vous devez ajouter du javascript ou du css à toutes les pages.

Ajouter la ligne de code à la <Head > de votre blog

Ajouter du code dans la balise <Body> (pratique pour localiser du code tel que goo- gle analytics)

Ajoutez du code en haut de vos articles

Ajoutez du code en bas de l’article, avant les commentaires

Tout code que vous placez ici apparaîtra dans la section body de toutes les pages de votre blog. Ceci est utile si vous devez entrer un pixel de suivi pour un compteur d'état tel que Google Analytics.

Tout code que vous placez ici sera placé en haut de tous les messages individuels. Ceci est utile si vous cherchez à intégrer des choses telles que les liens de bookmarking social.

updates

Avant de pouvoir recevoir les mises à jour des produits, vous devez d'abord authentifier votre abonnement à Elegant Themes.

Pour ce faire, vous devez saisir à la fois votre nom d'utilisateur Elégant Themes et votre clé API Themes Elégant.

Votre nom d'utilisateur est le même que celui que vous utilisez lors de votre connexion à ElegnatThemes.com

Import / Export

Vous pouvez facilement exporter ou importer vos Paramètres du Thème Divi en cliquant sur l'icône "Importer / Exporter" pour ouvrir les options de portabilité.

Pour exporter un fichier, sélectionnez l'onglet Exporter, entrez le nom de votre fichier d'exportation et cliquez sur le bouton "Options du thème d'exportation".

Un fichier. json sera enregistré sur votre ordinateur pour être sauvegardé en tant que sauvegarde, utilisé pour la construction de nouveaux clients ou partagé avec vos pairs.

Pour importer un fichier d'options de thème, sélectionnez simplement l'onglet Importer, choisissez votre fichier. json et cliquez sur le bouton "Importer les options de thème Divi".

Il existe également une option pratique pour sauvegarder vos options de thème actuelles avant d'importer

réinitialiser

Cliquez simplement sur l'icône "Restore to Defaults" pour restaurer les paramètres par dé- faut des Options du Thème Divi.

MERCI

Les Bases Chapitre 3

More creations to inspire you

AC/DC

THE MESOZOIC ERA

ALL THE THINGS

ASTL

VISUAL COMMUNICATION AND STORYTELLING

ENGLISH IRREGULAR VERBS

GROWTH MINDSET

Transcript