Créez une section de contact flottante avec les effets de mouvement Divi Scroll

Chaque site Web a besoin d'une section de contact, mais cela ne signifie pas que vous devez opter pour un design standard. Avec les effets de défilement de Divi, vous pouvez créer une section de contact flottante qui se démarquera. Améliorez votre interaction avec les utilisateurs avec une disposition de section de contact à défilement vertical qui invitera les visiteurs à interagir avec votre formulaire de contact. Dans cet article, nous allons vous montrer comment créer une section de contact flottante pleine largeur que vous pouvez ajouter à n'importe quelle page. Vous pouvez même l'ajouter en haut d'un pied de page à l'échelle du site avec Divi Theme Builder.

Ci-dessous, vous trouverez un dossier téléchargeable gratuitement avec la mise en page JSON à télécharger dans votre propre bibliothèque Divi. Nous avons également inclus un modèle PSD pour vous aider à recréer l'arrière-plan de la carte, ainsi qu'un SVG de l'épingle de la carte afin que vous puissiez le personnaliser avec vos propres couleurs.

Allons-y !

Aperçu

Avant de commencer à créer la mise en page du formulaire de contact, examinez le résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez la section de contact flottant GRATUITEMENT

Pour mettre la main sur la mise en page de la section de contact flottante gratuite, vous devrez d'abord la 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 !

1. Créer un arrière-plan de carte pour la section de contact flottant

Ouvrez Google Maps

La première étape de ce didacticiel consiste à créer l'arrière-plan de la carte en noir et blanc. Pour créer le vôtre, suivez les étapes ci-dessous :

• Tout d'abord, ouvrez Google Maps et recherchez votre adresse.
• Lorsqu'il se charge, effectuez un zoom arrière afin de voir une grande partie de la ville ou des rues autour de votre adresse.

• Ensuite, positionnez la carte de manière à ce que votre emplacement se trouve dans le quadrant supérieur droit de la carte.
• Ensuite, retirez la goupille de localisation.
• Enfin, capturez la carte en évitant les onglets dans les coins.

Personnaliser l'épingle

Dans les fichiers téléchargeables ci-dessus, nous avons inclus un fichier SVG de la broche que nous avons utilisée dans la conception. Vous pouvez l'utiliser et changer les couleurs avec votre éditeur de graphiques vectoriels. Nous avons également inclus un PNG transparent si vous souhaitez modifier la couleur dans Photoshop.

Suivez ces étapes pour la broche SVG :

• Tout d'abord, téléchargez les fichiers gratuits au début de ce tutoriel et décompressez le dossier.
• Deuxièmement, ouvrez le graphique de la broche SVG avec Illustrator, Inkscape ou votre éditeur de vecteurs préféré.
• Troisièmement, changez la couleur pour qu'elle corresponde à votre marque ou à votre site Web.
• Enfin, enregistrez au format PNG transparent.

Modifier sur Photoshop

Il est maintenant temps de tout assembler. Tout d'abord, ouvrez la carte dans votre éditeur graphique préféré pour désaturer la couleur. Deuxièmement, ajoutez la broche.

Si vous avez Photoshop, vous pouvez utiliser le fichier PSD que nous avons inclus et simplement ajouter votre capture d'écran de carte à l'objet intelligent dans la deuxième couche.

Pour utiliser l'objet intelligent, procédez comme suit

• Ouvrez le fichier PSD.
• Double-cliquez sur le calque de couleur orange. Une nouvelle fenêtre s'ouvrira.
• Remplacez notre carte par la vôtre.
• N'oubliez pas de cliquer sur enregistrer.
• Revenez à la fenêtre d'édition principale et cliquez sur Enregistrer là aussi.
• Exporter pour le Web au format .jpg.

Si vous n'avez pas Photoshop, procédez comme suit :

• Tout d'abord, créez un nouveau projet à 1920 px x 700 px.
• Deuxièmement, placez la capture d'écran de la carte sur le canevas. Assurez-vous de garder votre position dans le quadrant supérieur droit, un peu plus haut que le centre.
• Troisièmement, en utilisant des ajustements d'image, transformez l'image en noir et blanc.
• Ajoutez également un peu de contraste.
  1. Luminosité : -25
  2. Contraste : -50
• Ensuite, cliquez sur le calque de l'image et ajoutez de la transparence à environ 55%.
• Si vous créez cette conception sur une page Web dont l'arrière-plan n'est pas blanc, ajoutez un calque blanc sous l'image pour conserver la couleur de base blanche, quelle que soit la couleur d'arrière-plan du site Web.
• Continuez en plaçant l'épingle sur votre emplacement. Taillez-le à environ 90px de haut. Laissez-le sur la couche supérieure.
• Enfin, téléchargez au format .jpg.

2. Créer une structure d'élément

Ajouter une nouvelle section

Fond

Il est maintenant temps de commencer à construire la section contact flottant avec le Divi Builder ! La première chose que nous ferons est d'ouvrir une page nouvelle ou existante et d'ajouter une nouvelle section.

Dans l'onglet Contenu, ajoutez l'arrière-plan de la carte que vous avez créé dans Photoshop.

• Image d'arrière-plan : votre carte modifiée

Espacement

Ensuite, personnalisez les paramètres d'espacement de la section dans l'onglet Conception.

• Marge supérieure et inférieure : 50vh
• Rembourrage inférieur : 0vw

Visibilité

Ensuite, ajustez les débordements pour qu'ils soient visibles.

• Débordement horizontal et vertical : Visible

Position

Enfin, définissez l'index Z de la section sur 10.

• Indice Z : 10

Ajouter une nouvelle ligne

Structure des colonnes

Il est maintenant temps d'ajouter quelques éléments. Tout d'abord, ajoutez une ligne avec 2 colonnes.

Dimensionnement

Ouvrez les paramètres de ligne et ajustez la taille comme suit.

• Largeur
  • Ordinateur de bureau : 90 %
  • Tablette et téléphone : 80 %
• Largeur maximale : 90 %

Visibilité

Cliquez sur l'onglet avancé, et ajustez ensuite les débordements.

• Débordement horizontal et vertical : Visible

Position

Complétez les paramètres de ligne en modifiant les paramètres de position.

• Position : Relatif
• Origine du décalage : en haut à gauche
• Décalage vertical
  • Ordinateur de bureau : -8vw

Paramètres de la colonne 1

Fond

Avant d'ajouter des modules, nous devrons styliser les colonnes individuelles. Ajoutez une couleur d'arrière-plan à la colonne 1.

• Couleur unie : #25274d

Espacement

Ajustez ensuite les paramètres d'espacement.

• Rembourrage supérieur et inférieur
  • Ordinateur de bureau et tablette : 7vw
• Rembourrage gauche et droit
  • Ordinateur de bureau : 3vw
  • Tablette et téléphone : 6vw

Frontière

Ensuite, ajoutez des coins arrondis aux paramètres de bordure.

• Coins arrondis : 10px aux quatre coins

Effets de défilement

Enfin, utilisez un mouvement vertical dans les paramètres des effets de défilement. Cela nous aidera à créer un effet flottant.

• Effets de transformation de défilement : mouvement vertical
• Définir le mouvement vertical / Bureau
  • Décalage de départ : 4
  • Décalage moyen : 0 (à 50 %)
  • Décalage de fin : -4
• Définir le mouvement vertical / Tablette et téléphone
  • Décalage de départ : 4
  • Mid Offset : 0 (à 40 % et 60 %)
  • Décalage de fin : -3
• Déclencheur d'effet de mouvement : milieu de l'élément

Paramètres de la colonne 2

Position

Passons maintenant aux paramètres de la deuxième colonne. Ajustez les paramètres de position en conséquence.

• Position : Relatif
• Origine du décalage : en haut à gauche
• Décalage vertical
  • Ordinateur de bureau : 25 vw

Effets de défilement

Nous ajoutons également un mouvement vertical à cette colonne.

• Effets de transformation de défilement : mouvement vertical
• Définir le mouvement vertical / Bureau
  • Décalage de départ : 2
  • Décalage moyen : 0 (à 50 %)
  • Décalage de fin : -2
• Définir le mouvement vertical / Tablette et téléphone
  • Décalage de départ : 0
  • Décalage moyen : 0 (à 50 %)
  • Décalage de fin : -2
• Déclencheur d'effet de mouvement : haut de l'élément

Ajouter un module de texte à la colonne 1

Teneur

Il est temps d'ajouter des modules, en commençant par un module de texte dans la colonne 1. Ajoutez du contenu H2 de votre choix.

Texte d'en-tête

Passez à l'onglet Conception et stylisez le texte H2 comme suit.

• Niveau de titre : H2
• Police : Palanquin Dark
• Poids de la police : gras
• Style de police : TT
• Couleur : Jaune #ffd868
• Taille
  • Ordinateur de bureau : 5vw
  • Tablette : 10vw
  • Téléphone : 12vw
• Espacement des lettres : 4px

Ajouter le module de formulaire de contact à la colonne 1

Teneur

Sous le module de texte, ajoutez un formulaire de contact. Voici les champs que nous utilisons :

• Nom
• E-mail
• Sujet
• Un message

Protection contre les spams

Avant de styliser le module de formulaire de contact. activez la protection anti-spam et connectez votre compte ReCaptcha.

• Utiliser un service de protection anti-spam : Oui
• Fournisseur de services : ReCaptcha
• Sélectionnez un compte

Des champs

Passez à l'onglet Conception et stylisez les champs comme suit.

• Couleur de fond : Bleu foncé #25274d
• Couleur du texte : gris pâle #d1d1d1
• Couleur d'arrière-plan de la mise au point : bleu foncé #25274d
• Couleur du texte de mise au point : gris pâle #d1d1d1
• Police : Palanquin
• Style: TT
• Taille du texte
  • Ordinateur de bureau : 0.9vw
  • Tablette : 2vw
  • Téléphone : 3vw
• Espacement des lettres : 1px

Bouton

Ensuite, stylisez le bouton.

• Styles personnalisés : Oui
• Taille du texte : 20 pixels
• Couleur du texte : Bleu foncé #25274d
• Couleur de fond : Jaune #ffd868
• Rayon de bordure : 7px
• Couleur de l'icône : Bleu foncé #25274d
• Marge supérieure : 5px

Dimensionnement

Nous modifions ensuite les paramètres de dimensionnement.

• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Nous ajouterons également un rembourrage supérieur.

• Rembourrage supérieur : 4vw

Frontière

Complétez les paramètres du module en personnalisant les paramètres de bordure.

• Entrées coins arrondis : 6px aux quatre coins
• Styles de bordure d'entrée : les quatre côtés
• Largeur de la bordure des entrées : 2px
• Couleur de la bordure des entrées : jaune #ffd868

Ajouter le module de suivi des médias sociaux à la colonne 2

Teneur

Passez à la colonne 2 et ajoutez un module de médias sociaux. Utilisez tous les réseaux de médias sociaux dont vous avez besoin.

• Facebook
• Twitter
• Linkedin

Relier

Avant de styliser, ajoutez des liens vers les réseaux correspondants.

Arrière-plan de l'article

Maintenant, ouvrez le premier réseau social et changez la couleur d'arrière-plan.

• Couleur: bleu foncé # 25274d

Icône d'élément

Dans l'onglet de conception du même élément, modifiez les paramètres de l'icône comme suit.

• Couleur : Jaune #ffd868
• Taille de la police de l'icône
  • Ordinateur de bureau et tablette : 31 px
  • Téléphone : 26px

Espacement des éléments

Ensuite, ajoutez une petite marge pour séparer les icônes les unes des autres.

• Marge droite : 1vw

Copier et coller des styles d'élément

Pour styliser les réseaux sociaux restants, revenez à la fenêtre de contenu principale et copiez les styles d'élément de la première icône. Ensuite, collez les styles d'élément sur les réseaux sociaux restants.

Alignement

Passez à l'onglet de conception principal et assurez-vous que le module est aligné sur la gauche.

• Alignement du module : à gauche

Dimensionnement

Ensuite, ajustez le dimensionnement du module.

• Largeur : 100 %

Espacement

Effacez également tous les rembourrages par défaut.

• Rembourrage en haut, en bas, à gauche et à droite : 0vw

Frontière

Enfin, ajoutez des coins arrondis dans les paramètres de bordure. Cela ajustera les bordures de toutes les icônes à la fois.

• Coins arrondis
  • En haut à gauche et à droite : 7px
  • En bas à gauche et à droite : 0px

Ajouter un module de texte à la colonne 2

Teneur

Sous le module de médias sociaux, ajoutez un autre module de texte. Ajoutez du contenu de votre choix. Nous avons ajouté deux adresses, un numéro de téléphone et un e-mail. Utilisez des caractères gras sur le titre de chaque élément en majuscules.

• SIÈGE SOCIAL : 1587 Sukhumvit Soi 21, Bangkok, Thaïlande.
• LIEU DE DÉTAIL : Emporium Mall, 2e étage
• TÉLÉPHONE : (321) 564 2398
• EMAIL : [email protégé]

Fond

Modifiez la couleur de fond du module.

• Couleur : bleu foncé #25274d

Texte

Passez à l'onglet Conception et stylisez le texte.

• Police : Palanquin
• Couleur : Jaune #ffd868
• Taille : 18px

Espacement

Ajoutez également des valeurs d'espacement personnalisées.

• Marge supérieure
  • Bureau : -60px
  • Tablette et téléphone : -50px
• Rembourrage en haut, en bas, à gauche et à droite
  • Bureau: 3vw
  • Tablette : 6vw
  • Téléphone : 8vw

Frontière

Et complétez le module en ajoutant des coins arrondis dans les paramètres de bordure. C'est ça!

• Coins arrondis : 10px en haut à droite, en bas à gauche et en bas à droite.

Aperçu

Maintenant que nous avons fini de recréer la section de contact flottant, jetez un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Vous avez terminé de recréer la disposition de la section de contact flottante !

L'utilisation des nouveaux effets de défilement Divi permet de transformer n'importe quelle mise en page standard en un superbe design. En créant votre propre arrière-plan de carte, vous avez plus de contrôle sur l'apparence de la conception finale. Si vous avez des questions ou des suggestions, laissez un commentaire dans la section commentaires ci-dessous!