Comment changer le point d'arrêt de la colonne mobile du module Divi Shop

Par défaut, dès que vous basculez sur un appareil mobile, le module boutique se transforme en une mise en page à une colonne. Maintenant, si vous cherchez à mettre en évidence chaque produit individuellement, c'est génial, mais avec les plus grandes tailles d'écran de smartphone de nos jours, vous voudrez peut-être permettre à deux produits d'apparaître l'un à côté de l'autre lors de l'utilisation du module de boutique. Dans le didacticiel Divi d'aujourd'hui, nous allons vous montrer comment modifier le point d'arrêt mobile du module de boutique à l'aide de CSS, permettant à deux produits d'apparaître l'un à côté de l'autre sur la plupart des smartphones modernes. C'est un excellent tutoriel à avoir à portée de main si vous créez une boutique en ligne à l'avenir ! Vous pourrez également télécharger gratuitement le fichier JSON du design !

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.

Mobile

Bureau

Téléchargez le modèle de page de magasin GRATUITEMENT

Pour mettre la main sur le modèle de page de boutique gratuit, 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 !

1. Accédez à Divi Theme Builder et ajoutez un nouveau modèle

Accédez à Divi Theme Builder et ajoutez un nouveau modèle

Commencez par accéder au générateur de thèmes de DIvi et ajoutez un nouveau modèle.

Utiliser le modèle sur la page de la boutique

Utilisez ce nouveau modèle sur la page de la boutique de votre site Web.

• Utiliser sur : Boutique

Commencer à créer le corps du modèle

Et commencez à créer le corps du modèle de boutique.

2. Commencez à créer le corps du modèle

Paramètres de section

Fond dégradé

Une fois dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et utilisez l'arrière-plan dégradé suivant pour cela :

• Couleur 1 : #32ff3d
• Couleur 2: #29c4a9
• Type de dégradé : Linéaire
• Direction du gradient : 109 degrés

Image de fond

Téléchargez également une image de fond. Vous pouvez trouver l'image d'arrière-plan que nous utilisons dans ce didacticiel dans le dossier de téléchargement que vous avez pu télécharger au début de cet article.

• Taille de l'image d'arrière-plan : Ajuster

Espacement

Passez à l'onglet de conception de la section et modifiez les valeurs d'espacement en conséquence :

• Marge supérieure : 50px
• Marge de gauche : 50px
• Marge de droite : 50px
• Rembourrage inférieur : 150px

Frontière

Complétez les paramètres de la section en ajoutant un rayon de bordure.

• Tous les coins : 20px

Ajouter une nouvelle ligne

Structure des colonnes

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

Ajouter un module de texte à la colonne

Ajouter du contenu H1

Ajoutez un module de texte à la colonne de la ligne avec du contenu H1 de votre choix.

Paramètres de texte H1

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

• Police de titre : Prata
• Alignement du texte de l'en-tête : Centre
• Couleur du texte du titre : #ffffff
• Taille du texte de l'en-tête : 80 px (ordinateur de bureau), 60 px (tablette), 40 px (téléphone)

Ajouter la section #2

Indice Z

Ajoutez une autre section juste en dessous de la précédente. Ouvrez les paramètres de la section et augmentez l'index z.

• Indice Z : 2

Ajouter une nouvelle ligne

Structure des colonnes

Ensuite, ajoutez 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 ajoutez une couleur d'arrière-plan.

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

Dimensionnement

Passez à l'onglet conception du module et modifiez les paramètres de dimensionnement comme suit :

• Largeur : 100 %
• Largeur maximale : 1380 px

Espacement

Ensuite, ajoutez des valeurs d'espacement personnalisées sur différentes tailles d'écran.

• Marge supérieure : 200px
• Rembourrage supérieur : 50 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)
• Rembourrage inférieur : 50 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)
• Rembourrage gauche : 100 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)
• Rembourrage droit : 100 pixels (ordinateur de bureau), 20 pixels (tablette et téléphone)

Frontière

Nous ajoutons également un rayon de bordure à toute la ligne.

• Tous les coins : 25px

Boîte ombre

Complétez les paramètres de ligne en ajoutant une ombre de boîte subtile.

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

Ajouter un module de boutique à la colonne

Teneur

Maintenant, il est temps d'insérer notre module de boutique. Nous utilisons une mise en page à 4 colonnes.

• Disposition des colonnes : 4 colonnes

Recouvrir

Passez à l'onglet de conception du module et modifiez les couleurs de superposition.

• Couleur de l'icône de superposition : #29c6a6
• Couleur de fond de superposition : rgba(255,255,255,0.75)

Image

Modifiez également les paramètres de l'image.

• Tous les coins : 10px

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

Paramètres du texte du titre

Continuez en modifiant les paramètres du texte du titre en conséquence :

• Police du titre : Prata
• Taille du texte du titre : 30 px (ordinateur de bureau), 25 px (tablette), 20 px (téléphone)

Paramètres de texte de prix

Ensuite, apportez quelques modifications aux paramètres du texte du prix.

• Police de prix : Montserrat
• Poids de la police de prix : moyen
• Taille du texte du prix : 18px (ordinateur de bureau), 16px (tablette), 14px (téléphone)

Espacement

Complétez les paramètres du module en ajoutant un rembourrage supérieur.

• Rembourrage supérieur : 50px

Ajouter un module de code à la colonne

Une fois que vous avez terminé la conception globale du module Shop, il est temps de modifier le point d'arrêt de la colonne mobile du module Shop à l'aide de CSS. Nous ajouterons le code CSS à un module de code à l'intérieur de notre conception. Allez-y et ajoutez un nouveau module de code juste en dessous du module de boutique.

Insérer le code CSS

Nous réduisons le point d'arrêt mobile d'une colonne à une largeur de 300 pixels. Cela signifie que la plupart des smartphones modernes afficheront deux produits côte à côte au lieu d'un. Pour ce faire, nous allons ajouter les lignes de code CSS suivantes au module de code :

<style>
@media (max-width: 479px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 49% !important;
}
}
@media (max-width: 300px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 100% !important;
}
}
</style>

3. Enregistrez toutes les modifications du générateur de thèmes et prévisualisez le résultat

Une fois que vous avez terminé la conception de la page de la boutique et ajouté le code CSS pour modifier le point d'arrêt mobile, vous pouvez enregistrer toutes les modifications apportées à Theme Builder et afficher le résultat sur votre page de boutique !

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.

Mobile

Bureau

Dernières pensées

Dans cet article, nous vous avons montré comment modifier le point d'arrêt de la colonne mobile du module de boutique, ce qui vous permet d'afficher deux produits l'un à côté de l'autre sur la plupart des smartphones modernes de nos jours. C'est un excellent moyen de réduire le défilement mobile requis et de montrer à vos visiteurs plus de produits à la fois. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.