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


Avec les options intégrées de Divi, vous pouvez créer une infinité de designs étonnants et uniques. Quel que soit le type de site Web que vous créez, vous pouvez ajuster les paramètres de manière transparente pour répondre aux besoins de votre site Web et des visiteurs. Dans cet article en particulier, nous allons vous montrer comment utiliser le nouveau filtre d’opacité pour créer une belle zone d’équipe pour votre prochain projet ou votre propre site Web. Pour mener à bien ce didacticiel, vous aurez besoin des éléments suivants:

  • Une image d’arrière-plan subtile qui fait partie de l’ensemble de vos lignes.
  • Images des membres de l’équipe avec un arrière-plan subtil, une largeur de «800px» et une hauteur de «455px»

Résultat

Avant d’entrer dans le tutoriel, regardons l’exemple où nous allons vous montrer étape par étape comment le recréer.

Sur le bureau

opacité

Sur la tablette

opacité

Au téléphone

opacité

Ajouter une section standard

Couleur de l’arrière plan

La première chose à faire est d’ajouter une nouvelle section standard à une page existante ou nouvelle. Lorsque vous avez ajouté la nouvelle section, changez la couleur d’arrière-plan en « # a8a8a8 » ou une autre couleur de la sous-catégorie Arrière-plan.

opacité

distance

Ensuite, allez dans l’onglet « Design » de votre section et ajoutez les pads personnalisés suivants à la sous-catégorie « Spacing »:

  • Ci-dessus: 115px
  • Droite: 0px
  • Ci-dessous: 115px
  • Gauche: 0px

opacité

Ajouter une ligne

Structure de la colonne

Allez-y et ajoutez une nouvelle ligne à votre section avec deux colonnes égales.

opacité

Couleur de l’arrière plan

Ouvrez les paramètres de ligne et choisissez «# 666666» comme couleur d’arrière-plan de la ligne.

opacité

image de fond

Ajoutez ensuite un arrière-plan dégradé subtil et appliquez les paramètres suivants:

  • Taille de l’image d’arrière-plan: Couverture
  • Position de l’image d’arrière-plan: centre
  • Répétition de l’image d’arrière-plan: pas de répétition
  • Mélange d’image d’arrière-plan: superposition

opacité

Alignement

Basculez vers l’onglet Conception et utilisez ensuite l’alignement de ligne moyenne.

opacité

Dimensionnement

Ouvrez ensuite la sous-catégorie Taille, activez la largeur de gouttière personnalisée et utilisez la valeur «1» pour la largeur de gouttière de votre ligne.

opacité

distance

Ensuite, allez dans la sous-catégorie Espacement et assurez-vous que toutes les options de remplissage sont définies sur «0px». Cela garantira qu’après le clonage de la ligne plus loin dans cet article, vous manquerez d’espace entre vos lignes.

opacité

Boîte ombre

Enfin, ajoutez l’ombre de champ suivante à votre ligne:

  • Position horizontale de l’ombre de la boîte: 0px
  • Position verticale de l’ombre de la boîte: 2px
  • Force de flou de l’ombre de la boîte: 18px
  • Force de propagation de l’ombre de la boîte: 0px
  • Couleur de l’ombre: rgba (0,0,0,0,71)

opacité

Premier module de texte

Paramètres de texte

Une fois que vous avez terminé avec vos paramètres de ligne, vous pouvez ajouter les différents modules aux deux colonnes. Tout d’abord, ajoutez un module de texte à la première colonne avec les paramètres de texte suivants:

  • Police du texte: standard
  • Épaisseur de la police du texte: Normal
  • Taille du texte: 11px
  • Couleur du texte: #dbdbdb
  • Orientation du texte: milieu

opacité

Dimensionnement

Ouvrez ensuite la sous-catégorie Taille et apportez les modifications suivantes:

  • Largeur: 61%
  • Orientation du module: centre

opacité

distance

Enfin, ajoutez un remplissage supérieur de «60px» à la sous-catégorie Espacement.

