Comment encadrer un produit dans votre image de fond avec les options de colonne de Divi

Avec les modules WooCommerce de Divi, il existe des tonnes de conceptions que vous pouvez réaliser en utilisant Divi. Dans le didacticiel Divi d'aujourd'hui, nous essaierons de vous inspirer avec une autre idée de conception que vous pouvez accomplir en utilisant uniquement les options intégrées de Divi. Plus précisément, nous allons vous montrer comment encadrer un produit dans votre image de fond. Le résultat dépend entièrement de votre image de fond, mais si vous suivez ce tutoriel, vous saurez quelles étapes suivre pour personnaliser la technique pour votre propre site Web ! Vous pourrez également télécharger gratuitement le fichier JSON du didacticiel !

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.

Bureau

Mobile

Téléchargez la mise en page du produit The Frame GRATUITEMENT

Pour mettre la main sur la mise en page du produit à cadre libre, vous devrez d'abord la 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 !

1. Configurer la section avec une image d'arrière-plan réactive

Ajouter une nouvelle section

Image d'arrière-plan réactive

La première étape pour encadrer un produit dans votre image d'arrière-plan consiste à ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et téléchargez des images d'arrière-plan réactives. Vous pouvez trouver les deux images que nous avons utilisées dans le dossier que vous avez pu télécharger au début de cet article.

• Image de fond : Paysage
• Taille de l'image d'arrière-plan : Ajuster
• Position de l'image d'arrière-plan : en haut au centre

• Image de fond : Carré

Espacement

Passez à l'onglet Conception et ajoutez des rembourrages haut et bas personnalisés sur différentes tailles d'écran.

• Rembourrage supérieur : 3vw (ordinateur de bureau), 0vw (tablette et téléphone)
• Rembourrage inférieur : 3vw (ordinateur de bureau), 7vw (tablette), 18vw (téléphone)

Frontière

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

• Largeur de la bordure : 2vw
• Couleur de la bordure : #ffffff

2. Ajouter différents éléments de cadre à la colonne

Ajouter une nouvelle ligne

Structure des colonnes

Maintenant, comme vous pouvez le remarquer dans l'image d'arrière-plan, le produit est situé sur le côté droit de l'image d'arrière-plan. Nous choisirons une structure de colonne correspondante pour une nouvelle ligne dans notre section. Dans ce cas, il s'agit de la structure de colonne suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence :

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

Espacement

Complétez les paramètres de ligne en ajoutant des rembourrages personnalisés à gauche et à droite.

• Rembourrage gauche : 5vw
• Rembourrage droit : 5vw

Ajouter un module de texte à la colonne 2

Laisser la zone de contenu vide

Il est temps de commencer à ajouter des modules ! Pour permettre au produit d'apparaître, nous utiliserons un module de texte vide.

Espacement

Nous augmenterons ensuite la hauteur du module dans les paramètres d'espacement.

• Rembourrage supérieur : 22vw (ordinateur de bureau), 39vw (tablette), 35vw (téléphone)
• Rembourrage inférieur : 15vw (ordinateur de bureau), 39vw (tablette), 35vw (téléphone)

Frontière

Et nous ajouterons également une bordure.

• Largeur de bordure: 3vw
• Largeur de la bordure inférieure : 1vw
• Couleur de la bordure : rgba(255,255,255,0.7)

Ajouter le module de titre Woo à la colonne 2

Contenu dynamique

Passons au module suivant, qui est un module de titre Woo. Sélectionnez un produit de votre choix.

• Produit : Rechercher dans la liste

Couleur de l'arrière plan

Utilisez la couleur d'arrière-plan suivante :

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

Paramètres du texte du titre

Passez à l'onglet conception du module et modifiez les paramètres du texte H3 en conséquence :

• Titre Titre Niveau : H3
• Police du titre : Work Sans
• Taille du texte du titre : 2.5vw (ordinateur de bureau), 5vw (tablette), 6vw (téléphone)

Espacement

Ajoutez également des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 1vw
• Rembourrage inférieur : 1vw
• Rembourrage gauche : 3vw
• Rembourrage droit : 3vw

Ajouter le module de description Woo à la colonne 2

Contenu dynamique

Le prochain module dont nous avons besoin est un module de description Woo. Sélectionnez un produit de votre choix.

• Produit : Rechercher dans la liste
• Type de description : Description courte

