Comment présenter magnifiquement les services sur les appareils mobiles avec Divi (téléchargement gratuit !)

Si vous vous concentrez sur les conceptions mobiles, cet article pourrait vous aider. Nous avons créé deux magnifiques exemples de vitrines de service qui ont fière allure sur des écrans plus petits. Plus encore, ils ont été spécialement conçus pour être à leur meilleur sur mobile tout en conservant un bon design sur ordinateur de bureau. Dans cet article, nous allons vous montrer étape par étape comment les recréer à partir de zéro. Nous espérons que ce didacticiel vous inspirera pour laisser libre cours à votre créativité lors de la conception de sections de services pour tout site Web que vous créez. À la fin du didacticiel, vous pourrez également télécharger les fichiers JSON des deux sections.

Allons-y !

Aperçu

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

Exemple 1

Exemple #2

Commençons à recréer l'exemple #1

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Fond dégradé

Créez une nouvelle page et ajoutez-y une section régulière. Ouvrez les paramètres de la section et ajoutez un arrière-plan dégradé.

• Couleur 1 : #ff0f83
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Gauche
• Position de départ : 20 %
• Position finale : 20 %

Ajouter la ligne n° 1

Structure des colonnes

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

Ajouter un module de texte n° 1

Ajouter du contenu

Le premier module dont nous aurons besoin est un module de texte. Ajoutez du contenu à la zone de contenu.

Paramètres de texte

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

• Police de texte : Poppins
• Poids de la police de texte : lourd
• Couleur du texte : #ffffff
• Taille du texte : 20 vw
• Hauteur de la ligne de texte : 1 em

• Force du flou d'ombre du texte : 0.95em
• Couleur de l'ombre du texte : rgba(0,0,0,0.13)
• Orientation du texte : Centre

Ajouter un module de texte n° 2

Ajouter du contenu H2

Ajoutez un autre module de texte juste en dessous du précédent. Entrez du contenu H2 de votre choix.

Paramètres de texte H2

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

• Police de la rubrique 2 : Poppins
• Poids de la police de l'en-tête 2 : gras
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #000000
• Titre 2 Taille du texte : 10vw (téléphone et tablette), 10vw (ordinateur de bureau)

Espacement

Créez un chevauchement entre les deux modules de texte en utilisant une marge supérieure négative.

• Marge supérieure : -12vw (téléphone), -10vw (tablette), -8vw (ordinateur de bureau)

Ajouter la ligne n° 2

Structure des colonnes

Continuez en ajoutant une autre ligne en utilisant 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 : #3239ff
• Couleur 2: rgba(255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Droite
• Position de départ : 30 %
• Position finale : 30 %

Dimensionnement

Accédez ensuite aux paramètres de dimensionnement et laissez la ligne occuper toute la largeur de l'écran.

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

Espacement

Ajoutez également des valeurs d'espacement. Ces valeurs garantiront que tout semble bon sur toutes les tailles d'écran.

• Rembourrage gauche : 0vw (téléphone et tablette), 15vw (bureau)
• Rembourrage droit : 0vw (téléphone et tablette), 15vw (bureau)

CSS personnalisé

Nous plaçons également les deux colonnes l'une à côté de l'autre en ajoutant une ligne de code CSS dans l'onglet avancé.

display: flex;

Ajouter un module de texte à la colonne 1

Ajouter du contenu H3 et des liens

Maintenant, nous pouvons commencer à ajouter des modules ! Ajoutez un module de texte à la première colonne avec une copie H3 et un lien.

Couleur de l'arrière plan

Ensuite, allez dans les paramètres d'arrière-plan du module et ajoutez une couleur d'arrière-plan.

• Couleur d'arrière-plan : rgba(255,255,255,0.95)

Paramètres de texte

Continuez en modifiant l'orientation du texte dans les paramètres de texte du module.

• Orientation du texte : Centre

Paramètres de texte de lien

Modifiez également les paramètres du texte du lien.

• Police du lien : Poppins
• Poids de la police Linke : gras
• Style de police du lien : Souligné
• Couleur de soulignement du lien : #000000
• Couleur du texte du lien : #000000
• Taille du texte du lien : 3vw (téléphone), 2vw (tablette), 1vw (ordinateur de bureau)

Paramètres de texte H3

Avec les paramètres de texte H3.

• Police de la rubrique 3 : Poppins
• Titre 3 Poids de la police : Ultra léger
• Titre 3 Couleur du texte : #000000
• Titre 3 Taille du texte : 4vw (téléphone), 3vw (tablette), 2vw (ordinateur de bureau)
• Titre 3 Hauteur de la ligne de texte : 1,9 em pour une forme de cercle ou 3 em pour une forme ovale

Espacement

Pour créer une forme à partir de ce module, nous allons ajouter des valeurs de marge et de remplissage personnalisées dans les paramètres d'espacement.

• Marge gauche : 5vw
• Marge droite : -5vw
• Rembourrage supérieur : 17vw (téléphone), 20vw (tablette), 15vw (ordinateur de bureau)
• Rembourrage inférieur : 17vw (téléphone), 20vw (tablette), 15vw (ordinateur de bureau)

Frontière

Nous transformons le carré en cercle en utilisant des coins arrondis en ajoutant « 100vw » à chacun des coins.

Boîte ombre

Et pour créer de la profondeur, nous allons ajouter une subtile ombre de boîte.

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

Cloner le module de texte 4 fois

Maintenant que nous avons terminé de modifier le premier module de texte, nous pouvons continuer et le cloner quatre fois. Placez deux des doublons dans la deuxième colonne.

Modifier le doublon #1

Espacement

Continuez en modifiant les paramètres d'espacement du premier doublon.

• Marge supérieure : 20vw
• Marge gauche : -5vw
• Marge droite : 5vw

Modifier le doublon #2

Couleur de l'arrière plan

Ouvrez ensuite le deuxième doublon et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : rgba (255 248 209 0,92)

Espacement

Modifiez également les paramètres d'espacement.

• Marge supérieure : -5vw

Modifier le doublon #3

Couleur de l'arrière plan

Ensuite, ouvrez le troisième doublon et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : rgba (219 255 223 0,95)

Espacement

Modifiez ensuite les paramètres d'espacement.

• Marge supérieure : -5vw
• Marge gauche : -5vw
• Marge droite : 5vw

Modifier le doublon #4

Espacement

Ouvrez également le dernier doublon et ajoutez une marge supérieure négative pour terminer la conception.

• Marge supérieure : -5vw

Commençons à recréer l'exemple #2

Ajouter une nouvelle section

Passons au deuxième exemple ! Ajoutez une nouvelle section à votre page.

Ajouter la ligne n° 1

Structure des colonnes

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

Ajouter un module de texte

Ajouter du contenu H2

Le premier module dont nous aurons besoin est un module de texte. Entrez du contenu H2 de votre choix.

Paramètres de texte H2

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

• Police de la rubrique 2 : Poppins
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #333333
• Titre 2 Taille du texte : 7vw (téléphone et tablette), 4vw (ordinateur de bureau)

Ajouter un module diviseur

Visibilité

Ajoutez un module de séparation juste en dessous du module de texte. Assurez-vous que l'option « Afficher le diviseur » est activée.

Couleur

Ensuite, allez dans l'onglet design et modifiez la couleur du séparateur.

• Couleur : #333333

Dimensionnement

Jouez également avec les paramètres de taille.

• Poids du diviseur : 5px
• Largeur : 12%
• Alignement du module : Centre

Ajouter la ligne n° 2

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

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

Dimensionnement

Accédez ensuite aux paramètres de dimensionnement et laissez la ligne occuper toute la largeur de l'écran.

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

Espacement

Ajoutez des valeurs de marge et de remplissage personnalisées à côté pour optimiser la conception pour toutes les tailles d'écran.

• Marge supérieure : 2vw
• Marge inférieure : 2vw
• Rembourrage supérieur : 10vw (téléphone et tablette), 5vw (bureau)
• Rembourrage inférieur : 10vw (téléphone et tablette), 5vw (bureau)
• Rembourrage gauche : 2vw (téléphone et tablette), 20vw (bureau)
• Rembourrage droit : 2vw (téléphone et tablette), 20vw (bureau)

Boîte ombre

Nous utilisons également une ombre de boîte subtile.

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

CSS personnalisé

Enfin, placez les deux colonnes l'une à côté de l'autre en ajoutant une seule ligne de code CSS à l'élément principal dans l'onglet avancé.

display: flex;

Ajouter le module Blurb à la colonne 1

Sélectionnez l'icône

Nous pouvons maintenant commencer à ajouter des modules ! Le seul module dont nous avons besoin dans la colonne 1 est un module Blurb. Sélectionnez une icône de votre choix.

Fond dégradé

Ensuite, ajoutez un fond dégradé.

• Couleur 1 : #7b28ef
• Couleur 2: #29b6e5
• Direction du gradient : 142 deg

Paramètres des icônes

Modifiez ensuite les paramètres de l'icône.

• Couleur de l'icône : #ffffff
• Placement de l'icône : en haut
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police des icônes : 5vw (téléphone et tablette), 4vw (bureau)

Dimensionnement

Et modifiez les paramètres de dimensionnement.

• Largeur : 48 % (téléphone et tablette), 78 % (ordinateur de bureau)

Espacement

Nous ajoutons également des valeurs de marge et de remplissage personnalisées pour optimiser la conception sur toutes les tailles d'écran.

• Marge supérieure : 2vw (téléphone)
• Rembourrage supérieur : 8.5vw (téléphone), 9vw (tablette), 6vw (ordinateur de bureau)
• Rembourrage inférieur : 3vw (téléphone), 5vw (tablette), 4vw (ordinateur de bureau)

Frontière

Transformez ensuite le module en cercle en ajoutant « 100vw » à chacun des coins dans les paramètres de bordure.

Boîte ombre

Nous ajoutons également une ombre de boîte.

• Position verticale de l'ombre de la boîte : 10px
• Force de propagation de l'ombre de la boîte: 5px
• Couleur de l'ombre : rgba (2 185 252 0,35)

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

Ajouter du contenu H3

Passons à la deuxième colonne ! Le premier module dont nous avons besoin est un module de texte de titre. Ajoutez du contenu H3.

Paramètres de texte H3

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

• Police de la rubrique 3 : Poppins
• Titre 3 Taille du texte : 4vw (téléphone), 3vw (tablette), 2vw (ordinateur de bureau)

Espacement

Ajoutez ensuite des valeurs d'espacement personnalisées.

• Marge supérieure : 0vw (téléphone), 3vw (tablette et ordinateur de bureau)
• Marge de gauche : -20vw (téléphone et tablette), 0vw (ordinateur de bureau)
• Marge droite : 0vw
• Rembourrage inférieur : 2vw (téléphone et tablette), 1vw (bureau)
• Rembourrage gauche : 5vw (téléphone et tablette), 2vw (bureau)

Frontière

Avec une bordure gauche.

• Largeur de la bordure gauche : 5 px
• Couleur de la bordure gauche : #f4f4f4
• Style de bordure gauche : double

Ajouter le module diviseur à la colonne 2

Afficher le diviseur

Le deuxième module dont nous avons besoin est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Couleur

Ensuite, allez dans l'onglet conception et changez la couleur du séparateur.

• Couleur : #f4f4f4

modes

Modifiez ensuite le style de séparation dans les paramètres de styles.

• Style de diviseur: Double

Dimensionnement

Continuez en modifiant les différentes options dans les paramètres de dimensionnement.

• Poids du diviseur : 5px
• Hauteur : 0px

Espacement

Et jouez aussi avec les valeurs d'espacement.

• Marge de gauche : -20vw (téléphone et tablette), 0vw (ordinateur de bureau)

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

Ajouter du contenu

Le prochain module dont nous avons besoin dans la deuxième colonne est un autre module de texte. Ajoutez du contenu corporel de votre choix.

Paramètres de texte

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

• Taille du texte : 2vw (téléphone), 1.7vw (tablette), 0.8vw (bureau)
• Orientation du texte : à gauche

Espacement

Jouez également avec les valeurs d'espacement.

• Marge supérieure : 0vw
• Marge de gauche : -20vw (téléphone et tablette), 0vw (ordinateur de bureau)
• Marge droite : 0vw
• Rembourrage supérieur : 3vw (téléphone et tablette), 2vw (bureau)
• Rembourrage gauche : 5vw (téléphone et tablette), 2vw (bureau)

Frontière

Et ajoutez une bordure gauche.

• Largeur de la bordure gauche : 5 px
• Couleur de la bordure gauche : #f4f4f4
• Style de bordure gauche : double

Ajouter un module de bouton à la colonne 2

Ajouter une copie

Le prochain et dernier module dont nous avons besoin dans la deuxième colonne est un module de bouton. Ajoutez une copie.

Paramètres des boutons

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

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 2.5vw (téléphone), 2vw (tablette), 1vw (bureau)
• Couleur du texte du bouton : #4f77e8
• Largeur de la bordure du bouton : 1px
• Couleur de la bordure du bouton : #4f77e8

• Rayon de la bordure du bouton : 1px
• Police des boutons : Poppins

Espacement

Modifiez également les valeurs d'espacement.

• Marge supérieure : 4vw (téléphone et tablette), 2vw (ordinateur de bureau)
• Marge de gauche : -20vw (téléphone et tablette), 0vw (ordinateur de bureau)

Cloner la ligne deux fois

Maintenant que nous avons terminé de modifier la ligne et tous ses modules, nous pouvons la cloner deux fois.

Changer les icônes

Assurez-vous de modifier les icônes des deux modules Blurb.

Changer les arrière-plans dégradés

Modifiez également les arrière-plans dégradés.

• Couleur 1 : #ff2885
• Couleur 2 : #d6ac24

• Couleur 1 : #70ff1e
• Couleur 2: #2699ff

Changer les couleurs de l'ombre de la boîte

Faites correspondre la couleur de l'ombre de la boîte avec le nouveau fond dégradé.

• Couleur de l'ombre : rgba(255,208,2,0,37)

• Couleur de l'ombre : rgba(42,255,0,0,37)

Changer la bordure des boutons et les couleurs du texte

Et complétez la conception en changeant la bordure du bouton et les couleurs du texte.

• Couleur du texte du bouton : #e96c54
• Couleur de la bordure du bouton : #e96c54

• Couleur du texte du bouton : #4dcb93
• Couleur de la bordure du bouton : #4dcb93

Téléchargez GRATUITEMENT les sections des services mobiles

Pour mettre la main sur les rubriques des services mobiles gratuits, vous devrez d'abord les 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 !

Aperçu

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

Exemple 1

Exemple #2

Dernières pensées

Dans cet article, nous vous avons montré deux manières créatives de présenter des services sur des appareils mobiles en utilisant uniquement les options intégrées de Divi. Nous espérons que cette approche axée sur le mobile vous incitera également à faire preuve de créativité. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!