opacité

Deuxième module de texte

Paramètres de texte

Ajoutez un autre module de texte directement sous le module de texte précédemment créé avec les paramètres de texte suivants:

  • Police du texte: Aladin
  • Épaisseur de la police du texte: Normal
  • Taille du texte: 70px
  • Couleur du texte: #FFFFFF
  • Orientation du texte: milieu

opacité

distance

Accédez à la sous-catégorie Espacement et utilisez également les pads personnalisés suivants:

  • Ci-dessus: 50px
  • En bas: 0px (bureau), 120px (tablette et téléphone)

opacité

filtre

Enfin, modifiez l’option du filtre d’opacité dans la sous-catégorie Filtre sur «40%» afin que l’arrière-plan de la ligne et le module d’image se mélangent.

opacité

Module d’image

Dimensions de l’image

Comme mentionné dans l’introduction de cet article, nous utilisons certaines dimensions d’image pour les images des membres de l’équipe qui font partie de ce didacticiel. Utilisez une largeur de «800px» et une hauteur de «455px» pour obtenir exactement le même résultat. Ajoutez un module d’image à la deuxième colonne et téléchargez une photo de l’un des membres de votre équipe.

filtre

Passez ensuite à l’onglet Conception et ouvrez la sous-catégorie Filtres. Jouez avec les différentes options jusqu’à ce que vous obteniez le résultat souhaité. Dans cet exemple, nous avons apporté les modifications suivantes au module d’image:

  • Contraste: 122%
  • Opacité: 45%

opacité

Ligne de clonage

Une fois que vous avez terminé une ligne, vous pouvez la cloner pour créer la deuxième version de la ligne.

opacité

Changer la couleur d’arrière-plan

La première chose que nous allons changer sur la ligne clonée est la couleur d’arrière-plan. Nous choisissons une couleur de superposition d’arrière-plan légèrement plus claire, «#adadad», pour rendre les lignes un peu différentes les unes des autres.

opacité

Changer la position des modules

Nous modifierons également la position de nos modules. Placez votre module d’image dans la première colonne et les deux modules de texte dans la deuxième colonne.

opacité

changer la photo

Puis changez l’image que vous utilisez pour votre module d’image. Assurez-vous que cette image a les mêmes dimensions que votre image précédente (de préférence une largeur de «800px» et une hauteur de «455px»).

opacité

Changer le premier module de texte

Étant donné que nous utilisons une superposition d’arrière-plan plus claire pour cette ligne, nous devons également utiliser une couleur de texte plus sombre pour que le texte reste lisible. Changez la couleur du premier module de texte en «# 5b5b5b».

opacité

Changer le deuxième module de texte

Le deuxième module de texte a également besoin d’un module plus sombre. Changez-le en «# 000000». Nous utiliserons la couleur la plus sombre qui soit pour nous assurer que notre texte est toujours lisible après l’ajout du filtre d’opacité.

opacité

Cloner aussi souvent que nécessaire

Vous pouvez désormais cloner les deux lignes autant de fois que nécessaire pour correspondre au nombre de membres de l’équipe que vous souhaitez présenter sur votre page. Le remplissage personnalisé que nous avons ajouté aux paramètres de ligne garantit qu’il ressemble toujours à une entité quel que soit le nombre de lignes similaires utilisées.

Résultat

Jetons un dernier coup d’œil à l’exemple que nous vous avons montré dans cet article sur la façon de le recréer.

Sur le bureau

opacité

Sur la tablette

opacité

Au téléphone

opacité

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser la nouvelle option de filtre d’opacité de Divi pour créer un superbe espace d’équipe pour votre prochain projet ou votre propre site Web. L’exemple que nous vous avons montré comment recréer établit un bon équilibre entre le contenu écrit et la visualisation. Si vous avez des questions ou des suggestions; Assurez-vous de laisser un commentaire dans la section des commentaires ci-dessous!





Source link

Recent Posts