Comment créer des designs mobiles avec Divi

De nombreux sites Web attirent des tonnes de visiteurs à partir d'appareils mobiles. Cela conduit à la question de savoir si vos conceptions sont suffisamment optimisées pour des tailles d'écran plus petites. Avec Divi, une conception conçue pour une expérience de bureau finit également par être instantanément réactive. Mais ce n'est pas parce que quelque chose est réactif qu'il est également optimisé.

Si le mobile est votre principale source de visiteurs, il peut vraiment être utile de commencer à concevoir et à créer d'un point de vue mobile au lieu d'un ordinateur de bureau. Dans cet article, nous allons vous montrer exactement comment procéder. Après avoir parcouru quelques trucs et astuces que vous devez garder à l'esprit, nous allons également recréer un exemple à partir de zéro qui prend en compte ces astuces.

Allons-y !

Aperçu

Comme mentionné précédemment, nous allons commencer par passer en revue quelques trucs et astuces. Ensuite, nous allons recréer un exemple à partir de zéro qui utilise ces conseils. Jetons un coup d'œil au résultat.

Mobile

Bureau

Approcher

Abonnez-vous à notre chaîne Youtube

1. Basculez vers la vue mobile juste après avoir ajouté une nouvelle page

La première chose que vous devez faire, après avoir ajouté une nouvelle page, est de passer immédiatement à la vue mobile. Cela vous permettra de créer un design orienté mobile et précis.

2. Activez les options réactives pour chaque élément de conception et modifiez d'abord les valeurs mobiles

Une fois que vous aurez commencé à concevoir le design que vous recherchez, vous voudrez activer les options réactives pour les éléments de conception. Cela inclut, mais sans s'y limiter, la taille du texte, le remplissage et la marge. Les premières valeurs que vous ajouterez seront les valeurs mobiles (au lieu de celles de bureau) pour vous assurer que la conception est optimisée pour le mobile d'abord.

3. Supprimer l'espace par défaut entre les colonnes et ajouter un remplissage manuellement si nécessaire

Pour créer plus d'espace horizontal, il est également recommandé de supprimer tout le remplissage personnalisé par défaut entre les colonnes. Si nécessaire, vous pouvez toujours ajouter le rembourrage manuellement à chaque colonne ou élément de conception et choisir vous-même la distance que vous souhaitez qu'il y ait.

4. Placez 2 ou 3 colonnes côte à côte pour créer un design horizontal

La structure responsive de Divi est orientée verticalement. Cela signifie que les modules et les colonnes apparaissent les uns en dessous des autres. Ceci, cependant, nécessite un défilement plus vertical. Selon le design sur lequel vous travaillez, créer un flux plus horizontal peut vraiment faire la différence.

5. Modifier les vues du bureau et de la tablette en cours de route ou par la suite

Même si vous concevez dans un but premier mobile, il est important de garder les autres vues en ordre également. Les options réactives incluses dans chaque élément de conception vous aideront à y parvenir. Vous pouvez choisir de modifier ces valeurs par la suite ou tout au long du processus de conception.

Commençons à recréer l'exemple !

Ajouter une nouvelle section

Ouvrez une nouvelle page, passez à la vue mobile et ajoutez une nouvelle section pour commencer.

Ajouter la ligne n° 1

Structure des colonnes

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

Ajouter un module de texte à la ligne

Ajouter du contenu H2

Ajoutez un module de texte à la colonne de votre ligne et entrez le contenu du titre H2.

Paramètres de texte H2

Ensuite, allez dans les paramètres du texte du titre et modifiez l'apparence du titre.

• Police de titre 2 : Didact Gothic
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #333333
• Titre 2 Taille du texte : 5.5vw (téléphone), 5vw (tablette), 2vw (ordinateur de bureau)

Ajouter un module de séparation à la ligne

Visibilité

Juste en dessous du module de texte que vous avez ajouté, allez-y et ajoutez un module de séparation. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Couleur

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

• Couleur : #333333

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Largeur : 48 %
• Alignement du module : Centre

