Comment ajouter des marqueurs d'image avec les options de transformation de Divi

Les marqueurs d'image sont un excellent moyen de mettre en valeur les caractéristiques spéciales d'un produit. Dans cet article, nous allons vous montrer comment créer des marqueurs d'image à l'aide d'un module de texte et d'un séparateur vertical. Grâce aux paramètres de transformation à l'intérieur des colonnes, un marqueur d'image peut être placé partout où vous en avez besoin. Pour vous montrer à quel point cette technique est polyvalente, nous vous montrerons deux exemples de conception différents. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Exemple 1

Bureau

Mobile

Exemple #2

Bureau

Mobile

Téléchargez la mise en page des marqueurs d'images GRATUITEMENT

Pour mettre la main sur la mise en page gratuite des marqueurs d'images, vous devrez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Abonnez-vous à notre chaîne Youtube

Recréer l'exemple #1

Commençons à recréer le premier exemple de conception !

Ajouter une nouvelle section

Ajoutez une nouvelle section à la page sur laquelle vous travaillez. Avant d'ajouter une ligne, ajustez d'abord les paramètres de la section.

Fond

Ajoutez un dégradé puis une image avec un mode de fusion d'écran.

• Arrière-plan : Dégradé + Image
• Dégradé Couleur 1 : Blanc #ffffff
• Dégradé de couleur 2 : gris moyen #666666
• Position de départ du gradient : 22 %
• Mélange d'images d'arrière-plan : écran

Espacement

Supprimez ensuite le rembourrage supérieur et inférieur par défaut de la section.

• Rembourrage supérieur et inférieur : 0vw

Visibilité

Complétez les paramètres de la section en masquant les débordements de la section.

• Débordement vertical et horizontal : masqué

Ajouter la ligne n° 1

Maintenant, ajoutez une nouvelle ligne avec trois colonnes.

Avant d'ajouter des modules, ajustez les paramètres de ligne.

Dimensionnement

Tout d'abord, ajustez la taille de la ligne.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

CSS personnalisé

Ensuite, ajoutez une seule ligne de code CSS à l'élément principal de la ligne. Cela permettra également aux colonnes d'apparaître les unes à côté des autres sur des écrans de plus petite taille.

• Élément principal CSS : affichage : flex;

display: flex;

Colonne 1

Transformer Traduire

Appliquez un effet de conversion de transformation personnalisé à la première colonne pour repositionner la colonne. Cette étape aura du sens une fois que vous aurez ajouté les modules de marqueur d'image plus tard dans la publication. Si vous utilisez cette technique sur une autre conception, vous devrez modifier ces valeurs en conséquence.

• Transformer traduire : axe x 2vw, axe y 16vw

Indice Z

Ajoutez une valeur d'index z plus élevée à l'onglet visibilité.

• Indice Z : 10

Colonne 2

Transformer Traduire

Appliquez un effet de conversion de transformation à la deuxième colonne.

• Transformer la traduction : axe x -11vw, axe y 6vw

Indice Z

Augmentez la valeur de l'index z.

• Indice Z : 10

Colonne 3

Transformer Traduire

Modifiez les valeurs de conversion de transformation de la troisième colonne.

• Transformer la traduction : axe x -11vw, axe y 8vw

Indice Z

Et modifiez la valeur de l'index z.

• Indice Z : 10

Ajouter la ligne n° 2

Avant d'ajouter des modules à la première ligne, ajoutez une nouvelle ligne à une colonne. Faites-le avant d'ajouter les marqueurs d'image afin que vous puissiez voir ce qui se passe à l'écran pendant la conception.

Dimensionnement

Modifiez les paramètres de dimensionnement de la ligne.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Ajouter un module d'images

Ajoutez ensuite un module d'image.

Dimensionnement

Forcez la pleine largeur sur le module d'image pour vous assurer que la conception reste réactive sur toutes les tailles d'écran.

• Forcer la pleine largeur : Oui

Espacement

