Comment créer un catalogue de mode de défilement en utilisant Divi

Votre numéro d’image. Rendre le calque 1 invisible et après avoir sélectionné le calque 0, appuyez sur Supprimer pour sélectionner la zone à rendre transparente, continuer et rendre le calque 1 invisible, sélectionnez à nouveau le calque 0 et appuyez sur le bouton Supprimer sur le clavier. Après avoir sélectionné l’outil de sélection rectangulaire et cliqué sur un emplacement sur l’image pour ce faire, sélectionnez l’outil de sélection rectangulaire et cliquez sur un emplacement sur l’image. Enregistrer l’image sous PNG Enfin, vous devez enregistrer l’image sous PNG et répéter le même processus pour les quatre images utilisées dans la mise en page. Configuration de la barre de menu principale les paramètres de la barre de menu principale nécessaires à la création de la mise en page sont les suivants: masquer l’image du logo: activer la hauteur du menu: 30 taille du texte: 15 espacement des lettres: – 1 caractères: style de police latérale: couleur du texte en gras et en majuscules: # FFFFFF active Link color: # FFFFFF Background: rgba (255255255,0) drop – down Background color: rgba (255255255,0) Après avoir modifié la barre de menu principale, vous pouvez continuer à ajouter de nouvelles pages, utiliser Divi Builder, puis passer à Visual Builder. Sur cette page, ajoutez d’abord une section standard. Couleur de fond de la section la couleur de fond doit être « \ # d6d6d6». Passez à l’onglet conception de cette section. Dans la Sous – catégorie espacement, ajouter 24 Px au remplissage supérieur et 0 Px au remplissage inférieur. Une fois que vous avez terminé d’ajouter une ligne à une colonne, vous pouvez continuer à ajouter une ligne de la colonne à la section.
Aller à l’onglet conception et modifier la taille de la Sous – catégorie: rendre cette ligne pleine largeur: Oui utiliser la largeur de gouttière personnalisée: 1 Remplissage personnalisé SC
Après avoir modifié les paramètres, Onna ajoute une ligne avec la structure de colonne suivante: Ouvrez les paramètres de ligne et ajoutez rgba (255255255,0.14) comme couleur de fond. Ajoutez une image que vous avez créée dans la section Photoshop de cet article et mélangez – la en utilisant la teinte comme image de fond. Enfin, effectuez les changements suivants à la Sous – catégorie redimensionner: rendre cette ligne pleine largeur: Oui utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 Une fois le premier formulaire de texte terminé, ajoutez le formulaire de texte à la deuxième colonne. Utilisez les paramètres suivants pour les sous – catégories de texte:
Police de texte: taille de la police de texte amère: 63 Px couleur du texte: # 000000 direction du texte: Centre Directement sous le premier module texte, ajoutez un module séparateur et activez l’option afficher les séparateurs. Passez à l’onglet conception et utilisez # 000000 comme couleur de séparateur. Dans la Sous – catégorie Styles, utilisez Solid comme style de séparateur et High comme position de séparateur. Faites défiler le même onglet vers le bas et appliquez les paramètres suivants aux dimensions de la Sous – catégorie: poids du séparateur: 3px hauteur: 23px largeur: 57% alignement du module: à gauche Enfin, ajoutez la marge supérieure 30px et la marge inférieure 50px. Une fois que le séparateur de deuxième forme de texte est en place, continuez à ajouter la deuxième forme de texte qui contiendra le titre. Tout d’abord, utilisez # 000000 comme couleur de fond dans l’onglet contenu. Ensuite, passez à l’onglet conception et appliquez les paramètres suivants à la Sous – catégorie texte: police de texte: taille de la police de texte amère: 92px couleur du texte: # 000000 hauteur de la ligne de texte: 1EM direction du texte: à gauche Ouvrez la Sous – catégorie frontières et utilisez les frontières segmentées
Uente: Using Edges: is Edge color: # 000000 Edge width: 3px Edge style: Solid De plus, utilisez la largeur de 77% et l’alignement du formulaire à gauche. Enfin, ajoutez 15px en haut, à droite, en bas et à gauche du formulaire texte. Le troisième formulaire texte ajoute un autre formulaire texte directement sous le formulaire texte précédent. Ceci représente la description. Allez à l’onglet conception et utilisez les paramètres suivants pour les sous – catégories de texte: police de texte: taille de la police de texte latérale: 16px couleur du texte: # 000000 hauteur de la ligne de texte: 1emtext direction: gauche Ouvrez la Sous – catégorie taille, utilisez 70% pour la largeur, puis sélectionnez alignement du formulaire de gauche. Enfin, ajoutez la marge supérieure de \
La structure des colonnes IGA ajoute ensuite deux lignes de colonne à la section. Aller à la Sous – catégorie redimensionner la ligne et apporter les changements suivants: rendre la ligne pleine largeur: Oui utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 Nous utiliserons une image plutôt qu’une image de fond. De cette façon, nous veillerons à ce que le texte et l’image ne se chevauchent pas. Continuez, ajoutez le formulaire image à la première colonne de la ligne et Téléchargez l’image. Ensuite, clonez tous les modules utilisés dans la première ligne de la version Bureau et placez – les dans la deuxième colonne. Il n’y a qu’une seule chose à changer pour changer la taille de police du deuxième formulaire de texte; Taille de police du deuxième module de texte. Changez – le en 65px. Ensuite, continuez à ajouter une autre ligne à deux colonnes à la section. Redimensionner cette ligne nécessite également de modifier les sous – catégories: rendre cette ligne pleine largeur: Oui utiliser la largeur personnalisée de la gouttière: Oui la largeur de la gouttière: 1 Vous ajoutez également un module image à la première colonne et Téléchargez l’image. Ensuite, continuez à cloner le module à la deuxième ligne de la version Bureau. Une fois cloné, placez – le dans la deuxième colonne de cette ligne. Modifier la taille de police du deuxième formulaire de texte la taille de texte du deuxième formulaire de texte doit également être modifiée. Continuez et spécifiez une taille de police de 65px. Une fois que vous avez terminé de masquer la partition de bureau sur deux lignes, vous pouvez continuer et désactiver la partition entière sur le Bureau. Résultats, etc., une fois que vous avez terminé toutes les étapes de cet article, vous devriez
Noircir les résultats suivants sur le Bureau: Et ce qui suit sur votre téléphone et votre tablette: Dans cet article, nous vous montrons comment créer un beau défilement de catalogue de mode. Pour que notre Design fonctionne, nous vous avons d’abord montré comment créer des formes transparentes dans l’image en utilisant Photoshop. Plus tard, nous utiliserons ces images pour créer le design dans le tutoriel Divi. 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 et à YouTube Channel afin que vous ne manquiez pas de belles annonces, des conseils utiles ou des cadeaux Divi! Images caractéristiques du rvector \/ shutterstock. Com