Want to make creations as awesome as this one?

Eléments de média Chapitre 7

Transcript

ÉLÉMENTS DE MÉDIA

CHAPITRE 7 : BLOG

MODULE 5

Le module Blog

Le module de blog est disponible en deux mises en page différentes, 1 colonne et maçon- nerie, et est livré avec 5 types de messages personnalisés. Avec la puissance de Divi, vous pouvez ajouter des billets de blog où vous le souhaitez sur votre site.

Découvrez la démo en ligne: www.elegantthemes.com/preview/Divi/blog/

Avec Divi, même les blogs sont un module, et votre "blog" peut être placé n'importe où sur votre site web, et dans différents formats.


Vous pouvez combiner les modules blog et sidebar pour créer des modèles de blogs classiques. Les blogs 1 colonne, 2 colonnes ou 3 colonnes peuvent tous être construits à l'aide de modules blog et sidebar.



Comment ajouter un module de blog à votre page

Avant de pouvoir ajouter un module blog à votre page, vous devez d'abord sauter dans le Divi Builder.

Une fois que le thème Divi a été installé sur votre site Web, vous remarquerez un bouton Utiliser Divi Builder au-dessus de l'éditeur de messages chaque fois que vous construisez une nouvelle page.

Cliquez sur ce bouton pour activer le Divi Builder, vous donnant accès à tous les modules du Divi Builder.


Ensuite, cliquez sur le bouton Utiliser Visual Builder pour lancer le constructeur en mode Visual. Vous pouvez également cliquer sur le bouton Utiliser Visual Builder lorsque vous naviguez sur votre site Web si vous êtes connecté à votre tableau de bord WordPress.


Comment ajouter un module de blog à votre page

Une fois que vous êtes entré dans le Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page.


Les nouveaux modules ne peuvent être ajoutés qu' à l'intérieur des rangées.

Si vous commencez une nouvelle page, n'oubliez pas d'ajouter une ligne à votre page. Nous avons quelques bons tutoriels sur la façon d'utiliser les éléments de ligne et de section de Divi.


Localisez le module blog dans la liste des modules et cliquez dessus pour l'ajouter à votre page. La liste des modules est interrogeable, ce qui signifie que vous pouvez également taper le mot "blog" puis cliquer sur "entrer" pour trouver et ajouter automatiquement le module blog!

Une fois le module ajouté, vous serez accueilli avec la liste d'options du module. Ces options sont divisées en trois groupes principaux: Contenu, Design et Avancé.

Exemple d'utilisation : Ajouter un module Blog avec une disposition de grille dans une section spécialisée avec une barre latérale droite

Pour cet exemple, je vais ajouter un module Blog à une page de blog.


Cette page de blog a un en-tête pleine largeur avec un module de recherche en dessous.

Sous le module de recherche, je vais ajouter une section spécialisée avec le module Blog à gauche et une section latérale à droite.

La barre latérale à droite contient un widget de messages récents, un module Email Optin et un module Personne.


Notez que le module de blog est en grille à gauche de la section spécialisée.

Commençons par le début

Utilisez le constructeur visuel pour ajouter une section spécialisée avec la disposition suivante :

Commençons par le début

On vous demandera d'ajouter une ou deux colonnes pour le côté gauche. Sélectionnez la ligne d'une colonne.

Commençons par le début

Ajoutez ensuite le module Blog à la ligne.

Options de contenu

Options de conception

Options avancées

Nombre de postes: 6

Bouton Lire plus: ON

Afficher la pagination: NON

Couleur d'arrière-plan de la tuile grillagée: #ffffffff



Disposition: Grille

Utiliser l'ombre portée: ON

Couleur de l'icône de superposition: #ffffff

Couleur de superposition de survol: rgba (224,153,0,0.51)

Police d'en-tête: Par défaut

Taille de police d'en-tête: 21px

Couleur de l'en-tête du texte: #33333333

Espacement des lettres d'en-tête: 1px

Hauteur de la ligne d'en-tête: 1.2em

Utiliser la bordure: OUI

Couleur de la bordure: #f0f0f0f0

Largeur de bordure: 1px

Style de bordure: Solide

CSS personnalisé (bouton Lire plus):

couleur: #e09900;

affichage: bloc;

Alignement du texte: au centre;

marge supérieure: 10px;

bordure: 1px solide #ccc;

rembourrage: 5px;

text-transform: capitaliser;

espacement des lettres: 1px;


Le CSS personnalisé avancé pour le bouton Lire plus crée un look personnalisé qui s'adapte bien au design.



Dans la barre latérale droite de la section de la section spécialisée, vous devrez ajouter un module de barre latérale qui affiche le widget des messages récents. Ci-dessous que vous devrez ajouter un module Email Optin Module. Et puis en dessous de l'option Email Optin vous devez ajouter le Module Personne avec des informations sur l'auteur.

Options de contenu du blog

Dans l'onglet Contenu, vous trouverez tous les éléments de contenu du module, tels que le texte, les images et les icônes.


