Comment créer un design de bloc réactif pour les pages de produits Woo avec Divi

Publié: 2019-11-02

Maintenant que vous pouvez utiliser les modules woo dans Divi, la seule limite est votre imagination. Chaque module de woo dynamique est personnalisable comme tous les autres modules à l'intérieur du constructeur. Dans cet article, nous allons vous montrer comment recréer un design de bloc créatif pour vos pages de produits. Les modules dynamiques sont regroupés dans un ensemble créatif qui se démarque du fond sombre. Vous pouvez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de commencer, examinons la conception sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez gratuitement le Responsive Block Design

Pour mettre la main sur le design de bloc réactif 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

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.

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 !

Abonnez-vous à notre chaîne Youtube

1. Ajouter/Ouvrir un produit WooCommerce

détails du produit

Ouvrez un produit existant ou créez-en un nouveau. Pour recréer cette conception de style de bloc, vous devrez remplir les informations suivantes :

  • Titre
  • La description
  • Prix
  • Catégorie
  • Les attributs
  • L'image sélectionnée

L'onglet Attributs est l'endroit où sont extraites les informations du module d'informations supplémentaires woo. Pour ajouter ces informations, cliquez sur l'onglet Attributs et créez trois attributs personnalisés comme suit :

  • Les attributs:
    • Capacité : 250 ml / 2 tasses à thé
    • Matériel: Cuivre Pur
    • Condition: Usure normale

L'image présentée doit avoir la même couleur de fond que la couleur du design.

Activer Divi Builder et modifier les paramètres de la page

Lorsque tous les détails du produit sont remplis, allez-y et activez le Divi Builder. Modifiez la mise en page en 'Fullwidth'.

Basculer vers le constructeur visuel

Continuez en basculant vers Visual Builder.

Supprimer la section de produit par défaut

Puisque nous créons une page de produit personnalisée, allez-y et supprimez la section de produit woo par défaut.

2. Recréez la conception du bloc réactif

Ajouter une nouvelle section

Fond

La première étape pour recréer le design consiste à ajouter une nouvelle section. Ajoutez un arrière-plan dégradé sur différentes tailles d'écran.

  • Arrière-plan : Dégradé
  • Couleur 1 : Gris clair #f2f6f5
  • Couleur 2: Presque Noir #313131
  • Direction:
    • Ordinateur de bureau : 90 %
    • Tablette + Téléphone : 180%
  • Début + Fin :
    • Ordinateur de bureau : 50 %
    • Tablette : 40 %
    • Téléphone : 30 %

Dimensionnement

Ajustez les paramètres de dimensionnement de la section.

  • Largeur : 100 %
  • Largeur maximale : 100 %

Espacement

Supprimez également le rembourrage supérieur et inférieur par défaut.

  • Rembourrage supérieur + inférieur : 0vw

Visibilité

Enfin, ajustez les débordements de la section.

  • Débordement vertical + horizontal : masqué

Ajouter la ligne n° 1

Structure des colonnes

Après avoir configuré la section, ajoutez la première ligne avec une colonne.

Dimensionnement

Dans l'onglet Conception, ajustez la taille pour différentes tailles d'écran.

  • Largeur:
    • Ordinateur de bureau : 50 %
    • Tablette + Téléphone : 100 %
  • Largeur maximale : 100 %
  • Alignement des lignes : à gauche

Visibilité

Enfin, définissez le débordement horizontal et vertical sur visible.

  • Débordement horizontal + visible : visible

Ajouter du fil d'Ariane Woo

Teneur

Ajoutez le premier module, le module fil d'Ariane woo. Sélectionnez « Ce produit ».

  • Produit : Ce produit

Texte

Dans l'onglet Conception, stylisez le texte comme suit.

  • Police du texte : Fenix
  • Couleur du texte : Marron #594239
  • Taille du texte:
    • Ordinateur de bureau : 1vw
    • Tablette : 2vw
    • Téléphone : 3vw

Espacement

Ajoutez des valeurs d'espacement pour différentes tailles d'écran.

  • Marge supérieure : 3vw
  • Marge de gauche:
    • Ordinateur de bureau : 10vw
    • Tablette + Téléphone : 20vw

Ajouter une image Woo

Ajouter du contenu

Il est maintenant temps d'ajouter l'image du produit avec un module Woo Image. Dans l'onglet contenu, choisissez « Ce produit ».

  • Produit : Ce produit

Dimensionnement

Continuez en ajustant le dimensionnement du module.

  • Largeur : 100 %

Visibilité

Enfin, masquez le débordement.

  • Débordement horizontal + vertical : masqué

Ajouter la ligne n° 2

Structure des colonnes

Ajoutez une deuxième ligne avec deux colonnes.

Dimensionnement

Tout d'abord, ajustez la taille.

  • Largeur de gouttière : 1
  • Largeur:
    • Ordinateur de bureau : 53 %
    • Tablette + Téléphone : 53%
  • Largeur maximale : 100 %
  • Alignement : à droite

Espacement

Ensuite, les valeurs d'espacement.

  • Marge supérieure:
    • Ordinateur de bureau : -47vw
    • Tablette + Téléphone : 0vw
  • Marge de gauche:
    • Tablette : -5vw
    • Téléphone : -8vw
  • Rembourrage inférieur :
    • Ordinateur de bureau + tablette : 4.1vw
  • Rembourrage gauche :
    • Ordinateur de bureau : 0vw
    • Tablette : 16vw
    • Téléphone : 12vw
  • Rembourrage droit :
    • Ordinateur de bureau : 0vw
    • Tablette : 0vw

CSS personnalisé

Dans l'onglet Avancé, ajoutez du CSS personnalisé.

  • Élément principal CSS :
    • affichage : flexible ; 
display: flex;

Visibilité

Enfin, définissez les débordements sur visibles.

  • Débordements horizontaux + verticaux : visibles

Paramètres de la colonne 1

Espacement

Avant d'ajouter des modules, ajustez les valeurs d'espacement dans la colonne 1.

  • Rembourrage gauche : 4vw
  • Rembourrage droit : 0vw

Paramètres de la colonne 2

Espacement

Ajustez également les valeurs d'espacement de la colonne 2.

  • Rembourrage supérieur :
    • Ordinateur de bureau : 7vw
    • Tablette : 17vw
    • Téléphone : 28vw
  • Rembourrage droit :
    • Ordinateur de bureau + tablette : 15vw

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Il est maintenant temps d'ajouter les modules. Commencez avec un module de texte. Insérez un contenu descriptif pour le produit.

Texte

Ensuite, stylisez le texte.

  • Police : Fenix
  • Couleur : #f2eed0
  • Taille:
    • Ordinateur de bureau : 1.3vw
    • Tablette : 2.6vw
    • Téléphone : 3.8vw
  • Espacement des lettres : 1px
  • Alignement : Centre

Dimensionnement

Ajustez la taille du module pour différentes tailles d'écran.

  • Largeur:
    • Ordinateur de bureau : 50 %
    • Tablette : 60 %
    • Téléphone : 80 %

Espacement

Ajustez également les valeurs d'espacement comme suit.

  • Rembourrage supérieur + inférieur : 1vw
  • Rembourrage Gauche + Droite : 1vw

Frontière

Ajoutez une bordure au module en conséquence.

  • Styles de bordure : Haut + Gauche + Droite
  • Largeur de la bordure:
    • Haut + Gauche + Droite : 2px
  • Couleur de la bordure:
    • Haut + Gauche + Droite : Crème #f2eed0

Ajouter le titre Woo à la colonne 1

Ajouter du contenu

Maintenant, ajoutez un module de titre woo et choisissez "Ce produit" dans l'onglet contenu.

  • Produit : Ce produit

Fond

Pour styliser le module, ajoutez un fond orange foncé.

  • Couleur de l'arrière plan
  • Couleur: Cuivre Orange #d66b00

Texte du titre

Ensuite, modifiez les paramètres du texte de l'en-tête.

  • Titre Titre Niveau : H1
  • Police : Fenix
  • Couleur: Crème #f2eed0
  • Taille:
    • Ordinateur de bureau : 2.9vw
    • Tablette : 7.8vw
    • Téléphone : 13.9vw
  • Espacement des lettres H1 : 1px

Dimensionnement

De plus, ajustez la taille du module

  • Largeur : 100 %

Espacement

Ensuite, ajoutez quelques valeurs de remplissage.

  • Rembourrage haut + bas :
    • Ordinateur de bureau : 2vw
    • Tablette : 3vw
    • Téléphone : 4vw
  • Remplissage Gauche + Droite :
    • Ordinateur de bureau : 2vw
    • Tablette : 3vw
    • Téléphone : 4vw

Frontière

Enfin, ajoutez une bordure comme suit.

  • Styles de bordure : Haut + Gauche + Droite
  • Largeur de la bordure:
    • Haut + Gauche + Droite : 2px
  • Couleur de la bordure:
    • Haut + Gauche + Droite : Crème #f2eed0

Ajouter le titre de la description Woo à la colonne 1

Ajouter du contenu

Sous le titre, ajoutez un module de description woo. Dans l'onglet contenu, choisissez « Ce produit ».

  • Produit : Ce produit
  • Type de description : Description

Texte

Ensuite, stylisez le texte.

  • Police : Open Sans
  • Couleur: Crème #f2eed0
  • Taille:
    • Ordinateur de bureau : 08vw
    • Tablette : 2vw
    • Téléphone : 3vw

Dimensionnement

Ajustez également la taille.

  • Largeur : 100 %

Espacement

De même, ajustez l'espacement.

  • Rembourrage haut + bas :
    • Ordinateur de bureau : 2vw
    • Tablette + Téléphone : 3vw
  • Remplissage Gauche + Droite :
    • Ordinateur de bureau : 2vw
    • Tablette + Téléphone : 3vw

Frontière

Semblable à d'autres modules, ajoutez une bordure.

  • Styles de bordure : les quatre bordures
  • Largeur : 2px
  • Couleur: Crème #f2eed0

Ajouter des informations supplémentaires sur Woo à la colonne 2

Ajouter du contenu

Il est maintenant temps d'ajouter les attributs personnalisés avec le module d'informations supplémentaires woo. Dans l'onglet contenu, choisissez « Ce produit ».

  • Produit : Ce produit

Texte

Modifiez les paramètres de texte comme suit.

  • Police : Open Sans
  • Style : Italique
  • Couleur: Crème #f2eed0
  • Taille:
    • Ordinateur de bureau : 0.6vw
    • Tablette : 1.6vw
    • Téléphone : 2.2vw

Texte d'attribut

Ensuite, stylisez le texte de l'attribut en conséquence :

  • Police : Fenix
  • Couleur: Crème #f2eed0
  • Taille:
    • Ordinateur de bureau : 1.1vw
    • Tablette : 2vw
    • Téléphone : 3vw
  • Espacement : 1px

Dimensionnement

Ajustez également la taille.

  • Largeur : 100 %

Frontière

Et enfin, ajoutez une bordure.

  • Styles de bordure : Haut + Droite + Bas
  • Largeur de la bordure:
    • Haut + Droite + Bas : 2px
  • Couleur de la bordure:
    • Haut + Droite + Bas : Crème #f2eed0

Ajouter la ligne n° 3

Structure des colonnes

Ajoutez la troisième ligne, avec deux colonnes.

Dimensionnement

Avant d'ajouter des modules, ajustez la taille de la ligne pour différentes tailles d'écran.

  • Largeur:
    • Ordinateur de bureau : 50 %
    • Tablette : 87 %
    • Téléphone : 93 %
  • Alignement : à droite

Rembourrage

Ajustez également le rembourrage.

  • Rembourrage inférieur : 12vw

Paramètres de la colonne 1

Espacement

Continuez en ajustant le rembourrage dans la première colonne.

  • Rembourrage gauche :
    • Ordinateur de bureau : 5vw
    • Tablette + Téléphone:12vw

Ajouter le prix Woo à la colonne 1

Ajouter du contenu

Maintenant, ajoutez le prix du produit à l'aide du module de prix woo. Dans l'onglet contenu, choisissez « Ce produit ».

  • Produit : Ce produit

Texte du prix

Ensuite, stylisez le texte en conséquence.

  • Police : Fenix
  • Couleur: Crème #f2eed0
  • Taille:
    • Ordinateur de bureau : 1.5vw
    • Tablette : 3,5 vw
    • Téléphone : 5vw

Dimensionnement

Ajustez également la taille du module.

  • Largeur:
    • Ordinateur de bureau : 39 %
    • Tablette : 45%
    • Téléphone : 54 %

Espacement

Ajustez également l'espacement.

  • Rembourrage supérieur :
    • Ordinateur de bureau : 1vw
    • Tablette : 2vw
    • Téléphone : 3v2
  • Rembourrage inférieur :
    • Ordinateur de bureau : 1vw
    • Tablette + Téléphone : 2vw
  • Rembourrage gauche :
    • Ordinateur de bureau : 1vw
    • Tablette + Téléphone : 2vw
  • Rembourrage droit :
    • Tablette + Téléphone : 2vw

Frontière

Enfin, ajoutez la bordure.

  • Styles de bordure : les quatre côtés
  • Largeur : 2px
  • Couleur: Crème #f2eed0

Ajouter Woo Ajouter au panier à la colonne 2

Ajouter du contenu

Le dernier module est un module woo ajouter au panier. Dans l'onglet contenu, choisissez « Ce produit ».

Styles de boutons

Stylisez le bouton comme suit.

  • Styles personnalisés : Oui
  • Taille du texte du bouton :
    • Ordinateur de bureau : 1.3vw
    • Tablette : 3,5 vw
    • Téléphone : 5vw
  • Couleur du texte : crème #f2eed0
  • Couleur de fond : orange cuivré #d66b00

Rembourrage des boutons

Ensuite, ajoutez des valeurs de remplissage au bouton.

  • Rembourrage supérieur + inférieur : 0.5vw
  • Rembourrage Gauche + Droite : 1.5vw

Dimensionnement

Enfin, ajustez la taille du module et le tour est joué !

  • Largeur : 100 %

Aperçu

Jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

C'est un Wrap

C'est ça! Si votre contenu est plus long ou plus court que celui de ce didacticiel, cela peut perturber l'espacement des blocs. Tout ce que vous avez à faire est d'ajuster les paramètres de la colonne afin qu'ils s'intègrent mieux dans la composition. Nous espérons que ce tutoriel vous inspirera pour créer des designs Divi plus étonnants. Faites-nous savoir dans les commentaires si vous avez des questions.