Découvrez les bons plans & les réductions Alpa14

Créer une page boutique WooCommerce avec Divi sur un site WordPress

Alpa14 les tutoriels faciles !

Catégories

Créez une page boutique Pro avec Divi sur votre site WordPress !

Dans ce nouveau tuto WordPress Divi, je vous explique comment rémplacer la page boutique par défaut générée par le système WooCommerce à l’installation par une jolie page engageante réalisée grâce au Divi Builder. Dans ce tutoriel, nous repartirons d’un site sur le thème des bijoux que j’avais utilisé à l’occasion d’un tuto où je vous expliquais comment installer et paramétrer WooCommerce sur un site WordPress. Si vous n’avez pas vu cette vidéo, je vous invite à la voir, vous pourrez le faire ici sur cette page du Blog.
Bon visionnage à toutes et à tous ! ?

Licence Divi
Code Promo Divi Supreme
Amelia booking plugin
.

 1) Créer une bannière plein écran

Pour commencer, nous allons créer une nouvelle section et nous choisirons « Plein écran » puis nous choisirons le module « En-tête plein écran ».
Dans la fenêtre contenu, ajoutez votre titre, un sous-titre et un bouton si vous le souhaitez.
Dans « Fond » choisissez le 3ème onglet et appelez une image de votre galerie. Cette image assez grande devra faire au moins 1920 pixels de large et devra être bien optimisée pour que la vitesse de chargement de la page ne soit pas pénalisée par son poids. Toujours dans cette partie image de fond au bas, recherchez l’option « Fondu de l’image de fond » et choisissez « Multiplié » cela va permettre d’ajouter un filtre sur votre image afin que votre titre ressorte mieux.

Ensuite toujours dans « Fond » rendez sur l’onglet « Couleur » ou « Dégradé » selon votre goût afin de personnaliser votre filtre. Choisissez une couleur, puis cliquez sur la pipette et choisissez la tirette de droite « Alpha » pour ajouter de la transparence à votre couleur ou votre dégradé.
Vous pouvez ensuite dans la partie « Image » ajouter à votre bannière une image de logo ou une image d’en-tête. Pour un logo, préférez une image PNG à fond transparent pour ne pas avoir de contour. Si vous ne savez pas comment procéder pour réaliser une telle image, je vous invite à regarder cette autre vidéo où je vous explique comment procéder.

Ensuite rendez-vous dans l’onglet « Style » de votre module « En-tête » plein écran pour personnaliser votre contenu (police du titre, taille etc.)

Pour finir, dans notre exemple, nous avons ajouter un séparateur sur le bas de cette section bannière. Pour cela, allez sur les paramètres de la section et dans « Style » choisissez l’option « Séparateur ».

Bannière boutique WooCommerce
Thinkific one month free
MalerLite

 2) Ajout des modules Divi WooCommerce « Barre latérale » et « Boutique »

Dans la section qui était présente à la création de la page ajoutez  une rangée 1/4 – 3/4 ou 3/4 -1/4 (selon vos goûts), puis déplacer par « Glisser/Déposer » cette section sous la section bannière. Dans la colonne 1/4 de la rangée, appelez le module « Barre latérale » et dans la colonne 3/4, appelez le module « Boutique ». Pour changer le contenu du module « Barre latérale » il faut vous rendre dans le menu WordPress dans « Apparence > Widgets » (enregistrer d’abord le brouillon de votre page), c’est ici que vous allez pouvoir supprimer et ajouter des éléments de votre barre (Widgets).
Revenez sur votre page boutique, vous pouvez maintenant aller dans les paramètres de votre module « Barre latérale » pour notamment lui apporter une mise en forme via l’onglet « Style ».
Vous pouvez ensuite aller dans les paramètres du module boutique. Dans l’onglet « Contenu » vous pouvez décider notamment de l’ordre d’affichage des produits, du nombre de produits par page et aussi du nombre de colonnes présentant vos produits. Dans notre exemple, nous sommes sur 3 colonnes mais vous pouvez sur 4 ou plus.

Ensuite vous pouvez dans l’onglet « Style » apporter une mise en forme de votre boutique selon vos goûts (titre, prix, image etc.)

 

 

 

Insertion des modules Divi WooCommerce
Canva design lilke a pro

3) Utiliser la fonction « Transformer » de Divi

Pour peaufiner le design de cette page boutique, nous pouvons utiliser une fonction très pratique de Divi qui permet de positionner, d’agrandir, de déformer etc. n’importe quel élément de Divi. Nous allons appliquer cette fonction à la rangée afin de la remonter et la faire mordre sur la section de la bannière.

Pour cela, rendez-vous dans les paramètres de la rangée qui a accueilli la barre latérale et la boutique. Choisissez l’onglet « Style » puis l’option « Déformation ». Choisissez ensuite le deuxième onglet (la croix) qui est l’option déplacement, puis faites glisser le carré vers le haut (comme on le voit sur l’image). Vous constatez alors que votre rangée remonte.

Une fois que vous êtes satisfait de la position de votre rangée, toujours dans Style, vous pouvez ajouter un peu d’ombre portée avec l’option « Boîte ombre » afin d’accentuer cet effet de flottaison sur la section bannière.

Vous allez suite à cette opération remarquer des petits problèmes esthétiques qu’il va être facile de régler.

1) Le fond de la section est transparent et la bannière va se voir entre les images de la boutique. Pour arranger cela, ajouter une couleur au fond de votre boutique (onglet Contenu puis « Fond », ici nous choisirons le blanc).

2) Il se peut que que le séparateur appliqué à la section bannière se voit sur la rangée. Pour corriger cela, toujours dans les paramètres de la rangée, allez sur l’onglet « Avancé » et choisissez l’option « Poste » et bougez la tirette « Z index » vers la droite jusqu’à ce que le séparateur disparaisse.  (C’est une fonction qui définit l’ordre des « couches »)

3) Vous remarquez également que les éléments de la barre latérale et de la boutique sont trop proches des bords. Il faudra ici ajouter de la marge Interne (~20 pixels). la marge interne se trouve dans l’onglet Style à l’option « Espacement ». Vous pouvez ajouter cette marge interne soit à chacune des colonnes de la rangée ou à chaque module (Barre latérale et Boutique). 

Une fois votre mise en forme terminée, il faut déclarer dans le système que cette nouvelle page est la page boutique de votre site.
Enregistrez tout d’abord le brouillon ou publiez votre page (en bas à droite de l’écran) puis dans le menu de gauche de WordPress, allez dans la partie WooCommerce > Réglages et dans « Page boutique » choisissez le nom de la page boutique que vous venez de créer avec le Divi Builder. Vous pourrez ensuite supprimer la page boutique par défaut de WooCommerce intitulée « Boutique ».

Fonction Divi Transformer
Déclarer la page boutique WooCommerce
Presto Player lecteur vidéo WordPress
Licence Divi
 LearnDash créer une formation sur un site WordPress
MailerLite free-trial

Vous serez peut-être intéressé par les articles suivants :