Tout ce qui contrôle ce qui apparaît dans votre module sera toujours trouvé dans cet onglet.

C'est l'onglet que vous utiliserez pour modifier l'apparence de votre module.


Chaque module Divi dispose d'une longue liste de paramètres de conception que vous pouvez utiliser pour modifier pratiquement n'importe quoi.


Définissez le nombre de postes que vous souhaitez afficher. Vous aurez besoin d'avoir des messages faits pour que quelque chose apparaisse à l'intérieur de ce module.

Postes Nombre

Catégories incluses

Meta Date Format Date

Contenu

Numéro de décalage

Choisissez les catégories que vous souhaitez inclure dans le flux.

Définissez ici le format de date que vous souhaitez afficher sur votre blog.

Montrer le contenu complet ne tronquera pas vos messages sur la page d'index. L'affichage de l'extrait n'affichera que votre texte d'extrait.

Choisissez le nombre de messages que vous souhaitez compenser.

Sélectionnez les catégories que vous souhaitez inclure dans le flux de messages. Toutes les catégories de messages que vous avez créées s'afficheront ici pour que vous puissiez les sélectionner/désélectionner.


La mise en page par défaut est un format M j, Y (6 janvier 2014) Voir le Codex WordPress sur les for- mats de date pour plus d'options.



Si vous compensez par 3 messages, par exemple, les trois premiers messages de votre flux blog ne seront pas affichés.


Cette option vous permet de choisir si vous souhaitez que les vignettes apparaissent ou non dans votre module blog.

Afficher l'image en vedette

Bouton Lire plus

Auteur de spectacle

Afficher la date

Catégories d'exposition

Ici, vous pouvez définir si vous voulez afficher le lien "lire plus" après l'extrait ou non.

Choisissez si oui ou non vous souhaitez afficher l'auteur de chaque billet de blog dans la méta-zone de message sous le titre du message.

Indiquez si vous souhaitez afficher ou non la date à laquelle chaque message a été créé dans la méta-zone de message située sous le titre du message.

Choisissez si vous souhaitez afficher ou non les catégories de messages dans la méta- zone des messages sous le titre du message.

Voir Commentaire Compte

Afficher la pagination

Étiquette Admin

Indiquez si vous souhaitez afficher le nombre de commentaires dans la méta-zone du message sous le titre du message.

Choisissez si vous souhaitez afficher ou non la pagination de ce flux. Pour activer la pagination numérotée, vous devez installer le plugin WP Page Navi.

Ceci changera l'étiquette du module dans le constructeur pour une identification facile.

Lorsque vous utilisez la vue WireFrame dans le Visual Builder, ces étiquettes apparaîtront dans le bloc module de l'interface Divi Builder.


Options de conception du blog

Dans l'onglet Design, vous trouverez toutes les options de style du module, telles que les polices de caractères, les couleurs, le dimensionnement et l'espacement.

C'est l'onglet que vous utiliserez pour modifier l'apparence de votre module. Chaque module Divi dis- pose d'une longue liste de paramètres de conception que vous pouvez utiliser pour modifier pratiquement n'importe quoi.


Vous pouvez choisir d'afficher vos articles de blog dans une grille ou dans un format pleine largeur.

Disposition

Superposition d'images en vedette

Couleur de l'icône de superposition

Couleur de superposition de survol

Si cette option est activée, une couleur et une icône de superposition seront affichées lorsqu'un visiteur survolera l'image d'un message.

Ici, vous pouvez définir une couleur personnalisée pour l'icône de superposition.

Ici, vous pouvez définir une couleur personnalisée pour la superposition.

Ici, vous pouvez définir une icône personnalisée pour la superposition.

Icône de survol Picker

Couleur du texte

Police

d'en-tête

Disposition

Si votre blog est placé sur un fond clair, la couleur du texte doit être réglée sur'Foncé'.

Vous pouvez changer la police de votre texte d'en-tête en sélectionnant la police désirée dans le menu déroulant.

Vous pouvez choisir d'afficher vos articles de blog dans une grille ou dans un format pleine largeur.

Dans le cas contraire, si votre blog est placé sur un fond sombre, la couleur du texte doit être réglée sur'Lumière'.


Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices. 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 en utilisant les options gras, italique, toutes majuscules et souligné.


Si cette option est activée, une couleur et une icône de superposition seront affichées lorsqu'un visiteur survolera l'image d'un message.

Superposition d'images en vedette

Couleur de l'icône de superposition

Couleur de superposition de survol

Icône de survol Picker

Ici, vous pouvez définir une couleur personnalisée pour l'icône de superposition.

Ici, vous pouvez définir une couleur personnalisée pour la superposition.

Ici, vous pouvez définir une icône personnalisée pour la superposition.

Si votre blog est placé sur un fond clair, la couleur du texte doit être réglée sur'Foncé'.

Couleur du texte

Police

d'en-tête

Taille des polices

d'en-tête

Couleur du texte d'en-tête

Vous pouvez changer la police de votre texte d'en-tête en sélectionnant la police désirée dans le menu déroulant.

