Comment styliser et positionner des images dans des lieux abstraits dans Divi

Les images sont un aspect clé de la conception Web. Et la conception Web moderne semble exiger des moyens nouveaux et abstraits d'afficher des images sur votre site Web. Les options de transformation de Divi facilitent le style et le positionnement des images sur votre page à peu près partout où vous le souhaitez. Cela ouvre la porte à la création de mises en page uniques qui feront passer votre site Web au niveau supérieur.

Dans ce didacticiel, je vais vous montrer plusieurs façons de styliser et de positionner des images dans des endroits abstraits de votre site Web. Cela vous permettra de créer d'innombrables variations de conception pour des images que vous n'auriez peut-être pensé que possible dans un éditeur de photos comme Photoshop ou Sketch.

Commençons!

Aperçu

Voici un aperçu des conceptions que nous allons construire dans ce tutoriel.

Téléchargez GRATUITEMENT les exemples de conception de ce didacticiel

Pour mettre la main sur ces exemples de designs, vous devrez d'abord les télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Passons maintenant au tutoriel, voulez-vous ?

Mise en route

Pour commencer, assurez-vous que le thème Divi est installé et actif. Créez ensuite une nouvelle page et déployez le Divi Builder sur le front-end. Choisissez l'option « Créer à partir de zéro ».

Vous êtes maintenant prêt à concevoir !

Positionnement des images partiellement en dehors de la fenêtre (à droite ou à gauche)

Dans ce premier exemple, je vais vous montrer comment positionner des images partiellement en dehors de la fenêtre. C'est un bon moyen d'ajouter plus d'un affichage abstrait pour vos images qui fonctionnera un peu comme une image d'arrière-plan personnalisée pour votre contenu. Ensuite, vous pouvez styliser l'image pour des designs encore plus uniques.

Voici comment procéder.

Créer et styliser le module de texte

Nous allons d'abord créer un module de texte qui servira de contenu principal pour notre section.

Si vous ne l'avez pas déjà fait, créez une section régulière avec une ligne à une colonne. Ajoutez ensuite le module de texte à la ligne.

Mettez à jour le contenu pour inclure les éléments suivants :

<h2>About Us</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Mettez ensuite à jour les paramètres de conception comme suit :

Police du texte : Raleway
Police de la rubrique 2 : Raleway
en-tête 2 Poids de la police : Gras
Titre 2 Taille du texte : 44 px (ordinateur de bureau), 24 px (téléphone)
Largeur : 680 px (ordinateur de bureau), 60 % (tablette), 80 % (téléphone)
Rembourrage personnalisé : 10 % en haut, 10 % en bas, 10 % à gauche, 5 % à droite

Ajouter l'image #1

Nous sommes maintenant prêts à ajouter la première image. Allez-y et ajoutez un module d'image directement au-dessus du module de texte.

Ensuite, téléchargez votre image dans le module d'image. Assurez-vous que l'image est suffisamment grande pour qu'elle ne perde pas de qualité lorsque nous agrandissons l'image à l'aide de la propriété transform. J'utilise une image de 400 par 580 pixels.

Ensuite, réduisez la largeur du module d'image et alignez-le sur la gauche comme suit :

Largeur : 5%
Alignement du module : à gauche

Réduire ainsi le module image nous permet dans un premier temps de réduire l'espace négatif de la mise en page. De cette façon, nous n'avons pas à ajuster l'espacement en utilisant des marges négatives.

Nous pouvons maintenant agrandir l'image en utilisant les options de transformation comme suit :

Axe X de l'échelle de transformation : 416 %
Axe Y de l'échelle de transformation : 416 %

Ensuite, nous pouvons positionner l'image à l'aide de la translation de transformation comme suit :

Transformer traduire l'axe X : -36%
Transformer l'axe Y de la translation : 41 %

Enfin, vous pouvez faire pivoter l'image à l'aide de transform rotate :

Transformer Rotation Axe Z: 11deg

Nous sommes maintenant prêts à ajouter la deuxième image. Allez-y et ajoutez un module d'image directement sous le module de texte.

Ensuite, téléchargez une nouvelle image dans le module d'image.

Ensuite, réduisez la largeur du module d'image et alignez-le sur la gauche comme suit :

Largeur : 10 %
Alignement du module : à gauche

La largeur n'a pas besoin d'être exactement de 10 %. Tout ce que vous voulez faire est de réduire suffisamment le module pour qu'il ne prenne pas trop d'espace vertical sur la mise en page.

Mettez ensuite à jour les options de transformation comme suit :

Axe X de l'échelle de transformation : 464 %
Axe Y de l'échelle de transformation : 464 %

Transformer traduire l'axe X : 7 %
Transformer traduire l'axe Y : -80%

Transformer Rotation Axe Z : -10 deg

Ajoutez ensuite une ombre de boîte pour un élément de conception supplémentaire.

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : -20px
Position verticale de l'ombre de la boîte : -7px

S'assurer que le module de texte reste au top

Nous voulons nous assurer que le module de texte reste au-dessus des images chaque fois qu'elles commencent à se chevaucher sur mobile. Cela garantit que les images continuent de servir d'images d'arrière-plan dans la conception.

Pour ce faire, ouvrez le module de texte et ajoutez le CSS personnalisé suivant à l'élément principal :

Élément principal CSS :

position: relative;

Réglez ensuite le Z-index sur 1.

Masquer le débordement de section

Étant donné que nous aurons des images qui s'étendront à l'extérieur de la section de la page, la largeur de la fenêtre du navigateur augmentera pour s'adapter à l'espace supplémentaire. Cela engagera la barre de défilement horizontale en bas du navigateur. Pour désactiver cela, vous devrez ajouter un extrait de CSS à la section.

Ouvrez les paramètres de la section et ajoutez le CSS personnalisé suivant à l'élément principal :

overflow: hidden;

Maintenant, regardez le résultat final.

Création d'un arrière-plan de collage d'images abstraites pour votre en-tête

Pour ce prochain design, je vais vous montrer comment construire un collage abstrait d'images qui servira d'arrière-plan pour un en-tête. Pour ce faire, nous utiliserons la propriété display flex pour créer une rangée d'images que nous pouvons redimensionner et déplacer de manière créative.

Voici comment procéder.

Conception du module de texte d'en-tête

Tout d'abord, créez une nouvelle section régulière avec une ligne à une colonne. Ajoutez ensuite un module de texte à la ligne et mettez à jour le contenu suivant :

<h1>Interior Design</h1>
<p>This is some content</p>

Ensuite, mettez à jour la conception comme suit :

Couleur d'arrière-plan : rgba(0,0,0,0.07)
Texte Couleur du texte : #ffffff
Orientation du texte : Centre
Police de titre : Raleway
Poids de la police d'en-tête : gras
Alignement du texte de l'en-tête : à droite
Couleur du texte du titre : #ffffff
Taille du texte de l'en-tête : 44px (ordinateur de bureau), 34px (tablette), 24px (téléphone)
Largeur : 500 px (ordinateur de bureau), 60 % (tablette), 80 % (téléphone)
Alignement du module : Centre
Rembourrage personnalisé : 5vw en haut, 5vw en bas, 1vw à droite

Paramètres de section

Avant d'ajouter nos images et de créer l'arrière-plan du collage, personnalisons notre section. Cela fournira notre toile pour compléter le reste de la conception.

Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

Couleur de fond : #4c606d
Rembourrage personnalisé (bureau): 0px en haut, 0px en bas
Rembourrage personnalisé (tablette): 20px bas
Rembourrage personnalisé (téléphone): 40px en bas

Ensuite, ajoutez une ombre de boîte intérieure au bas de la section avec une couleur qui correspond à l'arrière-plan de la section suivante sur la page (dans ce cas, elle sera blanche). Cela nous permettra de créer l'effet de nos images chevauchant le bas de l'en-tête dans la section suivante (vous verrez ce que je veux dire plus tard).

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 0px
Position verticale de l'ombre de la boîte : -80px
Couleur de l'ombre : #ffffff

Et puisque nous déplacerons les images en dehors de la fenêtre de section pour notre collage, nous devrons ajouter le CSS suivant à l'élément principal.

overflow: hidden;

Paramètres de la ligne 1

Nous devons maintenant ajouter un peu de remplissage à la ligne contenant notre module de texte. Nous devons également ajouter un z-index pour garder la section au-dessus des images que nous ajouterons à notre section. Par défaut, chaque section a une valeur d'index z de 9. Il nous suffit donc d'ajouter un index z de 10 à la ligne que nous voulons conserver en haut.

Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Rembourrage personnalisé: haut 10vw
Indice Z : 10

Création du collage d'images abstraites

À ce stade, la section est prête à commencer à ajouter nos images.

Pour créer le collage d'images abstraites, nous allons ajouter 5 images à une ligne de colonne, puis utiliser « display : flex » pour aligner toutes ces images horizontalement sur la page. Cela est nécessaire pour maintenir les images en place (horizontalement) sur toutes les tailles de navigateur. Si nous devions utiliser une disposition traditionnelle à 5 colonnes, les images se diviseraient en différentes dispositions en colonnes sur différents appareils et briseraient la conception.

Après cela, nous pourrons styliser et positionner nos images une par une avec des options de transformation.

Ajout de la rangée d'images

Allez-y et créez une nouvelle ligne à une colonne directement sous la ligne contenant le module de texte.

Ensuite, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Largeur personnalisée : 50 %
Largeur de gouttière : 1

Et pour aligner horizontalement tous les modules de cette ligne, ajoutez le CSS suivant à l'élément principal de la colonne :

display: flex;

Désormais, lorsque vous ajoutez des modules d'image à la ligne, ils s'alignent horizontalement.

Regardez ce qui se passe lorsque je duplique un module d'image dans la ligne avec display:flex add à la colonne.

Allez-y et ajoutez 5 images à la ligne en vous assurant qu'elles sont suffisamment grandes pour s'adapter à l'augmentation de taille lors de la mise à l'échelle de l'image pour le collage. J'utilise des images présentées dans notre pack de mise en page de rénovation domiciliaire qui mesurent toutes environ 800 pixels de largeur et varient en hauteur. Les images avec des dimensions différentes ont tendance à faire un collage abstrait plus beau.

Positionnement des images avec Transform Translate

Il est temps de commencer à positionner nos images pour créer notre collage.

Image #1

Ouvrez les paramètres du premier module d'image (à l'extrême gauche) et mettez à jour les options de transformation comme suit :

Axe X de l'échelle de transformation : 266 %
Axe Y de l'échelle de transformation : 266 %

Transformer la traduction : axe X : 68 %
Transformer la traduction : axe Y : -54%

Image #2

Ouvrez les paramètres du deuxième module d'image et mettez à jour les options de transformation comme suit :

Axe X de l'échelle de transformation : 184 %
Axe Y de l'échelle de transformation : 184 %

Transformer la traduction : axe X : -36%
Transformer la traduction : axe Y : 66 %

Image #3

Ouvrez les paramètres du troisième module d'image et mettez à jour les options de transformation comme suit :

Axe X de l'échelle de transformation : 206 %
Axe Y de l'échelle de transformation : 206 %

Transformer la traduction : Axe X : 51 %
Transformer la traduction : axe Y : 27 %

Image #4

Ouvrez les paramètres du quatrième module d'image et mettez à jour les options de transformation comme suit :

Axe X de l'échelle de transformation : 180 %
Axe Y de l'échelle de transformation : 180 %

Transformer la traduction : axe X : 20 %
Transformer la traduction : axe Y : 42 %

Image #5

Ouvrez les paramètres du cinquième module d'image et mettez à jour les options de transformation comme suit :

Axe X de l'échelle de transformation : 290 %
Axe Y de l'échelle de transformation : 290 %

Traduire Transformer : Axe X : -50%
Transformer la traduction : axe Y : 72 %

Ajout d'une ombre de boîte aux images

Pour créer un élément de design supplémentaire, nous pouvons ajouter une ombre de boîte à nos images. Pour ce faire, activez le mode grille et utilisez la fonction multisélection pour sélectionner tous les modules d'image. Ouvrez ensuite les paramètres de l'un des modules d'image pour déployer le modal des paramètres de l'élément.

Ensuite, mettez à jour les éléments suivants :

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : -40 px
Position verticale de l'ombre de la boîte : 40 px
Couleur de l'ombre : rgba(255,255,255,0.13)

Résultat final

Voici le résultat final de la conception.

Bureau

Tablette

Téléphone

Dernières pensées

Ces exemples de conceptions devraient vous fournir une inspiration sur la façon de styliser et de positionner les images sur votre site Web d'une manière que vous n'auriez peut-être jamais imaginée possible en dehors d'un logiciel de retouche photo. Une fois que vous avez appris à personnaliser correctement votre mise en page, les options de transformation de Divi peuvent positionner les images dans des endroits uniques et abstraits. Espérons que cela vous sera utile pour votre prochain projet.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!