Ajouter la ligne n° 2

Structure des colonnes

Continuez en ajoutant une autre 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 à la ligne.

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

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

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

• Couleur d'arrière-plan de la colonne 2 : #ffd65b

Alignement

Ensuite, modifiez l'alignement des lignes.

• Alignement des lignes : à gauche

Dimensionnement

Ouvrez ensuite les paramètres de dimensionnement. Ici, nous voulons supprimer tout l'espace par défaut entre les colonnes. Nous utilisons également une largeur personnalisée pour la colonne afin qu'elle apparaisse bien sur le bureau.

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

Espacement

Continuez en accédant aux paramètres d'espacement et ajoutez manuellement des valeurs de marge et de remplissage personnalisées.

• Marge supérieure : 5vw
• Marge inférieure : 5vw
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Rembourrage supérieur de la colonne 1 : 10vw (téléphone), 8vw (tablette), 4vw (ordinateur de bureau)
• Rembourrage inférieur de la colonne 1 : 10vw (téléphone), 8vw (tablette), 4vw (ordinateur de bureau)

Frontière

Ajoutez également des coins arrondis à la rangée.

• En haut à droite : 10px
• En bas à droite : 10px

Boîte ombre

Et donnez-lui aussi une ombre de boîte subtile.

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

CSS personnalisé

Enfin, nous allons placer les colonnes les unes à côté des autres sur des écrans de plus petite taille pour nous assurer de tirer pleinement parti de l'espace horizontal dont nous disposons. Accédez à l'onglet avancé et ajoutez une seule ligne de code CSS à l'élément principal.

display: flex;

Ajouter un module de texte à la colonne 1

Ajouter du contenu H3

Il est temps de commencer à ajouter des modules ! Ajoutez un titre Text Module à la première colonne et entrez du contenu H3.

Paramètres de texte H3

Ensuite, accédez à l'onglet Conception et modifiez les paramètres du texte de l'en-tête.

• Police de la rubrique 3 : Didact Gothic
• Titre 3 Poids de la police : gras
• Titre 3 Alignement du texte : Centre
• Titre 3 Couleur du texte : #ee6f49
• Titre 3 Taille du texte : 4vw (téléphone), 3vw (tablette), 1.5vw (ordinateur de bureau)

Ajouter un module diviseur à la colonne 1

Visibilité

Ajoutez ensuite un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Couleur

Ensuite, changez la couleur du diviseur.

• Couleur : #ffffff

Dimensionnement

Avec les paramètres de dimensionnement.

• Poids du diviseur : 4px
• Largeur : 30%
• Alignement du module : Centre

Espacement

Ajoutez également une marge supérieure personnalisée au module.

• Marge supérieure : 4vw (téléphone), 2vw (tablette), 1.5vw (téléphone)

Ajouter un module de bouton à la colonne 1

Ajouter une copie

Le module suivant et dernier nécessaire dans la première colonne est un module de bouton. Entrez une copie.

Alignement

Accédez ensuite à l'onglet Conception et modifiez l'alignement des boutons.

• Alignement des boutons : Centre

Paramètres des boutons

Modifiez également l'apparence du bouton dans les paramètres du bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 3vw (téléphone), 2vw (tablette), 1.5vw (bureau)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #ee6f49
• Largeur de la bordure du bouton : 0px
• Police des boutons : Didact Gothic
• Poids de la police : gras

Ajouter un module d'image à la colonne 2

Icône de téléchargement

Le seul module dont nous aurons besoin dans la colonne 2 est un module Image. Vous pouvez utiliser n'importe quelle image de votre choix, mais si vous souhaitez utiliser exactement les mêmes icônes que celles utilisées dans cet exemple, vous pouvez accéder au pack de mise en page du magasin de meubles et les télécharger à la fin du message.

Alignement

Ensuite, allez dans l'onglet conception et modifiez l'alignement de l'image.

• Alignement de l'image : Centre

Cloner la ligne n° 2

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

Changer la couleur d'arrière-plan de la ligne

Nous devrons apporter quelques modifications à ce doublon, en commençant par la couleur d'arrière-plan de la ligne.

• Couleur de fond : #8ee5cf

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

Continuez en supprimant la couleur de fond de la colonne 2.

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

Nous ajoutons plutôt une couleur d'arrière-plan à la première colonne.

• Couleur d'arrière-plan de la colonne 1 : 47e5bd

Modifier les modules dans les colonnes

Nous changeons également de colonne pour les modules.

Changer l'icône dans le module Image

Ensuite, changez l'icône dans le module Image.

Ajouter un filtre au module Image

Et faites-le correspondre aux nouvelles couleurs d'arrière-plan des lignes et des colonnes en modifiant la teinte dans les paramètres des filtres.

• Teinte: 65deg

Modifier l'alignement des lignes

Modifiez ensuite l'alignement des lignes.

• Alignement des lignes : à droite

Modifier la bordure de la ligne

Avec les coins arrondis.

• En haut à gauche : 10 pixels
• En bas à gauche : 10px

Changer la couleur du texte du module de texte dans la colonne 2

Nous utilisons également une autre couleur de texte pour le module de texte dans la colonne 2.

• Titre 3 Couleur du texte : #7b9710

Changer la couleur d'arrière-plan du bouton

Et nous utilisons la même couleur pour l'arrière-plan du bouton.

• Couleur d'arrière-plan du bouton : #7b9710

Cloner les deux lignes

Maintenant que nous avons les deux côtés de la ligne, nous pouvons les cloner tous les deux autant de fois que nécessaire et les placer dans l'ordre.

Modifier le doublon #1

Changer la couleur d'arrière-plan de la ligne

Nous allons commencer par changer la couleur d'arrière-plan de la ligne du premier doublon.

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

Changer la couleur de la colonne

Ensuite, nous modifierons également la couleur de fond de la colonne 2.

• Couleur d'arrière-plan de la colonne 2 : #ffadb6

Changer l'icône dans le module Image

Remplacez l'icône du module Image par une autre de votre choix.

Ajouter un filtre au module Image

Et modifiez la teinte dans les paramètres des filtres pour qu'elle corresponde aux nouvelles couleurs d'arrière-plan des lignes et des colonnes.

• Teinte: 309deg

Changer la couleur du texte

Nous changeons également la couleur du texte.

• Titre 3 Couleur du texte : #f862b0

Changer la couleur d'arrière-plan du bouton

Et nous utilisons la même couleur pour l'arrière-plan du bouton.

• Couleur d'arrière-plan du bouton : #f862b0

Modifier le doublon #2

Changer la couleur d'arrière-plan de la ligne

Au prochain et dernier doublon ! Modifiez la couleur d'arrière-plan de la ligne.

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

Changer la couleur de la colonne

Faites la même chose pour la couleur de fond de la colonne 1.

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

Changer l'icône dans le module Image

Ensuite, changez l'icône qui est utilisée.

Ajouter un filtre au module Image

Avec la teinte dans les paramètres des filtres du module Image.

• Teinte: 221deg

Changer la couleur du texte

Modifiez ensuite la couleur du texte du module Image.

• Titre 3 Couleur du texte : #6287f9

Changer la couleur d'arrière-plan du bouton

Et utilisez la même couleur pour l'arrière-plan du bouton.

• Couleur d'arrière-plan du bouton : #6287f9

Aperçu

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

Mobile

Bureau

Dernières pensées

Si votre principale source de visiteurs provient d'appareils mobiles, il est important de tout optimiser pour cette taille d'écran particulière. Avec Divi, tout devient instantanément responsive. Mais ce n'est pas parce que quelque chose est réactif qu'il est également optimisé pour cette taille d'écran particulière. Une autre façon d'aborder la conception pour les mobiles est de commencer votre conception du point de vue du mobile d'abord. Dans cet article, nous avons partagé quelques trucs et astuces sur la façon de le faire. Ensuite, nous avons recréé un exemple qui respecte ces règles et nous permet de créer un résultat époustouflant. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!