Eléments de média Chapitre 2

ÉLÉMENTS DE MÉDIA

CHAPITRE 2 : COMMENTAIRES

MODULE 5

Le module Divi Blurb

Comment ajouter, configurer et personnaliser le module Divi blurb.

Le module blurb est une combinaison simple et élégante de texte et d'images.

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

Les blurbs sont un excellent moyen de mettre en valeur de petits morceaux d'informations importantes, et sont souvent utilisés en lignes pour afficher des compétences ou des fonctionnalités.

Le module blurb est une combinaison simple et élégante de texte et d'images. Les flous sont un excellent moyen de mettre en valeur de petits bouts d'informations importantes, et sont souvent utilisés dans les lignes pour afficher des compétences ou des caractéristiques. Les modules Blurb peuvent être placés dans n'importe quelle colonne que vous créez.

Comment ajouter un module Blurb Module à votre page

Avant de pouvoir ajouter un module blurb à 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.

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 blurb 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 "blurb" puis cliquer sur "enter" pour trouver et ajouter automatiquement le module blurb!

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: Utilisation du module Blurb pour lister les services de l'entreprise sur la page d'accueil

Puisque le module Blurb combine à la fois l'imagerie et le texte pour mettre en valeur certaines fonctionnalités, vous pouvez l'utiliser pour ajouter une liste des services de votre entreprise sur votre page d'accueil.

Le module Blurb vous permet également de transformer votre image / icône et titre Blurb en lien vers votre page de service.

Pour cet exemple, je vais utiliser le module Blurb pour ajouter quatre services à une page d'accueil.

Pour ajouter les quatre Blurbs à votre page, utilisez le générateur visuel pour ajouter une section standard avec une rangée de quatre colonnes. Ajoutez ensuite un module Blurb à la première colonne de votre ligne.

Options de contenu

Options de conception

Mettez à jour les paramètres Blurb comme suit

Élément principal:

rembourrage: 100px 0;

Titre:[inscrire le titre du service

Contenu:[entrer une brève description du service]

[enregistrez une brève description du service

URL:[ajouter une URL à la page de service] (anglais)

Utiliser l'icône: OUI

Icône:[sélectionnez une icône qui illustre votre service]:[sélectionnez une icône qui illustre votre service)

Couleur de l'icône: #42bb99 (veillez à ce que la couleur vienne compléter le design du site)

Taille de police de l'icône: OUI

Taille de police de l'icône: 68px (ceci ajuste la taille de votre icône)

Orientation du texte: Centre

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

Taille de police du corps: 18px Hauteur de ligne du corps: 1.5em

Maintenant, vous avez fini votre premier blurb.

Dupliquez maintenant le module Blurb que vous venez de créer trois fois et faites glisser chacun des flous dupliqués sur les trois autres colonnes. Puisque vos paramètres de conception ont été reportés sur vos modules dupliqués, tout ce que vous avez à faire est de modifier le contenu (rubrique, contenu, icône, url, etc...) et d'ajuster les couleurs pour s'adapter à chacun de vos services.

Options sur le contenu de la vidéo

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.

Donnez un titre à votre texte qui apparaîtra au-dessus du corps du texte de la phrase en caractères gras.

Intitulé

Contenu

URL

URL ouverture

Utiliser l'icône

Ce champ est l'endroit où vous pouvez entrer le contenu du corps de votre texte.

Placez une URL Web valide dans ce champ pour transformer votre titre en lien. Laisser ce champ vide laissera simplement votre titre comme élément statique.

Ici, vous pouvez choisir si votre lien s'ouvre ou non dans une nouvelle fenêtre.

Lorsque vous utilisez Blurbs, vous pouvez choisir d'utiliser une icône ou une image avec votre texte.

L'option URL sous le champ Titre vous permettra de faire de votre titre un hyperlien.

Blurb Text peut également couvrir toute la largeur de votre colonne jusqu'à 550px.

Si vous sélectionnez "Oui" pour l'option "Utiliser Icône", les options suivantes vous seront proposées pour personnaliser votre icône. Si vous ne choisissez pas d'utiliser une icône, vous serez invité à télécharger une image à la place.

Si vous avez choisi "oui" pour le paramètre "Utiliser Icône", cette option apparaîtra.

Icône

Image

Couleur de fond

Image de fond

Étiquette Admin

Si vous n'avez pas choisi d'utiliser une icône, ce paramètre apparaîtra.

Définissez une couleur d'arrière-plan personnalisée pour votre module, ou laissez vide pour utiliser la couleur par défaut.

Si elle est définie, cette image sera utilisée comme arrière-plan pour ce module.

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

Cette option vous présente une liste d'icônes disponibles que vous pouvez utiliser avec votre texte. Cliquez simplement sur l'escroquerie que vous souhaitez utiliser et elle apparaîtra dans votre texte.

Placez ici une adresse URL d'image valide, ou choisissez/transférez une image via la médiathèque WordPress.

Blurb Images apparaîtra toujours centré dans ses colonnes et s'étendra sur toute la largeur de votre colonne jusqu'à 550px. Cependant, votre image ne sera jamais plus grande que sa taille de téléchargement originale.

La hauteur de l'image est déterminée par le rapport hauteur/largeur de l'image originale, ce qui fait que toutes vos images de la même hauteur sont une bonne idée si vous les placez côte à côte.

Pour supprimer une image de fond, supprimez simplement l'URL du champ Paramètres.

Les images d'arrière-plan apparaîtront au-dessus des couleurs d'arrière-plan, ce qui signifie que votre couleur d'arrière-plan ne sera pas visible lorsqu'une image d'arrière-plan est appliquée.

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 Blurb Design

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.

Pour plus d'informations sur les éléments globaux, assurez-vous de lire notre tutoriel sur les modules globaux.

Nous avons également un excellent tutoriel qui explique comment utiliser la fonction de synchronisation sélective.

Une fois que vous avez rempli toutes les informations nécessaires, cliquez sur "Sauvegarder" pour terminer le processus et ajouter votre nouvel élément à la bibliothèque.

Si vous avez choisi "oui" pour le paramètre "Utiliser Icône", cette option apparaîtra.

Couleur de l'icône

Icône du cercle

Couleur du cercle

Montrer la bordure du cercle

Couleur de bordure circulaire

Si vous avez choisi "oui" pour le paramètre "Utiliser Icône", cette option apparaîtra.

Si vous avez choisi "oui" pour le paramètre "Cercle", cette option apparaîtra.

Si vous avez choisi "oui" pour le paramètre "Aﬃcher la bordure circulaire", cette option apparaîtra.

Cette option vous permet de personnaliser la couleur de votre Icône. Par défaut, les icônes sont réglées sur la couleur d'accent de votre thème.

Cette option vous permet de placer votre icône dans un cercle coloré. Si vous sélectionnez "oui" pour ce paramètre, vous verrez apparaître des options supplémentaires pour personnaliser la couleur de votre cercle et de votre bordure.

Cette option vous permet d'activer une bordure pour votre cercle. Si cette option est sélectionnée, une option supplémentaire apparaîtra pour sélectionner la couleur de votre bordure.

Ici, vous pouvez régler la couleur de la bordure du cercle.

Ici vous pouvez choisir une couleur à utiliser pour votre cercle. Cette couleur est indépendante de la couleur de l'icône sélectionnée précédemment. Votre icône, dans sa couleur, apparaîtra à l'intérieur d'un cercle avec la couleur que vous sélectionnez ici.

Ici, vous pouvez choisir l'endroit où placer votre image/icône.

Placement de l'image/de l'icône

Utiliser la taille de police d'icône

Couleur du texte

Orientation du texte

Police d'en-tête

Si cette option est activée, vous pouvez saisir une taille personnalisée pour l'icône qui s'affiche au-dessus ou à gauche de votre texte.

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

Ce menu déroulant vous permet de spécifier l'orientation de votre texte pour qu'il soit Justifié à gauche, Centré ou Justifié à droite.

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.

Il peut apparaître soit au-dessus du texte, soit à gauche du texte. En plaçant l'image/icône à gauche de votre texte, l'image sera plus petite que si elle était placée en haut.

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é.

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

Ici, vous pouvez ajuster la taille de votre texte d'en-tête.

Taille des polices d'en-tête

Couleur du texte d'en-tête

Espacement des lettres d'en-tête

Hauteur de la ligne d'en-tête

Police de corps

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.

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.

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é.

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

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 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.

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é.

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

Taille de police du corps

Couleur du corps du texte

Espacement des lettres du corps

Hauteur de la ligne corporelle

Utiliser la bordure

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 distance pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Activer cette option placera une bordure autour de votre module.

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é.

Cette bordure peut être personnalisée à l'aide des paramètres conditionnels suivants.

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.

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.

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é.

Cette option affecte la couleur de votre bordure.

Couleur de la bordure

Largeur de bordure

Style de bordure

Largeur maximale de l'image

Marge personnalisée

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.

L'application d'une valeur de largeur maximale limite la largeur de l'image

La marge est l'espace ajouté en dehors de votre module, entre le module et l'élément suivant en haut, en bas ou à gauche et à droite de celui-ci.

Rembourrage sur mesure

Le rembourrage est l'espace ajouté à l'intérieur de votre module, entre le bord du module et ses éléments internes.

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

Vous pouvez ajouter des valeurs de marge personnalisées à n'importe lequel des quatre côtés du module.

Pour supprimer une marge personnalisée, supprimez la valeur ajoutée du champ de saisie. Par défaut, ces valeurs sont mesurées en pixels, mais vous pouvez saisir des unités de mesure personnalisées dans les champs de saisie.

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.

Ceci n'affecte que les flous qui ne sont pas en mode icône.

Vous pouvez ajouter des valeurs de rembourrage personnalisées à n'importe lequel des quatre côtés du module.

Options avancées Blurb

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.

CSS ID

Classe CSS

CSS personnalisé

Animation d'image/image

Texte de l'image Alt Texte

Entrez les classes CSS facultatives à utiliser pour ce module.

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

Ceci contrôle la direction de l'animation paresseuse.

Si vous n'avez pas choisi d'utiliser une icône, ce paramètre apparaîtra.

Visibilité

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

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.

Le texte alternatif fournit toutes les informations nécessaires si l'image ne se charge pas, ne s'affiche pas correctement ou dans toute autre situation où un utilisateur ne peut pas voir l'image.

Il permet également la lecture et la reconnaissance de l'image par les moteurs de recherche.

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.

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 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.

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

Eléments de média Chapitre 2

More creations to inspire you

BASIL RESTAURANT PRESENTATION

AC/DC

THE MESOZOIC ERA

ALL THE THINGS

ASTL

ENGLISH IRREGULAR VERBS

VISUAL COMMUNICATION AND STORYTELLING

Transcript