Ensuite, ajoutez un peu de rembourrage à gauche et à droite pour réduire la taille de l'image.

• Rembourrage gauche et droit : 10vw

Ajouter 3 modules de texte

Maintenant, revenez à la première ligne à 3 colonnes et ajoutez 3 modules de texte.

Utilisez la vue filaire pour un accès plus facile.

Ajoutez un module de texte à la première colonne, clonez-le deux fois et faites glisser les doublons vers les autres colonnes.

Commencez à modifier le module de texte dans la colonne 1. Saisissez le contenu de votre choix et modifiez les paramètres comme suit.

Fond

Ajoutez un fond noir.

• Couleur de fond : Noir # 000000

Texte

Stylisez le texte.

• Police du texte : Aldrich
• Couleur du texte : Blanc #ffffff
• Alignement du texte : centré
• Taille du texte:
  • Ordinateur de bureau : 1.2vw
  • Tablette : 2vw
  • Téléphone : 2.4vw
• Poids de la police d'en-tête : gras

Dimensionnement

Ajustez la taille du module de texte.

• Largeur:
  • Ordinateur de bureau : 17vw
  • Tablette : 23vw
  • Téléphone : 30vw
• Alignement du module : Centre

Espacement

Ajoutez un rembourrage supérieur et inférieur.

• Rembourrage supérieur et inférieur : 0.9vw

Frontière

Modifiez les paramètres de bordure.

• Coins arrondis : 14px à tous les coins
• Styles inférieurs : bordure inférieure
• Largeur de la bordure inférieure : 4px
• Couleur de la bordure inférieure : rouge # E02B20

Boîte ombre

Appliquez une ombre de boîte.

• Ombre de la boîte : troisième option

Développer les styles de texte

Pour gagner du temps, utilisez l'option d'extension de style pour styliser les autres modules de texte de la section.

• Tout d'abord, cliquez sur les trois points sur le bord droit du module de texte et sélectionnez "Étendre les styles de texte".
• Ensuite, dans la fenêtre contextuelle, cliquez sur « Tout au long » et sélectionnez « Cette section » lorsque le menu se déroule.
• Modifiez le contenu de chaque module de texte.

Ajouter 3 modules de séparation

Ajoutez un séparateur sous le module de texte dans la colonne 1. Puis clonez-le deux fois et faites glisser les doublons vers les autres colonnes.

Ouvrez le module diviseur dans la colonne 1 et apportez quelques modifications.

Ligne

Faites le diviseur noir.

• Couleur de la ligne : Noir # 000000

Dimensionnement

Ajustez l'épaisseur du diviseur.

• Poids du diviseur : 3px
• Largeur: 20vw
• Alignement du module : Centre

Espacement

Ajustez la marge supérieure.

• Marge supérieure : 7vw

Transformer

Ajoutez un effet de rotation de transformation pour rendre le diviseur vertical.

• Transformer la rotation : première option à 90 degrés

Développer les paramètres du diviseur

Gagnez du temps et utilisez l'option d'extension des styles.

• Tout d'abord, cliquez sur les trois points sur le côté droit du module de séparation et sélectionnez "Étendre les styles de séparation".
• Ensuite, dans la fenêtre contextuelle, cliquez sur « Tout au long » et sélectionnez « Cette section » dans le menu déroulant.

Le design devrait maintenant ressembler à ceci :

Ajouter la ligne n° 3

Ajoutez une troisième ligne à la section en utilisant la structure de colonnes suivante :

Maintenant, avant d'ajouter des modules, ajustez les paramètres de ligne en conséquence.

Dimensionnement

Modifiez les paramètres de dimensionnement.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Colonne 1

Transformer

Appliquez un effet de conversion de transformation à la première colonne.

• Transformer traduire : axe des y -8vw

Indice Z

Ajustez également la valeur de l'index z.

• Indice Z : 10

Colonne 2

Transformer

Repositionnez la deuxième colonne à l'aide de certains paramètres de traduction de transformation personnalisés.

