Comment transformer les mises en page Divi en wireframes réutilisables

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment transformer des mises en page en wireframes réutilisables à l'aide du pack de mise en page Food Catering de Divi. Les wireframes sont parfaits pour le processus de démarrage de la création d'un site Web. Ils vous aident à décider de la structure globale et du style de conception d'un site Web. Ils peuvent également aider à obtenir l'opinion d'un client sur un style de conception sans avoir à tout adapter à l'avance.

Allons-y !

Aperçu

Avant de nous y plonger, jetons un coup d'œil au résultat final que nous allons créer.

Transformer la mise en page en filaire

Ouvrir la page de destination de la restauration avec Visual Builder

Allez-y et ouvrez la page de destination que vous avez créée à l'aide du pack de mise en page de restauration de Divi.

Supprimer les images d'arrière-plan de section et d'en-tête pleine largeur, les couleurs d'arrière-plan et les arrière-plans dégradés

La première étape pour créer un wireframe consiste à supprimer toutes les images d'arrière-plan, les arrière-plans dégradés et les couleurs d'arrière-plan des sections de votre page et le module d'en-tête pleine largeur dans la section héros.

Donnez plutôt aux sections alternées une couleur de fond grise

Pour vous aider à déterminer les différentes sections de la conception de votre page, allez-y et attribuez à chacune des sections en alternance une couleur d'arrière-plan « #f9f9fb ». Plus tard, lorsque vous utiliserez une structure filaire pour créer une page, vous pourrez utiliser la fonction Rechercher et remplacer pour ajouter la palette de couleurs à votre page de manière transparente.

Supprimer toutes les couleurs dans les éléments de conception à l'aide du filtre de styles modifiés

Activer le filtre des styles modifiés sur le module de boutons

Nous allons également nous débarrasser de la palette de couleurs utilisée. De cette façon, nous ne serons pas influencés par cela lors de la construction d'une page. Ouvrez l'un des modules de boutons sur votre page et activez le filtre des styles modifiés pour voir tous les paramètres actuels.

Donner au module de boutons une couleur de fond et de bordure sombres

Changez à la fois la couleur d'arrière-plan du bouton et la couleur de la bordure du bouton en '#2b2b2b'.

Copier les styles de boutons et appliquer à d'autres boutons

Continuez en copiant les styles de bouton en cliquant avec le bouton droit sur les paramètres du bouton et en cliquant sur « Copier les styles de bouton ». Ensuite, ajoutez les styles de boutons à chacun des modules de boutons restants sur la page.

Supprimer les paramètres de conception supplémentaires (tels que l'ombre de la boîte)

Supprimer l'ombre de la boîte à boutons

Nous supprimons également des éléments supplémentaires, tels que Box Shadow. Ouvrez le même module de boutons sur lequel vous travailliez et supprimez complètement l'ombre de la boîte.

Paramètres d'ombre de la boîte de module de bouton de copie

Copiez les styles d'ombre de boîte de ce module de boutons et ajoutez-les également aux modules de boutons restants.

Supprimer Box Shadow manuellement dans la section Hero & Contact

Les deux seuls boutons qui nécessitent un retrait manuel de la Box Shadow sont ceux inclus dans le module d'en-tête pleine largeur et le module de contact. Ces boutons font partie d'un module avec plusieurs éléments de conception, c'est pourquoi nous devons les supprimer manuellement.

Donner à la section en surbrillance la même couleur d'arrière-plan que les CTA

Ensuite, faites défiler vers le bas jusqu'à ce que vous trouviez la section « surlignée ». Ici, utilisez la couleur d'arrière-plan de la section '#2b2b2b'. La même couleur a été utilisée pour les CTA.

Déterminer les dimensions de l'image

Aller à la médiathèque

Pour supprimer complètement le sujet de mise en page de notre mise en page, nous allons remplacer tous les modules d'image par des espaces réservés contenant les dimensions d'image nécessaires. Pour retrouver ces dimensions, rendez-vous dans votre médiathèque.

Ouvrir les images utilisées individuellement

Ouvrez séparément chacune des images incluses sur votre page.

Notez les différentes dimensions des images sur la page

Une fois que vous l'aurez fait, vous pourrez voir les dimensions de cette image en particulier. Gardez une trace de toutes les dimensions dont vous avez besoin sur votre page en les notant quelque part avant de passer à l'étape suivante.

Créer des espaces réservés avec des cotes

Ouvrez Photoshop

Il est temps de créer les espaces réservés ! Ouvrez Photoshop ou tout autre logiciel de retouche d'image.

Créer de nouveaux projets pour les dimensions

Créez un nouveau projet pour chaque ensemble de dimensions que vous avez sur votre page. Dans notre cas, nous aurons besoin d'un projet distinct pour chacune des dimensions suivantes :

• 800 x 1029
• 400x400
• 48x48

Choisissez la couleur grise

Choisissez '#e7e8ed' comme couleur.

Déverrouiller le calque d'arrière-plan

Déverrouillez également votre calque d'arrière-plan.

Sélectionnez l'outil Pot de peinture et ajoutez de la couleur au calque

Ensuite, utilisez l'outil Pot de peinture pour colorer votre toile en gris.

Ajouter du texte avec des cotes

Pour vous aider à suivre les dimensions de l'image, vous pouvez également ajouter les dimensions au milieu de votre espace réservé. De cette façon, vous saurez de quelles dimensions d'image vous aurez besoin pour votre page une fois que vous aurez modifié les images par lesquelles vous les remplacerez.

Enregistrer pour le Web

Une fois que vous avez terminé, enregistrez votre espace réservé d'image pour le Web.

Répétez l'opération pour chacune des dimensions de l'image sur la page

Répétez ces étapes pour chacun des ensembles de dimensions de votre page. Pour cette page, vous aurez besoin de trois ensembles différents au total :

• 800 x 1029 (section à propos de nous
• 400 x 400 (section galerie)
• 48 x 48 (icônes)

Remplacer les images par des espaces réservés

Une fois que vous avez exporté tous vos espaces réservés pour les images, continuez et remplacez les images.

Rendre le filaire facilement réutilisable

Créer une carte filaire sur ordinateur

Une fois que vous avez terminé de créer un wireframe, il est recommandé de sauvegarder l'apparence de celui-ci quelque part. Créez un nouveau dossier quelque part sur votre ordinateur.

Disposition de capture d'écran et enregistrement local

Ensuite, utilisez le module complémentaire/extension de capture d'écran de votre choix pour capturer votre page. Dans les images ci-dessous, nous avons utilisé le module complémentaire FireShot pour Mozilla Firefox. Assurez-vous que lorsque vous enregistrez votre capture d'écran, vous lui donnez un nom approprié.

Enregistrer la mise en page dans la bibliothèque avec le même nom

Utilisez le même nom que celui que vous avez utilisé pour votre capture d'écran pour enregistrer la disposition filaire dans votre bibliothèque Divi. Cela vous permet de jeter un œil au wireframe sur votre ordinateur avant de le télécharger sur l'une de vos pages.

Modifier les paramètres de conception pour le filaire personnalisé

Ajouter des séparateurs de section

Vous n'êtes pas limité à créer un wireframe par page. Vous pouvez facilement modifier les paramètres de conception pour créer de nouvelles structures filaires. Vous pouvez jouer avec les diviseurs de section, par exemple, pour créer des designs uniques.

Jouez avec la typographie

Activer Rechercher et remplacer sur la police d'en-tête

Ou, vous pouvez également jouer avec la typographie. Ouvrez le module d'en-tête pleine largeur dans votre section héros et faites un clic droit sur la police du titre. Continuez en activant la fonction Rechercher et remplacer.

Changer la police

Remplacez la police utilisée sur votre page par une autre et vous obtenez un tout nouveau wireframe !

Enregistrer des éléments de conception séparés à l'aide de catégories

Cliquez sur l'icône « Ajouter à la bibliothèque »

Une autre chose que vous pouvez faire est d'enregistrer séparément des éléments de conception particuliers sur votre page. Supposons, par exemple, que vous souhaitiez créer une collection de sections de héros, vous pouvez facilement ajouter votre section de héros à votre bibliothèque Divi.

Ajouter une nouvelle catégorie et donner un nom à l'élément de conception

Pour avoir une structure plus organisée, continuez en ajoutant une nouvelle catégorie de sections appelée « Sections de héros » afin que vous puissiez facilement trouver la section de héros de votre choix et explorer tous les modèles que vous avez en magasin.

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat final.

Dernières pensées

Dans cet article de blog de cas d'utilisation, nous vous avons montré comment transformer les mises en page Divi en wireframes réutilisables. Transformer les mises en page en wireframes vous aide à conserver une vue d'ensemble sur l'apparence que vous souhaitez donner à la structure d'un site Web. Ils sont également excellents pour expliquer le style de conception à un client lors de la première étape du processus de création d'un site Web. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires!