fbpx

Bons plans Alpa14 | Des offres et des réductions intéressantes à découvrir 😃

Créer un modèle de page produit WooCommerce avec le Thème Builder de Divi

Créez un gabarit de page produit WooCommerce avec Divi et son Thème Builder

Dans ce nouveau tuto WordPress Divi, je vous explique comment rémplacer la page produit par défaut générée par le système WooCommerce  par un joli modèle de page produit engageant réalisé avec le Thème Builder de Divi. Dans ce tutoriel, nous repartirons d’un site sur le thème des bijoux que j’avais utilisé à l’occasion de deux tutos où je vous expliquais comment installer et paramétrer WooCommerce, créer des produits simples et variables et aussi comment créer une page boutique design sur un site WordPress. Si vous n’avez pas vu ces deux vidéos, je vous invite à la voir, la première ici et la deuxième ici.
Bon visionnage à toutes et à tous ! 😊

Licence Divi
Code Promo Divi Supreme
.

1) Création du modèle de page produit à partir du Thème Builder

Pour accéder au Thème Builder il faut se rendre dans le menu WordPress de gauche dans Divi > Thème Builder. Cliquer sur « Ajouter un nouveau modèle » et dans la fenêtre « Paramètres des Modèles » qui s’ouvre, choisir (dans la partie « Produits ») « Tous les produits ». Cliquer ensuite sur « Ajouter un corps personnalisé » puis « Construire un corps personnalisé ».
Pour la page choisir l’option de gauche « Construire à partir de zéro ».

2) Créer une bannière avec des éléments dynamiques

Nous repartirons de la même bannière que celle de la page boutique. Pour cela, il faut se rendre sur la page boutique et sauvegarder la section de la bannière dans la librairie afin de pouvoir la récupérer à partir de notre modèle de page produit du Thème Builder.
De retour dans le Thème Builder, ajouter une nouvelle section sous la section déjà en place et choisir l’option « Ajouter depuis la bibliothèque.

Une fois la section bannière en place, cliquer sur les paramètres du module « En-tête plein écran » de la section bannière.
Dans l’onglet « Contenu » nous allons rendre l’image de fond de bannière dynamique, c’est à dire qu’à chaque fois que la page produit d’un article sera consultée, l’image présentée du produit apparaîtra en fond de section. Pour cela, aller sur l’onglet « Contenu » puis dans fond supprimez l’image de fond puis cliquer sur la petite icône dans l’angle supérieur droit (3 petits disques empilés) puis choisissez « Image présentée ».
De la même manière pour que le titre de la bannière s’adapte au produit présenté, toujours dans « Contenu », allez dans « Texte » puis à « Titre » cliquez à droite sur la petite icône à droite (3 petits disques empilés) puis choisir « Poster / Titre de l’archive ».

Thinkific un mois gratuit
Propriété du modèle du Divi Thème Builder
Image de section dynamique
Titre de section dynamique
 LearnDash créer une formation sur un site WordPress

3) Insertion du module « Woo Cart Notice » dans une section séparée

Dans la section au dessus de la section bannière, créer une rangée à une colonne et insérez le module « Woo Cart Notice ». Cette section n’apparaîtra que lorsque le client aura mis un article au panier, lui signalant son action et lui permettant d’aller au panier.
Afin d’avoir un bandeau uni, choisissez la même couleur pour le fond de section que pour le fond du module. Dans notre exemple, nous avons choisi le noir. Vous pouvez changer cela dans l’onglet « Contenu » puis « Fond » des paramètres de la section et des paramètres du module « Woo Cart Notice ».
Ensuite afin que le bandeau soit étroit et « collé » à la section supérieure et inférieure, supprimer la marge interne de la section et de la rangée. Pour cela, allez dans l’onglet « Style » des paramètres de la section et de la rangée et dans « Espacement » entrez 0pix comme valeur en marge interne (sommet, bas, gauche, droite).
Enfin dans les paramètres du module « Woo Cart Notice » toujours dans l’onglet « Style » puis espacement supprimer la marge externe (bas).

Woo Cart Notice

4) Insertion des modules WooCommerce

Sous la section bannière, ajouter une nouvelle section puis insérer une rangée à 2 colonnes (50%-50%).
– Dans la colonne de gauche insérer le module « Woo Image ».
Dans l’onglet « Contenu » puis « Elements » vous avez certaines options à choisir concernant l’affichage. Puis dans l’onglet « Style » personnaliser ce module selon vos goûts.
– Dans la colonne de droite, insérer le module « Woo Titre », dans l’onglet « Style » personnaliser ce module selon vos goûts.
– En dessous ajouter le module « Woo Rating » qui permet aux clients de noter le produit par un nombre d’étoiles. Dans l’onglet « Contenu » puis « Elements » vous avez certaines options à choisir concernant l’affichage. Puis dans l’onglet Style personnaliser ce module selon vos goûts.
– En dessous ajouter le module « Woo Prix » qui affichera le tarif du produit. Puis dans l’onglet Style personnaliser ce module selon vos goûts.
– En dessous ajouter le module « Woo Description » qui décrira le produit. Dans l’onglet « Contenu », choisir l’option « Description brève ». Puis dans l’onglet Style personnaliser ce module selon vos goûts.
– En dessous ajouter le module « Woo Ajouter au panier » qui permettra au client de faire l’achat. Puis dans l’onglet Style personnaliser ce module selon vos goûts. Vous pouvez ici notamment personnaliser le bouton.

Insérer une nouvelle rangée à 2 colonnes (50%-50%).

– Dans la colonne de gauche, placer le module « Woo Tabs ». Dans l’onglet « Contenu »  vous pouvez activer ici les onglets de votre choix. Dans notre cas nous activerons uniquement les onglets « Description » (complète) et l’onglet « Informations supplémentaires » mais pas l’option « Commentaires » ici. Puis dans l’onglet Style personnaliser ce module selon vos goûts.

– Dans la colonne de droite de la rangée, placer le module « Woo Commentaires ». Dans l’onglet « Contenu » puis « Elements » vous avez certaines options à choisir concernant l’affichage. Puis dans l’onglet « Style » personnaliser ce module selon vos goûts.

5) Insertion module « Woo Produits Connexes »

Placer en dessous une nouvelle rangée mais à une colonne cette fois-ci. Vous pouvez placer d’abord un module séparateur pour séparer cette partie de la page produit. En dessous, insérer le modules des produits apparentés intitulé « Woo Produits Connexes ». Ce module suggère au visiteur des produits appartenant à la même catégorie que le produit de la fiche produit. Ce qui est intéressant et peut déclencher d’autres achats. Dans notre cas nous reprendrons la mise en forme de la page boutique pour conserver un style harmonieux entre les pages.

 

MalerLite
Produits apparentés

5) Utiliser la fonction « Transformer » de Divi

Pour peaufiner le design de ce modèle de page produit, nous pouvons utiliser une fonction « Transformer » de Divi qui permet de positionner la rangée plus haut en la faisant mordre légèrement sur la section bannière (C’est ce que nous avions fait pour la page boutique).

Pour cela, rendez-vous dans les paramètres de la rangée sous la section bannière. 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 à la rangée. La marge interne se trouve dans l’onglet Style à l’option « Espacement ».

 

MalerLite
fonction transformer
Fonction Z-index
Canva design lilke a pro

Par où commencer pour créer son site Internet ?

Toute personne disposant d’un ordinateur et d’une connexion Internet peut créer son propre site Web. Il existe de nombreux outils en ligne qui facilitent le processus. Les sites Web peuvent être utilisés pour promouvoir votre entreprise, communiquer avec les clients et partager vos idées.

Dans cette vidéo qui est qui est une retransmission d’un Webinar, Léopoldine la fondatrice de la société Webmyday, explique les différentes étapes à suivre et les bonnes questions à se poser pour créer son premier site web professionnel. Elle passe en revue les services et les outils nécessaires à la conception Web et propose des conseils pour créer un site Web efficace.

Cette vidéo est une excellente ressource pour les débutants qui souhaitent en savoir plus sur les étapes à suivre dans la conception Web ou pour les propriétaires d’entreprise qui ont besoin de créer un site Internet pour leur activité. 

Sommaire de la vidéo

0:00 Introduction
2:41 La formation Webmyday qu’est-ce que c’est ?
6:22 Faire ou faire faire son site Internet ?
16:31 Solutions pour faire son site soi-même
18:24 Solutions pour faire faire son site
22:33 Coût d’un site Internet
25:55 Un CMS, qu’est-ce que c’est ?
26:46 Les CMS les plus connus
32:57 Le nom de domaine
33:39 L’ hébergement
34:54 Quelques hébergeurs
38:35 4 choses que doit comprendre votre hébergement
40:01 WordPress qu’est-ce que c’est ?
40:29 Différence entre WP.com et wp.org
43:00 Les différentes composants de WP
46:33 En résumé les étapes pour travailler avec WordPress
47:47 Conclusion

Sommaire de la vidéo

Vous serez peut-être également intéressé par ces articles …

Enregistrer son écran pour créer des formations

Enregistrer son écran pour créer des formations

Vous recherchez un logiciel de capture pour filmer l’écran de votre PC ou de votre Mac ? Vous souhaitez créer des démos de logiciels, des démos de jeux, des tutoriels ou des vidéos de formation d’aspect professionnel ? Alors vous avez sans doute besoin de DemoCreator de Wondershare !

lire plus
Divi Supreme : Module Text Path

Divi Supreme : Module Text Path

Divi Supreme possède un excellent nouveau module intitulé Text Path qui vous permet de créer de magnifiques chemins de texte. Avec ce module, vous pouvez facilement créer des motifs et des dessins complexes dans votre texte.

lire plus
Créer un pop-up sur un site Divi

Créer un pop-up sur un site Divi

Ce tutoriel vous propose une solution simple et pratique pour créer un pop-up. En effet, je vous présente un plugin gratuit pour Divi intitulé « Popups for Divi » qui vous permettra de transformer toute section de votre site web en fenêtre pop-up.

lire plus
Offrez-moi un café! Merci :)