Comment créer un catalogue de mode défilant avec Divi

Dans cet article, nous allons vous montrer comment créer un catalogue de mode défilant. L'utilisation de cette méthode vous aidera à vous connecter avec votre public comme vous le feriez en leur remettant un catalogue papier. La création d'un catalogue de mode défilant en ligne peut aider à augmenter les résultats que vous obtenez du catalogue. En incluant des liens directs vers les articles de la boutique, par exemple, le processus d'achat sera également amélioré.

Résultat

Le résultat que nous allons vous montrer comment créer, étape par étape, ressemble à ceci sur le bureau :

Et comme ça sur téléphone et tablette :

Comment créer un catalogue de mode défilant avec Divi

Abonnez-vous à notre chaîne Youtube

Ajouter des formes transparentes aux images avec Photoshop

La première chose que nous allons vous montrer est comment ajouter une partie transparente à une image avec Photoshop. Il existe une alternative gratuite à Photoshop appelée GimpShop, mais dans cette partie du didacticiel, nous utiliserons uniquement Photoshop. Nous aurons besoin de deux images avec chacune deux formes différentes ; un pour ordinateur de bureau et un pour mobile et tablette. Dans cette partie, nous allons simplement vous montrer comment ajouter une forme transparente à l'image. Ensuite, vous pouvez créer vous-même toutes les images dont vous avez besoin.

Ouvrez Photoshop

Commencez par ouvrir Photoshop sur votre ordinateur.

Ouvrir l'image

Ensuite, ouvrez la première image que vous souhaitez modifier. La méthode reste la même pour les trois images que vous utiliserez tout au long de ce didacticiel. C'est pourquoi nous ne l'expliquerons qu'une seule fois.

Double-cliquez sur l'image et créez un calque

Une fois que vous avez ouvert l'image que vous souhaitez modifier, double-cliquez sur l'image et créez un nouveau calque pour elle.

Ajouter une autre couche

Continuez en ajoutant un autre calque vide par-dessus.

Sélectionnez le calque 1 et l'outil Lasso polygonal

Sélectionnez le calque 1 et commencez à utiliser l'outil Lasso polygonal.

Faire une forme

Tout en ayant activé l'outil Lasso polygonal, allez-y et créez la forme transparente dans votre image.

Rendre le calque 1 invisible et appuyer sur Supprimer tout en ayant sélectionné le calque 0

Une fois que vous avez sélectionné la zone que vous souhaitez rendre transparente, rendez le calque 1 invisible, sélectionnez à nouveau le calque 0 et appuyez sur le bouton Supprimer de votre clavier.

Sélectionnez l'outil de sélection rectangulaire et cliquez quelque part sur l'image

Une fois que vous avez fait cela, sélectionnez l'outil Rectangular Marquee et cliquez quelque part sur votre image.

Enregistrer l'image au format PNG

Enfin, vous devrez enregistrer l'image au format PNG et répéter le même processus pour les quatre images que vous utiliserez tout au long de la mise en page.

Paramètres de la barre de menus principale

Les paramètres de la barre de menus principale dont nous avons besoin pour la mise en page que nous créons sont les suivants :

• Masquer l'image du logo : Activer
• Hauteur du menu : 30
• Taille du texte : 15
• Espacement des lettres : -1
• Police : Lato
• Style de police : gras et majuscule
• Couleur du texte : #FFFFFF
• Couleur du lien actif : #FFFFFF
• Couleur d'arrière-plan : rgba(255,255,255,0)
• Couleur d'arrière-plan du menu déroulant : rgba(255,255,255,0)

Introduction à l'édition

Une fois que vous avez modifié la barre de menus principale, vous pouvez continuer et ajouter une nouvelle page, utiliser le Divi Builder et basculer vers Visual Builder.

Ajouter une nouvelle section

Dans cette page, commencez par ajouter une section standard.

Couleur d'arrière-plan de la section

L'arrière-plan de cette couleur doit être « #d6d6d6 ».

Rembourrage personnalisé

Passez à l'onglet Conception de cette section. Dans la sous-catégorie Espacement, ajoutez « 24px » au rembourrage supérieur et 0px à celui du bas.

Ajouter une ligne à une colonne

Une fois cela fait, vous pouvez continuer et ajouter une ligne à une colonne à la section.

Dimensionnement

Allez dans l'onglet Conception et modifiez la sous-catégorie Dimensionnement :

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : 1

Rembourrage personnalisé

Faites défiler vers le bas et ajoutez « 0px » au rembourrage supérieur de la ligne.

Premier module de texte

Une fois cela fait, vous pouvez ajouter un module de texte à la ligne. Après avoir saisi le texte que vous souhaitez voir apparaître, accédez à l'onglet Conception et assurez-vous que les modifications suivantes s'appliquent à la sous-catégorie Texte :

• Police du texte : ancienne norme TT
• Style de police : majuscule
• Taille de la police du texte : 72 (ordinateur de bureau), 41 (tablette), 29 (téléphone)
• Couleur du texte : #000000
• Espacement des lettres du texte : 11px
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Ouvrez la sous-catégorie Espacement et ajoutez « 30px » au rembourrage supérieur et inférieur.

Module diviseur

Juste en dessous du module de texte, ajoutez un module diviseur et activez l'option "Afficher le diviseur".

Allez dans l'onglet Design et choisissez '#FFFFFF' comme couleur de séparation.

Ensuite, choisissez « Solide » comme style de séparation et « Top » comme position de séparation dans la sous-catégorie Styles.

Ensuite, ouvrez la sous-catégorie Dimensionnement et appliquez les paramètres suivants :

• Poids du diviseur : 10px
• Hauteur : 23px
• Largeur : 100 %
  

Deuxième module de texte

Juste en dessous du module de séparation, ajoutez un autre module de texte. Choisissez l'icône de votre choix dans votre table de caractères (Windows) ou votre palette de caractères (Mac) et placez-la dans l'onglet Contenu. Pour cet exemple, nous avons utilisé le symbole suivant : '↓'. Ensuite, allez dans l'onglet Conception et appliquez les paramètres suivants :

• Taille de la police de texte : 42 px
• Couleur du texte : #000000
• Orientation du texte : Centre

Catalogue de mode de bureau (nouvelle section)

Maintenant, ajoutez une autre section standard. Cette section contiendra deux lignes qui afficheront une partie différente du catalogue sur le bureau.

Paramètres de section

Couleur de l'arrière plan

Utilisez '#FFFFFF' comme couleur d'arrière-plan de cette section.

Rembourrage personnalisé

Ensuite, allez dans l'onglet Conception et ajoutez « 15px » au rembourrage supérieur.

Première rangée

Structure des colonnes

Une fois que vous avez apporté les modifications au paramètre, ajoutez une ligne avec la structure de colonnes suivante :

Couleur de l'arrière plan

Ouvrez les paramètres de ligne et ajoutez « rgba (255,255,255,0.14) » comme couleur d'arrière-plan.

Image de fond

Ajoutez l'une des images que vous avez créées dans la partie Photoshop de cet article et utilisez "Teinte" comme mélange d'image d'arrière-plan.

Dimensionnement

Enfin, apportez les modifications suivantes à la sous-catégorie Dimensionnement :

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Premier module de texte

Une fois que vous avez terminé les paramètres de ligne, ajoutez un module de texte à la deuxième colonne. Utilisez les paramètres suivants pour la sous-catégorie Texte :

• Police du texte : Amer
• Taille de la police du texte : 63 px
• Couleur du texte : #000000
• Orientation du texte : Centre

Module diviseur

Juste en dessous du premier module de texte, ajoutez un module diviseur et activez l'option "Afficher le diviseur".

Passez à l'onglet Conception et utilisez '#000000' comme couleur de séparation.

Dans la sous-catégorie Styles, utilisez 'Solid' comme style de séparation et 'Top' comme position de séparation.

Faites défiler le même onglet vers le bas et appliquez les paramètres suivants à la sous-catégorie Dimensionnement :

• Poids du diviseur : 3px
• Hauteur : 23px
• Largeur : 57 %
• Alignement du module : à gauche

Enfin, ajoutez une marge supérieure de '30px' et une marge inférieure de '50px'.

Deuxième module de texte

Une fois le diviseur en place, allez-y et ajoutez le deuxième module de texte qui contiendra un titre. Tout d'abord, utilisez '#000000' comme couleur d'arrière-plan dans l'onglet Contenu.

Ensuite, passez à l'onglet Conception et appliquez les paramètres suivants à la sous-catégorie Texte :

• Police du texte : Amer
• Taille de la police de texte : 92px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : à gauche

Ouvrez la sous-catégorie Bordure et utilisez la bordure suivante :

• Utiliser la bordure : Oui
• Couleur de la bordure : #000000
• Largeur de la bordure : 3px
• Style de bordure : solide

De plus, utilisez une largeur de « 77% » et un alignement de module à gauche.

Enfin, ajoutez "15px" en haut, à droite, en bas et à gauche du module de texte.

Troisième module de texte

Ajoutez un autre module de texte juste en dessous du précédent. Celui-ci représentera la description. Accédez à l'onglet Conception et utilisez les paramètres suivants pour la sous-catégorie Texte :

• Police du texte : Lato
• Taille de la police de texte : 16px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : à gauche

Ouvrez la sous-catégorie Dimensionnement, utilisez « 70 % » pour la largeur et sélectionnez l'alignement du module de gauche.

Enfin, ajoutez une marge supérieure de '20px'.

Cinquième module de texte

Le cinquième module de texte sert de bouton minimaliste. Dans l'onglet Contenu, utilisez le symbole '→' + le texte et placez un lien derrière.

Ensuite, allez dans l'onglet Conception. Utilisez les paramètres suivants pour la sous-catégorie Texte :

• Police du texte : Amer
• Taille de la police du texte : 23 px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : à gauche

Faites défiler le même onglet jusqu'à ce que vous trouviez la sous-catégorie Dimensionnement. Dans cette sous-catégorie, utilisez une largeur de « 49 % » et un alignement de module droit.

