Comment créer de beaux bios de suivi social mobile avec Divi (téléchargement gratuit !)

Lorsque vous créez votre site Web personnel, il est utile d'avoir une page de biographie de suivi social à laquelle vous pouvez facilement créer un lien. C'est une excellente carte de visite en ligne avec un résumé de ce que vous faites et où les gens peuvent voir votre travail. Les informations partagées dans les bios de suivi des réseaux sociaux mobiles sont généralement limitées à votre image, votre nom, le titre du poste, une petite description et des liens vers le portfolio. Vous pouvez également ajouter un CTA supplémentaire pour aider les visiteurs à vous contacter.

Dans cet article, nous allons vous montrer comment créer deux magnifiques bios de suivi social mobile à l'aide de Divi. À la fin du didacticiel, nous partagerons également les fichiers JSON des deux exemples afin que vous puissiez commencer immédiatement.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide aux deux exemples que nous allons recréer à partir de zéro.

Exemple 1

Exemple 2

Commencer à recréer l'exemple #1

Ajouter une nouvelle section

Couleur de l'arrière plan

Commençons par le premier exemple ! Créez une nouvelle page ou ouvrez une page existante et ajoutez-y une section régulière. Ouvrez les paramètres de la section et ajoutez une couleur de fond blanc.

• Couleur d'arrière-plan : #ffffff

Espacement

Ensuite, allez dans les paramètres d'espacement de la section et apportez quelques modifications. Vous remarquerez que les valeurs diffèrent selon la taille de l'écran. Nous gardons le même type de design mince sur différentes tailles d'écran en modifiant le rembourrage gauche et droit au fur et à mesure.

• Rembourrage supérieur : 50 px (ordinateur de bureau et tablette), 0 px (téléphone)
• Rembourrage inférieur : 50 px (ordinateur de bureau et tablette), 0 px (téléphone)
• Rembourrage gauche : 36vw (ordinateur de bureau), 23vw (tablette), 0vw (téléphone)
• Rembourrage droit : 36vw (ordinateur de bureau), 23vw (tablette), 0vw (téléphone)

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez une couleur d'arrière-plan.

• Couleur d'arrière-plan : #333333

Dimensionnement

Ensuite, accédez aux paramètres de dimensionnement dans l'onglet Conception et supprimez tout l'espace personnalisé entre la colonne et la ligne.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Boîte ombre

Nous ajoutons également une ombre de boîte pour créer de la profondeur sur des écrans plus grands.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Ajouter un module d'images

Télécharger une image

Il est temps de commencer à ajouter des modules ! Commencez avec un module d'image qui a un rapport 1:1. L'image que nous utilisons, par exemple, a une largeur et une hauteur de '500px'.

Alignement

Une fois que vous avez téléchargé l'image, accédez à l'onglet Conception et modifiez l'alignement de l'image.

• Alignement de l'image : Centre

Dimensionnement

Nous réduisons la taille de l'image en modifiant ensuite la largeur dans les paramètres de dimensionnement.

• Largeur : 33%
• Alignement du module : Centre

Frontière

Nous transformons également l'image en cercle en ajoutant « 50vw » à chacun des coins dans les paramètres de bordure. En plus de cela, nous ajouterons une bordure blanche en utilisant les paramètres suivants :

• Largeur de la bordure : 8px
• Couleur de la bordure : #ffffff

Boîte ombre

Enfin, ajoutez une ombre de boîte pour créer un design dimensionnel.

• Position verticale de l'ombre de la boîte : 40 px
• Force de flou d'ombre de boîte : 100px
• Couleur de l'ombre : # 000000

Ajouter un module de texte n° 1

Ajouter du contenu H3

Au prochain module ! Ajoutez un module de texte juste en dessous du module d'image avec du contenu H3.

Paramètres de texte H3

Continuez en allant dans l'onglet conception et en modifiant les paramètres de texte H3.

• Police de l'en-tête 3 : Open Sans
• En-tête 3 Poids de la police : semi-gras
• Titre 3 Alignement du texte : Centre
• Titre 3 Couleur du texte : #ffffff
• Titre 3 Hauteur de ligne : 0,1 em

Espacement

Nous ajoutons également une marge supérieure pour créer un espace entre le module Image et ce module Texte.

• Marge supérieure : 30px

Ajouter un module de texte n° 2

Ajouter du contenu

Le prochain module dont nous avons besoin est un autre module de texte. Ajoutez votre titre de poste à la zone de contenu.

Paramètres de texte

Ensuite, allez dans l'onglet conception et modifiez les paramètres du texte.

• Police de texte : Open Sans
• Poids de la police de texte : régulier
• Couleur du texte : #919191
• Orientation du texte : Centre

Ajouter un module de texte n° 3

Ajouter du contenu

Continuez en ajoutant un autre module de texte avec une courte description de vous-même.

Paramètres de texte

Accédez aux paramètres de texte et apportez quelques modifications.

• Police de texte : Open Sans
• Couleur du texte : #b7b7b7
• Hauteur de la ligne de texte : 1,6 em
• Orientation du texte : Centre

Dimensionnement

Modifiez également la largeur du module.

• Largeur : 68 %
• Alignement du module : Centre

Espacement

Et ajoutez des marges supérieure et inférieure pour créer un espace supplémentaire.

• Marge supérieure : 30px
• Marge inférieure : 30px

Ajouter un module de boutons

Ajouter une copie

Le prochain et dernier module dont nous avons besoin dans cette rangée est un module de bouton. Ajoutez une copie.

Alignement

Ensuite, accédez à l'onglet Conception et modifiez l'alignement des boutons pour qu'il corresponde aux modules précédents.

• Alignement des boutons : Centre

Paramètres des boutons

Continuez en modifiant l'apparence du bouton dans les paramètres du bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 13 px
• Couleur du texte du bouton : #ffffff
• Couleur 1 : #ad32ff
• Couleur 2: #32baff
• Direction du dégradé : 96 degrés
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 30 px
• Police des boutons : Open Sans
• Poids de la police : Ultra gras
• Style de police : majuscule

Espacement

Ajoutez ensuite une marge personnalisée et un rembourrage.

• Marge inférieure : 50px
• Rembourrage supérieur : 15px
• Rembourrage inférieur : 15px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Boîte ombre

Et complétez la conception du bouton en ajoutant une ombre de boîte.

• Position verticale de l'ombre de la boîte : 20px
• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.69)

Ajouter la ligne n° 2

Structure des colonnes

Au rang suivant ! Utilisez la structure de colonnes suivante :

Fond dégradé

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez un arrière-plan dégradé :

• Couleur 1 : #1e1e1e
• Couleur 2: #3f3f3f
• Type de dégradé : Radial
• Direction radiale : en haut à gauche
• Position de départ : 26 %
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Image de fond

Enregistrez l'image suivante sur votre ordinateur et utilisez-la comme image d'arrière-plan pour la ligne :

Avec les paramètres d'arrière-plan suivants :

• Taille de l'image d'arrière-plan : taille réelle
• Position de l'image d'arrière-plan : Centre
• Répétition de l'image d'arrière-plan : aucune répétition
• Mélange d'images d'arrière-plan : lumière dure

Dimensionnement

Ensuite, allez dans l'onglet conception et supprimez tout l'espace entre les colonnes et la ligne. Cela nous aidera à tirer pleinement parti de l'espace de ligne que nous obtenons.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Ajoutez ensuite un rembourrage personnalisé.

• Rembourrage supérieur : 84 px
• Rembourrage inférieur : 84 px
• Rembourrage gauche : 4vw (ordinateur de bureau), 7vw (tablette), 14vw (téléphone)
• Rembourrage droit : 4vw (ordinateur de bureau), 7vw (tablette), 14vw (téléphone)

Boîte ombre

Avec une ombre de boîte.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Affichage

Pour nous assurer que toutes les icônes de suivi social apparaissent les unes à côté des autres, nous allons ajouter une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Ajouter le module de suivi des médias sociaux à la colonne 1

Alignement

Le premier module dont nous avons besoin dans la colonne 1 est un module de suivi des médias sociaux. Une fois que vous avez ajouté le module, modifiez l'alignement des éléments dans l'onglet Conception.

• Alignement de l'article : Centre

Ajouter un nouveau réseau social

Continuez en ajoutant un nouveau réseau social. Pour cet exemple, nous utilisons Dribbble.

Relier

Ajoutez un lien vers votre profil Dribbble.

Fond dégradé

Ensuite, modifiez l'arrière-plan dégradé à l'aide des paramètres suivants :

• Couleur 1 : #ea0061
• Couleur 2: #ea4c8d
• Direction du gradient : 136 degrés

Espacement

Et augmentez la taille du module en ajoutant un rembourrage personnalisé.

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Rembourrage gauche : 20px
• Rembourrage droit : 20px

Frontière

Nous transformons également le module en cercle en ajoutant « 20vw » à chacun des coins dans les paramètres de bordure.

Boîte ombre

Enfin, ajoutez une ombre de boîte.

• Position verticale de l'ombre de la boîte : 20px
• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : # 000000

Ajouter le module de texte n° 1 à la colonne 1

Ajouter du contenu

Ajoutez ensuite un module de texte à la première colonne.

Paramètres de texte

Modifiez les paramètres de texte.

• Police de texte : Open Sans
• Poids de la police de texte : ultra gras
• Couleur du texte : #ffffff
• Orientation du texte : Centre

Ajouter le module de texte n° 2 à la colonne 1

Ajouter du contenu

Ajoutez-en un autre sous le précédent.

Paramètres de texte

Modifiez également les paramètres de texte de ce module.

• Police de texte : Open Sans
• Couleur du texte : #898989
• Taille du texte : 11px
• Orientation du texte : Centre

Cloner les modules dans la colonne 1 deux fois et placer les doublons dans les colonnes restantes

Une fois que vous avez terminé de personnaliser tous les modules de la colonne 1, vous pouvez continuer et les cloner deux fois. Placez les doublons dans les deux colonnes restantes de la ligne.

Changer les réseaux sociaux

Bien sûr, vous devrez changer les réseaux sociaux.

Modifier les liens des réseaux sociaux

Avec les liens.

Changer les arrière-plans dégradés des réseaux sociaux

Et les arrière-plans dégradés du réseau.

• Couleur 1 : #0043ff
• Couleur 2: #00aced

• Couleur 1 : #ea2c59
• Couleur 2 : #fed270

Commencer à recréer l'exemple #2

Ajouter une nouvelle section

Couleur de l'arrière plan

Passons à l'exemple suivant ! Ajoutez une nouvelle section avec une couleur de fond blanc.

• Couleur d'arrière-plan : #ffffff

Espacement

Ajoutez ensuite un rembourrage personnalisé.

• Rembourrage supérieur : 50 px (ordinateur de bureau et tablette), 0 px (téléphone)
• Rembourrage inférieur : 50 px (ordinateur de bureau et tablette), 0 px (téléphone)
• Rembourrage gauche : 36vw (ordinateur de bureau), 23vw (tablette), 4vw (téléphone)
• Rembourrage droit : 36vw (ordinateur de bureau), 23vw (tablette), 4vw (téléphone)

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, accédez à l'onglet de conception des paramètres de ligne et modifiez les paramètres de dimensionnement.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Ajouter un module d'images

Télécharger une image

Il est temps de commencer à ajouter des modules ! Le premier module dont nous avons besoin est un module d'image avec un rapport 1:1.

Alignement

Modifiez l'alignement de l'image.

• Alignement de l'image : Centre

Dimensionnement

Modifiez également la largeur.

• Largeur : 33%
• Alignement du module : Centre

Frontière

Et ajoutez « 20px » à chacun des coins dans les paramètres de bordure.

Boîte ombre

Complétez la conception de l'image en ajoutant une ombre de boîte subtile.

• Force de flou d'ombre de boîte : 51px
• Couleur de l'ombre : rgba(0,0,0,0.37)

Ajouter un module de texte n° 1

Ajouter du contenu H3

Le prochain module dont nous avons besoin est un module de texte. Ajoutez du contenu H3 de votre choix.

Paramètres de texte H3

Modifiez les paramètres de texte H3 dans l'onglet Conception.

• Police de l'en-tête 3 : Open Sans
• Titre 3 Poids de la police : Ultra gras
• Titre 3 Style de police : majuscule
• Titre 3 Alignement du texte : Centre
• Titre 3 Couleur du texte : #000000
• En-tête 3 Espacement des lettres : -1px
• En-tête 3 Hauteur de ligne : 0.9em

Espacement

Ajoutez ensuite une marge supérieure.

• Marge supérieure : 30px

Ajouter un module de texte n° 2

Ajouter du contenu

Ajoutez un autre module de texte.

Paramètres de texte

Modifiez les paramètres de texte.

• Police de texte : Open Sans
• Couleur du texte : #919191
• Orientation du texte : Centre

Ajouter la ligne n° 2

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez la couleur d'arrière-plan de la ligne.

• Couleur d'arrière-plan : #ffffff

Couleur d'arrière-plan de la colonne 2

Ajoutez également une couleur d'arrière-plan à la deuxième colonne.

• Couleur de fond de la colonne 2 : #efefef

Alignement

Assurez-vous que vous utilisez l'alignement de la ligne de gauche.

• Alignement des lignes : à gauche

Dimensionnement

Accédez ensuite aux paramètres de dimensionnement et apportez quelques modifications.

• Utiliser la largeur personnalisée : Oui
• Unité : %
• Largeur personnalisée : 67 %
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui

Espacement

Nous ajoutons également un remplissage personnalisé à la ligne et à ses colonnes.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Remplissage supérieur de la colonne 1 : 20px
• Remplissage inférieur de la colonne 1 : 20px
• Remplissage supérieur de la colonne 2: 20px
• Remplissage inférieur de la colonne 2 : 20px

Frontière

Ajoutez « 14px » dans les coins en haut à gauche, en haut à droite et en bas à gauche.

Boîte ombre

Et complétez la conception de la rangée en ajoutant une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.17)

Ajouter le module de suivi des médias sociaux à la colonne 1

Alignement

Dans la première colonne, nous aurons besoin d'un module de suivi des médias sociaux. Modifiez l'alignement de l'élément.

• Alignement de l'article : Centre

Ajouter un nouveau réseau social

Ensuite, ajoutez un nouveau réseau social. Nous utilisons Dribbble.

Relier

Ajoutez le lien à votre portfolio Dribbble.

Fond dégradé

Et changez le fond dégradé du réseau social.

• Couleur 1 : #ea0061
• Couleur 2: #ea4c8d
• Direction du gradient : 136 degrés

Espacement

Ajoutez ensuite des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Rembourrage gauche : 20px
• Rembourrage droit : 20px

Frontière

Et ajoutez « 10px » à chacun des coins du réseau social.

Boîte ombre

Complétez la conception du module en ajoutant une subtile ombre de boîte.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Ajouter le module de texte n° 1 à la colonne 2

Ajouter du contenu

Ajoutez un module de texte à la deuxième colonne.

Paramètres de texte

Modifiez les paramètres de texte en conséquence :

• Police de texte : Open Sans
• Poids de la police de texte : ultra gras
• Couleur du texte : #000000
• Orientation du texte : Centre

Espacement

Créez de l'espace en ajoutant ensuite une marge supérieure.

• Marge supérieure : 10px

Ajouter le module de texte n° 2 à la colonne 2

Ajouter du contenu

Le deuxième module dont nous avons besoin dans la colonne 2 est un autre module de texte.

Paramètres de texte

Modifiez les paramètres de texte.

• Police de texte : Open Sans
• Couleur du texte : #898989
• Taille du texte : 11px
• Orientation du texte : Centre

Cloner la ligne n° 2

Une fois que vous avez terminé de modifier la ligne, vous pouvez la cloner une fois.

Échanger des modules

Échangez ensuite les modules.

Ajouter la couleur d'arrière-plan de la colonne 1

Ensuite, ajoutez une couleur d'arrière-plan de la colonne 1 à la ligne en double.

• Couleur d'arrière-plan de la colonne 1 : #dbdbdb

Supprimer la couleur d'arrière-plan de la colonne 2

Supprimez ensuite la couleur d'arrière-plan de la colonne 2.

Modifier l'alignement des lignes

Modifiez également l'alignement des lignes.

• Alignement des lignes : à droite

Modifier la taille des lignes

Avec la largeur personnalisée dans les paramètres de dimensionnement.

• Largeur personnalisée : 66,99 %

Modifier la bordure de la ligne

Nous veillons également à ce que « 14px » soit affecté uniquement aux coins supérieur droit et inférieur droit.

Changer le réseau de suivi social

Continuez en changeant de réseau social.

Changer l'arrière-plan du dégradé du réseau social Follow

Avec le fond dégradé.

• Couleur 1 : #0043ff
• Couleur 2: #00aced

Cloner les deux lignes de suivi social

Une fois que vous avez terminé d'avoir les deux lignes de suivi social, vous pouvez cloner chacune d'entre elles.

Changer la bordure du doublon #1

Modifiez les coins arrondis du premier doublon.

Changer le réseau de suivi social des doublons #1

Avec le réseau social.

Changer l'arrière-plan dégradé du doublon #1

Et le fond dégradé.

• Couleur 1 : #ea2c59
• Couleur 2 : #fed270

Changer la bordure du doublon #2

Continuez en modifiant également les coins arrondis du deuxième doublon.

Changer le réseau de suivi social des doublons #2

Avec le réseau social.

Changer l'arrière-plan dégradé du doublon #2

Et, encore une fois, le fond dégradé qui est attribué au réseau social.

• Couleur 1 : #00306b
• Couleur 2: #007bb6

Téléchargez gratuitement la biographie de The Mobile Social Follow

Pour mettre la main sur les sections de suivi social mobile gratuites, vous devrez d'abord le télécharger en utilisant le 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 !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat des deux exemples que nous avons recréés.

Exemple 1

Exemple 2

Dernières pensées

Dans cet article, nous vous avons montré comment créer de superbes biographies de suivi social pour les appareils mobiles. Vous pouvez utiliser ces conceptions comme carte de visite en ligne et rediriger les gens vers cette page afin qu'ils puissent entrer en contact ou consulter les liens de votre portfolio. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!