5 bonnes façons d’ajouter des images et des vidéos à un modèle d’écran en utilisant Divi

Vous rencontrerez des prototypes d’écran sur divers sites Web, de grands à petits. Ils aident à démontrer des emplois antérieurs, des services, etc. Ils contribuent également à tous les aspects de votre site Web et mettent l’accent sur le fait que votre entreprise (ou l’entreprise du client) se concentre sur la technologie. Dans cet article, nous vous montrerons cinq bonnes façons d’ajouter des images et des vidéos à un prototype d’écran en utilisant les options intégrées de Divi. Cet article se compose de deux parties; La première partie concerne la personnalisation du modèle d’écran avec Photoshop. Vous pouvez télécharger gratuitement le modèle que nous utiliserons dans cet article. Dans la deuxième partie, nous vous montrerons comment utiliser Divi pour élever le prototype au niveau suivant.
Résultats avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil à différents exemples, et nous allons progressivement vous montrer comment recréer. Exemple 1 Exemple # 2 Exemple # 3 Exemple # 4 Exemple # 5 Cinq bonnes façons d’ajouter des images et des vidéos au modèle d’écran avec Divi Inscrivez – vous à notre canal YouTube téléchargez le modèle d’écran gratuit pour ce tutoriel afin de vous aider à terminer le tutoriel cost, nous vous fournirons gratuitement le modèle utilisé dans ce tutoriel. En fait, nous vous avons fourni deux prototypes d’appareils et plusieurs images de haute qualité parce que les ressources que nous (re) partageons proviennent en fait de notre trousse de mise en page de l’Agence de conception. Lorsque vous téléchargez la ressource image ci – dessous, vous pouvez Décompresser le dossier et trouver un fichier nommé MB purefront. PSD à suivre.
Téléchargez gratuitement le fichier modèle d’édition de modèle d’écran dans Photoshop. Le fichier modèle que nous allons éditer n’a besoin d’être édité qu’une seule fois. Vous pouvez ensuite utiliser le même fichier pour tous les exemples dans cet article, en utilisant simplement les options intégrées de Divi et Divi. Après avoir ouvert le fichier, faites un clic droit + fusionnez le dossier du périphérique
Méthode parallaxe. La dernière chose que vous devez faire pour ajouter un mode de mélange au module image est de changer le mode de mélange de la Sous – catégorie filtre en lumière forte. Dans l’exemple suivant, nous ajouterons simplement la vidéo au modèle au lieu de l’image. Vous pouvez ajouter une variété de vidéos à votre modèle, dont la capture d’écran. Ajoutez le module image et téléchargez à nouveau le modèle solide, ajoutez d’abord le module image et sélectionnez le modèle solide que nous avons créé en utilisant Photoshop. Ensuite, ajoutez la vidéo à la Sous – catégorie \
Sélectionnez d’abord une ligne et une colonne. Colonne image de fond 1 puis ajouter une image de fond à la colonne en utilisant les paramètres suivants: taille de l’image de fond de colonne: position de superposition de l’image de fond de colonne: duplication de l’image de fond de colonne intermédiaire: duplication de l’image de fond de colonne mixte: OK Ensuite, ouvrez la Sous – catégorie redimensionner la ligne et appliquez les modifications suivantes: rendre la ligne pleine largeur: Oui utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 0 Vous avez également besoin d’espacement pour personnaliser le remplissage de colonne et le remplissage de colonne personnalisé: remplissage en haut, à droite, en bas et à gauche: 0px colonne remplissage en haut: 70 Px colonne remplissage à droite: 300 Px (bureau), 200 Px (tablette), 100 Px (téléphone) Colonne remplissage En bas: 70 Px colonne remplissage à gauche: 300 Px (bureau), 200 pixels (tablette), 100 pixels (téléphone) Ajouter un module image et télécharger un modèle solide une fois que vous avez terminé la configuration de ligne, vous pouvez ajouter un module image et sélectionner le modèle solide que nous avons créé dans la section Photoshop de cet article. La vidéo est ensuite ajoutée à la Sous – catégorie arrière du formulaire image. Ajoutez le mode de fusion au dernier mais non au moindre module d’image et sélectionnez multiplier comme mode de fusion dans la Sous – catégorie filtres de l’onglet conception! Dans cet article, nous vous montrons 5 bonnes façons d’ajouter des images et des vidéos à un prototype d’écran. Nous vous avons d’abord montré comment apporter quelques modifications au fichier modèle que vous pouvez télécharger gratuitement dans Photoshop, puis nous vous avons montré comment modifier le fichier modèle dans Divi Builder pour afficher toutes les images ou vidéos que vous souhaitez partager avec vos amis.
Visiteurs. Si vous avez des questions ou des suggestions; Assurez – vous de laisser un commentaire dans la section commentaires ci – dessous!