Enfin, ajoutez une marge supérieure de '80px'.

Sixième module de texte

Le sixième et dernier module dont nous aurons besoin est presque le même que le précédent. Utilisez le '→' + texte et mettez un lien derrière.

Les paramètres de la sous-catégorie de texte sont les suivants :

• Police du texte : Amer
• Taille de la police du texte : 23 px
• Couleur du texte : #e02b20
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : à gauche

Modifiez la largeur sur « 39 % » et utilisez également le bon alignement de module.

Deuxième rang

Couleur de l'arrière plan

Ouvrez les paramètres de ligne et ajoutez « rgba (255,255,255,0.14) » comme couleur d'arrière-plan.

Image de fond

Ajoutez l'une des images que vous avez créées dans la partie Photoshop de cet article et utilisez "Teinte" comme mélange d'image d'arrière-plan.

Structure des colonnes

La deuxième ligne que vous devez ajouter à la section standard est exactement à l'opposé de la précédente.

Cloner des modules

Les modules que nous avons utilisés dans la ligne précédente sont les mêmes dont nous avons besoin pour cette ligne, alors allez-y, clonez-les et placez-les dans la première colonne au lieu de la seconde. Nous devrons faire quelques changements d'alignement dans la prochaine partie de cet article.

Modifications du premier module de texte

Ouvrez le premier module de texte et ajoutez une marge supérieure de « 20px ».

Modifications du module diviseur

Ensuite, ouvrez le module diviseur et modifiez l'alignement du module dans la sous-catégorie Dimensionnement vers la droite.

Modifications du deuxième module de texte

Réglez l'orientation du texte du deuxième module de texte à droite.

Et choisissez également un bon alignement de module dans la sous-catégorie Dimensionnement.

Modifications du troisième module de texte

Le troisième module de texte aura également besoin d'une orientation de texte correcte.

Et un bon alignement de module également.

Modifications du cinquième module de texte

La seule chose que vous aurez à faire pour le cinquième module de texte est de changer la largeur en « 82% ».

Modifications du sixième module de texte

Même chose pour le sixième module de texte, mais utilisez plutôt « 87 % ».

Masquer la section pour tablette et téléphone

Une fois que vous avez terminé les deux lignes, vous pouvez continuer et désactiver toute la section sur téléphone et tablette.

Catalogue de tablettes et téléphones (nouvelle section)

Pour que tout soit aussi beau sur tablette et téléphone, nous allons créer une nouvelle section standard.

Paramètres de section

Couleur de l'arrière plan

Ajoutez '#FFFFFF' comme couleur d'arrière-plan de cette section.

Rembourrage personnalisé

Passez à l'onglet Conception et ajoutez un rembourrage supérieur de « 15px ».

Première rangée

Structure des colonnes

Ensuite, ajoutez une ligne à deux colonnes à la section.

Dimensionnement

Accédez à la sous-catégorie Dimensionnement de cette ligne et apportez les modifications suivantes :

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Module d'images

Au lieu d'utiliser une image d'arrière-plan, nous allons utiliser un module Image à la place. De cette façon, nous serons sûrs que le texte et l'image ne se chevaucheront pas. Allez-y et ajoutez un module d'image à la première colonne de la ligne et téléchargez une image.

Cloner les modules de la première rangée dans la version de bureau

Ensuite, clonez tous les modules que vous avez utilisés dans la première ligne de la version de bureau et placez-les dans la deuxième colonne.

Modifier la taille de la police du deuxième module de texte

Il n'y a qu'une chose qui doit être changée ; la taille de la police du deuxième module de texte. Changez-le en 65px.

Deuxième rang

Structure des colonnes

Ensuite, allez-y et ajoutez une autre ligne à deux colonnes à la section.

Dimensionnement

Cette ligne aura également besoin d'une sous-catégorie de dimensionnement modifiée :

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Module d'images

Ajoutez également le module Image à la première colonne et téléchargez une image.

Cloner les modules de la deuxième rangée dans la version de bureau

Ensuite, allez-y et clonez les modules qui sont placés dans la deuxième rangée de la version de bureau. Une fois que vous les avez clonés, placez-les dans la deuxième colonne de cette ligne.

Modifier la taille de la police du deuxième module de texte

La taille du texte du deuxième module de texte doit également être modifiée. Allez-y et donnez-lui une taille de police de '65px'.

Masquer la section pour le bureau

Une fois que vous avez terminé les deux lignes, vous pouvez continuer et désactiver toute la section sur le bureau.

Résultat

Et voila, après avoir suivi toutes les étapes de ce post, vous devriez obtenir le résultat suivant sur desktop :

Et les suivants sur téléphone et tablette :

Dernières pensées

Dans cet article, nous vous avons montré comment créer un joli catalogue de mode défilant. Pour que notre conception fonctionne, nous vous avons d'abord montré comment créer une forme transparente dans votre image avec Photoshop. Ensuite, nous avons utilisé ces images dans notre tutoriel Divi pour créer le design. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image en vedette par Rvector / shutterstock.com