Comment convertir une disposition Divi en wireframe réutilisable

Chaque semaine, nous vous proposons un nouveau paquet gratuit de mise en page Divi que vous pouvez utiliser pour votre prochain projet. Pour l’un de ces paquets de mise en page, nous partageons également un cas d’utilisation qui vous aidera à mettre votre site au niveau suivant. Cette semaine, dans le cadre de notre plan de conception Divi en cours, nous vous montrerons comment convertir les mises en page en wireframes réutilisables à l’aide du pack de mise en page de la restauration de Divi. Le wireframe est utile pour le processus initial de création d’un site Web. Ils peuvent vous aider à déterminer la structure générale et le style de conception du site. Ils peuvent également aider à obtenir l’avis du client sur le style de conception sans avoir à ajuster tout le contenu à l’avance.
Allons – y! Avant d’aller plus loin, examinons le résultat final que nous allons créer. Convertir la mise en page en wireframe ouvrir la page d’atterrissage du restaurant en utilisant Visual Builder continuer et ouvrir la page d’atterrissage créée en utilisant le paquet de mise en page du catalogue alimentaire Divi. Supprimer la section pleine largeur et l’image de fond de l’en – tête, la couleur de fond et l’arrière – plan de gradient la première étape de la création d’un fil métallique consiste à supprimer toutes les images de fond, l’arrière – plan de gradient et certaines couleurs de fond de la page, ainsi que le formulaire d’en – tête pleine largeur dans la section héros. Au lieu de cela, spécifiez une couleur de fond grise pour les pièces de rechange afin d’aider à identifier différentes parties de la conception de la page, et continuez à spécifier une couleur de fond \
Taille de l’image désirée. Pour trouver ces dimensions, allez à la médiathèque. Ouvrez les images utilisées individuellement ouvrez chaque image contenue sur la page individuellement. Notez les différentes tailles d’images sur la page une fois terminée, vous serez en mesure de voir la taille d’une image particulière. Avant de passer à l’étape suivante, suivez toutes les dimensions requises sur la page en les écrivant quelque part. Utilisez la taille pour créer un substituant pour ouvrir Photoshop il est temps de créer un substituant! Ouvrez Photoshop ou tout autre logiciel d’édition d’images. Créer un nouvel élément pour le quota créer un nouvel élément pour chaque ensemble de taille sur la page. Dans notre cas, nous avons besoin d’un article séparé pour chacune des tailles suivantes: 800 x 1029 400 x 400 48 x 48 Sélectionnez gris sélectionnez \ Pour vous aider à suivre la taille de l’image, vous pouvez également ajouter la taille au Centre du substituant. De cette façon, après avoir édité l’image de remplacement, vous pouvez connaître la taille de l’image requise pour la page. Une fois sauvegardé en tant que Web, sauvegardez le substituant d’image pour le Web. Répétez ces étapes pour chaque taille d’image sur la page et pour chaque série de tailles sur la page. Pour cette page, vous avez besoin de trois collections différentes:
800 x 1029 (qui nous sommes) Section 400 x 400 (section galerie) 48 x 48 (icônes) Remplacer l’image après avoir exporté tous les substituants d’image avec des substituants, continuer et remplacer l’image. Fabrication de fils
Ria nomme également les éléments de conception comme une structure plus organisée, continue d’ajouter une nouvelle catégorie de partitions appelée « sections Hero » afin que vous puissiez facilement localiser la partition Hero sélectionnée et explorer tous les dessins existants. Aperçu maintenant que nous avons terminé toutes les étapes, regardons le résultat final. Dans ce blog de cas d’utilisation, nous vous montrons comment convertir les mises en page Divi en wireframes réutilisables. La conversion d’une mise en page en wireframe vous aide à avoir une vue d’ensemble de l’apparence de la structure du site. Ils peuvent également montrer au client le style de conception à la première étape du processus de création du site. Si vous avez des questions ou des suggestions, assurez – vous de laisser un commentaire dans la section commentaires!