Couleur de l'arrière plan

Modifiez la couleur d'arrière-plan du module en conséquence :

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

Paramètres de texte

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

• Police de texte : Open Sans
• Taille du texte : 0.9vw (ordinateur de bureau), 2.2vw (tablette), 2.8vw (téléphone)
• Hauteur de la ligne de titre : 2,2 em

Espacement

Complétez les paramètres du module en ajoutant des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 1vw
• Rembourrage inférieur : 1vw
• Rembourrage gauche : 3vw
• Rembourrage droit : 3vw

Ajouter le module de texte Woo Price à la colonne 2

Contenu dynamique

Ensuite, nous avons le module de texte Woo Price. Sélectionnez un produit de votre choix.

• Produit : Rechercher dans la liste

Couleur de l'arrière plan

Modifiez la couleur de fond.

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

Paramètres de texte de prix

Passez à l'onglet de conception du module et modifiez les paramètres de texte de prix en conséquence :

• Police de prix : Work Sans
• Couleur du texte du prix : #000000
• Taille du texte du prix : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)

Espacement

Complétez les paramètres du module en ajoutant des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 2vw
• Rembourrage inférieur : 2vw
• Rembourrage gauche : 3vw
• Rembourrage droit : 3vw

Ajoutez le module Woo Ajouter au panier à la colonne 2

Contenu dynamique

Passons au module suivant et dernier, qui est le module Woo Add To Cart ! Sélectionnez un produit de votre choix.

• Produit : Rechercher dans la liste

Couleur de l'arrière plan

Changez la couleur de fond.

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

Paramètres des champs

Modifiez également les paramètres des champs du module.

• Couleur d'arrière-plan des champs : #ffffff
• Couleur du texte des champs : #000000
• Police des champs : Open Sans

• Largeur de la bordure inférieure des champs : 1px
• Couleur de la bordure inférieure des champs : #000000

Paramètres des boutons

Continuez en stylisant le bouton comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1.1vw (ordinateur de bureau), 2.5vw (tablette), 3.5vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #000000
• Largeur de la bordure du bouton : 0px

• Rayon de bordure de bouton: 10vw
• Police des boutons : Open Sans

• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 4vw (téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette), 4vw (téléphone)
• Rembourrage gauche : 4vw (ordinateur de bureau), 6vw (tablette), 10vw (téléphone)
• Rembourrage droit : 4vw (ordinateur de bureau), 6vw (tablette), 10vw (téléphone)

Espacement

Et complétez les paramètres du module en ajoutant des valeurs de marge et de remplissage personnalisées.

• Marge inférieure : 2vw
• Rembourrage supérieur : 3vw
• Rembourrage inférieur : 3vw
• Rembourrage gauche : 3vw
• Rembourrage droit : 3vw

3. Style, redimensionner et repositionner la colonne

Modifier les paramètres de la colonne 2

Fond dégradé

Maintenant, la dernière partie de ce tutoriel nous permet d'unir les différents modules. Ouvrez les paramètres de la colonne 2 et utilisez le fond dégradé suivant pour cela :

• Couleur 1: rgba(43,135,218,0)
• Couleur 2 : #ffffff
• Type de dégradé : Linéaire
• Position de départ : 39 %

Frontière

Ajoutez également des coins arrondis.

• Tous les coins : 1vw

Boîte ombre

Nous créons de la profondeur en ajoutant également une ombre de boîte subtile.

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

Transformer Traduire

Et nous allons compléter les paramètres de colonne en modifiant les valeurs de conversion de transformation sur différentes tailles d'écran. Cette étape nous permet de repositionner la colonne comme nous le souhaitons. Lorsque vous utilisez votre propre image d'arrière-plan, vous apprécierez certainement cette option !

• À droite : 0px (ordinateur de bureau), 9vw (tablette et téléphone)
• En bas : -5vw (ordinateur de bureau), 0vw (tablette et téléphone)

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.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment encadrer un produit dans votre image d'arrière-plan à l'aide des options intégrées de Divi et des modules WooCommerce inclus dans Divi Builder. L'approche que vous adoptez dépend de l'image d'arrière-plan que vous utilisez, mais ce didacticiel vous aidera à comprendre l'approche globale. Vous avez également pu télécharger gratuitement le fichier JSON de la mise en page ! Si vous avez des questions ou des suggestions, 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.