• Transformer la traduction : axe x -17vw, axe y -14vw

Indice Z

Ajustez la valeur de l'index z.

• Indice Z : 10

Ajouter 2 diviseurs

Ajoutez deux séparateurs, un dans chaque colonne.

Étendre les styles de séparation

Après avoir ajouté les séparateurs, utilisez les séparateurs précédents pour étendre les styles aux nouveaux.

• Tout d'abord, cliquez sur les trois points dans le module de séparation dans la première rangée ci-dessus et sélectionnez "Étendre les styles de séparation".
• Ensuite, dans la fenêtre contextuelle, sélectionnez "Tout au long de cette page".

Maintenant, nous allons apporter quelques modifications au séparateur dans la première colonne de notre troisième ligne.

Dimensionnement

Retirez la marge.

• Marge supérieure : par défaut

Indice Z

Modifiez également l'index z.

• Indice Z : -2

Ajouter 2 modules de texte

Ajoutez un module de texte à chaque colonne.

Étendre les styles de texte

Après avoir ajouté les nouveaux modules de texte, étendez les styles de texte du module de texte de la première ligne.

• Tout d'abord, cliquez sur les trois points dans le premier module de texte de la rangée supérieure et sélectionnez "Étendre les styles de texte".
• Ensuite, dans la fenêtre contextuelle, sélectionnez "Tout au long de cette page".

Maintenant, changez le texte pour qu'il corresponde au design. De plus, ajoutez une marge supérieure aux deux modules de texte de la troisième rangée.

Espacement

• Marge supérieure : 7vw

Recréer l'exemple #2

Passons à l'exemple suivant !

Ajouter une nouvelle section

Ajoutez une nouvelle section à la page sur laquelle vous travaillez. Avant d'ajouter une ligne, ajustez les paramètres de la section.

Visibilité

Masquez les débordements de la section dans les paramètres de visibilité.

• Débordement horizontal et vertical : masqué

Ajouter la ligne n° 1

Maintenant, ajoutez une ligne avec cinq colonnes. Avant d'ajouter des modules, ajustez les paramètres de ligne comme suit.

Dimensionnement

Tout d'abord, modifiez les paramètres de dimensionnement.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Ajustez ensuite l'espacement.

• Rembourrage gauche et droit : 19,5 vw

CSS personnalisé

Autorisez les colonnes à apparaître les unes à côté des autres en ajoutant une ligne de code CSS à l'élément principal de la ligne.

• Élément principal CSS : affichage : flex;

display: flex;

Tous les paramètres de colonne

Ensuite, apportez quelques modifications à chacune des colonnes.

CSS personnalisé

• Élément principal : largeur : 20 % !important;

width: 20% !important;

Indice Z

Ajustez également la valeur de l'index z.

• Indice Z : 10

Ajouter 5 modules de texte

Ajoutez un module de texte à chaque colonne.

Ajoutez du contenu pertinent à la zone de contenu et continuez en modifiant les paramètres du module de texte du module de texte dans la colonne 1.

Fond

Ajoutez une couleur de fond.

• Couleur de fond : Vert #2f7713

Texte

Stylisez le contenu comme suit.

• Police du texte : Allerta
• Alignement du texte : Centre
• Couleur du texte : Blanc #ffffff
• Taille du texte:
  • Ordinateur de bureau : 1.3vw
  • Tablette : 2vw
  • Téléphone : 2.4vw
• Hauteur de la ligne de texte : 2,9 em

Dimensionnement

Ajustez la taille.

• Largeur:
  • Ordinateur de bureau : 6vw
  • Tablette : 8vw
  • Téléphone : 9vw
• Alignement du module : Centre

Espacement

Ajustez l'espacement pour transformer le module en un carré.

• Marge inférieure : -2vw
• Rembourrage supérieur et inférieur : 1vw
• Rembourrage gauche et droit : 1vw

Frontière

Transformez le module de texte en cercle dans les paramètres de bordure.

• Coins arrondis : 50vw sur les quatre côtés

