J’ai réussi. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Pour importer une disposition de section dans la Bibliothèque Divi, allez à la Bibliothèque Divi.
Cliquez sur le bouton importer. Dans la fenêtre contextuelle de portabilité, sélectionnez l’onglet importer, puis sélectionnez les fichiers téléchargés à partir de votre ordinateur. Puis cliquez sur le bouton importer.
Image Package Design No.1
Ajouter une image centrale dans la colonne, ajouter un formulaire d’image. L’image est ensuite téléchargée sur le formulaire. Pour ces images, nous utiliserons une capture d’écran du kit de mise en page de l’entraîneur de fitness. Chacun devrait être 880 pixels x 1200 pixels. Ouvrir les paramètres de l’image et mettre à jour ce qui suit: largeur: 50% alignement du module: Centre
Ajouter des ombres de boîte comme suit: ombres de boîte: voir capture d’écran position verticale des ombres de boîte: 0px force de flou d’ombre de boîte: 38 Px force de diffusion d’ombre de boîte: 5px couleur d’ombre: rgba (0,0,0,2) Ensuite, réglez l’index Z à 1 de sorte qu’il reste au – dessus des autres images du paquet. Z Index: 1 Ajouter une image gauche pour créer les images restantes dans le paquet, ajouter une nouvelle image sous l’image
Et central. Mettre à jour les images avec les nouvelles images (assurez – vous qu’elles sont toutes de la même taille pour de meilleurs résultats).
Sur l’onglet conception, mettre à jour la largeur comme suit: largeur: 30% Puis ajoutez l’ombre de la boîte comme suit: ombre de la boîte: voir capture d’écran couleur de l’ombre: rgba (0,0,0,0,2) Ensuite, vous spécifiez une position absolue pour l’image en position centrale gauche, de sorte qu’elle so it adjacente à l’image centrale gauche. Position: absolue: Centre gauche Pour faire une petite rotation de l’image, mettre à jour l’option de rotation de transformation comme suit: transformer la roue de l’axe Z: – 10 degrés Ajoutez l’image de droite pour créer l’image de droite, ouvrez la boîte de calques et copiez l’image de gauche.
Module image de l’étiquette (image de gauche, image de droite, etc.) Par conséquent, vous pouvez facilement les identifier plus tard. Ensuite, activez les paramètres de l’image copiée et réglez la position comme suit: position: Centre droit Ensuite, réglez les options de rotation de transformation comme suit: index Z de la roue de transformation: 10deg N’oubliez pas d’échanger des images en double contre de nouvelles images. Vérifiez maintenant les résultats actuels. Ajouter un paquet d’images Multi – colonnes parce que les images sont placées dans une colonne, vous pouvez facilement ajouter cette conception de paquet à une disposition Multi – colonnes.
Pour ajouter un groupe d’images à plusieurs colonnes, copiez la ligne contenant le Groupe d’images courant. Dans la ligne copier, copiez la colonne pour créer une autre colonne en utilisant le paquet image inclus. Ceci crée un faisceau d’images dans une disposition à deux colonnes. Pour créer une ligne contenant trois ensembles d’images, copiez la ligne dans deux colonnes, puis copiez une colonne dans la ligne copiée. Cela vous donnera une disposition en trois colonnes. Le résultat final ici est la conception finale du paquet image n° 1. Conception
Image Pack # 2 La conception suivante montre un paquet d’images avec cinq images: une image au centre et quatre dans chaque coin de la colonne.
Pour commencer, créez une nouvelle section générale qui se comporte comme la moitié d’un quart de colonne. Ajouter une image centrale dans la colonne centrale, ajouter un formulaire d’image. L’image est ensuite téléchargée sur le formulaire. Nous utilisons les images du paquet de mise en page du magasin de meubles (800 pixels x 1200 pixels chacun). Dans l’onglet conception, mettre à jour ce qui suit: couleur de fond: \ # f7f3ec Largeur: 55% alignement du module: Centre Marges: 0px remplissage: 5% au – dessus, 5% au – dessous, 5% à gauche, 5% à droite Sur l’onglet avancé, augmentez l’index Z de 1 pour vous assurer que l’image reste au – dessus des autres images dans l’espace Z.
Z Index: 1 Ajouter une image en haut à gauche pour ajouter une image en haut à gauche, ajoutez un nouveau formulaire d’image sous l’image centrale dans la colonne centrale. Téléchargez la nouvelle image sur le formulaire. Puis mettre à jour les paramètres de conception comme suit: largeur: 40% marge: 0px en bas Espacement des colonnes la hauteur des colonnes est déterminée par la hauteur de l’image intermédiaire et par la quantité de remplissage en haut et en bas que nous ajoutons. Par conséquent, pour que les images absolument positionnées soient espacées correctement, nous devons augmenter la hauteur des colonnes en augmentant le remplissage vers le haut et vers le bas. Remplissage (bureau): 12% en haut, 12% en bas (tablette): 24% en haut, 24% en bas Ensuite, spécifiez une position absolue pour l’image en haut à gauche comme suit: position: position absolue: en haut à gauche Lorsque vous ajoutez une image en haut à droite, copiez l’image pour créer l’image en haut à droite. (À ce stade, il est préférable d’étiqueter chaque image pour la reconnaissance ultérieure.
NTO: remplissage: 20% restant Ajouter du texte à la colonne de droite pour créer du texte dans la colonne de droite, copiez le formulaire de texte dans la colonne de gauche et collez – le dans la colonne de droite. Puis ouvrez les paramètres de texte et mettez à jour ce qui suit: titre 2 alignement du texte: à gauche Remplissage de la colonne de droite comme nous l’avons fait pour la colonne de gauche, ajoutez le remplissage suivant à la colonne de droite (colonne 3) pour supprimer le formulaire de texte. Remplissage: 33% plus élevé Arrière – plan de la Section pour compléter le dessin, ouvrez les paramètres de la section et ajoutez la couleur de fond suivante: couleur de fond: \ # f7f3ec C’est le résultat jusqu’à présent. Ajouter un paquet d’images Multi – colonnes pour ajouter ce groupe d’images à plusieurs colonnes, copiez la ligne, puis supprimez les colonnes de gauche et de droite des lignes dupliquées, ne laissant que les colonnes du Groupe d’images. En utilisant plusieurs sélections, sélectionnez l’image dans le coin supérieur gauche et l’image dans le coin supérieur droit. Ouvrez les paramètres et supprimez l’ombre de la boîte. Les colonnes sont ensuite copiées une ou deux fois pour créer plusieurs colonnes contenant des groupes d’images. Si vous créez une disposition à trois colonnes pour le paquet image, ouvrez les paramètres de colonne pour chaque colonne et mettez à jour le remplissage comme suit: remplissage: 8% ci – dessus, 8% ci – dessous Résultat final il s’agit du résultat final. Son portable est là. Image Package Design No. 3 Pour ce dernier projet de pack d’images, nous placerons 5 images côte à côte avec une rotation 3D compacte pour créer un bel affichage pour des thèmes pour enfants ou des packs de mise en page, etc. Ajouter des lignes pour commencer, ajoutez des lignes aux colonnes de la section normale.
Ajouter une image centrale à la ligne, ajouter un formulaire d’image.
Et central.
Pour ajouter un groupe d’images à plusieurs colonnes, copiez la ligne contenant le Groupe d’images courant.
Image Pack # 2
Pour commencer, créez une nouvelle section générale qui se comporte comme la moitié d’un quart de colonne.
Z Index: 1
NTO: remplissage: 20% restant
Ajouter une image centrale à la ligne, ajouter un formulaire d’image.
L’image est ensuite téléchargée dans le module image. Nous utilisons la même capture d’écran de 880 x 1200 Pi
Xel que nous utilisons pour concevoir le kit de mise en page de l’entraîneur de fitness numéroté. Dans l’onglet conception, mettre à jour les options de taille comme suit: largeur: 30% alignement du module: Centre L’image est ensuite fournie avec une boîte d’ombre mince: ombre de cadre: voir la position verticale de l’ombre de cadre de capture d’écran: – 12px force floue boîte d’ombre: 28 Px couleur d’ombre: rgba (0,0,0,0,11) Ensuite, supprimez la limite inférieure par défaut en la réglant à 0px. Marge: 0px en bas Pour s’assurer que l’image reste au – dessus de l’autre image lorsqu’elle se chevauche, ajuster l’index Z. index Z: 2 Ajouter une colonne de perspective avant d’ajouter le reste de l’image au paquet d’images, nous devons ajouter un CSS personnalisé à cette colonne pour ajouter une perspective à l’image lorsque vous la tournez avec l’option de conversion. Cela crée un effet 3D réaliste. Maintenant que nous avons la perspective, nous pouvons commencer à ajouter d’autres images. Pour créer une image au Centre à gauche, copiez l’image au Centre. Mettre à jour l’étiquette de l’image dans la boîte de calques au besoin, puis utiliser la nouvelle mise à jour de l’image pour copier le formulaire d’image. Ouvrez les paramètres de l’image et mettez à jour la position absolue et l’index Z comme suit: position: index Z en bas à gauche: 1 Ajoutez ensuite les options de transformation suivantes pour positionner et faire tourner l’image. Translation X – Axis: 75% Translation X – axis steering wheel: 30 Degrees Ajoutez l’image de gauche pour créer l’image de gauche et copiez l’image du Milieu gauche que vous venez de créer. Ouvrir les paramètres de la nouvelle image et mettre à jour la largeur: largeur: 20% Puis Ajustez les options de transformation comme suit: Transform translate x axis: 0px Ensuite, réglez l’index Z de sorte que l’image reste derrière le centre gauche de l’image. Index Z
: 0 Ensuite, nous ajouterons une image au milieu droit du paquet image. Pour créer une image, ouvrez la fenêtre contextuelle du calque. Ensuite, copiez l’image au Centre à gauche, faites glisser l’image copiée sous l’image à gauche et Marquez – la en conséquence (par exemple, « image médiane droite »). Allumez les paramètres de l’image centrale droite et changez la position de la position absolue comme suit: position: coin inférieur droit Ensuite, réglez les options de transformation comme suit: translate X – Axis: – 75% translate X – axis Wheel: – 30 degrés Pour créer l’image de droite (dernière), nous pouvons copier l’image de gauche. Ensuite, faites glisser l’image copiée sous l’image du milieu vers la droite et Marquez – la comme image de droite. Allumez les paramètres d’image corrects et mettez à jour la position absolue comme suit: position: coin inférieur droit Ensuite, réglez la rotation de la transformation. Changement de roue X: – 30 degrés Vérifiez les résultats actuels. Il s’agit du même paquet d’images ajouté à plus d’une colonne. Une fois que nous avons compris comment fonctionne l’option de position absolue de Divi, nous pouvons l’utiliser pour créer des projets fantastiques de paquets d’images. La meilleure chose à propos de ces paquets d’images est qu’ils existent dans une colonne, donc ils ont l’air bien sur plusieurs colonnes et peuvent être parfaitement redimensionnés même sur les appareils mobiles. J’espère que cela vous donnera de l’inspiration pour créer un excellent affichage d’images pour votre prochain projet. J’ai hâte d’entendre vos commentaires. Bonjour!
Xel que nous utilisons pour concevoir le kit de mise en page de l’entraîneur de fitness numéroté.
: 0