Créer une section Polaroid Hero avec les options de transformation de Divi

Les sections de héros créatifs rendent les sites Web mémorables et spéciaux. Cette conception de section de héros polaroïd évoque un sentiment d'envie de voyager vintage. En utilisant les options de transformation de colonne, les polaroïds peuvent être disposés comme vous le souhaitez, comme s'ils étaient répartis sur une table.

Vous pouvez recréer cette conception de section de héros polaroid avec vos propres images carrées. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Bureau

Mobile

Téléchargez GRATUITEMENT la conception de la section Polaroid Hero

Pour mettre la main sur le design gratuit de la section héros polaroid, vous devrez d'abord le 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 !

Abonnez-vous à notre chaîne Youtube

Commençons à recréer

Ajouter une nouvelle section

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez.

Diviseur inférieur

Ajoutez un séparateur de fond vert menthe.

• Placement du diviseur: Bas
• Style de diviseur : #12
• Couleur du séparateur : vert menthe #d2f2d0
• Hauteur du diviseur : 23vw

Espacement

Ajustez l'espacement de la section.

• Marge supérieure : 7vw
• Marge inférieure : 0px
• Rembourrage haut et bas : 0px

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à votre section. Choisissez la structure de colonnes suivante :

Dimensionnement

Maintenant, ajustez la taille de la ligne.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur: 90vw
• Largeur maximale : 100 %

Espacement

Ensuite, ajustez le rembourrage supérieur et inférieur dans les paramètres d'espacement.

• Rembourrage haut et bas : 0px

Affichage

Ajoutez une ligne de code CSS à l'élément principal de la ligne pour conserver les colonnes les unes à côté des autres sur des écrans plus petits.

• CSS personnalisé – Élément principal : affichage : flex ;

display: flex;

Ajouter un module d'image à la colonne 1

Télécharger une image carrée

Ajoutez un module d'image à la colonne 1 et téléchargez une image carrée.

Alignement

Maintenant, ajustez l'alignement du module.

• Alignement du module : Centre

Dimensionnement

Ensuite, faites le module pleine largeur.

• Forcer la pleine largeur : Oui

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Ajoutez un module de texte et insérez du contenu. Nous utiliserons le mot « polaroid ».

Texte

Stylisez la police du texte.

• Police de texte : Advent Pro
• Alignement du texte : Centre
• Couleur du texte : Gris très foncé #474747
• Taille du texte:
  • Ordinateur de bureau : 1vw
  • Tablette + Téléphone : 2vw
• Espacement des lettres du texte : 0.1vw
• Hauteur de la ligne de texte : 1,8 em

Dimensionnement

Utilisez « 100 % » pour la largeur dans les paramètres de dimensionnement.

• Largeur : 100 %

Espacement

Ajustez maintenant l'espacement.

• Marge supérieure : 1vw

Cloner les modules deux fois et placer les doublons dans les colonnes restantes

Changer l'image et copier les doublons

Modifiez les images dans chaque module d'image en double. Si votre conception l'exige, modifiez également le contenu du texte.

Paramètres de la colonne 1

Fond

Continuez en ouvrant les paramètres de la colonne 1 de la ligne. Réglez l'arrière-plan sur blanc pour créer l'effet polaroïd.

• Couleur de fond : Blanc #ffffff

Espacement

Ajoutez un peu de rembourrage inférieur pour créer la bordure inférieure polaroïd plus large.

• Rembourrage inférieur : 2vw

Frontière

Ajoutez une bordure pour terminer le visuel polaroïd.

• Largeur de bordure sur 4 côtés : 1vw
• Largeur de la bordure supérieure : 2vw
• Largeur de bordure droite : 2vw
• Largeur de la bordure inférieure : 1vw
• Largeur de la bordure gauche : 2vw
• Couleur de la bordure : Blanc #ffffff

Boîte ombre

Complétez les paramètres de la colonne 1 en ajoutant une ombre de boîte subtile.

• Ombre de la boîte : 1

Étendre les paramètres de la colonne 1

Utilisez l'option d'extension des styles pour étendre les paramètres de colonne.

• Revenez à la fenêtre des paramètres de la ligne principale et cliquez sur les trois points à droite du premier onglet de la colonne.
• Sélectionnez « étendre les styles d'élément » et sélectionnez « tout au long de cette ligne ».

Colonne 1 Styles de transformation

Ajustez maintenant les paramètres de transformation dans la première colonne.

• Transformer la traduction : axe x -11vw, axe y -6vw
• Transformer la rotation : 341 degrés, 1ère option

Colonne 2 Styles de transformation

Ensuite, ajustez les paramètres de transformation pour la deuxième colonne.

• Transformer la traduction : axe x -22w, axe y 0vw
• Transformer la rotation : 10 degrés, 1ère option

Colonne 3 Styles de transformation

Enfin, ajustez les paramètres de transformation pour la troisième colonne.

• Échelle de transformation : 68 % sur les deux axes
• Transformer traduire : axe x -46w, axe y 12vw
• Transformer la rotation : 31 degrés, 1ère option

Ajouter une nouvelle section

Fond

Ajoutez une nouvelle section et appliquez un fond vert menthe à la section.

• Couleur de fond : vert menthe #d2f2d0

Diviseur inférieur

Donnez à la section un diviseur inférieur.

• Placement du diviseur: Bas
• Style de diviseur : #12
• Couleur du diviseur: Blanc #ffffff
• Hauteur du diviseur : 23vw

Espacement

Supprimez le rembourrage supérieur par défaut.

• Rembourrage supérieur : 0px

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne avec 3 colonnes.

Copier et coller des styles de ligne

En utilisant la vue filaire, copiez et collez les styles de ligne de la première section

• Tout d'abord, cliquez sur les trois points à droite du menu de ligne à l'intérieur de la première section. Sélectionnez « copier les styles de ligne ».
• Ensuite, cliquez sur les trois points à droite du menu de ligne dans la deuxième section. Sélectionnez « coller les styles de ligne ».

Copier et coller les paramètres de colonne

Maintenant, copiez les paramètres de colonne dans la première ligne et collez-les sur les colonnes 1 et 2 de la nouvelle ligne.

• Tout d'abord, ouvrez les paramètres de ligne dans la première ligne.
• Deuxièmement, cliquez sur les trois points sur le côté droit du premier onglet de colonne et sélectionnez « copier les styles d'élément ».
• Ensuite, faites défiler jusqu'à la nouvelle ligne et ouvrez l'onglet Paramètres.
• Enfin, cliquez sur les trois points à droite de la première colonne et sélectionnez « coller les styles d'élément ».

Colonne 1 Styles de transformation

Maintenant, ajustez les styles de transformation dans la colonne 1.

• Échelle de transformation : 75 % sur les deux axes
• Transformer la traduction : axe x -8w, axe y -14vw
• Transformer la rotation : 35 deg 1ère option

Colonne 2 Styles de transformation

Ensuite, modifiez les styles de transformation dans la colonne 2.

• Transformer traduire : axe x -17w, axe y 2vw
• Transformer la rotation : 346 degrés 1ère option

Ajouter des modules d'images

Dupliquer et faire glisser des modules d'images

Maintenant, revenez à la vue filaire pour dupliquer et faire glisser deux modules d'image.

• Tout d'abord, dupliquez deux fois le premier module d'image de la première section.
• Ensuite, faites-les glisser vers les première et deuxième colonnes de la deuxième section.
• Changez l'image dans chaque module pour une nouvelle image carrée.

Ajouter des modules de texte

Dupliquer et faire glisser des modules de texte

Après les images, faites de même avec les modules de texte. Dupliquez à partir de la première section et faites glisser dans la deuxième section.

• Dans la vue filaire, dupliquez deux fois le module de texte de la première colonne de la première section.
• Maintenant, faites glisser les nouveaux modules de texte vers les colonnes 1 et 2 de la deuxième section.
• Si vous souhaitez modifier le contenu, faites-le maintenant.

Ajouter un module de texte à la colonne 3

Ajouter du contenu

Cliquez sur le signe plus dans la troisième colonne et ajoutez un module de texte. Insérez du contenu H2 et paragraphe.

Texte

Stylisez le texte comme suit.

• Police de texte : Advent Pro
• Alignement du texte : Centre
• Couleur du texte : Gris foncé #848484
• Taille du texte:
  • Ordinateur de bureau : 1vw
  • Tablette + Téléphone : 1.9vw
• Espacement des lettres du texte : 0.1vw
• Hauteur de la ligne de texte :
  • Bureau : 1,2 em
  • Tablette + Téléphone : 1.3em

Texte d'en-tête

Maintenant, stylisez le texte H2.

• En-tête : H2
• Police H2 : Adamina
• Poids de la police H2 : gras
• Couleur de la police H2 : gris très foncé #444444
• Taille de la police H2 :
  • Ordinateur de bureau : 2vw
  • Tablette + Téléphone : 3vw
• Espacement des lettres H2 : 4px
• Hauteur de la ligne H2 :
  • Ordinateur de bureau : 1.7vw
  • Tablette + Téléphone : 1.5vw

Dimensionnement

Ensuite, ajustez la taille.

• Largeur:
  • Ordinateur de bureau : 60 %
  • Tablette : 91 %
  • Téléphone : 100 %
• Alignement du module : Centre

Espacement

Enfin, ajustez l'espacement.

• Marge supérieure : -12vw

Ajouter un module de bouton à la colonne 3

Ajouter une copie

Cliquez sur le signe plus sous le texte et ajoutez un module de boutons. Ajoutez une copie au bouton.

Alignement

Modifiez l'alignement des boutons.

• Alignement : Centre

Styles de boutons personnalisés

Stylisez le bouton en conséquence.

• Taille du texte du bouton :
  • Ordinateur de bureau : 1vw
  • Tablette : 2.4vw
  • Téléphone : 2.3vw
• Largeur de la bordure du bouton : 0px
• Couleur du texte du bouton : noir #000000
• Espacement des lettres des boutons : 4px
• Police des boutons : Advent Pro
• Poids de la police du bouton : gras

Espacement

Appliquez une valeur de marge supérieure.

• Marge supérieure : 2vw

Ajouter le module diviseur à la colonne 3

Visibilité

Sous le bouton, ajoutez un séparateur et stylisez le comme suit.

• Visibilité : Oui

Ligne

Donnez au diviseur une couleur vert vif.

• Couleur de la ligne : #55f252

Dimensionnement

Modifiez les paramètres de dimensionnement du diviseur et vous avez terminé !

• Poids du diviseur
  • Bureau : 7px
  • Tablette + Téléphone : 4px
• Largeur:
  • Ordinateur de bureau : 10 %
  • Tablette + Téléphone : 30%
• Alignement du module : Centre

Aperçu

Jetons à nouveau un coup d'œil à la conception finale de la section des héros polaroid sur différentes tailles d'écran.

Bureau

Mobile

C'est un Wrap !

Dans cet article, nous vous avons montré comment recréer une section de héros polaroid à l'aide des options de transformation de Divi. C'est un excellent moyen de présenter plusieurs images dans la section des héros de votre page. Nous espérons que cette conception inspirera vos propres conceptions de section de héros créatifs! Si vous avez des questions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous.