fbpx

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

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

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

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 :)