Ici, vous pouvez ajuster la taille de votre texte d'en-tête. Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Dans le cas contraire, si votre blog est placé sur un fond sombre, la couleur du texte doit être réglée sur'Lumière'.


Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.

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 en utilisant les options gras, italique, toutes majuscules et souligné.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.


Si vous souhaitez changer la couleur de votre texte d'en-tête, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.


L'espacement des lettres affecte l'espace entre chaque lettre.

Espacement des lettres d'en-tête

Hauteur de la ligne d'en-tête

Police de corps

Taille de police du corps

La hauteur de ligne affecte l'espace entre chaque ligne de votre texte d'en-tête.

Vous pouvez changer la police de votre corps de texte en sélectionnant la police désirée dans le menu déroulant.

Ici, vous pouvez ajuster la taille de votre texte corporel.

Si vous souhaitez augmenter l'espace entre chaque lettre de votre texte d'en-tête, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.


Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.


Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.

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 en utilisant les options gras, italique, toutes majuscules et souligné.


Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.


Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Couleur du corps du texte

Espacement des lettres du corps

Hauteur de la ligne corporelle

Meta Police

L'espacement des lettres affecte l'espace entre chaque lettre.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de distance pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Vous pouvez changer la police de votre méta texte en sélectionnant la police désirée dans le menu déroulant.

Si vous souhaitez changer la couleur de votre corps de texte, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.


Si vous souhaitez augmenter l'espace entre chaque lettre de votre corps de texte, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.


Les champs de saisie prennent en charge différentes unités de me- sure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.


Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices. 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 en utilisant les options gras, italique, toutes majuscules et souligné.


Ici vous pouvez ajuster la taille de votre méta texte.

Taille de la police Meta

Couleur du texte Meta

Espacement méta-lettres

Hauteur de la ligne Meta

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

L'espacement des lettres affecte l'espace entre chaque lettre.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.


Si vous souhaitez changer la couleur de votre méta texte, choisissez la couleur désirée dans le sélecteur de couleurs en utilisant cette option.


Si vous souhaitez augmenter l'espace entre chaque lettre de votre méta texte, utilisez le curseur de plage pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.


Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.


Activer cette option placera une bordure autour de votre module. Cette bordure peut être personnalisée à l'aide des paramètres conditionnels suivants.

Utiliser la bordure

Couleur de la bordure

Largeur de bordure

Style de bordure

Cette option affecte la couleur de votre bordure. Sélectionnez une couleur personnalisée dans le sélecteur de couleurs pour l'appliquer à votre bordure.

Par défaut, les bordures ont une largeur de 1 pixel.

Les bordures prennent en charge huit styles différents, y compris: solide, pointillé, pointillé, pointillé, double, rainuré, faîtage, encoches et début. Sélectionnez le style désiré dans le menu déroulant pour l'appliquer à votre bordure.

Vous pouvez augmenter cette valeur en faisant glisser le curseur de plage ou en saisissant une valeur personnalisée dans le champ de saisie à droite du curseur.

Unités de mesure personnalisées des mesures 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.


Options avancées du blog

Dans l'onglet Avancé, vous trouverez des options que les concepteurs Web plus expérimentés peuvent trouver utiles, comme les attributs CSS et HTML personnalisés.

Ici, vous pouvez appliquer des CSS personnalisés à n'importe lequel des nombreux éléments du module.

Vous pouvez également appliquer des classes CSS et des identifiants personnalisés au module, qui peuvent être utilisés pour personnaliser le module dans le fichier style. css de votre thème enfant.


Entrez un ID CSS optionnel à utiliser pour ce module. Un ID peut être utilisé pour créer un style CSS personnalisé ou pour créer des liens vers des sections particulières de votre page.

CSS ID

Classe CSS

CSS personnalisé

Visibilité

Entrez les classes CSS facultatives à utiliser pour ce module. Une classe CSS peut être utilisée pour créer un style CSS personnalisé.

Le CSS personnalisé peut également être appliqué au module et à n'importe quel élément interne du module.

Cette option vous permet de contrôler sur quels périphériques votre module apparaît.

Vous pouvez ajouter plusieurs classes, séparées par un espace.

Ces classes peuvent être utilisées dans votre Thème Divi Child ou dans le CSS personnalisé que vous ajoutez à votre page ou votre site Web en utilisant les Options du Thème Divi ou les Paramètres de page du Générateur de Divi.


Dans la section Personnaliser CSS, vous trouverez un champ texte dans lequel vous pouvez ajouter des CSS personnalisés directement à chaque élément.


Les entrées CSS dans ces paramètres sont déjà emballées dans des balises de style, vous n'avez donc qu' à entrer des règles CSS séparées par des point-virgules


Vous pouvez choisir de désactiver votre module sur des tablettes, des téléphones intelligents ou des ordinateurs de bureau individuellement.

C'est utile si vous voulez utiliser différents modules sur différents appareils, ou si vous voulez simplifier le design mobile en éliminant certains éléments de la page.


MERCI