Boîte ombre

Sélectionnez également une ombre de boîte.

• Ombre de la boîte : troisième option

Étendre les styles de texte

Utilisez l'option d'extension des styles pour ajuster les paramètres de tous les modules de texte de la ligne.

• Tout d'abord, cliquez sur les points à droite du module de texte et choisissez "Étendre les styles de texte".
• Ensuite, dans la fenêtre contextuelle, cliquez sur « Tout au long » et choisissez « Cette page ».
• Enfin, modifiez le texte dans la zone de contenu de chaque module.

La conception devrait maintenant ressembler à ceci.

Module de texte 2

Faites le deuxième cercle jaune.

• Couleur de fond : Jaune #f2e200

Module de texte 3

Faites le troisième cercle orange.

• Couleur de fond : Orange #f2b100

Module de texte 4

Faire le quatrième cercle orange-rouge.

• Couleur de fond: Orange Rouge

Module de texte 5

Faites le cinquième module violet.

• Couleur de fond : violet #8e008c

Ajouter 5 modules diviseurs

Maintenant, sous chaque module de texte, ajoutez un module de séparation.

Ajustez les paramètres du premier diviseur en conséquence.

Ligne

Donnez une couleur au diviseur.

• Couleur de la ligne : Vert #2f7713

Dimensionnement

Ajustez la largeur.

• Largeur du diviseur : 4px
• Largeur: 13vw

Espacement

Ajoutez une valeur de marge supérieure.

• Marge supérieure:
  • Ordinateur de bureau : 7vw
  • Tablette + Téléphone : 5vw

Transformer

Faites pivoter le diviseur pour le rendre vertical.

• Transformer la rotation : 90 degrés dans la première option

Étendre les paramètres du diviseur

Utilisez l'option d'extension des styles pour styliser les autres séparateurs.

• Tout d'abord, cliquez sur les points à droite du module de séparation et choisissez « Étendre les styles de séparation ».
• Ensuite, dans la fenêtre contextuelle, cliquez sur « Tout au long » et choisissez « Cette section ».

Associez les couleurs

Diviseur 2

Faites le deuxième diviseur jaune.

• Couleur de la ligne : jaune #f2e200

Diviseur 3

Faire le troisième diviseur orange.

• Couleur de la ligne : Orange #f2b100

Diviseur 4

Faites le quatrième diviseur orange rouge.

• Couleur de la ligne : Orange Rouge #ef4a21

Diviseur 5

Faire le cinquième diviseur violet.

• Couleur de la ligne : violet #8e008c

Ajouter la ligne n° 2

Ajoutez une nouvelle ligne à une colonne.

Avant d'ajouter le module d'image, ajustez les paramètres de ligne.

Dimensionnement

Tout d'abord, ajustez la taille.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Visibilité

Ensuite, la visibilité.

• Débordement horizontal et vertical : Visible

Ajouter un module d'images

Ajoutez un module d'image et téléchargez l'image du jus.

Dimensionnement

Forcer la pleine largeur sur l'image.

• Forcer la pleine largeur : Oui

Écartement des rangs

C'est l'heure de la touche finale. Ouvrez à nouveau les paramètres de la ligne 1 et ajoutez des marges supérieure et inférieure.

• Marge supérieure : 7vw
• Marge inférieure :
  • Ordinateur de bureau : -24vw
  • Tablette : -31vw
  • Téléphone : -35vw

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Exemple 1

Bureau

Mobile

Exemple #2

Bureau

Mobile

C'est un Wrap !

Dans cet article, nous vous avons montré comment créer deux modèles de marqueurs d'image différents. Nous avons utilisé les options de colonne pour garder les colonnes de texte et les séparateurs ensemble. Nous espérons que ces conceptions vous inspireront pour créer vos propres conceptions de marqueurs d'image. N'oubliez pas d'utiliser les options de traduction de transformation à l'intérieur des colonnes pour un meilleur contrôle de chaque marqueur d'image. Si vous avez des questions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous!